デザイン通りにコーディングができるようになるための勉強方法

みなさま、こんにちは。
新人アラサーコーダーです。

フライングハイワークスに入社して早いもので１年が経過しました。
まだまだひよっこレベルで、先輩方からはデザイン通りにできていないと指摘されることもしばしばあります。

どうすればデザイン通りにコーディングできるか、先輩方が必死に考えてくださり、たどり着いた結論がデザインデータを印刷してそこにペン（シャーペンや鉛筆可）で要素を囲っていく方法でした。
やり方を以下に述べます。

デザインデータを印刷する

なるべくA3とかサイズは大き目に印刷しておくと書きやすいです。

実際に書いていく

例えば、ここは見出しになりそうだなと思ったら、その見出しのテキストをh2タグにするとして、h2と記して丸や四角で囲みます。
左側に画像があり、右にテキストがあるような要素だった場合、画像ならimgタグにし、隣のテキストはpタグなどで囲んで、最終的にはflexboxなどで横並びするとしたら、さらにdivで囲んだりなど、このデザインならどういうHTMLのマークアップになるかを考えて、自分だけの設計書のようなものを作成します。
丁寧に定規で線を引きたくなるかもしれませんが、そこまでしなくても大丈夫です。

先輩方に見てもらう

全部できたら、確認してもらいます。
そうすると、「ここはこのタグだと不適切」や「PCはいいけど、スマホサイズだとこのマークアップは厳しい」など、先輩からフィードバックをもらえるので、再度修正します。

実際にコーディングする

完成したら、実際にコーディングします。
自分の頭で考えながらコーディングするよりもはるかに効率がいいです。
今までいかに自分が雑なコーディングをしていたかがわかります。

最後に

この方法でコーディングするメリットとしては、

• コーディングのスピードが速くなる
• 途中で修正することがないのでCSSやJSに集中できる
• 適切なマークアップが学べる

などが挙げられます。
私も最初はマークアップが雑すぎて、その後のCSSが複雑になってしまったり、デザイン通りにコーディングできなかったことがありましたが、この方法を取り入れてからデザインの再現性が向上しました。

どんな環境でもこの方法ができるとは限りません。
しかし、フライングハイワークスなら教育制度が充実しているので実現可能です。

これからフロントエンドエンジニアとしてのキャリアを確実に築き上げていきたい方は、応募を検討されてみてはいかがでしょうか？

最後まで読んでいただきましてありがとうございました。