こんにちは、こばやす（@kobayas_s）です。 Webサイト制作の勉強しているけどコーディングばかりしていて、そう言えばWebサイトのカンプ（モックアップの事。1枚の画像でWebサイトのデザインを表現。のちにコーディングの材料となる）の作り方ちゃんと知らないや、とかありませんか？ twitterで調査してみたところかなり方がそう思っているようです。 コーディング課題はチラホラあるけど、その前段階にあるデザインカンプの作り方って実はよく分からない人多いのかな。 Webデザインの作り方の記事書いたら読みたい人いる？ ついでに制作お題として使える構成も付けちゃう。 デザイン出来たのコーディングしたら一通り作れるようになるね！ — こばやす｜Webデザイナー (@kobayas_s) December 8, 2019 そんな方のために、見本入りで出来るだけ詳しく解説記事を書いてみました。この記
未経験者からすると、デザインカンプはいわばあなたのデザインスキルをアピールする実績そのものです。 ポートフォリオに載せるものになるので、的外れなものを作りたくないですし、あわよくばいけてるデザインを作りたいですよね。 でもデザインカンプってどう作ればいいの？という方のために、 ゆーし 2ヶ月の独学で未経験から制作会社の webデザイナーに転職 半年間でwebデザインの副業案件10件を担当 現在Webデザイナー兼アートディレクターとしてデザイナーのクオリティ管理を担当 上記の経験を持つ僕が、実際に作った架空サイトを例にデザインカンプの作り方を解説していこうかと思います。 後半では、デザインカンプ制作のコツを述べていますので、最後まで是非ご覧ください。 こんな方におすすめ デザインカンプ制作に必要な事前準備 デザインカンプの制作手順 デザインカンプの制作のコツ 今回はある程度デザインソフトを使
この記事を書いた人 だいちPENGIN BLOGメディア編集長。Web業界とは異業種の仕事をしながら、独学でWeb制作の世界に。副業でHP制作やコーディング代行、個人ブログの運営などに取り組み、現在はPENGINにてWebライティングやディレクションをしつつ、メディア運営全般を担当しています。（個人運営ブログ：https://daib-log.com/ ）
という感じで各種数値などを取得してコーディングしていきます。 要するにコーディングの設計図みたいなものですね。 そしてデザインカンプは主に4種類あります。
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webデザインカンプを1から作るための説明書｜こばやす｜Webデザイナー
【見本あり】デザインカンプの作り方とコツを現役webデザイナーが解説 | これだけデザイン
【デザインカンプ配布サイトまとめ】ポートフォリオ掲載OK（無料有） - PENGIN BLOG
【Adobe Illustrator編】デザインカンプからコーディングする方法【画像を使って丁寧に解説】