代表メッセージ・引用バナー
代表の写真と名前に大きな引用文を添えて、経営メッセージを印象づける中央寄せのバナーセクションです。本文には明朝系の 'Hiragino Mincho ProN',serif を当て、サイズは clamp(20px,3.5vw,28px) で画面幅に追従。
解説
代表の写真と名前に大きな引用文を添えて、経営メッセージを印象づける中央寄せのバナーセクションです。本文には明朝系の 'Hiragino Mincho ProN',serif を当て、サイズは clamp(20px,3.5vw,28px) で画面幅に追従。line-height:1.7 と letter-spacing でゆったり読ませ、語りかけるトーンを作っています。アイコンは stroke="currentColor" のインライン SVG で、CSS のみで成立し JavaScript は使いません。blockquote と cite で引用の意味構造を保っているのもポイントです。
使う場面
- 経営理念・ビジョンページの代表メッセージ
- 採用ページで会社の想いを伝える導入
- お客様の声を 1 件だけ大きく見せるテスティモニアル
写真を入れる場合は sc-qb__photo 内の SVG を img に置き換え、丸枠を保つよう border-radius:50% と object-fit:cover を適用します。引用符の表現や明朝フォントはブランドに合わせて変更でき、ゴシックにすればより現代的になります。引用文は 2〜3 行に収まる長さにすると、視線が一度に捉えられて重みが出ます。
使用例・適したシーン
- コーポレートサイト構築
- サービス LP
- 採用ページ
- 事業紹介資料 Web 版
よくある質問
明朝体ではなくゴシックにできますか。
できます。sc-qb__quoteのfont-familyをsans-serifやNoto Sans JPに変えるだけです。明朝は落ち着いた格調、ゴシックは現代的でフラットな印象になるので、ブランドのトーンに合わせて選んでください。
アイコンを代表者の顔写真に差し替えられますか。
はい。sc-qb__photo内のSVGをimgに置き換え、object-fit:coverとborder-radius:50%で丸くトリミングします。表示崩れと速度のためWebPにし、altに人物名や役職を入れてください。