Webデザインの世界では「デザインカンプが大事」と言われています。
しかしいざデザインカンプを作ろうと思っても、何をどこから始めればいいかわからないですよね。
本記事ではPhotoshopでデザインカンプを作る方法を解説します。
Photoshopを使うことで誰でも簡単にデザインカンプが作れるため、Webデザイン初心者の方にはおすすめです。
デザインカンプはWebサイトの完成度に関わるので、紹介している方法を参考にして質の高いデザインカンプを作ってみてください。
Webデザインのデザインカンプとは？
まずはデザインカンプについて解説します。
デザインカンプを作ると、Webデザインの完成度は大きく変わります。
デザインカンプを理解したうえで、Photoshopの使い方を学んでいきましょう。
デザインカンプとは「完成見本」
デザインカンプは、「design comprehensive layout」が正式名称です。
Webデザインの世界では、「カンプ」や「モックアップ」と呼ばれていて、Webデザインの完成がイメージできる設計案や見本のことです。
デザインカンプでイメージを共有【Webデザインの完成図】
デザインカンプは、クライアントとクリエイターでイメージを共有するのが目的です。
Webデザインを作る前にヒアリングのみで作り出してしまうと、予想とは違う作品になる可能性があります。
それでは再度作り直す必要があり、手間も時間もかかってしまいます。
クライアントとクリエイターの間に、イメージの差がないか確認するためにもデザインカンプを作成することは必要です。
Photoshopで作るデザインカンプ5つの手順
Photoshopでデザインカンプを作るときには5つの手順があります。
- Photoshopで新規作成
- ガイドを作成して下準備をする
- メインビジュアルを作成
- コンテンツエリアを作成
- Photoshopでフッターをデザイン
Webデザインを作成する際は参考にしてみてください。
手順1.Photoshopで新規作成
まずはPhotoshopを開き、新規作成をクリックします。
Photoshopのメニューバーから「ファイル」を選択し、「新規」から「新規ドキュメント」を開くことで作成できます。
幅や高さはデザインによって変わるため、指示書やクライアントの要望に沿って作成しましょう。
手順2.ガイドを作成して下準備をする（Photoshop）
ガイドを使用して、デザインカンプを作成する下準備をします。
ガイドとは、Photoshopのアートボードに引く補助線のことです。
アートボードとは、デザインを作成するスペースです。
ガイド機能はWebサイトの幅と、アートボードの中央に準備しましょう。
ガイドの作成は以下のとおりです。
- メニューバー「表示」→「新規ガイドレイアウトを作成」をクリック
- プリセットと設定
- ターゲットを「選択したアートボード」を選ぶ
- 「列」にチェックを入れる
- 数や幅、間隔を設定
- 列を中央に揃えてクリックしOKボタンを押す
最後にガイドを作成し、ガイドロックをしましょう。
ガイドロックをしないとガイド線が動いてしまうためです。
画面上のメニューバーの「表示」→「ガイドロック」を選択するとできます。
手順3.メインビジュアルを作成（Photoshop）
メインビジュアルとは、Webデザインの中で最も目立つ部分です。
会社や商品の画像・動画が配置されます。
Windowsであればエクスプローラー、MacであればFinderに入っている画像を、Photoshopのアートボードにドラッグアンドドロップすると画像を取り込みます。
手順4.コンテンツエリアを作成
コンテンツエリアには、商品やサービスの説明を記入します。
文字エリアの幅は「横書き文字ツール」で決め、画像を挿入する場合は手順3で紹介した方法を実行します。
文字のエリア幅は画像幅と一緒にしましょう。
手順5.Photoshopでフッターをデザイン
フッターとは、Webサイトの下の部分。
フッターには、お問い合わせやWebサイトのカテゴリーなどを配置します。
フッターのリンクエリアを4列に分ける場合は、レイアウトで数値を算出し、リンクエリアを設置できれば完成です。
質の高いデザインカンプを作る5つのアドバイス
質の高いデザインカンプとは、完成イメージが共有できる設計案です。
初心者がデザインカンプを作成する際のアドバイスとして、以下5つあります。
- ワイヤーフレームを細かく作る
- レイヤーを整理整頓しておく
- 参考サイトを意識する
- コーディングを意識する
- むずかしい部分は最後にする
デザインカンプを作る際に、役立ててみてください。
ポイント1.ワイヤーフレームは細かく作る【Webデザインで大事なこと】
ワイヤーフレームとは、デザインカンプをもとに作成するデザインの下書きのようなものです。
ワイヤーフレームを細かく設定しておくことで、デザインカンプの完成度が上がります。
デザインカンプの完成度が上がれば上がるほど、クライアントとのイメージすり合わせに便利です。
意識するポイントは以下のとおりです。
- Webサイトのレイアウトを明確にする
- テキストエリアの文章は具体的に書く
- ワイヤフレームにコメントを残しておく
- SNSで表示されるサイズを意識して作成
情報が曖昧な箇所に関しては、クライアントやクリエイターチームとアイデアの意見交換をしましょう。
意見を共有しないで進めてしまうと、完成したときにイメージと違う作品になってしまうためです。
ポイント2.レイヤーを整理整頓しておく
レイヤーとは透明のフィルムのようなもので、Photoshopはレイヤーを重ねてひとつの画像やテキストを完成させていきます。
レイヤーを整理しないと、どこに画像やテキストがあるのかわからなくなります。
クリエイターでチームを組んでいる場合は他の誰かもデータを扱うことがあるため、いつでも見やすいように整理しておきましょう。
基本的なことですが、作業遅れの原因にもなってしまうため大事なことです。
ポイント3.参考サイトを意識する【デザインカンプ基礎】
デザインカンプを作成するときは、参考サイトを準備しましょう。
まずは、モチーフにするデザインを複数用意します。
クライアントが選びやすいだけでなく、イメージの共有もしやすいため修正の手間もグッと減ります。
デザインのイメージは参考サイトで決まるため、重要な作業です。
そのため、参考サイトを探す時間は多く取ることをおすすめします。
ポイント4.コーディングを意識する【完成デザインをイメージ】
Webサイトを作成する際、コーディングを行う場合は数値を意識しておきましょう。
コーディングとは、Webサイトを作成する際にHTMLやCSSなどのプログラミング言語を使って、Webサイトを作成することです。
HTMLやCSSを学んでおくとデザインカンプを作成する際に、Webサイトのどの部分を数値化しておけばいいのか、配色は統一した方がいいのかなどが意識できます。
ポイント5.むずかしい部分は最後にする
デザインカンプを作成する際はむずかしい部分は最後にして、わかりやすいところから作っていきましょう。
Webデザインを作るなかで、「ここはもう少しアイデアをつめたい」と考える場所が出てきます。
考えすぎるとやる気がなくなってしまうため、モチベーションを継続するためにもむずかしいところは最後に作成するのをおすすめします。
Photoshopでデザインするときに参考になるサイト3選
「Photoshopでどのようにデザインカンプのスキルを磨けばいいのか」と考えている方もいるのではないでしょうか。
そこでPhotoshopの使い方が学べるサイトを3つ紹介します。
コーディングからデザインなどPhotoshopの全体像がわかるサイトばかりのため、参考にしてみてください。
1.WebクリエイターBox【Photoshopの使い方が丸わかり】
引用：クリエイターBox
「WebクリエイターBox」は、Web系の情報を幅広く学べるサイトです。
書いている人は大人気著書「一冊ですべて身につくHTML＆CSSとWebデザイン入門講座」の著者であるManaさんです。
Photoshopの基本操作はもちろん、Webデザインを作成する際に必要な細かいテクニックまで勉強できます。
「全体的にPhotoshopの使い方を学びたい」と考えている方にはおすすめのサイトです。
2.LIGブログ【Photoshopで効率化】
引用：LIGブログ
「LIGブログ」とはWeb制作会社LIGが運営するブログ記事です。
- 効率化できるテクニック
- 初期設定
- プラグインの設定
以上のようなPhotoshopの便利な機能が学べます。
はじめは目の前の作業で手一杯になってしまうかもしれませんが、Photoshopの使い方に慣れてきたときに読んでみるといいでしょう。
3.allWeb【コーディングを意識したデザイン】
引用：allWeb blog
コーディングを意識したデザインを学びたい方は「allWebblog」がおすすめです。
「1pxのズレはコーディングできないデザイン」など厳しい内容の記事もありますが、コンテンツの質は高く、画像付きで細かく説明しています。
デメリットは、投稿されている時期が古いことです。
allWebblogで情報収集する際は、複数のサイトと合わせて確認することをおすすめします。
本気でプロのWebデザイナーを目指している方は読んでみてはどうでしょうか。
Photoshopを使ってデザインカンプを作ろう！
Photoshopでデザインカンプを作る方法や参考になるWebサイトを解説しました。
デザインカンプの完成度が高いことで、完成するWebサイトの質も上がり素敵なデザインができます。
ChapterTwoのWebデザインコースではPhotoshopを学ぶことができるため、「Photoshopでデザインカンプを作りたい」と考えている方はぜひご利用ください
