30DAYSトライアル2nd【デザインデータからコーディング〜よく使うパターンを練習しよう】

こんにちは、フリーランスエンジニア兼ディレクターのショーヘー（@showheyohtaki）です。

この記事は『コーダーとして企業と仕事ができる』レベルになるための30DAYSトライアル、その中編です。

実践レベルのトライアルになるため、難易度も大きく上がっています。

デイトラ0〜3まで完了し、コーディングを副業から仕事へと昇華させたいと思った方は、ぜひ挑戦してみてください👍

30DAYSトライアルの概要は↓の記事で解説していますので、興味のある方はこちらからご覧ください。

前回の記事はこちら↓

フィフスステップであるこの記事では、デザインカンプからのコーディングのやり方と、よく使うコーディング表現の練習をしていきます。

おさらい：デザインデータからコーディングする力はコーダーに必須の能力

前回の記事でも書きましたが、模写コーディングをどれだけやってもコーダーとしての実務力はつきません。

コーディング力を伸ばす練習になりますが、それだけでは足りないんです。Web制作の流れを紹介しつつ、その理由を説明します。

ざっくりした流れは上記の通り。そして、コーダーが担当するのは主に４と５です。

クラウドソーシングに掲載されてるコーディング案件も、多くが「４」以降を依頼したいというものですね。
（他にも仕様決定から丸っと案件やデザインも必要な案件も多く、企業コーダーよりやることは多いです。）

つまり、コーダーにとってデザインデータからコーディングするスキルは必須！ということ。

逆に、デザインデータからコーディングができなければ、どんなに模写が上手くても企業からの依頼は受けられない（受けたら事故る）ってことなんです。

この副業と実務の間に横たわる大きな壁を越えるため、Adobe XDを使ったデザインカンプからのコーディング練習を進めていきます。

Adobe XDのデザインカンプからコーディング学習の流れ

それでは、デザインツール『Adobe XD』を使って、デザインカンプからコーディングする練習をやっていきます。

XDの使い方に関しては、はにわまんさんの以下の記事を参考にしてください👇

XDがどれだけ便利か、よく分かると思います( ^ω^ )

また、ここからは難易度が高いので、毎日課題を終わらせるには平日3~4時間、休日は6時間くらいの学習が必要になると思います。

毎日それだけの勉強時間を確保するのは難しいので、まずは平日2時間・休日4時間のペースで進められるだけ進めていきましょう❗️

準備編：今回のコーディングで使う写真の紹介

今回の30DAYSで使う写真は以下から使わせていただいております！

DAY9. ヘッダーとメインビジュアルのコーディング

最初にやるのは、ヘッダーとメインビジュアルのコーディングです。

XDの使い方を覚えつつ、0からコーディングしてみましょう❗️

以下のXDのデザインカンプをレスポンシブ込で、また前回の記事でやったSassを使ってーディングしてみましょう。
入れ子形式で書くだけでも、CSSで書くより効率がいいことを実感できるはずです👍

※パスワードはLINE@にて配信しています。記事下部からご登録ください。
※Sassの使い方がわからない方はこちらから↓

コーディングに必要な値は、XDのデザインカンプから取得できます。

作成にあたって、以下の条件通りにコーディングしてみてください。

• ヘッダーは上部に固定
• レスポンシブでスマホ、タブレットでもいい感じに表示
• スマホ時のメニュー（メニュー1とかの箇所）は（ひとまず）非表示

参考にすべき記事

何から始めればいいか分からず手が止まってしまった方は、下記の記事を参考に👍

余裕がある人向けの課題

余裕がある人は以下の課題に取り組んでみてください。
※別のHTMLファイルで作成してください

• ヒーローイメージで作成
• 色々なヘッダーパターンを作ってみる

ヒーローイメージで作成

色々なヘッダーパターンを作ってみる

色々なヘッダーのデザインを用意したので、チャレンジしてみてください👍

コーディング上達のコツは、デザインを見た瞬間にコーディングの流れが思い浮かぶ状態になるまで手を動かしまくることです！

まずはコーディングしまくりましょう！！

DAY10. 横並びカードのコーディング

次は、サイトでよく見る横並びのカード表示を作ってみましょう👍

ヘッダーとメインビジュアルをコーディングしたファイルに、続きでコーディングしてください（レスポンシブ込）。

ヒントとして、flexboxを使うと最も楽にコーディングできるかと思います！

※パスワードはLINE@にて配信しています。記事下部からご登録ください。

作成にあたって、以下の条件通りにコーディングしてみてください。

• タブレット時は2列
• スマホ時は1列

参考にすべき記事

デザインカンプから横並びのカードなどを再現する時によく使われるnth-childとcalcの組み合わせです。

余裕がある人向けの課題

余裕がある人は以下の課題に取り組んでみてください。
※別のHTMLファイルに作成してください

• 別の横並びCSSを試す
• カードの他パターンのコーディング

横並びにするCSSのパターンを把握する

改行ありで使える横並び3パターンはこちら↓

1. display: flex;
2. display: inline-block;
3. float: 〇〇;

今回のコーディングで使っていない横並び系CSSを使って、同様に再現してみると理解が深まりますよ！

カードの他のパターンのコーディング

「カードの他パターン」も、デザインカンプを元に作ってみましょう👍

DAY11. PerfectPixelを使ったチェック＆修正

デザインカンプをもとに作ったサイトを、ブラウザ上でコーディングのズレを確認できる拡張機能『PerfectPixel』を使ってチェック＆修正しましょう。

まず、以下のURLから画像をダウンロードします。

https://haniwaman.com/wp-content/uploads/2019/02/day3-2.png

• 上記URLをクリックして新しいタブを開く
• 右クリック
• 名前を付けて画像を保存

で手元のPCにダウンロードしてください。

「PerfectPixel」の使い方はこちらの記事を参考にどうぞ。

「重ねる画像を取得する」の箇所の画像は上でダウンロードした画像を使います。

デベロッパーツールと先ほどの画像を使って、実際のコーディングの上に重ね合わせる形でチェックしてみてください。

どこまで厳密にチェックするかは案件によると思いますが、ズレすぎている箇所は直しましょう。

必ずしもピクセルパーフェクトで納品が求められるわけではありませんが、プロとして再現度の高いコーディングができる実力は身につけておくべきです！

ズレが見つかった箇所は実際に修正して、ほぼズレがないと思えるところまで持っていきましょう。

DAY12. ボタン、見出しを自在に作れるようになる

WEBサイトを制作する時は、見出しやボタンのパーツの利用頻度が一番多いと思います。

そのため、見出しやボタンはHTML・CSSで自在に作れる状態になっておくのがベストです。

よくある見出し・ボタンのデザインを26本用意したので、コーディングノックに挑戦してみてください👍
※ こちらのデザインカンプの再現は、今までとは別のHTMLファイルに作成してください。

ボタンや見出しのコーディングには、擬似要素・position・transformなど、CSS活用のコツが詰まっています。

これらの作り方を抑えれば、ほとんどのパーツデザインは、どう実装すべきか見当をつけられるようになるはずです。

大変ですが、ぜひ頑張ってみてください❗️

なお、毎回こんな大変な思いをする必要はありません。一度作った見出しやボタンのパターンは、メモ帳に保存していつでも引き出せるようにしておきましょう👍

次回はコピペ＋少しの調整で使えますね。

参考にすべき記事

手が止まってしまった方は、サルワカ先生とはにわまんさんのサンプルを参考にしてみてください！

※ マウスホバーについては、この後に課題を用意しているので、今はやらなくても大丈夫です。

DAY13. ニュース系のコーディング

見出し・ボタン作成ノックの次は、これもよくある『ニュース』パートのコーディングです。

以下のXDのデザインカンプを見本に、ヘッダーや横並びカードのコーディングに使ったファイルに続けて書いてください（レスポンシブ込）👍

コーディングに必要な値はデザインカンプから取得できます。その他の条件として、以下を守りつつ作成してみてください👍

• ニュースタイトルのテキストが多く、改行されてもデザイン崩れを起こさないように！
• ラベルはリンク付き（リンク先は空）
• ニュースタイトルはリンク（リンク先は空）
• moreもリンク（リンク先は空でOK）
• スマホ時の表示方法はおまかせ

ラベルがカテゴリー一覧へのリンク、タイトルはニュースの詳細ページ、moreがニュース一覧へのリンクになっているという、よく見るパターンですね！

余裕がある人向けの課題

余裕がある人は以下の課題に取り組んでみてください。
※別のHTMLファイルに作成してください

• PerfectPixelでチェック
• ニュース系の別パターンを練習

PerfectPixelでチェック

以前の課題でやったように、PerfectPixelでチェックしましょう。
（この後もセクションを足していくので最後にまとめてチェックでもOK）

比較用の元画像はこちら↓

https://haniwaman.com/wp-content/uploads/2019/02/day4-news.png

ニュース系の別パターンを練習

余裕があれば、ぜひニュース表示の別パターンも練習してみてください👍

DAY14. テーブルとGoogleMap埋め込みのコーディング

料金表や会社情報、商品の仕様など、様々な場面で使われるテーブル表示の練習です❗️

以下のXDのデザインカンプをレスポンシブ込でコーディングしてください。

テーブルとマップ埋め込みは、これまでのノックなどに比べるとそれほど苦戦しないんじゃないかと思います😀

コーディングに必要な値はデザインカンプから取得できます。その他の条件としては、以下の条件で作成してください。

• テーブル下の「お問い合わせ」はリンク（中身は空でOK）
• 埋め込む地図の住所はどこでもOK（※ 共有する人は個人情報とかに注意）
• 地図はタブレット、スマホ問わず縦横比は変わらない
• 「Googleマップで見る」は該当のGoogleマップへのリンク

参考にすべき記事

テーブルの作成やGoogleマップの埋め込みで手が止まってしまった方は、以下の記事を参考にどうぞ！

もっとそもそもから復習したい方は、こちらの記事もよかったです。

余裕がある人向けの課題

余裕がある人は以下の課題に取り組んでみてください。
※別のHTMLファイルに作成してください

• PerfectPixelでチェック
• 他のテーブルのパターンを練習する
• YouTubeを埋め込んでみる

PerfectPixelでチェック

以前課題でやったように、PerfectPixelでチェックしましょう。
（この後もセクションを足していくので、最後にまとめてチェックでもOK）

比較用の元画像はこちら↓

https://haniwaman.com/wp-content/uploads/2019/02/day5-table.png

他のテーブルのパターンを練習する

テーブルの他のパターンもいくつか作ってみました。余裕がある方はチャレンジしてみてください。

YouTubeの埋め込みもしてみる

GoogleMap以外のiframe埋め込みのパターンとして、YouTube動画があります。なんならこっちの方が頻出ですね。

こちらも縦横比を維持したままレスポンシブ化できるか実際に確認してみましょう❗️

DAY15. お問い合わせフォームのコーディング

さぁ、だいぶページの完成が見えてきましたね！次は、鉄板の『お問い合わせフォーム』の実装練習です👍

以下のXDのデザインカンプをレスポンシブ込でコーディングしてください。

フォームは苦しむ人が多かったですね…。あんまり作ってて楽しいパーツじゃないからなぁ。

でもサイトには必須のパーツなので、レスポンシブ込みで実装できるようになっておきましょう❗️

コーディングに必要な値はデザインカンプから取得できます。その他の条件としては、以下の条件で作成してください。

• ドロップダウンリストの中身はダミーテキストを3項目ほど
• フォームの送信の仕組みは作らなくてOK（デザインの再現が目的）
• プライバシーリンクはリンク（リンク先は空）
• スマホ時は縦に並べる

参考にすべき記事

フォームは、各ブラウザごとのデザインの差異が色濃く反映される『癖のある要素』です。

ブラウザ間の差異を極力なくすようにコーディングするには

• まず全てのフォーム要素のデザインをフラットな状態にする
• その上にデザインを乗せていく

という流れでコーディングしていきます。

詳しくはこちらの記事をどうぞ！

余裕がある人向けの課題

余裕がある人は以下の課題に取り組んでみてください。
※別のHTMLファイルに作成してください

• PerfectPixelでチェック
• ファイルの添付ができるフォームを作ってみる

PerfectPixelでチェック

以前課題でやったように、PerfectPixelでチェックしましょう。
（この後もセクションを足していくので最後にまとめてチェックでもOK）

比較用の元画像はこちら↓

https://haniwaman.com/wp-content/uploads/2019/02/day7-form.png

ファイル添付のフォームをオリジナルで作ってみる

かなり難易度が上がりますが、こちらもいずれ対応しなければならない日がくると思います…。

JavaScriptも絡むので、本当に余裕がある方だけ調べてみてください🙏

DAY16. フッターのコーディング

いよいよ最後のパーツ、『フッター』です❗️これで練習課題のコーディングは完成👍

以下のXDのデザインカンプをレスポンシブ込でコーディングしてください。

コーディングに必要な値はデザインカンプから取得できます。その他の条件としては、以下の条件で作成してください。

• 全体的にリンクの設定は不要
• スマホ時は縦並びにする
• 背景はグラデーション

余裕がある人向けの課題

余裕がある人は以下の課題に取り組んでみてください。
※別のHTMLファイルに作成してください

• PerfectPixelでチェック
• フッターの別パターンも試してみる

PerfectPixelでチェック

PerfectPixelでコーディングのズレをチェックしましょう。
（この後もセクションを足していくので最後にまとめてチェックでもOK）

比較用の元画像はこちら↓

https://haniwaman.com/wp-content/uploads/2019/02/day8-footer-2.png

フッターの別パターンも試してみる

スマホ時の固定フッターや部分的な背景、SNS系のウィジェットの埋め込みはよくあるので、ぜひ作ってみてください！

デザインデータからコーディング〜よく使うパターンを練習しよう編まとめ

以上、DAY19〜DAY16までのまとめでした。

かなり難しかったと思いますが、これでコーディングの練習課題は完成です！お疲れ様でした😀

これだけしっかりコーディングできてれば、もう初心者じゃありません。

『他の人が書いたコードも見て勉強したい！』という方は、Slackの『#4_デイトラ実戦日記』チャネルをご覧ください。

はにわまんさんやデイトラ2ndの参加者の方々があげてくださった作成例が見れますので。

次はいよいよコーディング編のデイトラDAY30までの記事です！

最終課題をクリアすると特典もあるので、ぜひ完走目指して頑張ってください。

それでは！