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

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

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

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

IT研修・ITスクールのインターネット・アカデミー

目次

【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サイトのレイアウトパターン」をご覧ください。

おわりに

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

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

Webデザイン・プログラミングスクール インターネット・アカデミー

Web業界への就転職・キャリアアップを成功させたいと考えている方へ
日本初そして日本唯一のWeb専門スクールインターネット・アカデミー

自分にぴったりのコースが見つかる

インターネット・アカデミーでは、Web業界を目指すあらゆる方にお応えすべく、多彩なコースをご用意しています。

Webデザインを学びたい方

プログラミングを学びたい方

自分のペースとスタイルで学べる

毎回好きな受講形式を選んで学習することができるので、働きながらじっくり通いたい方も短期間での就職を目指す方も自分の都合に合わせて、スケジュールを組むことができます。

  • ライブ授業

    現役のプロインストラクター
    と仲間と学ぶメリット

    ライブ授業
  • マンツーマン授業

    インストラクターと
    1対1という贅沢

    マンツーマン授業
  • オンデマンド授業

    いつでも学びたいことを
    学べる

    オンデマンド授業

自分に適した学習方法を探す

インターネット・アカデミーでは、無料体験レッスンを毎日開催しています。デザインやプログラミングの体験ができるのはもちろん、実際の授業に参加したり、就職や転職のご相談、通学スケジュールのご相談なども承っております。

  • ご要望をお伺い

    ご要望をお伺い

    まずはお客様のご要望をお伺いし、お一人おひとりの目的や悩みに最適な内容にカスタマイズ。お客様専用の内容で当日ご案内いたします。

  • カウンセリング

    カウンセリング

    就職や転職、在宅で働きたいなど、お客様の希望を叶えるために専任のスタッフが最適な学習プランをご提案。現在の仕事のご相談なども承ります。

  • 体験レッスン

    体験レッスン

    「自分に向いている分野は?」「自分にできる?」そんな疑問を解決するレッスンを無料で体験。デザインもプログラミングもお試しいただけます。

無料体験レッスン・個別相談のご予約

当日ご希望の方やお急ぎの方は、フリーダイヤルにてご予約いただけます。

0120-746-555 フリーダイヤル受付時間(平日・土日) 10時-21時 オンライン予約

IT研修・人材育成のご相談を無料で承っております
法人専用社員研修、内定者・新人研修のご予約

インターネット・アカデミーでは、
あらゆるニーズに合わせた研修カリキュラムを取り揃えています。

「自社に最適な研修プランを相談したい」「研修費用の相談をしたい」「助成金を申請したい」など、お電話またはお問い合わせフォームよりお気軽にご連絡ください。

03-3341-3781 受付時間(平日・土日) 10時-21時 法人専用 お問い合わせフォーム