バンコクでノマドエンジニアを育成しているiSARAのサイトを模写コーディングしました。
模写した感想として、デザインのレベルはそれほど高いというわけではないと思いました。Web制作でよくみられるデザインパターンがたくさんあり、模写することによってWeb制作の実力向上に役立ちました。
ただ、このような見栄えの良いサイトに共通することですが、見栄えをよくするために細かなテクニックがたくさん使われていることに気づきます。
iSARAはもともと分量が多いサイトであるうえ、このように細かなテクニックがたくさんあるためと「やってもやっても終わらない」という状態となり、完成させるのにかなりの日数を要しました。
ところでコーディングの進め方についてですが、今回は従来の進め方を変えました。
いままではとにかくスマホサイズの画面のコーディングをすべて終わらせてから、パソコンサイズの画面のコーディングに取り掛かるという方法を取っていました。
けれどこの方法は手間がかかり過ぎます。
今までわたしが模写したサイトは短いサイトが多かったので、問題は顕在化しませんでしたが、今回のiSARAのような分量の多いサイトではこの方法だと手間がかかり混乱のもとです。
そこで今回はブロックごとにコーディングする方針に切り替えました。
現在でもコーディングをする際はブロックごとに作成しています。その際、Sassのミックスイン機能を使ってメディアクエリを効率的に書いています。ただ、このiSARAのコーディング当時はミックスイン機能のことを知らなかったので、メディアクエリを効率的に使えず、それなりの苦労があったことを覚えています。