FC2ブログ

黄金率 

 今日はサイトのデザインについて

 年も明けた事だし、サイトデザインをなんか弄ってみようかと思った。

 うちのサイトは、FC2の有志さんが作った共有テンプレートを使わせてもらっている。自分で一から書き起こす何て無理すぎるしw

 作者さんのサイト:http://myhurt666.blog22.fc2.com/ ここのcz-mori ってやつだ。

 んで、このテンプレートは個人で色やら画像やらの大きさを変えることが出来る。ここの部分を変えれば何が変化するかと言う説明がテンプレートに記入してあるので、HTMLとかド素人の私でもこういう風に書き換える事が出来ているのだ。

 精々画像のサイズを変えたり、文字の大きさ・位置・色を変えたり、表示する画像のリンクを書き換えたりするだけ。難度も試行すればなんとなく分かるようになるw

 さて、そんなわけでなにかデザインの参考になるネタでもないかなーと彷徨っていたらこんな言葉を見つけた。

 「黄金率」

 簡単に言うと、人間にとってしっくり来る・かっこよく見える・心地よく思える、という様な比率の事だ。この黄金率(黄金比)はさまざまな物にあるが、今回は平面の絵に関する比率が載っていた。

 四角形の絵を見るときに、縦の長さを1とすると横を1.618位に設定してあると心地よく感じるらしい。さり気なくサイトに載せる画像をこの比率にしてある所も結構あるそうな。

 んじゃまあ、うちもやってみるか。

 一番目立つトップ絵をこの黄金率に合わせようとしたのだが、いかんせんサイズがでかくなり過ぎることが判明した・・・。

 うちのトップ絵は、横が770ドットと決まっている。これはテンプレートのデザインが元からこうなのでどうしようもない。この大きさで黄金率を当てはめてしまうと、縦は476ドットも必要だ。実際にやってみるとこうなる↓
080115-01.jpg

 
 ・・・・うーむ、確かに1枚画像としては確かにしっくりくる。が、さすがにでかすぎるw もうちょっと縦を短くしたい所だ。

 縦を短くすると、それに比例して横も短くなってしまう。しょうがないので短くなった分余白をつけてしまうことにした。単なる余白だと目立つから、タイトルとかその他の文字で不自然に見えないようにごまかせば・・・でけた!
eve-title06.jpg

 
 こんな感じで今のトップ絵が出来たのでした。見た感じどうだろう?でかくても1枚絵の方がいいかな?それとも今のタイプ?簡単にでいいので感想もらえると助かりまするー。

 あ、ちなみにウチの画像切抜きとか文字入れとか余白追加とか、画像関連は全部1本のフリーソフトでやっている。シンプルで軽いので、凝った事しないスクリーンショット加工程度なら結構便利ですぜ。
 JTrim  http://www.woodybells.com/jtrim.html

コメント

>カッパさん
どもー、コメントありがとうございます。
リンクのサイト読んで見ました。勉強になりますなあ。
書類のデザインにも応用できるかも・・・w

私じゃ一からWEBを書き上げるのは無理なので、このサイトのようにテンプレの色変え・絵変えがせいぜいです。テンプレート登録はちょっと難しいですなw

現在のトップ絵の寸法はこんな感じです。340:550で黄金比を入れております。
縦340×横770(写真550:黒余白220)
む、いっそ余白を左にすればリンク先の手本に合うかも・・・。ちょっとやってみよう。

はじめましてこんにちわ。
いつもEVE記事拝見させていただいてます。

興味深い話題なのでちょっとお邪魔します。
サイトデザインで黄金率ってのは、
なかなか面白いですねー。
確かに黄金率に基づいてトリミングされた
SSとかは、落ち着いてていいですねー。
ただちょっと看板絵にしては大きすぎる気も
しないではないですねー。
ここらへんは好みの問題なのかな?

とりあえず面白そうなので、ぼくもいくつか検索してみました
http://ayanpa.com/10.htm
ここの画面分割のデザインとかちょっとお勉強になりますよー。

ぜひ素晴らしいバランスのデザインを模索してください。

PS
願わくばいいバランスが出来ましたら、
テンプレート登録してください。
利用させてもらいますので!(ぉぃぉぃ

コメントの投稿















管理者にだけ表示を許可する

トラックバック

この記事のトラックバックURL
http://guis.blog14.fc2.com/tb.php/522-b13eb0f2