Webデザインカンプを1から作るための説明書
見出し画像

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

こばやす|Webデザイナー

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

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

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

こんな人におすすめ
●Progateをやってみたけどオリジナルでホームページデザインをした事が無い
●現場で書かれている仕様書ってどんな感じなのか見てみたい
●他サイトの見よう見まねでカンプを作った事があるけど、何に注意して作っていいか実際の所良く分かっていない
注意事項
●仕様書は私が見てきた中での一例です。
●作り方も一例です。慣れてきたら自分なりにやりやすいような制作方法を考えていきましょう。

ご購入者様の声

完成図

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

こばやす農園PCカンプ

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

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

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

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

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

関連記事紹介

この続きをみるには

この続き: 7,243文字 / 画像10枚

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

こばやす|Webデザイナー

1,000円

この記事が気に入ったら、サポートをしてみませんか?
気軽にクリエイターの支援と、記事のオススメができます!
こばやす|Webデザイナー

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

ありがとうございます!励みになります!
こばやす|Webデザイナー
デザイン初学者への学習ヒントと参考書では教えてくれない制作現場の知識を書いてます|IT企業インハウス|コーディング・ディレクター・元採用担当|初心者の困ったを解決する記事投稿中。【ブログ https://kobayas.net/