Web制作勉強方法

デザインカンプからのコーディングとは?手順を解説【おすすめ練習素材も紹介】

デザインカンプからのコーディングとは?手順を解説【おすすめ練習素材も紹介】
本ページにはプロモーションが含まれています。
まさひろくん

デザインカンプからのコーディングが勉強に良いって聞くけど、そもそもデザインカンプって何?

デザインカンプからのコーディングって、どうやればいいんだろう?

こんな疑問に答えます。

デザインカンプからのコーディングは「Web制作者(コーダー)として仕事をするのに必須の知識群の中でも、一番大事なスキル」になります。

よって、ここを適当に流すことは不可能なのですが、いきなり初見で挑もうとすると、全然書き始められずに凹むと思います。

しょーご

私が出している【入門】デザインカンプからのコーディング練習も、最初に取り組む方用に簡単レベルにしたんですが、難しいという声もあります…

そこで、今回は「デザインカンプからのコーディングの具体的な手順とコツ」をお教えし、これから挑戦される方の後押しをします。

しょーご

この記事を書いたのは
しょーご@samurabrass

このブログ「しょーごログ」の運営者。2018年からエンジニアとしてサイト制作やシステム開発を行いつつ、ブログとYouTubeで情報発信を行っている。駆け出しエンジニアのコーディング課題添削も行う。

\現役エンジニアのレビュー付き/

実践レベルのコーディング課題公開中

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
販売ページはこちら
  • デザインカンプからのコーディングを経験したい
  • 現役エンジニアのレビューを受けてみたい
  • 即戦力級のポートフォリオを用意したい

2024年にデザインを完全リニューアルしています!

コーディングを学習中の方はぜひご活用ください。

無料の入門編から本格企業サイトまで/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

デザインカンプとは?ワイヤーフレームとモックアップとの違いは?

デザインカンプからのコーディングとは?手順を解説【おすすめ練習素材も紹介】

デザインカンプ(Design Comprehensive Layout)とは、デザインの完成見本のことを指します。

Web制作者はデザインカンプをもとにコーディングを進めていき、モックアップもデザインカンプと同じ意味です。

対してワイヤーフレームとは、以下の画像のように、Webサイトの構成案、骨組みを指します。

Webサイトは情報設計が命なので、ワイヤーは超重要です。

ワイヤーを手で引いている様子

つまり、Web制作の実務では以下の流れになります。

Web制作の流れ
  1. ヒアリング・要件定義
  2. ワイヤーフレーム作成、クライアントOK
  3. デザインカンプ作成、クライアントOK
  4. デザインカンプをもとにコーディング開始
  5. テスト、検証、クライアント検収
  6. 納品

ワイヤーフレーム→デザインカンプ」という流れを押さえていただければOKです。

デザインカンプからのコーディングの手順

以下の流れに沿って行います。

コーディング手順
  1. デザインから画像の書き出し
  2. デザインの構図を把握する
  3. 開発環境をセットアップ
  4. デザインの値を見つつ、コーディング
  5. PerfectPixelなどを利用しつつ、セルフチェックする
  6. サーバーアップロード
  7. クライアント確認

今回は私が出している「【初級】デザインカンプからのコーディング練習」を例に解説していきます。

❶デザインから画像の書き出し

画像が用意されていることはほぼ無いので、自分でデザインカンプから書き出します。

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の設定なども見直しておきましょう。(Webで公開を想定していないBASIC認証をかけているものは必要なし)

❼クライアント確認

問題なければ、クライアント確認をします。

WordPressでお問い合わせフォームを作っている人は、必ず送受信に問題がないことを「クライアント自身に」確認してもらって下さい。

デザインカンプからのコーディングはメイン業務

シャッター

デザインカンプからのコーディングが正確にできることは、Web制作者にマストで必要なスキルです。

ただ、いきなり挑むと難しい場合もあると思います。

そんな時は模写コーディングから取り組むのもおすすめです。

模写をさっと終わらしたら、【入門】デザインカンプからのコーディング練習など、簡単なデザインカンプからのコーディングを練習しましょう。

徹底的に鍛えて頂きたく、私は複数の鬼レビュー付きコーディング課題を出しているので、もしよければそちらでも練習していただければ幸いです。

即戦力になれるコーディング課題

HTML初心者からWordPress実案件レベルまでのコーディング演習課題を「専用ページ」にて公開しています。

デザインカンプからのコーディング練習課題【オリジナルポートフォリオを準備できるようになりました】
  1. Figma,Photoshopデザインからのコーディング
  2. サーバーアップロードでサイト公開
  3. プロによる最大3回の表示確認特典
  4. レビュー返しは爆速
  5. 2024年にデザイン刷新!被らないポートフォリオ

初級編」は初めてデザインからコーディングする方向け
中級編」はJavaScriptやjQueryの練習
上級編」はWordPressの実案件を模擬体験できるレベル感にしています。

中級者の方には高難易度課題を詰め合わせた「即戦力セット」も出しています。

全課題で「実務レベルの、プロの厳しいレビュー」を受けられるようにしています。

また、2024年には随時デザインの刷新をしており、完全リニューアル!!

他者と差をつけられるポートフォリオが準備できます!

コーディング課題 中級 中級Ex
しょーご

制作会社も使用する専用レビューツールで分かりやすく添削していきます!

基本的に「まとめて購入」していただくとかなりお得になります↓

コーディング課題
まとめて購入

全部盛りこちらから
中級以上こちらから
即戦力編こちらから

コーディングは書籍だけではなかなか実力がつかないので、ぜひ腕試しにご利用ください!!

\課題の購入はこちらから/

また、超実践編という鬼のようなコースもあるので、ほぼ実案件と同じ厳しい環境でコミュニケーション面までレビュー受けたい方がいれば、是非。

超実践編バナー

超実践編をとりあえず見てみる

あなたに是非読んでほしい記事です!