Web運用

コーポレートサイトのデザイン制作手順

 ホームページのデザインは、次の制作手順で進めると効率よく作業できます。

  1. グランドデザインの作成(主にトップページ)
  2. 主要ページのデザイン作成
  3. 下層ページのデザイン
  4. パーツ(コンポーネント)の作成
  5. 写真の選定

 コーポレートサイトの基本的なデザインが身につけば、キャンペーンサイトやランディングページなどのデザインもできるようになります。

 手順に沿ってデザインすると、修正が入った場合に対応しやすい・別のホームページデザインに転用しやすいなどのメリットがあり、デザインの制作漏れも少なくなります。

 逆に思いつくままデザインしてしまうと、デザインの統一性を失いやすくなったり、見直しや確認が多くなり、作業効率が落ちてクオリティに影響してしまうのです。

 この記事では、コーポレートサイトのデザインをベースに、デザインの手順と方法について解説していきます。

コーポレートサイトのデザインに取り掛かる前に

 デザインに取り掛かる前に、顧客やクライアントがどんなデザインを求めているかを考えることが大切です。
 コーポレートサイトは、顧客にとって何を提供しているサイトなのか。目的を無視したデザインは、成果が得られないホームページを作ってしまいます。

ホームページの目的や形式を知ろう

 ホームページには、コーポレートサイトの他にも目的に応じた形式があります。また、クライアントがホームページで達成したい目標もさまざまです。デザインを作る前に、クライアントの情報に、目を通すようにしましょう。

ホームページとは  ホームページとは、複数のWebページから構成され各ページがリンクで繋がった情報コンテンツのことです。  ホームページを閲覧して...
ホームページ制作に必要な企業(自社)情報の整理  ホームページに掲載するコンテンツを考えるために、企業情報の整理・分析をしましょう。  きちんとした情報整理はユーザー利便性の向...
ホームページ制作のヒアリングシート  ホームページ制作でいちばん最初の作業は、クライアントへのヒアリングです。 目的は何か? なにを伝えるホームなのか?  ...

顧客を意識したホームページのデザイン

 コーポレートサイトを含め世の中のホームページは、顧客のためにあります。顧客が求める情報や商品・サービスを提供するためにあるのです。

 顧客視点に立ってデザインを考えるために、マーケティングの視点を取り入れましょう。

セグメンテーションとターゲティング(ペルソナ)の違いとは  セグメンテーションは市場のことを指します。ターゲティング(ペルソナ)は、セグメンテーションから絞り込んだ顧客層のことです。 要するに...
カスタマージャーニーマップの作り方とは  カスタマーは訳すと顧客、ジャーニーは旅、マップは地図です。カスタマージャーニーマップは顧客の感情や行動を可視化した、顧客理解と顧客対...

参考サイト・競合サイトの分析をしよう

 ホームページ制作会社でも、デザインの参考を探してから作業に取り掛かります。いちからデザインのアイデアを考えることは難しく、再現性が担保できないからです。

 また、参考サイトや競合サイトの情報をクライアントに共有し、確認をとって進めることで、デザインの大幅な修正を防ぐ狙いもあります。

ホームページ制作のベンチマーク - 参考サイトの探し方  どんな形や表示・機能が実装されるか分からずに、ホームページを制作するのはとても不安です。 クライアントの立場に立って考えると、どうで...

 デザインを作り終えてから他のコーポレートサイトを確認してみたら、同じようなサイトになっていたなんてことがないように、ベンチマークをしてからデザインしましょう。

ワイヤーフレームを確認する

 ホームページの設計書となるワイヤーフレームを土台にデザインしましょう。

 ワイヤーフレームはデザインのひとつ前の工程です。ワイヤーフレームにレイアウトや簡単な装飾が施してある場合、そのまま再現するのではなく、いちからデザインを作り込んでいきましょう。

 注意しなくてはならないのは、コンテンツの構成を変えてしまうことです。ワイヤーフレームは、顧客に見せたい構成を考えて設計してあるからです。

ワイヤーフレームの作り方とは  ワイヤーフレームとは、ホームページの設計書です。たとえば家や建物を建築する場合、図面などの設計書をもとに建築しますよね。ワイヤーフレ...

 コーポレートサイトのデザインに取り掛かるまでに、確認する項目は少なくありません。しかし、しっかり目的や目標の確認をしてデザインを進めることで、デザインの修正が少なくなり、結果的に効率的な制作につながるのです。

 クライアントとホームページの完成イメージを共有し、合意形成をとりながら進めてください。そして、顧客にとって有益なホームページになるように進めていきましょう。

 長い前置きになりましたが、とても大事なことなのでご紹介しました。

コーポレートサイトのデザイン方法

 ここから具体的なデザインの手順を解説していきます。まずは、手順をおさらいしましょう。

  1. グランドデザインの作成(主にトップページ)
  2. 主要ページのデザイン作成
  3. 下層ページのデザイン
  4. パーツ(コンポーネント)の作成
  5. 写真の選定

グランドデザインの作成

 グランドデザインとは、ホームページ全体に関わるデザインのルールを決めていくことです。具体的にはトップページのデザインを作り込んでいきます。

ページの横幅を決める

 ホームページのコンテンツは、コンテンツの横幅を決めてデザインしていきます。

  • パソコン : 900px 〜 1240px
  • タブレット : 750px 〜 900px
  • スマートフォン : 750px以下

 上記のコンテンツ幅は目安です。制作会社によって基準が違います。PCやスマートフォンなどの端末によっても変化するので、トレンドに応じたコンテンツ幅を設定しましょう。

 パソコン・タブレット・スマートフォンに対応したデザインを考える必要があります。この端末の表示領域に応じて、コンテンツのデザインやレイアウトを変える制作方法は、レスポンヴWebデザインといわれます。

トップページのデザイン

 トップページのデザインには、下層ページのデザインに転用する共通パーツが含まれています。しっかりと作り込んでいきましょう。

  • ヘッダー
  • フッター
  • グローバルナビゲーション
  • お問い合わせへの導線(オファー)

 ホームページ全体で使用する共通パーツを作り込むことで、サイト全体のデザインの方向性が決まっていきます。

カラーマネジメント

 ホームページで使用するカラーを選定します。

  • メインカラー
  • サブカラー
  • アクセントカラー

 最低限、上記のカラーは決めておくといいでしょう。メインカラーはホームページの背景や面積の大きい箇所に使用します。全体の7割を占めるようにデザインすると統一感が出ると言われています。サブカラーは見出し、アクセントカラーは細かい装飾の部分に使うなど、効果的なポイントを考えながら配色していくといいでしょう。

フォント選定

 ホームページで使用するフォントを決めます。

  • 本文に使うメインのフォント
  • 見出しなど、アクセントに使うフォント
  • 英文に使うフォント

 ホームページで多くのフォントを多用すると、統一感がなくなっていき、洗練されたデザインから遠ざかっていきます。フォントの選定は、3種類くらいにとどめておいた方がいいでしょう。

 フォントの選択には、Google Fontsを使用します。

見出しデザイン・ほかテキストデザイン

 ホームページのコンテンツは、本文とコンテンツの目印になる見出しで構成されています。大見出し・小見出しなどのデザインを決めていきましょう。

  • HTML、h1〜h6のデザイン
  • フォントサイズのルール(font-size)
  • 行間隔の調整(line-height)
  • 文字間隔の調整(letter-spacing)
  • リンクテキストのカラー(font-color)

 ポイントは、フォントサイズなどの数値を決めておくことです。HTMLコーディングを意識してデザインすることも大切です。

ボタンデザイン

 ホームページ内で配置するボタンデザインを作ります。

  • ページ遷移するボタン
  • もっと見るボタン
  • お問い合わせボタン

 ホームページでよく使うボタンを作っておくと、他のページを制作するときも効率的に作業できます。

ファーストビューのデザイン

 トップページはファーストビューのデザインが重要です。ファーストビューとは、ユーザーがあなたのホームページに訪れた際、初めに目にする画面領域のことをいいます。

 ファーストビューは、ユーザーに自社や自社商品を印象付けるデザインが必要です。ファーストビューでユーザーの興味を惹き、他のページも見てみたいと思わせる工夫をしなくてはいけません。ファーストビューの主な構成要素は次の要素です。

  • 画像(メインビジュアル・グラフィックデザイン)
  • キャッチコピー
  • リード文

 ユーザーに訴求したい内容を意識して、画像の選定やキャッチコピーの制作をしていきます。

キャッチコピーの作り方
キャッチコピーの考え方 - 作り方のコツとはキャッチコピーの作り方がわからない。考え方が色々ありすぎてどう書いたらいいのか。言葉を真似するだけではキャッチコピーは書けるようになりません。この記事では基本的な考え方を解説していきます。基本を抑えることで再現性のある書き方を身につけることができます。...

細かいデザインのルールを決めておく

 デザインに関するルールをある程度細かく決めておくと、ホームページ全体の統一性を保ちながらデザインを進められます。

  • よく使う背景のデザイン
  • 使用するアイコン
  • テーブル(表)デザイン
  • ドロップシャドウ・グラデーション

 細いデザインの装飾は、制作するページが多くなればなるほどブレていきます。グランドデザインの段階で仕様を決めておくことで、デザインのブレを最小限にできます。

主要ページのデザイン

 ディレクトリマップをもとに、ホームページ内で重要なページ・コンテンツをデザインしていきます。

  • 事業紹介
  • 企業情報(理念・メッセージ)
  • サービス・製品紹介
  • 採用ページトップ
  • お問い合わせページ
ディレクトリマップ(サイトマップ)の作り方とは  ディレクトリマップとは、ホームページのフォルダ構成を管理するために用いる一覧表です。作り方は、エクセルやGoolgeスプレッドシート...

 クライアントが訴求したいページやコンテンツは特別なデザインをして、ほかの下層ページと差別化しましょう。グランドデザインで制作したデザインを流用しながら制作すると効率的な作業ができます。

下層ページのデザイン

 主要ページ以外の下層ページは、パーツを流用しながら作成していきましょう。

 ページで共通して使われる、ヘッダーやフッター・グローバルナビゲーションなどのコンテンツはそのまま使いましょう。

ページヘッダー

 下層ページのヘッダーは、画像とタイトルテキストで構成されたページヘッダーを配置します。高さ400px前後で制作しましょう。

パンくずリストの配置

 パンくずリストは、ホームページ内でどのページに滞在しているかを知らせる役割があり、ユーザの利便性を向上させます。

コンテンツナビゲーション

 同一カテゴリーページへのリンクを、タブ形式などでデザインします。ホームページの回遊を目的としています。

パーツ(コンポーネント)の作成

 ホームページのデザインは、よく使うレイアウトのパターンを組み合わせて構成し、ページを作っていきます。パターンはいくつかの部品で構成されており、その要素一つひとつのことを、Webデザインではコンポーネント(部品)といいます。

  • コンテンツの概要を紹介するブロック・コンポーネント
  • カードタイプのリンクブロック・コンポーネント
  • タブなどのブロック・コンポーネント

 汎用性の高いコンポーネントを洗い出し、あらかじめデザインしておきましょう。下層ページの制作を効率的に進められます。

写真の選定

 ホームページにおいて、写真は大きな役割を果たします。

 テキストだけのコンテンツではユーザーにイメージが伝わりづらく、ユーザーは理解が難しくなってしまいます。画像やイラストなどの視覚表現を使うことで、ユーザーは直感的にコンテンツを理解できるようになり、コンテンツの内容がより伝わりやすくなるのです。

撮影した画像を使用する

 商品画像や製品画像はもちろんですが、社内風景や社員さんもカメラマンに撮影してもらった写真を使いましょう。写真のクオリティはホームページのクオリティに直結します。

 写真はプロのカメラマンに撮影を依頼し、なるべく自分で撮影した写真の使用はやめましょう。予算の都合でカメラマンに依頼することが難しい場合、カメラなどの機材はきちんとしたもので撮影しましょう。

イラスト・図解・アイコンを作成する

 イラストや図解・アイコンなどの視覚表現を積極的に取り入れましょう。ユーザーは文章だけのコンテンツでは内容を直感的に理解できません。イラストや図解でコンテンツのイメージや概要を伝えたあとに文章を添えると、より伝わりやすいコンテンツになります。

 また、イラストや図解・アイコンは、ユーザーの目に止まりやすく、ホームページにアクセントを加えます。ユーザーにストレスなくコンテンツを読んでもらうために、効果的に取り入れましょう。

素材サイトから写真を探す

 素材サイトには、有料画像配布サイト・無料画像配布サイトがあります。無料画像配布サイトを使用する場合、商用利用が可能な素材か、確認してから使いましょう。

Adobe Stock(アドビストック)

 Adobe Stockは、Adobe社が運営している素材提供サービスです。ホームページデザインは、Adobeのデザインソフトを使用することが多く、Photoshop(フォトショップ)などのデザインソフトとの連携がスムーズに行えます。

iStock(アイストック)

 iStockの特徴は、無料のエディターを使って画像へフィルターをかけたり、テキストの追加ができたりと、デザインソフトがなくても画像加工ができることです。

PIXTA(ピクスタ)

 PIXTAは、日本の企業が運営する素材サービスです。日本人の人物写真が豊富にあります。

amanaimages(アマナイメージズ)

 amanaimagesは、日本最大級の画像・動画素材販売サイトです。人物写真や日本の風景など高品質な画像が探せます。

Pixabay(ピクサベイ)

Pixabayは、素材数が圧倒的に多く、またユーザー登録が不要で利用しやすいこともポイントです。無料で使用できるロイヤリティフリーの画像、動画、音楽を提供しています。

photoAC(写真AC)

 photoACには、日本の写真が多くあります。使用するには会員登録が必要です。登録すれば「illustAC(イラストAC)」や「silhouetteAC(シルエットAC)」など、ほかのグループサイトも利用できるようになります。

ぱくたそ

 ぱくたそも、日本人の人物写真を使いたい方にオススメです。人物写真が多いだけでなく、さまざまな日常のシーンから素材を見つけられます。

 著作権などの確認を怠ると、思わぬトラブルに発展することもあります。無料配布の素材を使うときは事前に確認してから使いましょう。

ホームページデザインでよく使うツール

デザインソフト

ギャラリーサイト

便利ツール

コーポレートサイトのデザインで気を付けること

HTMLコーディングを意識してデザインすること

運用面を意識したデザイン

各ページの導線を意識する

 トップページと下層ページの設計が終わった段階で、ホームページの導線を見直しましょう。大切なことは、ユーザーの視点にたって導線を見直すことです。

 ユーザーが探している情報にたどりつきやすい設計になっているか、お問い合わせや商品購入などのユーザーアクションはスムーズにできるかなど、ユーザーファーストを心がけましょう。

機能要件を確認する

 ユーザーや管理者にとって、ホームページの利便性を上げるための機能要件を書き加えていきます。

 設計の段階でホームページの機能を決めておくことで、後の制作工程がスムーズに進行できます。エンジニアは機能に関する実装方法を調べたり事前に検証ができるので、設計のやり直しを防ぎ、修正を繰り返すリスクが防げるのです。 

お問い合わせ

 どんなお問い合わせ内容が必要か、必須項目はどんな項目かを決めておきましょう。また、確認ページやサンクスページ(お問い合わせ完了ページ)の有無、送信先のメールアドレスなども記載しておくといいでしょう。

使用するシステム(CMS)

 ホームページを更新・管理するマネジメントシステムの導入箇所などを記載します。更新の多いページやブログなどは、別途システムの調整が必要になるため、クライアントに確認をとり、事前に決めておきましょう。

 システム導入にクライアントとの齟齬があると、大幅な修正を求められるなど、大きなリスクに発展するケースがあります。

画像スライダーの設置

 トップページのメインビジュアルに、画像のスライダーを導入するかなど確認をしておきます。

ページトップ

 ページの上部まで、戻るためのボタンを設置するか確認をします。

追従ヘッダー

 ユーザーの利便性向上のため、ヘッダー部分を固定して表示するか確認をします。

レスポンシブWebデザイン

 レスポンシブWebデザインのためにワイヤーフレームを別途制作します。全ページ制作する必要はありませんが、主要ページは作成するようにしましょう。

 ユーザーが、パソコン・スマートフォン・タブレットなど、どのデバイスで閲覧したときもホームページが最適化されて表示できるようにします。

コーポレートサイトがホームページデザインの基本

ランディングページの作り方  ランディングページの制作に必要な知識を紹介しています。 個人でWeb制作をしているフリーランスの方 これからWeb制作...
ホームページ制作 - 全体の流れ  ホームページの制作の始まりは、要件定義・設計から始まります。ホームページの目的や目標を決める工程です。住宅の建築に例えると、土地を決...