Zenn
🛼

【手順・考え方紹介】デザインカンプからのコーディング方法

2024/10/11に公開
CSS
Figma
HTML
idea

サイト模写や LP を制作するときに、デザインカンプをもとにコーディングをすると思います。
どんな順番でコーディングを進めているか、手順（考え方）を示す記事って意外と見当たらなかったので書いてみました。

こんな方におすすめです。

  • HTML や CSS の知識はあるけど、カンプからコーディングしよう！と思うと手が止まってしまう
  • デザインカンプからのコーディングが初めて
  • 他の人のコーディング手順が知りたい方

記事の内容は以下の通りです。

  1. カンプから大枠の大きさを測る
  2. 使いまわせそうなパーツがないか探す
  3. レスポンシブ対応・微調整

今回は以下のデザインカンプからどうやってコーディングするか紹介します。
※手順紹介なので、HTML の書き方の詳細な説明は省いています。

カンプから大枠の大きさを測る

カンプを見ると、大枠の大きさがわかります。
今回のカンプだと、赤い線で左右に囲まれている中身の大きを測ります。

デザインカンプは無料コーディング練習所様からお借りしました。

今回のカンプは自分でガイドを引いて大枠の大きさを確かめました。

この枠はページの中で一貫して同じ大きさで、この中にボタンや画像を入れるとコーディングが楽そうです！

大枠の大きさを Figma で測ったら、枠を囲むクラスを追加・命名します。
今回はl-containerと名づけました。l-は「layout」の頭文字からとっています。

使いまわせそうなパーツがないか探す

デザインカンプを見ると、テキストや画像は違っても同じような見た目の箱に入っているものがありませんか？

以下のパーツが使いまわせそうなパーツ（コンポーネントパーツ）に該当するケースが多いです。

  • ボタン
  • 見出し
  • リスト
  • カード

HTML でコンポーネントパーツを作成し、CSS で装飾をします。
コンポーネントパーツはc-buttonのように頭にc-をつけます、component の c です。

このとき、コンポーネントパーツには余白（marginやpadding）はもたせないようにしておくと、使いまわす時に便利です。
あるセクションでは下の余白が 50px だけど、別の場所では 20px だった！なんて時にコンポーネントパーツの余白設定が邪魔になるからです。

余白が場所によって違う時は、以下の 2 パターンのどちらかで対応することが多いです。
今回はconatctの中にあるc-buttonに余白をつけたいとします。

<div class="contact">
  <!-- フォームとか見出しとかの要素が入る -->
  <!-- .... -->
  <a href="" class="contact-button c-button">お問い合わせ</a>
</div>

コンポーネントパーツへの余白のつけ方 ①

親のクラスを指定して、余白をつける

.contact .c-button {
  margin-bottom: 30px;
}

コンポーネントパーツへの余白のつけ方 ②

コンポーネントパーツにcontact-buttonクラスを追加して、余白をつける

.contact-button.c-button {
  margin-bottom: 30px;
}

レスポンシブ対応・微調整

大枠を決めて、コンポーネントパーツを作って配置したらその他の部分のコーディングをします。
ほぼ全てのパーツが設置できたら、レスポンシブ対応をします。

Chrome の開発者ツールを使って画面幅を変更しながらコードを書きましょう。

開発者ツールの日本語化

ちなみに、開発者ツールは日本語化ができます！！
開発者ツールを開いたら、右上にある歯車マークから変更ができます。
英語だと使いこなすのが難しい・時間がかかる方におすすめです。

メディアクエリの数値

メディアクエリ（切り替わりの大きさを px で設定）っていくつで書くのがいいのか悩みますよね。
自分はだいたい以下の数値で設定しています。

// 1081px以降はPC
@media screen and (min-width: 501px) and (max-width: 1080px) {
  // タブレット
}
@media screen and (max-width: 500px) {
  // スマホ
}

微調整

擬似要素でアイコンをつけたり、装飾のパーツをつけたりします。
アニメーションがある場合はここで追加します。
この微調整をどこまでやるかは、どこまで求められているかによります。
ピクセルパーフェクトを目指すなら、きっちり微調整しなければなりませんが…パソコンからの閲覧が 90%で、スマホ閲覧は 10%程度だからスマホは大きく崩れていなければ OK という場合もあります。

コーディングする前に、どのレベルまでコーディングしたらいいか尋ねると余計な時間を割かずに済むのでおすすめです。
「このページの閲覧はパソコンがメインですか？もしパソコンがメインなら、スマホはどれくらい作り込みましょう？」と聞くとよいです。スマホ閲覧を重要視していない場合は、そもそもスマホのデザインカンプがない！ってこともあります。

デザインカンプのサイズ感ってどこまで信じていいの？

デザインカンプを作ったデザイナーが、行間や高さをきっちり設定していればよいのですが、コーディング経験があまりない方や忙しい中サッと作ったデザインだと、行間や高さの数値がめちゃくちゃなケースがあります。

コンポーネントパーツにできそうで見た目も全く同じなのに、ある場所のテキストの高さは 120%で別の場所はすべて 180%とか…どちらを信じればよいのだろうと悩んでしまうときは、多く使われている方の高さを採用します。今回であれば高さは 180%です。

まとめ

デザインカンプ　コーディングでググると、Figmaの機能説明が多く知りたい情報が出てこなくて困った経験があります。先輩コーダーがいればどのようにコーディングしているかわかるけれど、一人で作業しているとそのあたりがわからず、HTMLの知識はあるけどまっさらな状態からコーディングができない！と困ってしまいます…
今回紹介した方法以外にもよいやり方があると思うので、自分のやりやすい方法でコーディングするのがおすすめです。

Discussion