ホームページの模写をはじめた話

模写を始めた理由

最近、ホームページの模写をはじめました。
とりあえず1件模写してみました。以下をクリックしてみてください。

Natural Shop Coco ナチュラルショップ ココ

ホームページの模写を始めた理由は、ずばり私のデザイン力の向上ですね。

最初はきれいな写真・見栄えのいい写真を使えばホームページのデザインも良くなるんだろう、と思っていました。
けれどそのうち、きれいな写真を使ってもデザインが良くなるわけではないことに気付きました。

あたりまえですね。

写真を使わなくても、デザイン性に優れたホームページはいくらでもあります。
またデザインが悪いのに、写真だけきれいにしても、かえってアンバランスで見栄えが悪くなることもあるでしょう。

やはり良いホームページを作るためには、デザイン力そのものを向上させるしかないわけです。

デザインの本を読んでみるが…

デザイン力を身に付けるために、デザイン構成とか配色に関する本を読んでみました。

しかし、これも違う気がしました。
たしかにそういう本も必要ではあるのですが、ホームページの作成経験が少ない人間がそのような本を読んでも、いわゆる机上の空論・畳の水練となり、あまり意味はない気がします。

ホームページ制作の何が難しいのか? どのような点につまづくのか? といったことを認識したうえでないと、デザインの本を読んでも活かせないと思います。

やはり、まずは自分でホームページを多数つくってみる。それが大事ですね。

ただし、自分の感性でホームページを作っても素晴らしいデザインはできないので、まずは優れた見本を真似ることにしました。

見本を真似ることで、そのホームページの何が素晴らしいのか? どのようなテクニックを使っているのか? そういった点を学びたいと思います。

紳竜の研究

私が模写で思い出すのは、『紳竜の研究』というDVDです。

漫才コンビ「紳助・竜介」についてのDVDなのですが、このなかに収録されている、島田紳助さんが吉本のお笑い芸人の養成所で授業をされている部分は大変参考になります。

この授業は全編参考になるのですが、このなかで紳助さんは自身の漫才の勉強ついてこう語っています。

録音テープを懐に忍ばせ、面白いと思う漫才コンビの漫才を録音したそうです。
そしてそれを「紙に書いていった」といいます。漫才を耳で聞くだけではだめだそうです。耳で聞いただけでは面白い理由はわからないと言います。

そうではなくて漫才を紙に書き出し、分析し、考えることで分かってきたことがあるそうです。
落ちのパターンとか、間の数とか…。

そうやって面白い漫才を分析したうえで、自分なりのスタイルを確立していったという話なんですね。

この話はもちろん漫才に限った話ではないです。
私のやろうとしているホームページ制作にも通じますし、他の仕事でも同じことですね。

ですから基礎を確立するまでは、私もホームページの模写を続けたいと思います。

模写「Natural Shop Coco」

ホームページを模写してみました。

模写したのは『おしゃれなWebサイトテンプレート集』(山口有由希、坂本可南子、梶嶋えりか / 技術評論社)という本の最初に掲載されているデザインです(Template_01を模写しました)。

はじめは単にコードを書き写して勉強しようと思ったのですが、途中で「そんなことをしてもつまらないな」と思い、コードを見ずに模写することにしました。

そして模写して完成させたサイトがこちらです。
画像などの素材は『おしゃれなWebサイトテンプレート集』に入っているものを使っています。

Natural Shop Coco ナチュラルショップ ココ

オリジナルは数ページの作品ですが、今回、模写したのはトップページだけです。
またオリジナルはJQueryを実装しているのですが、私がやりたかったのはホームページのデザインを真似ることなので、模写サイトではJQueryは実装していません。

模写した感想

技術の問題

まず困ったのは技術的なことです。
私の技術のいたらなさから、やりたい装飾がすっと出てこないのは困りました。

たとえば文字や画像を縦方向にそろえる方法や画像の重なりをうまく調整する方法などは参考書を見ながら進めなければなりませんでした。

対象物のとらえ方の問題

当然ですが、デザインを見たときに「どのようにすればコードを簡単に書けるのか?」 を常に意識する必要があります。
たとえば同種のデザインであれば、それらを一括でコーディングできないか? と考えるのは当然のことです。

けれど今回、私は対象物のとらえ方が下手だったので、余計なコーディングをしなければなりませんでした。

細かな調整

こまごましたデザインの調整には苦労させられました。

もちろん、そのような細かな点までしっかりと表現するからこそ、デザインとして優れたものになるんですけどね。

仕事であれば細かなところもしっかり作りこまなければならないのですが、模写であれば、全体のバランス・見栄えさえよければ、こまごましたところは飛ばしてしまってもいいかもしれませんね。