ミッションステートメント
大きなコピーで企業理念やビジョンを打ち出す、シンプルな About セクションです。構造は小さな英字ラベル、大見出しの h2 、補足の p という 3 段だけで、要素を絞ることで言葉そのものに視線を集めています。全体は中央寄せで max-width:680px に収め、上下にゆったりと余白を取っているのが特徴です。
このパーツの使いどころと実装ポイント
大きなコピーで企業理念やビジョンを打ち出す、シンプルな About セクションです。構造は小さな英字ラベル、大見出しの h2、補足の p という 3 段だけで、要素を絞ることで言葉そのものに視線を集めています。全体は中央寄せで max-width:680px に収め、上下にゆったりと余白を取っているのが特徴です。英字ラベルは字間を広げ、本文は行間を広めに設定して、落ち着いた読み心地に仕上げています。
向いている場面
会社紹介ページの冒頭、ブランドサイトの理念パート、サービスの世界観を伝える区切りなどに合います。情報を詰め込まず、一番伝えたいメッセージを一文で言い切りたい場面に向いたパーツです。
カスタマイズの勘所
- 見出しの
brによる改行位置を整えると、一文が宙ぶらりんにならず締まって見えます - 英字ラベルはセクションの役割を示す目印なので、内容に合わせて短い英単語に変えます
- 余白の広さがこのパーツの品の源なので、要素を足しすぎないのがコツです
実装上は、見出しを h2 として正しい階層に置くことが大切です。装飾目的でも見出しタグの順序を飛ばさないようにしてください。文字が大きいので、スマートフォンでは画面幅に応じてサイズを少し下げると、改行が不自然になりにくく読みやすさを保てます。
よくある質問
テキストだけのシンプルな構成で大丈夫ですか？
問題ありません。理念やメッセージを伝えるパートでは、情報を絞り余白を活かすほど言葉が際立ちます。装飾を足すより、一番伝えたい一文を磨くほうが効果的です。
見出しの改行はそのまま使ってよいですか？
スマートフォンでは画面幅が狭く、固定の改行位置だと不自然に折れることがあります。文節の区切りで改行を入れ、必要なら画面幅ごとに調整すると、どの端末でも読みやすく保てます。