非対称グリッド ヒーロー

解説

非対称グリッドヒーローは、複数の見出し語と円形の装飾を不規則に配置した、アートディレクション寄りのファーストビューです。各要素を position:absolute で個別に座標指定し、整列を意図的に崩しています。3 つの語はそれぞれ塗り・イタリック・-webkit-text-stroke による縁取り文字と表現を変え、視線が画面内を動き回る構成になっています。

使う場面

• デザイン事務所やクリエイターのポートフォリオ
• ブランドのコンセプトページや展示告知
• 定型から外れた印象を残したいキャンペーン LP

文字や円の位置は各要素の top left right で自由に動かせ、配色は color や background で変えられます。position:absolute 多用のため、画面幅が変わるとレイアウトが崩れやすい点に注意が必要です。スマートフォン向けには別途メディアクエリで座標やフォントサイズを調整するか、縦積みのシンプルな構成に切り替えると安全です。装飾円は意味を持たないので、装飾要素として読み上げ対象から外す配慮も有効です。

使用例・適したシーン

• LP のファーストビュー
• サービストップの導入
• コーポレートサイトのトップ