0120-746-555お電話での無料体験レッスン予約・ご質問はこちら(受付時間 10時‐21時)
無料体験レッスン
IT業界まるわかりガイド

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

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

IT業界まるわかりガイドは、日本初Web専門スクールのインターネット・アカデミーが運営する業界情報メディアです。最新の業界情報を、初心者にも分かりやすくご紹介しています。

Webサイト制作の善し悪しを決める重要なポイントが「デザインカンプ」です。デザインカンプは、制作現場で主にクライアントに提示するデザイン案や完成見本として作成されることが多く、Webデザイナーとしてのスキルを判断する1つの判断材料でもあります。 今回は、Webデザインの勉強用にデザインカンプを作るときの作り方とポイントをご紹介します。

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

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

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

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

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

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

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

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

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

【3】ガイドを引く

【3】ガイドを引く

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

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

【4】パーツの作成

【4】パーツの作成

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

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

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

[PR] Webデザイナーの仕事の魅力とは? 先輩Webデザイナーに聞いた仕事の魅力

おわりに

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

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

IT企業研修

Webデザインを学びたい方へまずはお気軽にお問い合わせください

無料体験レッスン

無料体験レッスン実施中

業界のトレンドや、最先端のWeb技術についてご紹介をする『無料体験レッスン』をインターネット・アカデミーでは毎日開催しています。インターネット・アカデミーは日本初そして唯一のIT・Web専門スクールなので、その専門的なノウハウを活かした転身についてのご相談も承っています。ぜひお気軽にご参加ください。

このページの上へ

お電話での無料体験レッスンのお申込み・お問い合わせはこちら(受付時間10時-21時)