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

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

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

 

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

 

デザインカンプとは

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

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

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

 

デザインカンプの目的

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

 

[PR] Webデザインで副業する学習方法を動画で公開中

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

 

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

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