ミッション + 数字会社概要
この「ミッション + 数字会社概要」は、事業理念のコピーを大きく掲げ、その下に創業年・支援企業数・メンバー数といった主要数字を 3 つ並べる会社概要パーツです。見出しは Georgia 系セリフ書体で font-size:46px と大きく、上部に OUR MISSION の英字ラベル、下部は grid-templ…
このパーツの使いどころと実装ポイント
この「ミッション + 数字会社概要」は、事業理念のコピーを大きく掲げ、その下に創業年・支援企業数・メンバー数といった主要数字を 3 つ並べる会社概要パーツです。見出しは Georgia 系セリフ書体で font-size:46px と大きく、上部に OUR MISSION の英字ラベル、下部は grid-template-columns:repeat(3,1fr) の数字 3 列を上罫線で区切って配置。クリーム色背景(#FDF8EF)で温かみのある落ち着いたトーンです。
向いている場面
理念や姿勢を前面に出したいコーポレートサイトの会社概要・アバウトページに向きます。スタートアップ、デザイン・制作会社、士業など、数字だけでなく「何のために事業をしているか」を伝えたいブランドに適します。理念と実績数字をひとセクションで両立できるのが利点です。
カスタマイズと注意点
- 見出しは
<br>で改行位置を制御しています。文言を変えたら、改行が中途半端な位置で切れていないか確認してください。 - 数字は 3 つが収まりよく、増やすと 1 つの存在感が薄れます。指標は事業を象徴するものを選びます。
200+のような概数表現は誠実な範囲で。実数と乖離しないよう注意します。- スマホでは
600px以下で見出しが30pxに縮小します。3 列の数字が窮屈なら縦並びへの調整も検討してください。
よくある質問
数字は 3 つでないとダメですか?
3 つは横 3 列にちょうど収まる構成で見栄えが良いというだけで、変更は可能です。ただし数を増やすと 1 つあたりの大きさと存在感が薄れます。事業を最も象徴する指標を厳選して 3〜4 つに絞るのがおすすめです。
見出しの改行はどう調整しますか?
見出しの改行は br タグで明示的に指定しています。文言を変えたときは、改行位置で言葉が不自然に切れていないか必ず確認してください。スマホでは文字サイズが縮むため、画面幅を変えながら改行の見え方をチェックすると安心です。