中小企業のコーポレートサイトでは、見た目の新しさだけでデザインを決めず、「何をしている会社か」「誰に何を伝えるか」「次にどこへ進むか」を先に決めます。余白、大きな写真、動きなどの表現は、その情報を伝えやすくする場合に選ぶと判断しやすくなります。
この記事は、デザイン案を比べる担当者に向けて、よく検討される表現と採用前の確認点を整理します。サイト制作全体の進め方を知りたい方は、会社ホームページ制作の全体像をご覧ください。
見た目を決める前に、会社の何を伝えるか決める
最初に、会社を調べに来た人の用件を一つ選びます。たとえば取引先なら「何を頼めるか」、採用応募者なら「どんな仕事か」を知りたいかもしれません。どちらも対象なら、トップページからそれぞれの説明へ進めるようにします。デザインの参考サイトを集める前に、会社概要、提供内容、実際の仕事、連絡先のうち、どの情報が足りないかを書き出してください。
写真や色だけで会社らしさを作ろうとすると、肝心の説明が薄くなることがあります。掲載する事業・商品・対応範囲を現場の担当者と確認し、その事実を伝える写真、見出し、順番を考えます。W3Cは、見出しと余白で関連する情報をまとめ、ページ間の案内を分かりやすくするよう勧めています。W3CのWebデザインの手引き
よく使われる表現を「使う理由」で選ぶ
余白を広く取る、大きな写真を置く、操作に反応する動きを付ける、動画や3Dを使う――いずれも候補にはなります。ただし、どれが流行しているかより、会社の情報を見つけやすくするかで選びます。下の表は、デザイン案を比較するときの確認例です。
| 表現 | 合う場面 | 採用前に確かめること |
|---|---|---|
| 余白と大きな文字 | サービスの違いや手順を短く整理する | 情報を減らしすぎず、見出しだけで内容が分かるか |
| 大きな写真 | 実物、現場、働く人の様子を見せる | 自社の事実を示す写真か、掲載許可と読み込み量は適切か |
| 小さな動き | ボタン操作の結果や開閉状態を示す | 動きがなくても意味が伝わり、停止できるか |
| 動画・3D | 静止画だけでは分かりにくい工程や構造を説明する | 制作・更新の負担と、代替の文章・静止画を用意できるか |
大きな写真や動画を選ぶなら、見せたい場面が実際に撮れるかが先です。説明できない部分をイメージ素材だけで埋めないでください。動画や3Dは役立つ場合もありますが、最初から必須にすると制作と更新の負担が増えます。小さく試作し、静止画や文章でも同じ情報へたどり着けるか確認します。
写真・色・文字に会社の事実を入れる
会社らしさを伝える写真は、飾りより説明に使います。たとえば製品の質感を知ってほしいなら、実物の全体と細部を写す。作業の進み方を知ってほしいなら、許可を得た現場の工程を写す。写真の使用権、人物の掲載同意、現在の業務との一致を確認します。図や写真が情報を持つ場合は、画像の代替文にも要点を入れます。W3Cの画像代替文の説明
色はロゴと調和させながら、文字と背景の見分けやすさを優先します。W3CのWCAG 2.2では、通常の文字と背景のコントラスト比は原則4.5:1以上、大きな文字は3:1以上が基準です。W3Cのコントラスト基準。写真の上に文字を重ねるなら、背景の明るい部分でも読めるか試します。色だけで「必須」「選択中」などを伝えず、文字や形も添えます。
見出しは飾りの短い英語だけにせず、その下に何が書かれているか分かる日本語を置きます。太字や大きさを増やすだけでは情報の順番は整いません。会社名、事業の説明、違いを示す事実、相談先までを、読者が拾える見出しでつなぎます。
スマートフォンでは情報の順番を確認する
パソコンで横に並ぶ要素は、スマートフォンでは縦に続きます。見た目を縮めるだけでなく、最初の画面で会社名と提供内容が分かり、必要な説明を読んだあと連絡先へ進めるか確認します。採用情報とサービス情報の両方を載せる場合は、どちらかを長く隠さず、入口を分けて示します。スマートフォンでの操作確認はモバイル表示の点検記事でも詳しく扱っています。
大きな写真は小さな画面で重要な部分が切れないか、本文より重くなりすぎないかを確認します。画像の大きさを画面に合わせ、寸法を指定すると読み込み中のレイアウト変化も抑えられます。web.devのレスポンシブ画像の説明。ボタンやメニューは、指で操作できる大きさと押した結果を実画面で確かめてください。
動きは操作を助けるときだけ使う
メニューを開いたことが分かる、小さな読み込み表示が出るなど、操作の結果を示す動きには役割があります。一方で、文字が次々に現れて内容を読むまで待たせる動きは、伝えたい情報を邪魔する場合があります。動きを外しても説明が通じるかを先に確認します。
動きを使う場合は、キーボードで操作した人にも状態が分かるか、動きを抑える設定に対応できるかを確かめます。W3Cは操作で起きる不要なアニメーションを停止可能にすることや、利用者の動き軽減設定を尊重することを案内しています。W3Cの動きに関する解説
案を決める前に、同じ用件で試す
デザイン案を並べたら、好みだけで選ぶ前に一つの用件を通してみます。たとえば「この会社に依頼できる内容を調べ、問い合わせ先を見つける」。パソコンとスマートフォンの両方で、説明にたどり着くまで迷わないかを確認します。社内の制作担当以外にも見てもらい、分からなかった見出しや写真を具体的に聞くと修正しやすくなります。
- 最初の画面で会社名と提供内容が読めるか。
- サービス・実際の仕事・会社情報・相談先へ自然に進めるか。
- 文字と背景、写真上の文字が読め、拡大しても崩れないか。
- スマートフォンで写真の重要な部分が切れず、ボタンを操作できるか。
- 公開後に写真、原稿、リンク、運用情報を誰が直すか決まっているか。
会社の情報整理からデザインまで相談したい場合は、Bämのコーポレートサイト制作内容をご覧ください。手元のサイトや資料がまだ整っていなくても、今伝えたいことと困っている点を相談窓口で伝えられます。
参考資料
- W3C WAI「Designing for Web Accessibility」（2026年9月25日確認）
- W3C WAI「Understanding Contrast (Minimum)」（2026年9月25日確認）
- W3C WAI「Understanding Animation from Interactions」（2026年9月25日確認）
- web.dev「Responsive images」（2026年9月25日確認）
- W3C WAI「Images Tutorial」（2026年9月25日確認）
