golden-ratio

はいどうも、うじがみ(@xujigamix)です。

今回の記事ではサイトを作る際の画像の大きさや、おすすめのサイズについて解説をしていきます。

特に重要なのが今回お伝えする黄金比の理解です。サイトを綺麗に見せるとても簡単なテクニックですので、覚えておきましょう。

うじぴー
僕も黄金比で作られているっぴ?

うじがみ
あ、ごめん。うじぴーは違うよ。

画像の黄金比とは?

黄金比(おうごんひ、英語: golden ratio)は、

{\displaystyle 1:{\frac {1+{\sqrt {5}}}{2}}}の比である。近似値は1:1.618、約5:8もしくは8:13。

線分を a, b の長さで 2 つに分割するときに、a : b = b : (a + b) が成り立つように分割したときの比 a : b のことであり、最も美しい比とされる。貴金属比の1つ

黄金比とは1:1.618の比率で構成された形の事を指します。

短い辺を一辺とする正方形を作り、残った枠で同じ作業を繰り返すと半永久的に正方形を作り出すことができます。

紀元前の古代ギリシャで発見されたと言われており、人間が見た時に最も綺麗と感じる比率です。

黄金比が使われている例
・Appleのロゴ
・名画「モナ・リザ」
・エジプトのピラミッド

では何故美しく感じるのか

golden-spiral理由は自然界が作り出した比率だからです。

黄金比の点を繋いでいくと渦をまいた螺旋を描きます。上記の図が黄金比で作られた画像です。

この曲線を黄金螺旋と呼びますが、この螺旋を描いている多くのものが自然界が生み出されたものなのです。

人間もこの自然界に生を頂き生きていますよね。ですので人工物よりも自然の造形美の方が綺麗だなと感じてしまうのが本能・いわば性なのです。

黄金比が美しく感じてしまう理由
自然界が作りだした比率だから

オウムガイでしたり、台風の渦なども自然が作りだした造形と言われていますね。

自分のサイトの画像を黄金比にする方法

edit方法は簡単です。

私はPhotoScapeというソフトを活用して画像を編集しています。このソフトを使えば誰でも簡単に黄金比のサイズに画像をトリミングできます。

もし既に別のソフトを使っているよという方であれば、今お使いのソフトでもトリミング機能が備わっているはずですので、そのソフトでもOKです。

トリミングして画像を編集する

trimming

ソフトのインストールができたら編集したい画像を選択して、1:1.618の比率に加工するだけです。

PhotoScapeを開いたら画像の編集を押し、編集したい画像を用意します。

そうしたら下にトリミングというボタンがありますので押してください。そうしたら自由トリミングを押して編集したい画像の比率を1:1.618の比率にして保存するだけです。

たったこれだけの作業で自分のサイトが簡単に綺麗に見せることが可能なのです。

私のサイトもほぼ全ての画像を黄金比の比率に設定してありますよ。

トリミングの計算

例えば縦幅500px 横幅1000pxの画像があったとします。これでは1:2の比率ですね。ですので縦幅を変更しない場合500pxに1.618を掛け算すればOKです。

トリミングの計算式 (例)
500(px)×1.618=809(px)

これであなたもダ・ヴィンチ

せっかくなので黄金比も自分のサイトに取り入れて、よりサイトを綺麗に見せましょう^^

はいこんな感じで今回は以上となります。

最後まで閲覧頂き、ありがとうございました。

スポンサーリンク

Twitterでフォロー

おすすめの記事