Webデザインに黄金比使うときの計算ツールと注意点

急にパワフルなおっさんが表示されてしまってごめんなさいwww

ジムの広告ではありません!!笑

デザインの王道「黄金比」と「フィボナッチ数列」

卒制デザインを作る際に何よりも沢山使ったもの…それは……

黄金比とフィボナッチ数列。

これまで黄金比や白銀比を使ったデザインの例を挙げてきましたが、今回はその更に応用としてウェブサイト制作でよく使用するレイアウトや要素に黄金比を当てはめてみました。

すごい真面目に取り入れたから、計算がめんどくさくて死ぬかと思った。

そうです。計算がめんどくさくて、ノートがデザインと数字ばかりになった。しかも計算間違ったりする。

そこで…

一辺の入力から黄金比の短辺と長辺を計算します。

黄金比計算サイト!!!

ほんっとうにお世話になりました!!!!!

ほんと便利だったわ…助かったわ…

逆算もできるので助かる。長い方をいれて短い方を出すのもできるんで楽です。すばらしい。

黄金比とフィボナッチ数列をスマホサイトのデザインにねじこんでみた。

細かいところや画像の配置に「1:1.6(黄金比)」と「カタツムリ(フィボナッチ数列)」がねじ込んであります。

例えば、左右余白とカードとカードの間が、1:1.6になるように。

他にも、カードの上のボーダーとその下の余白が1:1.6になるように。

フィボナッチ数列の各項を1辺とする正方形を使って画像の横幅を計算しました。

デザインするところまではいいんです。これで。

余白も計算していて、合っている気がしますでしょ、気が、ね…

コーディングするときのことを考えたデザイン作業を心がける

まず、黄金比計算ツールでは小数点で数字が出ますから、整数を見て適当に採用すると、ピクセル単位でちょっとずれることがあります。

かならず合計値を確認しなければいけません。

449.7だから450だな~とか作るとあとで事件が起きます。

潔く、切り捨ててみましょう。小数点以下は全部切り捨てる。

そうするとちゃんと合計値が合うんです。数字が中途半端で気持ち悪いなって思うのはそのときだけです…後々、このほうが楽です!(←昔の自分へ語りかける)

 

埋め込み画像の下にシェイプを置くようにする

次に、余白について…

デザインするとき、ついPhotoshopの「効果>境界線」が簡単だからそれで余白を作ってしまうんですけれども、いざアセット書き出ししてみると想定しているサイズにならない。

どういうことかというと、たとえばまず、400×400の画像に3pxの白い境界線をつけます。

こうすると、見た目は400×400の画像で、それとは別に白い余白があるように見えますが、実際は406×406の画像で、白い余白も含むひとつの画像になってしまっているのでした。

解決策は色々あるのだろうけれども、想定できる方法は…

  1. スライスで切り出す
  2. 画像の下にサイズにあったシェイプを置いて、画像はクリッピングだけにする

アセット書き出しのある現在、スライスするのは嫌だぁ…!

スライスだってちゃんとガイドが合わなかったらピクセル単位でずれるんですよ。そしてあとでCSSで合わないな~になるんですッ。

画像に直接白い境界線をつけるのではなく、そこに画像をクリッピングして配置するようにし、書き出すときは効果を消してシェイプごと書き出す。

つまり…

上のシェイプに下の画像をクリッピングするだけです。

ばっちり。

効果(境界線)を消して書き出しすればOK。

まあ、一番いいのは白いシェイプの上に普通にシェイプ置いて画像クリッピングでしょうね…効果消す必要ないもんね…。

でもこれだと、余白が何ピクセルだか忘れたり、余白が6ピクセルのはずなのに6もなかったりという事件が起きることもあって、果たして何が最適解なのやら。

まとめ

黄金比の取り入れ方↓

これまで黄金比や白銀比を使ったデザインの例を挙げてきましたが、今回はその更に応用としてウェブサイト制作でよく使用するレイアウトや要素に黄金比を当てはめてみました。

黄金比の計算は頭を使わずツールを使うとラクラク。

一辺の入力から黄金比の短辺と長辺を計算します。

使った数字は念のため、ノートにメモるか、メモ用グループに書き付けておく(この画像何ピクセルとか、ここの余白いくつとか)。

Photoshopで操作している間も、この画像書き出したらどうなるんだ?を考えながらグループ整理しつつ作るようにするのだぞ昔の自分よ!!!(反省文