こんにちわ！確定申告がまだ終わっていないまゆげです。最近はリアルでも、WordPressに関することやディレクションのことばかりなので、たまにはデザインのことについても熱く語っておきたいと思い、基本的なことですがしっかりとまとめてみました！

意味を持つデザインを作るために

Webデザインを考える際には、誰しもがインスピレーションを求めて参考になるようなサイトを見てまわることはあると思います。そんなときに 「あッ！」 と思わせるデザイン、ありますよね。ただ見惚れるだけでなく、それを 「なぜ？」 と考える癖をつけておくと、自分の知識を深める一つの材料になるかもしれません。

目次

• シンメトリーレイアウト
• 対角線を意識したレイアウト
• 三角形を意識したレイアウト
• 黄金比・白銀比のレイアウト

シンメトリーレイアウト

シンメトリーとは、配置が対称であることです。よく目にするデザインは鏡像対称性をもったデザインですね。 左右や上下を反転させてみたときにエレメントの配置が対称になる ことで、安定感を出すことができます。

対称となっているものに色変化をつけてリズムをつけたり、写真を反転させたものをくっつけたりして背景要素に鏡像対称を用いたり、簡単キレイにデザインをすることができる手法ですね。

使用フォント：Mrs Eaves, HG明朝B

対角線を意識したレイアウト

エレメントを対角線上に配置する ことによって、シンメトリーと同じように安定感を出すことができます。

また、上図のように人物の目線の先に文字情報を乗せるとスパイスの聞いた構図を作ることができます。写真の応用を使用すると、大事なテキストを左側へ持ってこない場合でも優先順位がつけられるので、アクセントとして非常に重宝します。

素材：空を見上げる森ガール［モデル:あみ］
使用フォント：HG明朝E, Helvetica Neue

三角形を意識したレイアウト

今までは見せたいエレメントが２つでしたが、今度は３つ以上の場合に考えるレイアウトです。目立たせたいものに重きをおき、それが三角形になるように配置をします。

配置に合わせて、 色を置く場所も三角形 になっていると更にバランス良く見えますね。エレメントの大きさに優先順位をつけて配置を考えると尚良しです。

使用フォント：HGS明朝E, 新ゴ, Helvetica

黄金比・白銀比のレイアウト

ちょっぴり難しいですね。でも分かっているのといないのとでは大きく差がでるこの手法。言葉自体は聞いたことのある方が大半でしょう。

黄金比

まず黄金比についてですが 1:(1+√5)/2 近似値 1:1.618 で算出されます。

この考え方の起源は、紀元前古代ギリシャのピタゴラス学派に端を発する。黄金比はヨーロッパでは古くから最も美しい長方形として親しまれ、ルーブル美術館に所蔵のミロのビーナス、パリの凱旋門、ギリシャの遺跡パルテノン神殿などにも、黄金比の比率が使われている。
– コトバンク

有名なものとしてはパルテノン神殿やモナ・リザでしょうか。他にも黄金比に限りなく近いとされる「フィボナッチ数列」を用いているAppleのロゴなどが有名ですね。

参考リンク：黄金比・白銀比・青銅比…デザインの参考になる数学的比率
参考リンク：神秘の調和、アップル社のプロダクトデザインに隠された「黄金比」

素材：淡い桜と青空, ネクタイを頭に巻いた酔っ払い［モデル:OZPA］
使用フォント：新ゴ

白銀比

次に白銀比。別名「大和比」とも呼ばれ、日本の建造物などにもよく使われます。他にもアニメキャラクターにも用いられたり、最近だとスカイツリーに用いられているのがホットなあたりでしょうか。

白銀比は 1:√2 で近似値は 1：1.414 となります。歴史は聖徳太子の頃まで遡り、寸法を測るときに使われる「曲尺」という道具に √2 の目盛りが刻まれていたとされています。

例については、黄金比と似ているところもあるので割愛します( ˘•ω•˘ )デザインの歴史についても触れることができるので、気になる方はぜひ調べてみてくださいね！

参考リンク：日本人は黄金比よりも白銀比や正方形が好き？
参考リンク：キティ、あっちゃん…日本で最もウケるバランス「白銀比」とは

今回はここまで

本記事のようなテクニックを知っていれば、 クライアント＆上司相手にも堂々と提案 できますね！ひとつひとつ勉強してさらに応用を利かせられるようにしたいものです。

日本ではアートとしての意味合いを強く持ってデザインという言葉が歩いていますが、デザインは日本語訳すると「 設計 」なのを皆さん知っていましたか？お仕事にされているプロの方にとっては当たり前なことでも、意外に知らないことはたくさんあるかもしれませんね！

今回ご紹介したレイアウト術は、まだまだほんの一部にすぎません。私ももっともっと勉強がんばりまーす！

次回の私のデザイン記事では

• 視線誘導
• 配置の「重さ」
• ジャンプ率

あたりについて書きたいと思います。

目指せ、イケてるデザイナー！！