Webサイト制作のデザインカンプ。役割や作り方のポイント

グローイングスタイルのWebデザイン制作では、まずヒアリングを行います。その後デザインカンプとしてラフ案をご提出しています。このデザインカンプでお客様とイメージのすり合わせを行います。
ここでは「デザインカンプ」についてご紹介します。

デザインカンプとは？

デザインカンプとはデザインの仕上がり見本のことです。
全体的なデザインのイメージを見ていただくもので、この段階では、テキストや画像はダミーの場合が多いです。

デザインカンプと同じように使われている「モックアップ」という言葉があります。完成模型を意味し、こちらも完成イメージを指します。

制作のはじめに耳にすることが多い言葉に「ワイヤーフレーム」があります。こちらはサイトの目的に合わせて必要なパーツをどのように配置するかを表した、サイトの骨組みになります。このワイヤーフレーム制作はデザインの前段階に行います。

デザインカンプの役割

デザインカンプにはこのような役割があります。

• 目的やイメージのすり合わせ、共有
• コーディングの効率化

デザインカンプをご確認いただくことで、早い段階でお客様とのデザインの方向性に相違がないかを確認し、調整できます。また、何となくイメージしていたものが形になり「もっとこうしたい」「この内容も追加したい」などのご要望が生まれることもあります。

作業の効率化、納期の短縮にもつながります。テキストや画像差し替えなら問題ありませんが、レイアウト修正の場合、カンプの段階とコーディング後では修正の工数が大きく異なります。

また、デザインカンプはコーディングの設計図となります。UIデザイナーやコーダー、エンジニアなど各部門でイメージを共有することもでき作業を円滑化します。

デザインカンプの制作手順

1．Webサイトの目的・設計を決める

ヒアリングにより、まずはWebサイトの目的を明確にします。
Webサイトにどのような効果を求めていますか？目的の一例はこちらです。

• ・ブランディング
• ・採用
• ・お問い合わせ、資料請求
• ・LP、売り上げ向上　など

Webサイトの目的のためにはどのようなコンテンツが必要か、ターゲットユーザーは何を求めているかをお伺いします。その内容により、どのようなデザインが適しているかが見えてきますね。

2．競合サイト、参考サイト調査・分析

「オシャレに」「かっこよく」などの感覚は人によって異なるので、参考サイトやデザインがある場合はURLなどをお知らせください。イメージの共有がスムーズになります。

同じターゲットユーザー層を持つ競合の分析も重要です。必要な機能や、ユーザーの好み、操作性などを参考にします。また、表現にオリジナリティを加え、競合との差別化を図ります。

3．サイトマップ、ワイヤーフレーム作成

まずは、サイト全体をどのような構成にするかを決めてサイトマップを作成します。必要な下層ページを把握した状態で、サイトの骨組みであるワイヤーフレームを作成します。
こちらはワイヤーフレームのポイントです。

• ・必要な要素のピックアップ、優先度の決定
• ・どのような配置が伝わりやすいか。情報の流れ、レイアウト
• ・マルチカラムにするか、シングルカラムにするか、サイドバーが必要か　など

また、配置する要素の一例はこちらです。

• ・ファーストビュー
• ・ナビゲーション
• ・サービスの内容やベネフィット
• ・クチコミ
• ・購入や契約の流れ
• ・コンバージョンへの導線　など

ここでは次の工程に影響しないように、装飾や彩色は行いません。

ユーザーの行動をイメージして配置していきます。数パターン作成し、情報が伝わりやすくユーザビリティの高いワイヤーフレームを追求します。

4．デザイン（装飾・彩色）

各要素に統一感がでるようデザインしていきます。

原稿をいただいていない場合、フリー素材を使用していますが、フリー素材よりも、オリジナルの写真やイラストを使用した方が、ユーザーからの信頼は上がる傾向にあります。

デザインカンプのコンテナサイズについて

よく使用されているパソコンの画面サイズは「1920×1080」と言われます。また、コンテンツ領域のコンテナサイズは800〜1300pxが多いようです。弊社でもこちらを目安にデザインカンプを作成しています。

デザインカンプの制作ツール

デザインカンプ制作で良く使用されているツールをご紹介します。

Adobe Photoshop

細かいデザインや画像加工に優れ、幅広い表現が可能です。フォトプランはIllustratorと比べると低価格で利用ができ、個人でも使いやすいと思われます。

Adobe Illustrator

ベクトル画像のため、拡大しても画質が変わりません。ロゴやチラシ、ポスターなどにもよく使用されています。軽量なsvg形式の画像も書き出しやすいです。

Photoshop、Illustratorはともに人気の高いAdobeのグラフィックデザインソフトです。それぞれの強みを組み合わせて使用しているデザイナーが多いです。

Adobe XD

Figma

インストールせずにブラウザ上でデザインをすることができるUIデザインツールです。Adobe XDと同様、「プロトタイプ」作成や共同作業が可能です。（スタータープランは無料。）