ホームページのデザインは、次の制作手順で進めると効率よく作業できます。
- グランドデザインの作成（主にトップページ）
- 主要ページのデザイン作成
- 下層ページのデザイン
- パーツ（コンポーネント）の作成
- 写真の選定
コーポレートサイトの基本的なデザインが身につけば、キャンペーンサイトやランディングページなどのデザインもできるようになります。
手順に沿ってデザインすると、修正が入った場合に対応しやすい・別のホームページデザインに転用しやすいなどのメリットがあり、デザインの制作漏れも少なくなります。
逆に思いつくままデザインしてしまうと、デザインの統一性を失いやすくなったり、見直しや確認が多くなり、作業効率が落ちてクオリティに影響してしまうのです。
この記事では、コーポレートサイトのデザインをベースに、デザインの手順と方法について解説していきます。
コーポレートサイトのデザインに取り掛かる前に
デザインに取り掛かる前に、顧客やクライアントがどんなデザインを求めているかを考えることが大切です。
コーポレートサイトは、顧客にとって何を提供しているサイトなのか。目的を無視したデザインは、成果が得られないホームページを作ってしまいます。
ホームページの目的や形式を知ろう
ホームページには、コーポレートサイトの他にも目的に応じた形式があります。また、クライアントがホームページで達成したい目標もさまざまです。デザインを作る前に、クライアントの情報に、目を通すようにしましょう。
顧客を意識したホームページのデザイン
コーポレートサイトを含め世の中のホームページは、顧客のためにあります。顧客が求める情報や商品・サービスを提供するためにあるのです。
顧客視点に立ってデザインを考えるために、マーケティングの視点を取り入れましょう。
参考サイト・競合サイトの分析をしよう
ホームページ制作会社でも、デザインの参考を探してから作業に取り掛かります。いちからデザインのアイデアを考えることは難しく、再現性が担保できないからです。
また、参考サイトや競合サイトの情報をクライアントに共有し、確認をとって進めることで、デザインの大幅な修正を防ぐ狙いもあります。
デザインを作り終えてから他のコーポレートサイトを確認してみたら、同じようなサイトになっていたなんてことがないように、ベンチマークをしてからデザインしましょう。
ワイヤーフレームを確認する
ホームページの設計書となるワイヤーフレームを土台にデザインしましょう。
ワイヤーフレームはデザインのひとつ前の工程です。ワイヤーフレームにレイアウトや簡単な装飾が施してある場合、そのまま再現するのではなく、いちからデザインを作り込んでいきましょう。
注意しなくてはならないのは、コンテンツの構成を変えてしまうことです。ワイヤーフレームは、顧客に見せたい構成を考えて設計してあるからです。
コーポレートサイトのデザインに取り掛かるまでに、確認する項目は少なくありません。しかし、しっかり目的や目標の確認をしてデザインを進めることで、デザインの修正が少なくなり、結果的に効率的な制作につながるのです。
クライアントとホームページの完成イメージを共有し、合意形成をとりながら進めてください。そして、顧客にとって有益なホームページになるように進めていきましょう。
長い前置きになりましたが、とても大事なことなのでご紹介しました。
コーポレートサイトのデザイン方法
ここから具体的なデザインの手順を解説していきます。まずは、手順をおさらいしましょう。
- グランドデザインの作成（主にトップページ）
- 主要ページのデザイン作成
- 下層ページのデザイン
- パーツ（コンポーネント）の作成
- 写真の選定
グランドデザインの作成
グランドデザインとは、ホームページ全体に関わるデザインのルールを決めていくことです。具体的にはトップページのデザインを作り込んでいきます。
ページの横幅を決める
ホームページのコンテンツは、コンテンツの横幅を決めてデザインしていきます。
- パソコン : 900px 〜 1240px
- タブレット : 750px 〜 900px
- スマートフォン : 750px以下
上記のコンテンツ幅は目安です。制作会社によって基準が違います。PCやスマートフォンなどの端末によっても変化するので、トレンドに応じたコンテンツ幅を設定しましょう。
パソコン・タブレット・スマートフォンに対応したデザインを考える必要があります。この端末の表示領域に応じて、コンテンツのデザインやレイアウトを変える制作方法は、レスポンヴWebデザインといわれます。
トップページのデザイン
トップページのデザインには、下層ページのデザインに転用する共通パーツが含まれています。しっかりと作り込んでいきましょう。
- ヘッダー
- フッター
- グローバルナビゲーション
- お問い合わせへの導線（オファー）
ホームページ全体で使用する共通パーツを作り込むことで、サイト全体のデザインの方向性が決まっていきます。
カラーマネジメント
ホームページで使用するカラーを選定します。
- メインカラー
- サブカラー
- アクセントカラー
最低限、上記のカラーは決めておくといいでしょう。メインカラーはホームページの背景や面積の大きい箇所に使用します。全体の7割を占めるようにデザインすると統一感が出ると言われています。サブカラーは見出し、アクセントカラーは細かい装飾の部分に使うなど、効果的なポイントを考えながら配色していくといいでしょう。
フォント選定
ホームページで使用するフォントを決めます。
- 本文に使うメインのフォント
- 見出しなど、アクセントに使うフォント
- 英文に使うフォント
ホームページで多くのフォントを多用すると、統一感がなくなっていき、洗練されたデザインから遠ざかっていきます。フォントの選定は、3種類くらいにとどめておいた方がいいでしょう。
フォントの選択には、Google Fontsを使用します。
見出しデザイン・ほかテキストデザイン
ホームページのコンテンツは、本文とコンテンツの目印になる見出しで構成されています。大見出し・小見出しなどのデザインを決めていきましょう。
- HTML、h1〜h6のデザイン
- フォントサイズのルール（font-size）
- 行間隔の調整（line-height）
- 文字間隔の調整（letter-spacing）
- リンクテキストのカラー（font-color）
ポイントは、フォントサイズなどの数値を決めておくことです。HTMLコーディングを意識してデザインすることも大切です。
ボタンデザイン
ホームページ内で配置するボタンデザインを作ります。
- ページ遷移するボタン
- もっと見るボタン
- お問い合わせボタン
ホームページでよく使うボタンを作っておくと、他のページを制作するときも効率的に作業できます。
ファーストビューのデザイン
トップページはファーストビューのデザインが重要です。ファーストビューとは、ユーザーがあなたのホームページに訪れた際、初めに目にする画面領域のことをいいます。
ファーストビューは、ユーザーに自社や自社商品を印象付けるデザインが必要です。ファーストビューでユーザーの興味を惹き、他のページも見てみたいと思わせる工夫をしなくてはいけません。ファーストビューの主な構成要素は次の要素です。
- 画像（メインビジュアル・グラフィックデザイン）
- キャッチコピー
- リード文
ユーザーに訴求したい内容を意識して、画像の選定やキャッチコピーの制作をしていきます。
細かいデザインのルールを決めておく
デザインに関するルールをある程度細かく決めておくと、ホームページ全体の統一性を保ちながらデザインを進められます。
- よく使う背景のデザイン
- 使用するアイコン
- テーブル（表）デザイン
- ドロップシャドウ・グラデーション
細いデザインの装飾は、制作するページが多くなればなるほどブレていきます。グランドデザインの段階で仕様を決めておくことで、デザインのブレを最小限にできます。
主要ページのデザイン
ディレクトリマップをもとに、ホームページ内で重要なページ・コンテンツをデザインしていきます。
- 事業紹介
- 企業情報（理念・メッセージ）
- サービス・製品紹介
- 採用ページトップ
- お問い合わせページ
クライアントが訴求したいページやコンテンツは特別なデザインをして、ほかの下層ページと差別化しましょう。グランドデザインで制作したデザインを流用しながら制作すると効率的な作業ができます。
下層ページのデザイン
主要ページ以外の下層ページは、パーツを流用しながら作成していきましょう。
ページで共通して使われる、ヘッダーやフッター・グローバルナビゲーションなどのコンテンツはそのまま使いましょう。
ページヘッダー
下層ページのヘッダーは、画像とタイトルテキストで構成されたページヘッダーを配置します。高さ400px前後で制作しましょう。
パンくずリストの配置
パンくずリストは、ホームページ内でどのページに滞在しているかを知らせる役割があり、ユーザの利便性を向上させます。
コンテンツナビゲーション
同一カテゴリーページへのリンクを、タブ形式などでデザインします。ホームページの回遊を目的としています。
パーツ（コンポーネント）の作成
ホームページのデザインは、よく使うレイアウトのパターンを組み合わせて構成し、ページを作っていきます。パターンはいくつかの部品で構成されており、その要素一つひとつのことを、Webデザインではコンポーネント（部品）といいます。
- コンテンツの概要を紹介するブロック・コンポーネント
- カードタイプのリンクブロック・コンポーネント
- タブなどのブロック・コンポーネント
汎用性の高いコンポーネントを洗い出し、あらかじめデザインしておきましょう。下層ページの制作を効率的に進められます。
写真の選定
ホームページにおいて、写真は大きな役割を果たします。
テキストだけのコンテンツではユーザーにイメージが伝わりづらく、ユーザーは理解が難しくなってしまいます。画像やイラストなどの視覚表現を使うことで、ユーザーは直感的にコンテンツを理解できるようになり、コンテンツの内容がより伝わりやすくなるのです。
撮影した画像を使用する
商品画像や製品画像はもちろんですが、社内風景や社員さんもカメラマンに撮影してもらった写真を使いましょう。写真のクオリティはホームページのクオリティに直結します。
写真はプロのカメラマンに撮影を依頼し、なるべく自分で撮影した写真の使用はやめましょう。予算の都合でカメラマンに依頼することが難しい場合、カメラなどの機材はきちんとしたもので撮影しましょう。
イラスト・図解・アイコンを作成する
イラストや図解・アイコンなどの視覚表現を積極的に取り入れましょう。ユーザーは文章だけのコンテンツでは内容を直感的に理解できません。イラストや図解でコンテンツのイメージや概要を伝えたあとに文章を添えると、より伝わりやすいコンテンツになります。
また、イラストや図解・アイコンは、ユーザーの目に止まりやすく、ホームページにアクセントを加えます。ユーザーにストレスなくコンテンツを読んでもらうために、効果的に取り入れましょう。
素材サイトから写真を探す
素材サイトには、有料画像配布サイト・無料画像配布サイトがあります。無料画像配布サイトを使用する場合、商用利用が可能な素材か、確認してから使いましょう。
Adobe Stock（アドビストック）
Adobe Stockは、Adobe社が運営している素材提供サービスです。ホームページデザインは、Adobeのデザインソフトを使用することが多く、Photoshop（フォトショップ）などのデザインソフトとの連携がスムーズに行えます。
iStock（アイストック）
iStockの特徴は、無料のエディターを使って画像へフィルターをかけたり、テキストの追加ができたりと、デザインソフトがなくても画像加工ができることです。
PIXTA（ピクスタ）
PIXTAは、日本の企業が運営する素材サービスです。日本人の人物写真が豊富にあります。
amanaimages（アマナイメージズ）
amanaimagesは、日本最大級の画像・動画素材販売サイトです。人物写真や日本の風景など高品質な画像が探せます。
Pixabay（ピクサベイ）
Pixabayは、素材数が圧倒的に多く、またユーザー登録が不要で利用しやすいこともポイントです。無料で使用できるロイヤリティフリーの画像、動画、音楽を提供しています。
photoAC（写真AC）
photoACには、日本の写真が多くあります。使用するには会員登録が必要です。登録すれば「illustAC（イラストAC）」や「silhouetteAC（シルエットAC）」など、ほかのグループサイトも利用できるようになります。
ぱくたそ
ぱくたそも、日本人の人物写真を使いたい方にオススメです。人物写真が多いだけでなく、さまざまな日常のシーンから素材を見つけられます。
著作権などの確認を怠ると、思わぬトラブルに発展することもあります。無料配布の素材を使うときは事前に確認してから使いましょう。
ホームページデザインでよく使うツール
ホームページのデザインは、いくつかのソフトを使って制作します。
デザインソフト
デザインソフトは、Adobe社のツールが有名です。用途に応じてデザインソフトを使い分けましょう。
Adobe Illustrator（アドビイラストレーター）
主にイラスト作成に使用します。ホームページの中で使用する、人物のイラストや図解、ロゴ・アイコンなどは、イラストレーターでベクターデータとして制作します。
ベクターデータの特徴は、データを拡大縮小しても、ぼやけたり画像が荒れないことです。
Adobe Photoshop（アドビフォトショップ）
主に画像の加工に使用します。ホームページ用に撮影した画像などを調整するために使用し、画像の明るさの調整や色味の調整を行います。
Adobe XD（アドビエックスディー）
ホームページ全体をデザインするために使用します。イラストレーターで制作したイラストや、フォトショップで制作した画像を読み込んだり連携できます。
Figma（フィグマ）
Figmaはブラウザでホームページデザインができるツールです。ソフトのインストールが不要で、無料版があり手軽に扱えることが特徴で、ホームページデザインにおいて、メジャーなアプリケーションになりました。
もとは米国サンフランシスコの企業が開発したソフトです。2022年、Adobe社に買収され統合されました。
デザインを手助けしてくれる便利ツール
デザインを手助けしてくれる便利なツールを紹介します。
Adobe Color
Adobe Colorは、Adobe社が提供している無料のカラーパレットです。直感的な操作で使いやすく、作ったカラーパレットは保存したり、コードをコピーしたりできます。PhotoshopやIllustratorなどの連携機能も充実しています。
HUE/360
HUE/360は、カラーホイールからメインとなる色を選択すると、自動で配色候補を絞り込んでくれるツールです。クリックした色に合う色だけが表示されます。
WebGradients
WebGradientsは、180種類ものグラデーションカラーを配布しているサイトです。グラデーションカラーは、画像で書き出したり、CSSコードをコピーできます。
Google Fonts
Google Fontsは、Webフォントを無料で提供してくれるサービスです。Webフォントを使用することで、ブラウザ・デバイス・どの環境から見ても同じフォントを表示できるようになります。
また、アイコンの提供もあり、ホームページデザインで使用するアイコンをGoogle Fontsから選択することで、コーディングが進めやすくなります。
Adobe Font
Adobe Fontは、Adobe社が提供しているフォントサービスです。使用するには、Adobe CCのライセンスが必要になります。有料のツールですが、600種類を超える日本語フォントが使用できるなど、デザインの幅が広がります。
Font Awesome
Font Awesomeは、Webアイコンサービスです。Webアイコンを利用すると、CSSコーディングでアニメーションを使えたり、動きのある装飾ができホームページの表現を豊かにできます。
ギャラリーサイト
ホームページデザインのアイデアに困ったときは、参考デザインを探すためにギャラリーサイトを利用します。
SANKOU!
SANKOU!は、日本国内のサイトをアーカイブしたギャラリーサイトです。カテゴリ分けが細かく、複数検索もできるので、参考デザインが探しやすく便利です。
URAGAWA
URAGAWAは、エンタメ系やキャンペーン・企画プロモーションなど、クリエイティブなホームページを集めたギャラリーサイトです。
CMS Design
CMS Designは、WordPressをはじめ、CMSで構築されたホームページをまとめたギャラリーサイトです。
Site Inspire
Site Inspireは、海外のホームページが集まっているギャラリーサイトです。デザインのインスピレーションが出てこない時には、海外のホームページのアイデアを取り入れてみましょう。
コーポレートサイトのデザインで気を付けること
デザイン工程のあとには、HTMLやCSS、システム構築などのコーディングの作業が控えています。デザインの段階でホームページの実装を意識してデザインを制作することは非常に重要です。
コーディングを意識してデザインする
コーディングで再現が難しいデザインの装飾やレイアウトをしてしまうと、作業者間やクライアントとの行き違いが生じてしまいます。デザインを根本から見直さなくてはいけないなど、重大なリスクに発展する可能性があり、とくに機能実装の面で注意を払う必要があります。
お問い合わせページ
お問い合わせ項目を事前に確認しておきましょう。確認ページ・完了ページが必要かどうか、必須項目はどんな項目かなど、エンジニアが実装しやすいようにしておくとコーディングがしやすくなりまうす。
主なお問い合わせの項目は次の通りです。
- 名前
- 企業名
- 電話番号
- メールアドレス
- 住所
- お問い合わせ内容
細かい機を意識したデザイン
ホームページは、マウスをクリックした時やドラッグした時、マウスオーバーした時の表現など、動きがつけられます。
トップページのメインビジュアル
トップページのメインビジュアルに、画像スライダーが必要か確認しましょう。
追従ヘッダー
画面スクロールした際、ヘッダー部分を固定して表示する機能です。
ページトップ
クリックをするとページの上部まで自動でスクロールする「戻る」ボタンが必要か確認しましょう。
CSSアニメーション
ホームページの表現を豊かにするために、CSSアニメーションを使用するか確認をしましょう。
レスポンシブWebデザインを意識する
レスポンシブWebデザインとは、ユーザーの閲覧環境や画面の表示幅に応じて、ホームページのレイアウトを変化させるデザイン手法です。
トップページや主要ページは、スマートフォンに合わせたデザインを別に作る必要があります。アイコンやイラスト・図解などの画像は、スマートフォン向けに素材を制作しましょう。
運用面を意識したデザイン
ホームページは公開リリースしてからが本番です。制作にかけた時間よりも、運用していく時間の方が遥かに長いのです。
ホームページ管理システム
更新・管理するページには、システムを導入します。CMS（コンテンツマネジメントシステム）といい、代表的なツールにWordPressがあります。
デザインをする時に注意することは、複雑なレイアウトにしないことです。クライアントが更新・追加を加えた時に、文章量や画像のサイズによってレイアウトが崩れてしまわないようにデザインする必要があります。
クライアントの運用を想定し、デザインすることが大切です。
導線を意識したデザイン
ユーザーは、どのページから遷移して対象のページにたどりつくのか。導線を意識したデザインも必要です。 ユーザーの視点にたって、ユーザーが探している情報にたどりつきやすい設計になっているか、心がけましょう。
コーポレートサイトのデザインとは
ここまでコーポレートサイトを例に、デザインの制作手順を解説してきました。見栄えがいい、かっこいいデザインをする必要はないと個人的には思っています。
必要なことは、ユーザーやクライアントが、どんなデザインを求めているかじゃないでしょうか。
ユーザーにとって必要な情報が見つけづらい、情報が探しにくいホームページは見てもらえないものになってしまいます。クライアントにとって更新しづらいホームページは、運用されず成果が出ません。
コーポレートサイトは企業の顔です。閲覧者にとってどう見えるかを意識してデザインするためにも、一つひとつの工程を丁寧に作業しましょう。
なにか、お役に立てればうれしいです。
