この記事のレベル

初心者	（3.5）
重要度	（3.5）
難しさ	（2.5）

こんにちは、編集長のカワウソです！

「デザインカンプって何？」と悩んでいませんか？

デザインカンプとは、ホームページの完成見本のことです。
ホームぺージ制作を外注したときに、Web制作会社などの依頼先から、デザインの確認のために提出されることがあります。

デザインカンプの見方が分かっていないと、ホームぺージ制作で失敗してしまうかもしれません。

そこで今回は、デザインカンプの基礎知識と、見るべきポイントを具体的に解説します。

この記事を読めば、デザインカンプの見方が分かるので、希望のホームページが仕上がりやすくなりますよ。

それではどうぞ！

デザインカンプとは

デザインカンプとは、ホームページの完成見本のことです。

Web制作会社などの受注側が、クライアント（発注側）とデザインをすり合わせるために作成します。

※クリックで拡大できます

デザインカンプがないと、イメージの共有や意思疎通がうまくできません。 

そのため、ホームぺージ制作のプロジェクトにおいて、デザインカンプは重要な存在です。

デザインカンプの目的

デザインカンプの目的は、ホームぺージのデザインを確定させることです。

ホームページ制作は、一般的に以下の流れで進行します。
テニスのラリーのように、Web制作会社（受注者）の作業に対して、一つひとつ確認していくことが自社（発注者）の責務です。

デザインを確定させないと、次の工程であるコーディングに進行できません。

ホームぺージ制作を円滑に進めるためにも、なるべく自社のイメージに近いデザインカンプが提出されるように、工夫しましょう。
※のちほど、自社のイメージに近いデザインカンプをもらうコツを紹介します。

ワイヤーフレームとの違い

デザインカンプがホームぺージの完成見本であるのに対し、ワイヤーフレームはその前段階となる「ページの設計図」です。

Webデザイナーはワイヤーフレームをもとに、ページのデザインを起こしていきます。

ワイヤーフレームでは、主にページの「レイアウト」や「コンテンツの内容と位置」を決めます。

デザインカンプのようなビジュアル要素はないものの、この段階である程度、ページの使い勝手を判断することは可能です。

詳しくは以下の記事で解説しているので、チェックしてみてください。

イメージに近いデザインカンプをもらうためのコツ

ここでは、Web制作会社から、自社のイメージに近いデザインカンプをもらうためのコツを紹介します。

参考のホームページを提示する

自社が作りたいイメージをWeb制作会社に伝えるときは、参考のホームページを提示しましょう。

「百聞は一見に如かず」ということわざがあるように、言葉で細かく伝えるよりも、ビジュアルを提示したほうが、相手に正しく伝わりやすいためです。

もし、言葉だけでイメージを伝えてしまうと、うまく伝わりきらずに、まったく異なるデザインのものが仕上がってくるかもしれません。

なお、参考のホームページを探すときは、「ギャラリーサイト」がおすすめです。
他社のホームページを一覧にして見れるので、効率的に探せます。

詳しくは、以下の記事で解説しているので、参考にしてみてください。

ワイヤーフレームの時点で内容を決めておく

ワイヤーフレームを確認する段階で、「レイアウト」や「コンテンツの内容と位置」はなるべく詰めておきましょう。

とくにレイアウトは、ページデザインの骨格です。
レイアウトが異なると、イメージの相違が大きく生まれてしまう原因になってしまいます。

▼レイアウトの種類

また、「コンテンツ」と一口に言っても、テキストや画像など「閲覧する」だけのものもあれば、カルーセル（スライドショー）やボタンなど「操作する」ものもあります。

▼操作するコンテンツの一例

ページの使い勝手にも大きく関わるため、「何を」「どこに」「どんなふうに」設置するかは、固めておきましょう。

以下の記事では、ページの要素（UI）から受けるユーザーの体験（UX）について、詳しく解説しています。
ワイヤーフレームを作成する前に知っておきたい知識ですので、ぜひチェックしてみてください。

デバイスごとのデザインカンプを用意してもらう

デザインカンプは、パソコン、スマホ、タブレットなどのデバイスごとに用意してもらいましょう。

「デバイス（画面幅）ごとに、デザインが最適化されているか」を確認できます。

詳しくは、記事の後半「デザインカンプの見方（チェックポイント）」で解説しますね。

デザインカンプの見方（チェックポイント）

ここでは、デザインカンプの見方（チェックポイント）を解説します。

提出されたデザインカンプそのままに、ホームぺージが完成することになるので、問題がないかは入念に確認しておきましょう。

なお、ここでは以下の「架空の経営コンサルティング会社」のコーポレートサイトを例にして解説します。

※クリックで拡大できます

それでは以下の内容で詳しく解説していきます。

ファーストビューの見方

ファーストビューとは、ホームぺージにアクセスしたときに、最初に表示される画面領域のことです。

ホームぺージの「顔」であり、第一印象を決定づける要素と言えます。
次の2点を押さえておくとよいでしょう。

キャッチコピーが目立つか

キャッチコピーは、ホームページにアクセスしたユーザーに対する最初のメッセージ（挨拶）です。
目立っているか、読みやすいかなどをチェックしましょう。

稀に文字と写真の組み合わせが悪く、キャッチコピーが読みづらいホームページを見かけます。
それだと、せっかくキャッチコピーを掲載していても、ユーザーに読んでもらえないですよね。

もし読みづらい場合は、文字の色、サイズ、位置などを調整する必要があります。
調整してもうまく解消されない場合は、写真を選びなおしてください。

会社のイメージが伝わる画像か

ファーストビューにある大きな画像のことを「メインビジュアル」と言います。
メインビジュアルから、会社のイメージが伝わってくるかをチェックしましょう。

ユーザーのほとんどは、ファーストビューで「何のホームぺージか」を判断します。
もし万が一、ユーザーが何のホームページか分からずに戸惑ってしまったら、そのまま離脱してしまうかもしれません。

コーポレートサイトの目的は「会社について知ってもらうこと」です。
ひと目見て、何の会社か分かるファーストビューを作りましょう。

ファーストビューのデザイン参考事例を以下の記事で紹介しているので、あわせてチェックしてみてください。

コンテンツの見方

コンテンツのデザインを確認するときは、以下の4つを押さえておくとよいでしょう。

大見出しが目立つか

見出しは、各コンテンツの内容を端的に表すためのものです。
なかでも「大見出し」はコンテンツを分類するときの大カテゴリに当たるため、ほかと比べて目立っている必要があります。

もし、大見出しが目立っていないと、ユーザーがコンテンツを閲覧していても、「何の話か分からない……」といったことになってしまいます。

サイズ、色、位置などによって、ほかの文字より目立っているかをチェックしましょう。

各コンテンツが見やすく分かれているか

各コンテンツが見やすく分かれているかもチェックしてください。
コンテンツの位置関係によっては、関連性が分かりにくくなってしまう場合があります。

たとえば、以下を見比べてください。
右側のほうが関連性が分かりやすいですよね。

関連性のあるもの同士を近くに配置して見やすくすることを「近接」と呼び、デザインの4大原則の一つに数えられます。

詳しくは、以下の記事で解説しているので、あわせて参考にしてみてください。

リンクの有無が分かりやすいか

コンテンツに対して、「リンクの有無が分かりやすいか」をチェックしましょう。

ユーザーにリンクだと気付いてもらえなければ、コンテンツはクリックしてもらえません。
もちろん、リンク先のページが見られることもないでしょう。

たとえば、「→」や「＞」などのアイコンがあるだけでも、リンクがあると判断できます。

些細なこととはいえ、ユーザーにとって分かりやすいホームページを作りましょう。

CTAが目立つか

ホームページで「お問い合わせ」や「資料請求」などを積極的に受け付けたい場合は、CTAが目立っているかをチェックしてください。

今回のデザインカンプでは、このCTAのみ、青色のべた塗り背景になっていますよ。
また、それぞれアイコンが付いているので、内容が分かりやすいです。

CTAのデザインによって、「お問い合わせ」や「資料請求」などの獲得数が変わってくるので、しっかりとアピールできるようにしましょう。

CTAについては、以下の記事も参考にしてください。

フッターの見方

フッターは、全ページに共通して存在する最下部のパーツです。

ユーザーはフッターによって、各ページのコンテンツが「そこで終わりだ」ということを理解します。それと同時に、フッターから「次の行動」を検討するのです。

フッターに設置した各項目が整理されているかをチェックしましょう。

たとえば、フッターには以下のような項目が設置されることが多いです。

シンプルなデザインのフッターであっても、これら複数の情報がお互いに干渉せずに、うまく独立している必要があるのです。

フッターのデザイン事例は以下の記事で紹介しているので、参考にしてみてください。

デザイン全体の見方

※クリックで拡大できます

デザインカンプは、パーツごとに注視するだけでなく、全体像を見ておくことも重要です。

たとえば、配色（色の組み合わせ）について見てみましょう。

今回のデザインカンプでは、架空のコンサルティング会社『セカンド・ブレイン株式会社』のコーポレートカラーである「青色」がうまく使用されています。

ほかは「白」や「グレー」などの色を基調としており、全体的に落ち着いた印象ですよね。

配色によってホームページの印象は異なります。
コーポレートカラー使用の有無はもちろん、自社のイメージに合う配色かどうかをチェックしましょう。

また、「フォント（字形）」によってもホームぺージの印象は大きく異なります。

自社のイメージに合ってるかどうかチェックするのはもちろん、複数のフォントを使用している場合は、違和感がないかをチェックしましょう。

このように、デザインカンプを入念にチェックしておくことで、コーディングの前に改善点を発見できます。

ホームページ制作のプロジェクトが遅延したり、失敗したりするリスクを低減できるでしょう。

（補足）デバイスごとに最適化されているか

最後に、前述のとおり、デザインカンプはデバイスごとにチェックしましょう。

パソコン、タブレット、スマホなど、デバイスによって画面のサイズが異なり、見やすさや使いやすさは異なるためです。

とくに、スマホはパソコンと比べると、ホームページの画面領域が小さいですよね。

もし、パソコン用に作成されたデザインを、スマホでそのまま使用した場合、文字や画像が見づらい状態になるでしょう。

また、テキストやボタンが小さいと、リンクをタップ（クリック）しづらいです。
ユーザーがストレスを感じてしまうと、ホームページから離脱する原因につながってしまいます。

そのため、スマホ用のデザインカンプでは、リンクが指でタップできるサイズに設定されているかどうかを、確認しておきましょう。

なお、以下はデバイスごとのスクリーンサイズのシェアです。
デザインの良し悪しを判断するうえで、知っておくと役に立つでしょう。

（参考：Statcounter「Screen Resolution Stats JapanNov 2022 – Nov 2023」PC／TB／SP）

まとめ

この記事では、ホームぺージ制作の外注を検討している方向けに、デザインカンプの基礎知識と、見るときのポイントについて解説しました。

この記事を参考に、理想のホームぺージが作れるように、提出されたデザインカンプをチェックしてください。

それでは、素敵なホームページの完成を願っております。

以上、最後まで読んでいただき、ありがとうございました。

ホームページの開設を検討している方へ

※ 2024年10月時点、W3Techs調べ。

『エックスサーバー』と『XServerビジネス』の違いは、以下の記事で詳しく解説しています。

なお、当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！