アイコン円＋見出し＋説明のカード型1
左の円形アイコン、中央のタイトルと2行程度の補足文、右の円弧ボタンで構成された行アイテム。ホバーで浮き上がり、ゴールドの光彩が広がります。
Veyra Priestess
フルスクリーンのキービジュアルに中央寄せのセリフロゴと神聖幾何学を重ねた、第一印象を決めるヒーローセクション
フルスクリーンのキービジュアルに中央寄せのセリフロゴと神聖幾何学を重ねた、第一印象を決めるヒーローセクション
このブロックは縦4:5の写真を左カラムに、世界観を語る大きめのセリフ見出しと本文を右カラムに配置した構成です。余白を広く取り、視線が自然に画像から文章へ流れるように設計しています。
本来はサービスの理念やストーリーが入る位置で、行間と文字組みのリズムで「静けさ」を演出する役割を担います。モバイルでは縦積みに切り替わり、画像が上、文章が下に並びます。
左に大見出しと導入文、右にアイコン付きの横長カードを縦に積み重ねたメニュー紹介レイアウト。各カードはアイコン・テキスト・ボタンの3分割グリッドです。
番号付きの工程を横一列に並べたステップ解説
各ステップを丸いアイコンと番号で表し、背景の横ラインで手順の連続性を示すフロー型レイアウトです。
PCでは4つを均等配置。視線を左から右へ誘導し、サービスの流れを直感的に理解させる構成です。
各工程の中身をFont Awesomeのアイコンで象徴的に表現。テキスト量を抑え、視覚で伝えます。
タブレットでは2列、スマホでは1列の縦並びへ。横ラインは非表示にして見やすさを保ちます。
大きな数値を円の中に置いた実績の見せ方
質問行をクリックすると回答が下に展開する開閉式の構成です。プラスアイコンが45度回転して状態を示し、開いた項目はゴールドの枠線でハイライトされます。
各項目を半透明パネルで区切り、左端にQ・Aの記号を揃えることで視線を誘導します。情報量の多いコンテンツを省スペースで整理するためのパターンです。
見出しは装飾ラインを添えて中央配置、本文リストは読みやすさを優先して最大幅を制限しています。どの画面幅でも中央に収まり、視線が散らない設計です。
