作成方法も紹介!デザインカンプとは【初心者向け】

初心者向けにデザインカンプとは何なのか、なぜ必要なのか実際に作成しながら解説しています。Webサイト制作をする上で完成形のイメージを共有するために必要な知識となります。Webディレクターは特に知っておきたいでしょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

デザインカンプとは何なのか、実際に作成しながら解説しています。

デザインカンプは、チームでWeb制作をする上では欠かせないでしょう。自分がデザインカンプを作成しなくても細かい修正などできておくと良いでしょう。

 

なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。

 

デザインカンプとは

デザインカンプはワイヤーフレーム(レイアウト)に具体的な色や画像の指定を行ったもので、モックアップとも呼ばれます。

ワイヤーフレームは要素の位置関係を指定したものです。

dc_p_1

これに具体的な色や画像を設定し、完成品の模型として仕上げたものがデザインカンプとなります。

dc_p_2

 

デザインカンプの目的

ワイヤーフレームが各要素の配置を決定するものであるのに対して、デザインとしての完成図をイメージする目的で作成されます。

 

[PR] Webデザインで挫折しない学習方法を動画で公開中

実際にデザインカンプを作成してみる

デザインカンプの作成にはオンライン上のデザインツールや、Photoshop・Sketchなどのソフトを使用します。
今回はAdobe Photoshop CCとそれに付属している「デザインスペース」機能を使用して簡単なデザインカンプを作成してみます。

Photoshop CCを起動し、上メニューの「ウィンドウ」から「デザインスペース(プレビュー)」を選択します。

dc_p_3

デザインスペースのモードに切り替わりました。

dc_p_4

右下の「テンプレート」から作成する形式を選択します。(今回はWebとしています)

dc_p_5

各形式に応じた画面サイズが表示されます。

dc_p_6

まず全体の配置を決めるワイヤーフレームを用意します。「長方形ツール」を選択すると長方形を画面内に作成することができます。

dc_p_7

作成した各長方形に色を設定します。また、この時要素の不透明度を指定することも可能です。

dc_p_8

図形を移動する際にはスマートガイドが自動で表示されるため、各要素の位置関係を確認しながら均等な配置が可能です。

dc_p_9

ワイヤーフレームが完成したら、次にこれに色や画像を配置してデザインカンプを作成していきます。

デザインスペースと通常のPhotoshopのモードは、いつでも切り替えることができます。
「ウィンドウ」「標準のPhotoshopに戻る」を選択すると通常モードになります。

dc_p_10

使用したい画像を直接作業画面内にドラッグ&ドロップします。

dc_p_11

大きさと位置を調整し、Enterキーを押して決定します。

dc_p_12

画像のレイヤーを配置したい長方形レイヤーの上に配置し、画像レイヤーを選択した状態でレイヤーウィンドウ右上のメニューをクリックします。(この時、長方形の部分は透明以外の色で塗りつぶしておきます)

dc_p_17

メニューから「クリッピングマスクを作成」を選択します。

dc_p_13

これで指定した部分にのみ画像が反映されました。

dc_p_14

ここではテキストを指定の範囲内に配置する際に、Photoshop通常モード「長方形ツール」のオプションで「パス」を選択して範囲を設定し、テキストツールでその中に入力しています。

モードの切り替えを行うことで、作業の内容により自分のやりやすい環境でデザインカンプを作成することが可能です。

dc_p_15

作成したものはPSDファイル以外にも「ファイル」「別名で保存」からPDFなどの各種形式で保存することができます。

dc_p_16

 

以上、デザインカンプとはどういったもので何のために作成するのか、実際に作りながら紹介してきました。

[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。