Webデザインのデザインカンプとは？デザインカンプの作り方のポイント

【1】制作するWebサイトを決める

Webサイト制作の初期段階として、ワイヤーフレーム作成があります。これはヘッダーやメニュー、コンテンツにフッターなどWebサイトのパーツの大まかなレイアウトを決める作業のことであり、Webサイト設計には欠かせない工程です。デザインカンプは、このワイヤーフレームを元に色をつけ、画像やテキストを挿入して、Webサイトの完成イメージとなるものを指します。

デザインカンプを作るポイントは、Webサイトの目的や狙いを決めることです。商品購入や資料請求などのコンバージョンポイント、狙うターゲット層といったWebサイトの目的によって作るべきデザインカンプも変わるため、最初の段階でしっかり決めておきましょう。

就職や転職活動向けにデザインカンプを作成する場合は、自分のこだわりを全面に押し出したり凝ったデザインにしたりするよりも、オーソドックスなデザインがおすすめです。

【2】参考サイトを見つける

デザイン・レイアウトを設計する際に大きな役割を果たすのが、プロのWebデザイナーが制作したWebサイトです。クライアントのニーズを取り入れ、ユーザーの欲求を満たすコンテンツが盛り込まれたWebサイトは、デザインカンプの作成に限らずWebデザインを勉強する上でとても参考になります。

画像や文字のサイズの他、サイト内の色彩もWebサイトの印象を決める重要な要素です。参考とするWebサイトは、見やすさや印象を考慮して、色が鮮やか過ぎないWebサイトを選びましょう。

また、コンバージョンを決める商品購入や資料請求、問い合わせのボタンなどには暖色系を、全体にはその補色となる色を適度に盛り込んだWebサイトを選ぶこともポイントです。 ただし、ターゲットとするユーザーによっても参考にすべきWebサイトは異なることも忘れてはなりません。

【3】ガイドを引く

Webサイトの目的や狙いを決定し、参考となるWebサイトから情報を収集した後は、いよいよデザインカンプの作成に入ります。一般的に、デザインカンプの作成には画像編集に長けたPhotoshopを使用します。

Webサイト設計時は、パーツのサイズをしっかりと測り、パーツ同士の位置がずれないように気をつけてください。Webサイトの表示はたとえ1ピクセルずれただけでもレイアウトが大きく崩れる可能性があります。ロゴやグローバルナビの大きさを参考にガイドを引きましょう。なお、Photoshopのガイド表示機能を使うよりも定規機能を利用した方が早くガイドを引くことができますので、ぜひ試してみてください。

【4】パーツの作成

実際にパーツを制作する際は、ギャラリーサイトを参考にしましょう。最近では立体的なデザインより、フラットなデザインが好まれる傾向にあります。

Webサイトの質感を決めるアンチエイリアスは、HTMLやCSSで表現できるパーツに関しては「アンチエイリアスなし」に、画像をボタンやナビゲーションといったパーツに使用する場合は「アンチエイリアスあり」にするとパーツの境界線が滑らかになり、Webサイト全体になじみやすいです。

パーツを配置するレイアウトとしては、カラム・レイアウトが採用されることがあります。メニューやコンテンツを横に並べる2カラム・レイアウトが主流ですが、複数の要素を並列せずに上から下に向かって並べる1カラム・レイアウトも人気です。カラム・レイアウトの詳細については、別記事「ホームページのデザインはどう作る？Webサイトのレイアウトパターン」をご覧ください。

おわりに

今回はWebサイトのイメージを可視化するデザインカンプの作り方をご紹介しました。独学でWebサイト制作を学ぶ場合は、1つのWebサイトを完成させるまでに非常に時間がかかります。そのため、効率良くWebデザインを学びたい場合は、スクールに通うことがおすすめです。Webデザインのトレンドを肌で感じられる点も、Webを学べるスクールに通うメリットといえるでしょう。

インターネット・アカデミーでは、現役のWebデザイナーによる直接指導を受けることができます。受講を検討中の方は、ぜひ無料体験レッスンへご参加ください。

相談してコースを選びたい方はカウンセラーに無料で相談

※無理な勧誘は一切ありません

無料で相談してみる

• 

  10分でわかる
  無料動画を
  見る学べることや卒業生事例をご紹介

• 

  7日間の
  無料体験を
  試す自分にできる？という疑問を解消