見出し画像

Webデザインカンプを1から作るための説明書

こばやす｜現場のWebデザイナー

こんにちは、こばやす（@kobayas_s）です。
Webサイト制作の勉強しているけどコーディングばかりしていて、そう言えばWebサイトのカンプ（モックアップの事。1枚の画像でWebサイトのデザインを表現。のちにコーディングの材料となる）の作り方ちゃんと知らないや、とかありませんか？
twitterで調査してみたところかなり方がそう思っているようです。

そんな方のために、見本入りで出来るだけ詳しく解説記事を書いてみました。この記事を読めば、初心者でもオリジナルでデザインカンプを作るための基礎が身につきます。

また、Webデザインのお題としても利用できるようサイト構成資料もご用意しました。記事を読んだ後も、ご自身で新たにデザインを起こす勉強をする事も出来ます！
自分で作った完成デザインはSNSなどで公開、ポートフォリオに載せてもOKです。ただし購入者限定の情報もあるので、仕様書の内容や作り方詳細はSNSやブログなどで公開しないようにしてください。
「お題の農家通販サイト」などタイトルを公開するのはOKです。
ポートフォリオに載せる場合は色んな人が同じお題で練習しているので、デザインが似ないよう自分オリジナルに改造する事をお勧めしています。

こんな人におすすめ
●Progateをやってみたけどオリジナルでホームページデザインをした事が無い
●現場で書かれている仕様書ってどんな感じなのか見てみたい
●他サイトの見よう見まねでカンプを作った事があるけど、何に注意して作っていいか実際の所良く分かっていない

注意事項
●仕様書は私が見てきた中での一例です。
●作り方も一例です。慣れてきたら自分なりにやりやすいような制作方法を考えていきましょう。

作ったサイトをコーディングしてネットに公開する時は、ダミーサイトだという事を分かるようにしてください。
検索に上がってきてしまうと、本当に存在するサイトだと勘違いしてしまう人もいます。

【勘違いされないために出来る事】
・個別のドメインを取得して公開しない（自分のポートフォリオサイトのドメイン内で完結させる）
・noindexを入れて検索に上がらないようにする（具体的な表記方法）
・タイトルタグに「架空サイト」と入れる
・ファーストビューに架空である事を明記する
・お問い合わせフォームを付ける場合は送信させない（ダミーサイトの注意表記を入れる）
・住所、電話番号は使える番号に書き換えない
・Googleマップはダミー画像にする


ご購入者様の声

完成図

この記事を読んで実際にどのようなデザインが出来るのかというサンプルはこちらです。

こばやす農園PCカンプ

※Photoshopでの作り方を記載していますが、XDで作られる方もデザインの考え方やレイヤー整理の仕方は同じなので参考になるはずです。
※レスポンシブのカンプ作成内容も有料記事内に含まれています。
※下層ページのデザインは今回説明に必要ないので割愛します。

有料記事の同梱データ内容

１.  Webサイト構成内容（お題の仕様書。TOPのみ。記事内にテキスト化）
２.  PC版デザインカンプTOPページPSDデータ（Photoshop2020で作成）
３.  スマホ版デザインカンプTOPページPSDデータ（↑同）

※著作権上、PSDデータ内には素材画像やイラストデータは含まれておりません。
※旧バージョンによってデータが上手く表示できない部分があるかもしれません。最新版でのご確認をお勧めします。

PSDデータを入れたのは、どんな風にデータを整理しているか確認できるようにするためです。これはあくまで私が考えている整理方法ですので、仕事でデザインを作る時に会社のガイドラインがあればそちらに従ってください。

関連記事紹介

ここから先は

5,971字 / 10画像 / 2ファイル

¥ 1,000

記事制作のエネルギーにします！