左右2カラム構成のアバウトセクション。左に人物写真、右にテキストブロックを配置。
写真とテキストを同じ高さのグリッドで並べることで、情報を視覚的に整理。背景にライトグレーを使用し、本文との差別化を図るレイアウトです。
テキストリンク付き矢印アイコンメインビジュアル下部には、白文字のサブコピーを配置。左寄せで余白を十分に取り、高級感のある視覚的バランスを実現しています。
写真とテキストを同じ高さのグリッドで並べることで、情報を視覚的に整理。背景にライトグレーを使用し、本文との差別化を図るレイアウトです。
テキストリンク付き矢印アイコン3カラムカード型レイアウトの1つ目。上部にFont Awesomeアイコン、中央にタイトル、下部に説明文を配置したシンプルな構成。
各カードにはボーダーを適用し、ホバー時にカード全体が浮き上がるトランジションを設定。統一感のあるデザインパターンです。
3つの等幅カードをグリッドで整列。レスポンシブ時は1カラムに切り替わり、スマートフォン表示にも対応します。
Q. FAQセクションの質問行 -- クリックで開閉するアコーディオン形式のデザイン
A. ネイビーのボーダーで囲んだボックス内に、質問と回答をアコーディオン形式で表示。右端にはトグルボタンを配置し、開閉状態を視覚的に示すUIです。
Q. 2つ目のFAQ項目 -- 閉じた状態ではコンパクトに折りたたまれます
A. 回答テキストは質問の下にスライドアニメーションで展開。max-heightトランジションを使用したスムーズなアコーディオン動作を実装しています。
Q. 3つ目のFAQ項目 -- 各項目は細いボーダーで区切られたリスト構成
A. 複数のFAQ項目を積み重ね、1つずつ展開可能にすることで、ユーザーが必要な情報だけを効率的に閲覧できる設計です。