ホームページ作成に必要なweb デザインカンプとは

ホームページの作成を専門業者に依頼する方もいるかと思いますが、そんなweb制作の現場でよく耳にする言葉のひとつに、「デザインカンプ」というものがあります。

制作会社から「カンプをお送りしますので確認しておいてください」などと言われても、サイト制作が初めての方の中には、何のことかよく分からない人もいるのではないでしょうか。

そこでwebデザインカンプについて紹介したいと思います。

目次

デザインカンプについて

ホームページ作成でよく聞く言葉に、webのデザインカンプがあります。

デザインカンプというのは「Design Comprehensive Layout」の略称で、日本語に訳すと「デザインの完成見本」ということになります。

そのままデザインカンプと呼ばれることもあれば、ただ単に「カンプ」や「モックアップ」などと呼ばれることもあるようです。

様々な呼び方がありますが、それら全てのワードは同じ意味になります。

デザインカンプという言葉はホームページ作成の現場でよく聞く言葉のひとつですが、何もweb制作に限ったことではありません。

デザイン現場ではよく使用されるワードであり、カンプはクライアントや他の制作者と制作物とのイメージを共有するために作成されています。

ホームページ作成においては、一般的には「ワイヤーフレーム」という設計図を作成し、その後にデザインカンプを作るのが一般的であり、そのように完成のイメージを明確にした後に、HTMLやCSSという構築作業に進んでいきます。

デザインカンプでは、完成品と大体見た目が同じサイトを作成することから、後の修正が多くなればなるほど制作にかかる負担も大きくなってくることになります。

一般的な制作業者であれば、デザインカンプに関する修正対応については１～２回程度、それ以上の対応になってくると別に費用がかかるところが多いです。

デザインカンプを行う目的

webのデザインカンプというのは、実際に制作物の完成のイメージを共有するために行うものです。

ホームページ作成の現場でおなじみの言葉ではありますが、何もホームページ制作に限ったことではありません。

何かしらのデザインを作成する際に、その前段階として依頼するユーザーの意見や要望などを伺うヒアリングを行います。

確かにヒアリングをしっかり行うことで、ユーザー側が希望する作品に仕上がる可能性が高まりますが、言葉だけではどうしても誤解が生じやすくなります。

特にホームページ作成の依頼に慣れている方は、当然のことだろうという思い込みもあることから、最も大切なことを伝え忘れてしまうこともあるのです。

そういう時に頼りになるのがデザインカンプであり、カンプを行うことでそのようなケアレスミスを防ぐことができます。

「実際に思っていた感じと違う」、「よりポジティブなイメージのホームページを希望していたので明るい配色にしたが、お客さんはやや落ち着きのある色味を希望していたようだ」、「実際は文字の大きなサイトを希望していた」、「ホームページの引き渡しの際にクライアントはあまり嬉しくなかったようだ」など、ヒアリング時とは少し違っていた、という声も少なくありません。

そういう時にデザインカンプは有用です。

視覚による情報を得ることで、ヒアリングの際に思いつかなかった要望も出てくるはずです。

そのように詳細な点までイメージの取り込みができていると、実際に制作する側も安心して作業に取り掛かれるのではないかと思います。

事前のヒアリングだけで作業を行うと、後の修正が難しくなることがあります。

例えば、HTMLといった実装作業が全て終了した後にデザインの要望などが出てくると、その修正を行うのは非常に困難を極めます。

デザインカンプを活用することで完成イメージを事前に共有することができ、後に修正作業をすることもなくなるでしょう。

デザインカンプ作成の方法

ホームページ作成で欠かすことができない作業のひとつがデザインカンプですが、実際に作業を行う際には以下の手順で行うことになります。

①実際に制作するwebサイトを決める

デザインカンプの最初は、まずは制作するWebサイトを決めることから始まります。

サイト制作にかかる初期の段階としてはワイヤーフレームの作成があり、これはサイトのメニューを始め、ヘッダーやコンテンツ、フッターといったホームページに欠かせないパーツの大まかなレイアウトを決める作業になります。

ワイヤーフレームは、ホームページ設計には欠かすことができない、非常に大切な工程と言ってもいいでしょう。

デザインカンプを行う際は、最初にワイヤーフレームを元にして色付けをして、その後にテキストや写真などを挿入していき、ホームページ全体の完成イメージを作り上げていきます。

デザインカンプ作成のポイントですが、webサイトの目的や狙いなどをしっかり決めることにあります。

企業によってホームページの内容は異なり、例えば商品を提供したり資料請求をしたり、アンケートサイトを作ったりするところもあるでしょう。

このように商品の購入や資料請求、アンケートなど、それぞれのコンバージョンポイントや目標とするターゲット層など、webサイトの目的によって作成すべきデザインカンプも変わってくることになります。

そのため最初の段階で、サイトの目的などをしっかり決めることが大切です。

ホームページ作成には様々な要素がありますが、その中でも特にサイトの幅や色はユーザビリティに直結するものですので、あらゆる環境下でもしっかり対応できるものを選択することをおすすめします。

当初に想定していたものより幅が狭すぎたり、文字の色が薄かったりすると、アクセスするユーザーの環境によってはとても閲覧しにくいサイトになってしまいます。

参考になるものとしては、世界中のユーザーのパソコンモニター幅があります。

出典は「Start Counter Global Stats」で、ここらで分かることは大半が1,000px以上のモニターで占めていることです。

これは一般的なユーザーが見やすい幅が1,000px前後、ということになります。

実際に大手企業が公開しているwebサイトを見ても、950～1000pxの間に横幅が収まっているのが分かるでしょう。

具体的には「スターバックス960px」、「楽天市場970px」、「AppleやFacebook980px」、「NHK990px」、「博報堂や講談社1000px」などです。

こちらは2016年のデータになりますので、現在はリニューアルして変わっている場合もありますが、それであっても950～1000pxの間に横幅が収まっているのではないかと思います。

ホームページの横幅は950～1000pxの間が多いようですが、その中でも960pxに注目してください。

960pxは、多くのwebサイトで採用されている横幅でもあるのです。

その理由として挙げられるのが割り切りやすい数字で、960pxの方がレイアウトしやすいのも大きな理由とされています。

ホームページの横幅で迷った時は、950～1000pxの間で選んでみるのもいいと思います。

横幅のサイズが決まったら、後はイメージに沿ってフォントやテーマカラーの選択、ロゴ作成など、実際に制作作業に入っていきましょう。

ホームページ作成の経験が浅い方は色々と悩むことが多いかもしれませんが、いざサイトを作り始めてみると、あれこれと色んなアイデアが浮かんできます。

ブランドイメージに合ったものや、これこそはと思えるようなデザインカンプを仕上げてください。

②参考になるサイトを見つける

デザインカンプを設計する際に、とても大きな役割を果たしてくれるのが人気の高いサイトであり、その中でもプロのwebデザイナーが仕上げるサイトは格別です。

クライアントが求める様々なニーズを取り入れており、アクセスしてくれるユーザーの欲求を満たしたコンテンツがふんだんに取り込まれたwebサイトは最高でしょう。

デザインカンプの作成はもちろん、それだけに限らず、これからwebデザイン構築をするための勉強としても参考になるはずです。

ここではテキストのサイズを始め、画像やサイト内の色彩などもホームページの印象を決める上で、とても重要な要素になります。

参考になりそうなwebサイトを見つける際は、パッと見の印象や見やすさなどを考慮しながら決めることが大切で、色が鮮やか過ぎないサイトにしておくと良いでしょう。

他にもコンバージョンを決める商品の購入や資料請求、問い合わせといったボタンなどについては暖色系を、そして全体的にはその補色である色を適度に盛り込むことも大切です。

ただ、実際にターゲットとしているユーザーによっても変わってきますので、その点の配慮も忘れないようにしましょう。

参考になるサイトは色々ありますが、これからデザインカンプをする人におすすめできるサイトは以下のものです。

まずは「I/O 3000」になり、こちらのサイトは更新頻度の高いホームページとして知られていて、たくさんのユーザーがアクセスしています。

全体のサイトデザインが非常にシンプルになっているのが特徴と言えるでしょう。

スクロールによっても様々な種類のデザインを一度に閲覧できますので、気になる方は確認しておきましょう。

他のサイトと比べて情報の鮮度が高いのも特徴になり、アクセスするだけでいつも最新のトレンドの傾向を把握できますので、デザインカンプの作成にも一役買ってくるのではないかと思います。

次は「MUUUUU.ORG」です。

MUUUUU.ORGは、サイト全体が縦長サイトになったwebギャラリーサイトです。

色やデザインについては、別にwebサイトの検索が可能であり、加えて業界やサイトの種類による検索もできるのが嬉しい点と言えるでしょう。

サイトのデザインや機能などは業界によって大きく変わってきますので、どれだけ優れたサイトであっても他の業界のものはあまり参考にならないことも少なくありませんが、こちらのサイトは自分の案件にピッタリのサイトを探しやすいと評判になっています。

③Photoshopのガイド機能

目標とするwebサイトの目的や狙いなどを決めることができ、参考になるホームページからの情報収集が終わったら、次はいよいよデザインカンプの作成です。

デザインカンプの作成は、一般的には画像編集に優れているPhotoshopを用いるケースが多くなるかと思われます。

ホームページを設計する際には、事前にパーツのサイズをきちんと測定して、パーツ間同士の位置がズレることがないように配慮しておきましょう。

ホームページの表示はわずか１ピクセルズレただけでも、最終的なレイアウトが大きく変わってくる可能性があるからです。

Photoshopを使用する際には、ロゴやグローバルナビなどの大きさを参考にして、ガイドを引くことをおすすめします。

Photoshopにはガイド表示機能もありますが、それよりも定規機能を使った方が早くガイドを引けますので、次回に使用する際は参考にしておきましょう。

④パーツ作成

デザインカンプにはパーツの作成も大切ですが、実際にパーツを制作する段階になったら、ギャラリーサイトを参考にしてみるといいでしょう。

最近の傾向を見ると、立体的なデザインと比べて、よりフラットなデザインが好まれる傾向にあるようです。

またパーツ配置のためのレイアウトについては、「カラム・レイアウト」が用いられることがあります。

一般的にはメニューやコンテンツを横に並べて作る２カラム・レイアウトが主流になっていますが、１カラムのレイアウトも根強い人気を誇っています。

１カラム・レイアウトというのは、複数の要素を並列することなく、上から下に向かって並べる縦長のスタイルです。

企業の紹介ページよりも、商品紹介などのページで使用されるケースが多いです。

まとめ

ホームページ作成で必要になってくる作業が、webのデザインカンプです。

デザインカンプは「Design Comprehensive Layout」の略称であり、デザインの完成見本という意味を持つ、非常に大切な過程と言えるでしょう。

デザインカンプは手順通りに行うことが大事になり、コツを掴めばスムーズに進めるようになっていきます。

参考になるサイトもありますので、是非一度アクセスして確認しておきましょう。