ホームページを模写してみました。
模写したのは『おしゃれなWebサイトテンプレート集』(山口有由希、坂本可南子、梶嶋えりか / 技術評論社)という本の最初に掲載されているデザインです（Template_01を模写しました）。
はじめは単にコードを書き写して勉強しようと思ったのですが、途中で「そんなことをしてもつまらないな」と思い、コードを見ずに模写することにしました。
そして模写して完成させたサイトがこちらです。
画像などの素材は『おしゃれなWebサイトテンプレート集』に入っているものを使っています。
Natural Shop Coco ナチュラルショップ ココ
オリジナルは数ページの作品ですが、今回、模写したのはトップページだけです。
またオリジナルはJQueryを実装しているのですが、私がやりたかったのはホームページのデザインを真似ることなので、模写サイトではJQueryは実装していません。
模写した感想
技術の問題
まず困ったのは技術的なことです。
私の技術のいたらなさから、やりたい装飾がすっと出てこないのは困りました。
たとえば文字や画像を縦方向にそろえる方法や画像の重なりをうまく調整する方法などは参考書を見ながら進めなければなりませんでした。
対象物のとらえ方の問題
当然ですが、デザインを見たときに「どのようにすればコードを簡単に書けるのか？」 を常に意識する必要があります。
たとえば同種のデザインであれば、それらを一括でコーディングできないか？ と考えるのは当然のことです。
けれど今回、私は対象物のとらえ方が下手だったので、余計なコーディングをしなければなりませんでした。
細かな調整
こまごましたデザインの調整には苦労させられました。
もちろん、そのような細かな点までしっかりと表現するからこそ、デザインとして優れたものになるんですけどね。
仕事であれば細かなところもしっかり作りこまなければならないのですが、模写であれば、全体のバランス・見栄えさえよければ、こまごましたところは飛ばしてしまってもいいかもしれませんね。