2009年09月25日

ラクサスHPリニューアル日記:黄金比の使用

そろそろ弊社のホームページを新しくしようということで、部長から

「まずはページ上部のグローバルナビゲーションから新しく作成するように」

との指令を受けました。

考慮する点は2つ:

  • ナビゲーションの構造はそのままに
  • 現在使用している色もそのまま使う事

いくつかのイメージは頭の中にありましたが、
角丸のアイコンを作ればよいのではないかと考えまずこのような物を作成しました。

raxusbutton95news.jpgserviceicon2.jpgproductsicon4.jpg
company3.jpgrecruitmenticon3.jpgblogicon3.jpg

これらを見た部長からの指摘:

「バランスが悪い。繋げてみては?」

この指摘を受け新しく作り直したのがこちらのセットになります。

newssquare107.jpgservicesquare (2).jpgproductssquare.jpg
companysquare (2).jpgrecruitsquare (2).jpgblogsquare107.jpg

これらは採用され8月下旬現在使用されています。

次にページ選択時に必要な、色が変わったバージョンをもう1セット作成するのが次の段階でした。

取り掛かると同時に、これらアイコンの少しぼてぼてした感じを少しすっきりさせたかったのでどうしたらよいのか悩んでいた所、どこかで読んだ黄金比の話を思い出し、試してみることにしました。

黄金比とはもっともバランスが良く見えるとされている比で、近似値は 1:1.618 の比からなっています。

黄金比を基に作成した新しいアイコンがこれらです。

news.jpgservice.jpgproducts.jpg
company.jpgrecruit.jpgblog.jpg

newswhite.jpgservicewhite.jpgproductswhite.jpg
companywhite.jpgrecruitwhite.jpgblogwhite.jpg

アイコンの縦幅は30ピクセルになっているのですが(外枠を除けば28ピクセル)、文字と上下余白のサイズが約 1:1.6 の比になるように作成しました(上余白:文字:下余白 の比が約 1 : 1.6 : 1 。ただ1ピクセル単位での作業が限界でしたので厳密には少しずれていると思いますが)。

黄金比は自分みたいな素人でもバランスの良いデザインが作成できるので、何かのサイズを決めるのに迷ったときにおススメです。

自分としてはこれらのアイコンは会心の出来だったのですが、8月現在使用されていません。それは部長からの指摘で没になってしまったからです。

「文字が見えない。やり直し」

これからのラクサスのホームページの変化ぶりにご期待ください。


ラベル:G
posted by ラクサス at 14:03| Comment(0) | TrackBack(0) | web | このブログの読者になる | 更新情報をチェックする
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック
×

この広告は180日以上新しい記事の投稿がないブログに表示されております。