デザインカンプからのコーディングが勉強に良いって聞くけど、そもそもデザインカンプって何？
デザインカンプからのコーディングって、どうやればいいんだろう？
こんな疑問に答えます。
デザインカンプからのコーディングは「Web制作者(コーダー)として仕事をするのに必須の知識群の中でも、一番大事なスキル」になります。
よって、ここを適当に流すことは不可能なのですが、いきなり初見で挑もうとすると、全然書き始められずに凹むと思います。
そこで、今回は「デザインカンプからのコーディングの具体的な手順とコツ」をお教えし、これから挑戦される方の後押しをします。
この記事を書いたのは
しょーご（@samurabrass）
当ブログ「しょーごログ」の運営者。2018年からWeb制作・フロントエンドエンジニアとして主にWordPressでのサイト制作やシステム開発のフロントエンドを担当。同時にブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行い、スクール講師を4年以上している経験を活かした分かりやすい記事制作を心がけている。
＼現役エンジニアのレビュー付き／
実践レベルのコーディング課題公開中
- デザインカンプからのコーディングを経験したい
- 現役エンジニアのレビューを受けてみたい
- 即戦力級のポートフォリオを用意したい
2024年にデザインを完全リニューアルしています！
コーディングに自身をつけるにはプロからのレビューを貰うのが必須なため、制作会社も利用するレビューツールで添削をしています。
Web制作学習ロードマップにも取り入れているため、学習終了まで迷わず進むことが可能です。コーディングを本気で仕事したい方はぜひご活用ください！
＼無料の入門編から本格企業サイトまで／
デザインカンプとは？ワイヤーフレームとモックアップとの違いは？
デザインカンプ（Design Comprehensive Layout）とは、デザインの完成見本のことを指します。
Web制作者はデザインカンプをもとにコーディングを進めていきます。モックアップもデザインカンプと同じ意味です。
対してワイヤーフレームとは、以下の画像のようにWebサイトの構成案、骨組みを指します。あくまで構成案・骨組みなので、細かなデザインは無しです。
Webサイトは情報設計が命なので、ワイヤーは超重要です。
つまり、Web制作の実務では以下の流れになります。
- ヒアリング・要件定義
- ワイヤーフレーム作成、クライアントOK
- デザインカンプ作成、クライアントOK
- デザインカンプをもとにコーディング開始
- テスト、検証、クライアント検収
- 納品
「ワイヤーフレーム→デザインカンプ」という流れを押さえていただければOKです。
デザインカンプからのコーディングの手順
以下の流れに沿って行います。
- デザインから画像の書き出し
- デザインの構図を把握する
- 開発環境をセットアップ
- デザインの値を見つつ、コーディング
- PerfectPixelなどを利用しつつ、セルフチェックする
- サーバーアップロード
- クライアント確認
今回は私が出している「【初級】デザインカンプからのコーディング練習」を例に解説していきます。
❶デザインから画像の書き出し
画像が用意されていることはほぼ無いので、自分でデザインカンプから書き出します。
XD、Fimga、Photoshopでの方法は以下記事でまとめています。
❷全体の構図を把握し、ボックス分けする
デザインカンプ全体を眺めて、全体の構成を確認します。初学者の方はボックス分けすることで理解が深まります。
- 使われているフォントを確認する
- カンプの幅とインナー幅について確認
- 各セクションのボックス分けで、要素の並びを俯瞰する
- 見出し、色などCSSを共通利用できる要素があるか確認
- aリンクがどこのページに繋がっているか確認
もう少し詳しくボックス分けすると、以下の感じでインナー幅や見出し階層、セクション・コンテンツ（タグの使いかた）についても確認していたりします。
インナー幅についてわからない方は、以下の記事で復習しておいてください。
❸開発環境のセットアップ
全体の構成がわかったら、開発環境をセットアップします。
今回は初学者の方を想定しているので、フォルダの作成や書き出した画像をimgフォルダに入れたりして、HTMLはheadまで書いておきましょう。
実案件の際には、相手が作った環境をシェアしてもらい使う場合もあります。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ここにタイトルを入れる</title>
<meta name="description" content="ここにディスクリプションを入れる。">
<!-- これはリセットCSS -->
<link rel="stylesheet" href="https://unpkg.com/destyle.css@3.0.2/destyle.min.css">
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>WordPressの場合はPHPが動くローカル環境をセットアップしておきます。
❹デザインの値を見つつ、コーディング
後は、デザインカンプを見つつコーディングです。
各種値の読み方は以下の記事で解説しています。
また、忘れがちですがファビコンやOGPも設定しておきたいです。
❺PerfectPixelなどを利用しつつ、セルフチェックする
PerfectPixelを使ってコーディングの精度を確認しましょう。
全部完璧にできる必要はないですが、ファーストビューだけでも合わせておくと、いかに適当にコーディングしているかが一目瞭然になって冷や汗が出ると思います笑
また、セルフチェック項目を持っている人は、セルフチェックを行って下さい。
私のコーディング課題をされている方は、更に詳しい記事を課題ページに添付しているので、そこからセルフチェックをお願いします。
❻サーバーアップロード
完成したらサーバーにアップロードします。
サーバーアップロードでよくパス変更で画像が表示されていなかったりなどのバグが出るので、注視してください。
OGPの設定なども見直しておきましょう。
❼クライアント確認
問題なければ、クライアント確認をします。
WordPressでお問い合わせフォームを作っている人は、必ず送受信に問題がないことを「クライアント自身に」確認してもらって下さい。
デザインカンプからのコーディングに関するよくある質問
デザインにおけるコーディングとは？
デザインにおけるコーディングとは、デザイナーが作成したデザインを実際にWebブラウザ上で表示・機能させるために、HTMLやCSSなどのコンピューター言語に変換する作業です。
デザインカンプとワイヤーフレームの違いは何ですか？
デザインカンプは完成見本としての詳細なデザイン案、ワイヤーフレームは基本的なレイアウトや構造を示す骨組みです。デザインカンプはワイヤーフレームをもとに作成されます。
デザインカンプからコーディングの手順は？
デザインカンプからコーディングの手順は、以下の工程で進みます。
- 画像の書き出し
- 構図の把握
- 開発環境のセットアップ
- デザイン値を見ながらのコーディング
- チェック
- アップロード
デザインカンプとは何ですか？
デザインカンプとは、Webサイトの最終的なデザインやレイアウトが一目でわかる完成見本のことです。クライアントとのイメージ共有に使用されます。
デザインカンプからのコーディングはメイン業務
デザインカンプからのコーディングが正確にできることは、Web制作者にマストで必要なスキルです。
ただ、いきなり挑むと難しい場合もあると思います。
そんな時は模写コーディングから取り組むのもおすすめです。
模写をさっと終わらしたら、【入門】デザインカンプからのコーディング練習など、簡単なデザインカンプからのコーディングを練習しましょう。
デザインカンプからのコーディングのおすすめ練習素材は以下の記事でいくつか紹介しています。
こういったコーディング独学ロードマップを徹底的にまとめた記事も出しているので、こちらも参考にしてください。
ここから更に徹底的に鍛えたい方へ。
私は複数のレビュー付きコーディング練習課題を出しているので、もしよければそちらでも練習していただければ相当鍛えられるかと思います👇
HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。
- Figma,Photoshopデザインからのコーディング
- サーバーアップロードでサイト公開
- プロによる最大3回の表示確認特典
- レビュー返しは爆速
- 2024年にデザイン刷新！被らないポートフォリオ
「初級編」は初めてデザインからコーディングする方向け
「中級編」はJavaScriptやjQueryの練習
「上級編」はWordPressの実案件を模擬体験できるレベル感にしています。
中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。
全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。
また、2024年には随時デザインの刷新をしており、完全リニューアル！！
他者と差をつけられるポートフォリオが準備できます！
制作会社も使用する専用レビューツールで分かりやすく添削していきます！
基本的に「まとめて購入」していただくとかなりお得になります↓
コーディングは書籍だけではなかなか実力がつかないので、実務レベルのレビューを受けて自身をつけたい人は是非挑戦してみてください！
＼課題の購入はこちらから／
ご寄付を頂けると今後の更新の励みになります！
