作成方法も紹介！デザインカンプとは【初心者向け】
初心者向けにデザインカンプとは何なのか、なぜ必要なのか実際に作成しながら解説しています。Webサイト制作をする上で完成形のイメージを共有するために必要な知識となります。Webディレクターは特に知っておきたいでしょう。
テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査
デザインカンプとは何なのか、実際に作成しながら解説しています。
デザインカンプは、チームでWeb制作をする上では欠かせないでしょう。自分がデザインカンプを作成しなくても細かい修正などできておくと良いでしょう。
なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。
デザインカンプとは
デザインカンプはワイヤーフレーム(レイアウト)に具体的な色や画像の指定を行ったもので、モックアップとも呼ばれます。
ワイヤーフレームは要素の位置関係を指定したものです。
これに具体的な色や画像を設定し、完成品の模型として仕上げたものがデザインカンプとなります。
デザインカンプの目的
ワイヤーフレームが各要素の配置を決定するものであるのに対して、デザインとしての完成図をイメージする目的で作成されます。
実際にデザインカンプを作成してみる
デザインカンプの作成にはオンライン上のデザインツールや、Photoshop・Sketchなどのソフトを使用します。
今回はAdobe Photoshop CCとそれに付属している「デザインスペース」機能を使用して簡単なデザインカンプを作成してみます。
Photoshop CCを起動し、上メニューの「ウィンドウ」から「デザインスペース(プレビュー)」を選択します。
デザインスペースのモードに切り替わりました。
右下の「テンプレート」から作成する形式を選択します。(今回はWebとしています)
各形式に応じた画面サイズが表示されます。
まず全体の配置を決めるワイヤーフレームを用意します。「長方形ツール」を選択すると長方形を画面内に作成することができます。
作成した各長方形に色を設定します。また、この時要素の不透明度を指定することも可能です。
図形を移動する際にはスマートガイドが自動で表示されるため、各要素の位置関係を確認しながら均等な配置が可能です。
ワイヤーフレームが完成したら、次にこれに色や画像を配置してデザインカンプを作成していきます。
デザインスペースと通常のPhotoshopのモードは、いつでも切り替えることができます。
「ウィンドウ」→「標準のPhotoshopに戻る」を選択すると通常モードになります。
使用したい画像を直接作業画面内にドラッグ＆ドロップします。
大きさと位置を調整し、Enterキーを押して決定します。
画像のレイヤーを配置したい長方形レイヤーの上に配置し、画像レイヤーを選択した状態でレイヤーウィンドウ右上のメニューをクリックします。(この時、長方形の部分は透明以外の色で塗りつぶしておきます)
メニューから「クリッピングマスクを作成」を選択します。
これで指定した部分にのみ画像が反映されました。
ここではテキストを指定の範囲内に配置する際に、Photoshop通常モード「長方形ツール」のオプションで「パス」を選択して範囲を設定し、テキストツールでその中に入力しています。
モードの切り替えを行うことで、作業の内容により自分のやりやすい環境でデザインカンプを作成することが可能です。
作成したものはPSDファイル以外にも「ファイル」→「別名で保存」からPDFなどの各種形式で保存することができます。
以上、デザインカンプとはどういったもので何のために作成するのか、実際に作りながら紹介してきました。
[お知らせ]TechAcademyでは初心者でも最短4週間でオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
