Progateが教えてくれない、デザインカンプからのコーディング手順
Progateの道場コース、苦戦してる人多いみたいですね。課金中には道場までやらなかったのでちゃんと中身は精査できてないのですが、無料でできる範囲の初級編headerを作るところだけやってみても、「あ、こりゃ大変だわ」と思いました。
なにしろそれまであれだけ手取り足取り丁寧にお膳立てされた環境で学ばせていたくせに、道場になると手のひら返したように突然ノーヒントで「自由にやってね♪」となるわけですから、戸惑わないわけがないわけです。むしろ道場コースを何の問題もなくスラスラとクリアできる人がいたら、それ絶対に初心者じゃないですw なので躓いても凹む必要はないです。あれは躓いて当然なように作られてますからw（我が子を谷底に突き落とす親ライオンのようなアレですねw）
というわけで、道場コースで躓きまくってる人に向けて、考え方のヒントというか大まかな流れみたいなものを解説してみようと思いますので参考にしてください。
なお、最初に言っておきますがこれは決して「答え」を教えるものではありません。「ゼロから自分で組む時にはこういうことを考えながら作業してるんだよ」ということを紹介するだけなので、それを踏まえて道場コース自体は各自で取り組んでくださいね。
【１】デザイン仕様を確認
まず、デザインカンプを元にゼロからコーディングする場合、一番最初にやることが「デザイン仕様の確認」です。道場コースでも「ここのサイズは◯pxで作る」とか「ここの色は#000000で」とか、資料が提示されていると思いますが、そういう具体的な数値の確認よりもむしろ
・ブラウザの幅を変更した時にどうなるか？
・コンテンツ量が変更された時にどうなるか？
・アイテム数は固定なのか可変なのか？
・固定幅レイアウトなのかレスポンシブなのか？
といった「アイテムの幅や高さ、数が変わった場合にどのように表示される（したい）のか」という点をデザイナーに確認しつつ明確にしていくことの方が重要です。なぜなら、こういうサイズ可変時にどうしたいのか、という仕様次第で組み方の選択肢が変わってくるからです。
具体的なサイズや色の数値はCSSを書く段階になってから調べても特に問題はありませんが、上記のようなデザイン上の「仕様」については後から方針が変わると大きな手戻りが発生しかねず、全体の作業効率を損ねることに繋がりやすくなります。静止画であるデザインカンプを元にコーディングする場合は、目に見えている目の前のデザインだけでなく、実際にブラウザ上で閲覧した場合にどうなるのか？といったことをイメージしながら検討することが重要となります。
【２】情報構造に基づき大枠のマークアップを検討
デザイン仕様を把握したら、次はマークアップです。こちらについては過去のnoteで詳しく手順や考え方について解説済みですので、そちらを参照してください。
・Progateが教えてくれない、マークアップの考え方
・世界一「雑」に説明するセマンティック・マークアップの手順（１）
・世界一「雑」に説明するセマンティック・マークアップの手順（２）
・世界一「雑」に説明するセマンティック・マークアップの手順（３）
【３】レイアウト再現のため必要な追加枠を検討
情報構造のマークアップが終わったら、更にデザインカンプと照らし合わせて、純粋にレイアウトを再現するために必要な「枠」を追加していきます。ただしこの工程を行うには、先に確認しておいたデザイン仕様を踏まえた上で実際CSSでどのようにレイアウトするのか？ということを頭の中でシミュレーションする必要があります。Progateで学習しただけの駆け出しの人が道場で躓く最大の要因がここにあります。
レイアウトのシミュレーションをするにはある程度の経験値が必要です。初めて自分で考えてコーディングする時などは経験値がゼロに等しいわけですから、この工程がスムーズにできなくて当然です。なので最初は試行錯誤して失敗しながら経験値をためていけば良いです。皆そうして成長していますので。
ただ、やみくもにコードを書いても無駄が多いので、以下のことを意識するようにしてみてください。何度か練習を繰り返すうちに、そのうちコードを実際に書かなくても枠が「見える」ようになってきますので！
【HTMLのタグ＝CSSのボックスであることを意識する】
HTMLのタグが存在するところには四角い枠すなわちボックスが作られます。CSSはそのボックスに対してwidth、height、margin、pdding、background、borderといったプロパティを指定して形を整え、floatやflexbox、positionなどでレイアウトを整えます。従って、CSSで何かしらレイアウトしようとしたらプロパティを設定する対象となる枠＝HTMLタグが必要になるのです。
こちらはデザインカンプを元に一旦情報構造のマークアップを終えた状態のヘッダー領域になります。情報構造の意味付けという点ではこれで十分ですが、デザイン仕様を満たしてレイアウトするにはまだ枠が足りません。
必要となるデザイン仕様は、以下の通りです。
・ヘッダーの背景は幅100%で伸縮
・ヘッダーのコンテンツ幅は最大1000pxで固定し、ブラウザの中央に配置
「ヘッダーの背景領域」と「ヘッダーのコンテンツ領域」という2つの大きな枠がないとこのデザイン仕様の再現は難しいことが分かりますでしょうか？事前のマークアップでは「ヘッダー領域」のためにheader要素を1つ用意しているだけなので、ここで1つ枠が不足することになります。これが「レイアウト再現のために必要な追加の枠」ということになります。
【純粋なレイアウト再現のために追加する枠はdivで】
情報構造の意味づけという点では不要でも、レイアウト再現のためには必要という枠についてはdiv要素を使います。div要素は特別な意味を持たない汎用的なグルーピング要素なので、レイアウト再現のために必要な領域をマークアップするために使うことはdivの典型的な用途の1つとなります。divを使ってレイアウトのために必要な枠も追加したマークアップの設計図がこちらになります。
<header>
<div>
<h1><img src="ロゴ画像のパス" alt="ロゴ"></h1>
<nav>
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
</ul>
</nav>
</div>
</header>【４】各ブロックの命名を検討
レイアウトもふまえたマークアップ設計が完成したら、次は各ブロックのclass名を検討します。
これは「どのようなセレクタでCSSをコントロールするのか？」を考える工程です。
スタイルが適用できるだけで良いのであれば、ぶっちゃけ何でもいいわけですが、あまりにも適当に名前をつけてしまうと後で必ず問題が生じます。
なので最低限、何かしらの命名規則を決めて、分かりやすく運用しやすいclass名をつけるように心がける必要があります。
<header class="header">
<div class="container">
<h1 class="header-logo"><img src="ロゴ画像のパス" alt="ロゴ"></h1>
<nav class="header-menu">
<ul>
<li><a href="#">メニュー1</a></li>
<li><a href="#">メニュー2</a></li>
<li><a href="#">メニュー3</a></li>
<li><a href="#">メニュー4</a></li>
</ul>
</nav>
</div>
</header>例えばこちらは先のヘッダー領域のマークアップにclass名を追加したものの一例になります。
ヘッダー領域全体に対して「header」という役割を示す名称をつけ、ロゴとメニューについてはヘッダー領域固有の部品であることが分かるように親ブロックの名称を継承してそれぞれ「header-logo」「header-menu」としています。また、コンテンツ幅を決めるためのdivについては、ヘッダー領域固有の部品ではなく、ページ全体で各所で使われるものになるので、独自の名称として「container」という役割に応じた名前をつけています。
これはあくまでひとつの例であり、色々な考え方や書き方がありますが、一般的には次のことを意識すると初心者でもそれなりにclass名の管理がしやすくなると思います。
・id属性ではなくclass属性でスタイル管理する
・原則として見た目ではなく「役割」を表す名称をつける
・複数単語をつなぐ場合などの「書式」を統一する
・複数の固有部品から構成される大きなモジュールの場合、親ブロックの名称を子ブロックの名称にも継承させて、所属を明らかにする
・単品で使用する小さなモジュールの場合、「ボタン（.btn-）」「見出し（.ttl-）」「背景（.bg-）」のように、部品の役割によって特定の接頭辞をつけて管理する
一人で管理できる、数ページ〜数十ページ以内の小規模でシンプルなWebサイトの構築であれば、最低限このくらいのことが意識できていれば大体なんとかなりますので、最初は上記を元に自分なりのルールを作ってそれを守って命名する練習をすると良いかと思います。
自分でルールを考えて実際にそのルールに則ってコーディングすることを何度か経験すれば、おそらく「もっといい方法はないのか!?」と欲が出てくると思います。そういう必要性を感じられるようになったら、いわゆる「CSS設計」の本をじっくり読んでみると良いと思います。今なら次の2冊がおすすめです。
【５】HTMLとCSSを書く
ここまで検討ができたら、後は設計に基づいてHTMLとCSSを書くだけです！事前にマークアップの設計とCSSレイアウトのシミュレーションができていれば、この段階はただの「作業」です。スペルミスなどの凡ミスに気をつけながらどんどん書いてブラウザで確認していきましょう。
さいごに
完成されたデザインカンプを元に0からコーディングする場合の手順と考え方のポイントを解説してみましたが、参考になりましたでしょうか？
まとめるとだいたいこんな感じになるかと思います。
・デザインカンプから「デザイン仕様」を汲み取る
・情報構造に合わせてマークアップを検討する
・検討したマークアップのHTMLタグを「枠」として視覚化し、デザイン仕様と照らし合わせて不足があればdiv要素を追加して枠を増やす
・スタイルをコントロールするためのclass名を検討する
特にHTMLタグを枠として視覚化してデザインにあてはめる、逆にデザインを枠の組み合わせと捉えてHTMLタグに落とし込む、という工程が自力でコーディングできるようになるための最大のポイントとなります。
最初から頭の中だけでやろうとすると混乱すると思うので、デザインカンプを印刷して書き込みをしたり、タグの入れ子構造を手書きで図に書き起こして整理したり、といったアナログな作業を通してイメージを強化する訓練をすると良いかと思います。繰り返しこの作業をすることで、いつのまにかデザインカンプを見るだけで自然と枠が見えるようになってきますので…！
［PR］こちらの書籍では今回の「カンプからコーディング」の工程を更に詳しく解説しています。カンプからコーディングする工程についてより深く学びたい方はこちらも参考にしてみてください♪
［PR］HTML・CSSの基礎から実戦形式の実習教材までトータルで解説した初心者向けのHTML/CSS解説書も書いています。よろしければご検討ください♪
【おまけ】Progateの道場コースで挫折しそうな方へ
私がProgateの道場コースをやってみて「やりづらいなぁ」と感じたのは、実際にHTMLとCSSを書く段階になった時、任意のタイミングで表示を確認できないことでした。事前に設計とシミュレーションは済ませているとはいえ、やはりコードを書く段階で多少のミスだってあるでしょうし、「これでできると思ってたけど実際には思ったようにならなかった」みたいなこともあるでしょう。普段からガリガリ書いてる経験者ですらそうなのですから、初心者の方ならなおさらこまめに表示チェックしたいでしょうし、実際そうするべきだと思います。
しかしProgateの場合、コードを書いて表示を確認するとそのたびに「評価判定」が入ってきて、まだ途中なのに「違います！」みたいな感じでダメ出しされて地味にメンタル削られるんですよね…。試行錯誤することは決して悪いことではないのに、これではダメ出しされすぎて嫌になっちゃう人がでても仕方ないのでは…と思ってしまいました。
なので道場コースをやる場合、Progateの画面内でやるのではなく、自前でHTMLとCSSのファイルを用意して、実際のコーディングと同じようにエディタで書いたものをブラウザ表示確認するという方法で試行錯誤して、できた！と思ったものをProgateの画面にコピペして最終判定だけやってもらうという風にした方がいいんじゃないかな、と思います。実際のブラウザで表示確認するなら、表示がおかしい時に開発者ツールで検証することもできます。開発者ツールで検証しておかしいところを自力で見つけること自体も立派な訓練ですし、それこそが現場で求められるスキルでもあります。
道場コースで挫折しそうな人こそ、実際のエディタ＆ブラウザ環境でコーディングすることをオススメします！
よろしければサポートお願いします！いただいたサポートは大切に使わせていただきます♪