いつも色々と参考にさせて頂いているHPcodeを運営されているはにわまん@haniwa008さんが公開している有料notePhotoshop、Illustrator、XDからのコーディングに慣れよう！を購入して模写コーディングを行いました。
noteの内容
ヘッダーメニューと画像、メイン部分にカードタイプのブログ記事の一覧、フッターというシンプルなレイアウトをPhotoshop、Illustrator、XDのカンプデータから画像の抜き取りや各種フォントやサイズを計測してWebページを作成するといった内容となってます。
デザイナーでもないし、Photoshop、Illustrator、XDなんて持ってなによっていう方にも安心のXDのデータがブラウザ上で確認できる共有URLを付いてるので、問題なく模写コーディングにチャレンジできます。
あとは実際にはにわまん@haniwa008さんがコーディングした内容も付いてきて、それと自分のコーディング結果を比較できるのがありがたいポイントだと思います。
ちなみにこの内容ははにわまん@haniwa008さん達が運営している模写コーディングの会での課題としても使用しており、コーディングに慣れていない方だとPCページの作成のみで5時間ぐらいかかる見込みのようです。
模写コーディングを行った感想
Photoshop、Illustrator、XDのいずれももってないので、XDの共有URLから各種サイズや色などを抜き出してコーディングしました。この場合データから画像の抜き出しはできないので、ダウンロードしたファイル一式に含まれている画像ファイルを使用します。
というかデザイナーじゃなくてもPhotoshopとか必要なんですねぇ・・・。デザインの変更はしないで、サイズの計測やカラーコードの抜き出しとかだけなんで、フリーのソフトでどうにかならないか調べてみないと。
実際のコーディングはPCページだけで2〜3時間ほどでコーディングできることができました。レイアウトがシンプルなのでHTMLの構成も考えやすく、導入にはほんとちょうどいいなって感じでしたね。
なんにしても完成した時の達成感が良いですね。自分も一応現役のエンジニア(Web系ではない)ですが、これだからプログラミングはやめられない。
しかし、はにわまん@haniwa008さんのソースと比較してみると、違いがいっぱいでした・・・。
- font-familyって複数指定すんの？
- sectionタグかぁ。聞いたことあるね。使ったら何かいいことあるんやろか？
- navタグだと・・・
- webkitってなに？
- コメントってこう書くとタグの開始と終了が分かりやすいなぁ。
- カードタイプの記事ってこうやってリンク貼るんだ
- HTMLのインデントってどんなのが主流なんだろ？
- 基本classはつけたほうがいいのか？
などなど。やっぱり実際のWebエンジニアの方のコードと比較するとめちゃ勉強になりますし、発見がありますね。
あとTwitterではにわまん@haniwa008さんに質問させて頂いたら、丁寧に回答もしてくださりものすごくありがたく、嬉しかったですね。自分は独学でWebエンジニアを目指してるので、実際のWebエンジニアの方とお話しできる機会はほとんどないので本当にありがとうございました。
まとめ
- 有料だけどシンプルなレイアウトなので模写コーディング1発目にもってこい
- Photoshop、Illustrator、XDのカンプデータをもとにコーディングするという実務に形でコーディングできる
- 実際にコーディングされたファイルがついてくるので自分のソースと比較しやすい
