タグ: ポートフォリオ

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

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

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

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

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

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

模写した感想

技術の問題

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

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

対象物のとらえ方の問題

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

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

細かな調整

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

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

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

ホームページのデザインを作ってみました。
下の画像をクリックするとページが開きます（別窓）。

制作の経緯

事務所のホームページ用にデザインしました。

そんなに凝ったデザインはいらないんです。
「ただただホームページがあればそれでいい」という軽い気持ちで作っています。

今回はとにかく「最低限でいいので、ひととおり作ってみる」ことが目標でした。頭でいくら考えたってホームページ作りは上達しませんしね。

これまでHTML・CSSは多少いじったことはあるのですが、一から本格的に作るのは初めてです。

また、ここに掲載したホームページは静的ホームページですが、これとは別にWordPressを組み込んだホームページも作っています。
もちろんホームページにWordPressを組み込んだのも初めてです。

ただ、残念なことにWordPress版は、プログラムが一部組めないところがあり、今回掲載したホームページとは若干、デザインが異なることになってしまいました。

ともあれ最初から最後までホームページを作ったことは大変勉強になりました。デザイン屋さんの苦労がよくわかりました。

ホームページの特徴

商業用のホームページでは、出来るだけ多くの問い合わせが入るように、ページの目立つところに電話番号などの連絡先が明記してあることも多いです。

ですがこのホームページでは、会社の電話番号・メールアドレスは「お問い合わせ」のページにしか載せないようにしてあります。

ホームページで気にっているところ

メニューバーの色ですね。
青色というか、藍色が気に入っています。

グラデーションにしているのですが、グラデーションにしたことで、光が反射したように見え、立体感が出ています。

ホームページの気になるところ

このホームページで気になるところは、全体的に立体感がないところですね。
（あまりにも立体感がなかったのでメニューバーをグラデーションにして立体感を出してみたんですよね。）

特に本文とサイドバーの区切り部分がまったくオシャレではない。

破線の区切りが安易です。
破線を一本引いただけでは全く立体的には見えない。当然のことか。

ホームページを立体的に見せるには、背景に影をつけたり、色分けをするといった何らかの工夫が必要だったんですね。