このセクションは全幅ダークヒーロー。
視線を集める大見出しが2行で展開する。
サブキャッチコピーが1行で配置され、メインコピーの意味を補強する短文エリア。
SCROLL
サブキャッチコピーが1行で配置され、メインコピーの意味を補強する短文エリア。
ABOUT
このエリアは約4〜5行の本文が入る段落スペース。左の大判写真と右の テキストブロックが視覚的なバランスをとる2カラム設計。セクションラベル・ 見出し・本文の明確なヒエラルキーにより、情報をスムーズに読み進める 構造が形成される。余白は上下左右64pxで上品な間隔を確保している。
WHY CHOOSE US
左カラムのダーク背景は右の明るいコンテンツと強いコントラストを生み出し、 視線を自然に右の情報へ誘導するデザイン手法。
アイコンコンテナは細線ボーダーの丸型。番号は淡いグレーの大きな数字で視覚的リズムを形成する。
アイコン・番号・テキストの3列構成。水平境界線で各項目を明確に分割し視認性を高める。
同一レイアウトの繰り返しが整然とした印象を与え、情報の等価性をデザインで表現している。
SERVICE
アイコン左配置・テキスト右の横並びカード。Font Awesomeアイコンがサービスを直感的に示す。
3列グリッドの各カードは等幅・等高で揃えられ、視覚的な均整美を生み出している。
背景色をボーダーカラーにしギャップを1pxに設定することで細い区切り線を実現している。
ホバー時に薄いグレー背景に変化するマイクロインタラクションで操作性を向上させる。
英語のサービス名はMontserratセミボールドで統一され、ブランドの国際感を演出する。
説明文は12pxのコンパクトサイズ。カードの限られた空間に簡潔な情報を収める設計。
RESULTS
PROCESS
FAQ
アコーディオンの回答エリア：max-heightトランジションでスライドダウンを実現。クリックで+が-に変わり開閉状態を明示。回答テキストは13.5px行間2.0の読みやすい設定。
質問と回答のテキスト階層が明確で、ユーザーが必要な情報のみを選んで展開できるUI設計。境界線はtop/bottomのみで視覚的なノイズを最小化している。
セクション背景は#fafafaの極薄グレーで、隣接する白背景セクションとの微妙な差別化を図る。薄いグレー背景区間はページにリズムと視覚的な区切りをもたらす。
全4件のFAQをコンパクトに配置することでページの縦スクロール量を抑えつつ、主要な疑問に一括対応。+ボタンのfont-awesomeアイコンが開閉を直感的に示す。
CONTACT
左カラムは説明テキストエリア。セクション見出しと2〜3行の案内文を 配置し、右フォームへの自然な視線誘導を形成する。 左右2カラムのグリッド構成でフォームの余白感と可読性を高めている。