黄金比を意識したはがき裏のレイアウト【はがき編】

pp_shikakuipost_TP_V黄金比を使ってはがきの裏をレイアウトしてみます。

名刺の情報を整理する

デザインに必要な情報

はがきの裏面に表示する情報は以下のものです。
・宛先の住所
・宛名
・送り主の住所
・送り主の氏名

重要度によって情報を整理する

情報を重要度でランク付けすると以下のようになります。

・重要度2 宛先の住所
・重要度1 宛名
・重要度4 送り主の住所
・重要度3 送り主の氏名

黄金比率を使って名刺のレイアウトをする

以下の2点を意識してレイアウトしてみます。

1:黄金比に従ってフォントに階級を作る
2:黄金比で作った分割ラインに沿って要素を並べる

そもそもはがきのサイズは100mm✕148mmなので、黄金比ではないのですが、
1:1.618の比率でレイアウトを分割します。

1:文字サイズの比率を1:1.618にする

一番大きい文字サイズを100ptにして、重要度順に文字サイズを変えることにします。
サイズは黄金比を元に算出します。
61.8ptというのは、100ptを1.618で割ったものです。
つまり、
100pt:61.8pt=1.618:1
61.8pt:38.2pt=1.618:1
という計算をしています。

mihon

フォントは、Adobe社の小塚明朝 Proを使ってみましたが、毛筆体のフォントをお持ちであればそちらをお使い下さい。
これらのサイズを使用して要素を配置します。

2:画面分割比を1:1.618にする

画面を黄金比で割るためにテンプレートを使用します。

今回はPhotoshopをしようしてデザインします。レイアウトを分割するカスタムシェイプがこちらのサイトで提供されているので、これを使うことにします。

はがき(裏)のレイアウト

画面にカスタムシェイプを配置します。

dddd

同じものを反転して重ねます。水色の線はガイドとして引きました。

hagaki8

黄金分割のグリッドに従って、決められたフォントサイズで配置します。

hagaki7

グリッドをとったものがこちらです。

hagaki6

はがきの裏面だとある程度配置はきまっているので、黄金比による文字サイズを考慮するとバランスよくレイアウトできますね。

追加

「横書きで表示した場合のレイアウトもみたい」というリクエストがありましたので作りました。

ぱげ

グリッドをとったものがこちらです。

page2(1)

黄金比を使ってデザインしてみよう【名刺編】

MKJ_ryoutedemeishiwowatasu_TP_V

前回の黄金分割の話に続いて、今回は実際にデザインをしてみます。
レイアウトする前に、名刺のデザインに必要な情報について整理をしてみます。

名刺の情報を整理する

デザインに必要な情報

・ロゴデザイン
・会社名
・肩書
・氏名
・連絡先(メール・ 住所・電話番号・ウェブサイトのURL)

重要度によって情報を整理する

情報を重要度でランク付けすると以下のようになります。
・重要度 1ロゴ
・重要度 3会社名
・重要度 3肩書(※)

・重要度 2氏名
・重要度 3連絡先のメール
・重要度 4住所
・重要度 4電話番号
・重要度 4連絡先URL

また、重要度の高い情報は、他の情報と距離を離して配置するとよいです。
理由は簡単、他の情報の近くに置くと、情報が埋もれてしまうためです。
逆に、住所・電話番号・連絡先URLなどの関連する情報はまとめて近くに表示するとわかりやすいデザインができます。

サイズについても重要度を考慮します。
重要な順に大きいサイズのフォントを使用しましょう。
(※)名詞の場合、肩書は例外です。重要度の高い情報ですが、情報としては名前の近くに配置する必要があります。名前のほうををより目立たせるために、肩書は小さめに表示します。

黄金比率を使って名刺のレイアウトをする

以下の2点を意識してレイアウトしてみます。
1:黄金比に従ってフォントに階級を作る
2:黄金比で作った分割ラインに沿って要素を並べる

1:黄金比に従ってフォントに階級を作る

情報の重要度に合わせて文字のサイズを変えます。
サイズの比率は黄金比で算出してみます。

size2

20pt÷1.614=12.4pt
12.4pt÷1.614=7.6pt
というように、黄金比で割って段階的にサイズを決めました。
フォントによって、同じ級数にしてもサイズがそれぞれ違うので、一概にはいえませんが、基準となる一番大きいサイズは20ptで設定するといいです。これは、平均的な名刺より若干大きくしています(18pt基準だと年配には読みづらいので)。

また、フォントは小塚ゴシック ProというAdobe社が提供しているフォントを使用しています。別のフォントを使用するのは、話がぶれるので今回やめてます。

2:黄金比で作った分割ラインに沿って要素を並べる

Adobe Illustratorを使用してデザインします。
黄金比のグリッドを配置しましょう。
このグリッド線のデータ(eps)は、
こちらのサイトから取得しました。

名刺のレイアウト案1

黄金比のグリッドレイアウトの線をおきます。

a


別レイヤーにグリッド線を反転させておきます。色も青に変えてみました。

b


両方重ねました。これを補助線として使用します。

ab


黄金分割のグリッド線に沿うように、要素をこのように並べてみました。

haiti


補助線をとったものがこちらです。

haitib

名刺のレイアウト案2

同じグリッドを使用して、別の配置を試してみました。

meisib


補助線をとったものがこちらです。

snsmaker

おまけ

ロゴデザインについて

今回のロゴはonlinelogomaker.comというサイトを使用して作りました。
こういったサービスは「ロゴジェネレーター」と呼ばれるものです。
他にもたくさんありますのでコチラのリンク先をご確認下さい。日本語が入力できるものもありますよ。

フリーフォントについて

フォントについて無料で使える日本語フォントもありますので、参考にして下さい。
http://fontfree.me/category/mincho

黄金比 デザイナーじゃなくても今日から美しくデザインできる

10207d455a5d27886d0ceeca70a39a7a_s

黄金比とは何か

視覚上の調和を求めて古代ギリシャで考えられた比例です。黄金分割ともいいいます。
黄金比はかつて神聖比率とも呼ばれていました。現在では最も美しい比率として認識されています。
黄金比は縦横の比率が2:(√5-1)、つまり1:1.62になります。

縦横の比率に黄金比が使われているもの

以下を例に上げます。自然界にも多いとされてますが、異論もあるので、ここでは除きます。
・名刺
・新書
・コミックマンガ本
・パスポート
・パルテノン神殿
・凱旋門

葛飾北斎の浮世絵で有名な「富嶽三十六景(ふがくさんじゅうろっけい)神奈川沖浪裏」などは、コンパスと定規を使用して描かれたそうです。

The_Great_Wave_off_Kanagawa

By 葛飾北斎 – photo of the artwork, パブリック・ドメイン, https://commons.wikimedia.org/w/index.php?curid=2646210

黄金比の作図法

黄金比の図形をどうやって作成するかの説明です。なるべくやさしく書きましたが、図が苦手な方は、9番だけみて理解していただければ充分でしょう。

1.正四角形BCの中間点にMを置きます。

image2[19]


2. DMに線(青色で表示)を引きます。

golden.fw[4]


3. DMの青線を、Mを軸にして回転させます。MEの線が引けます。

image4[4]


4. DCEの3点が角になるような四角形、CDEF(赤線で表示)を描きます。

image5[4]


5.すると、横幅の比率が1.618:1で分割された長方形ができました。この分割比率が美しいとされる分けかたで、黄金比率といいます。

iamge6[4]


6.長方形のわけかたは、左右逆にしてもいいです。

image6[4]

気づいたと思いますが、この方法で描いた長方形は、縦:横の比率も1:1.618ですね。


7.中の赤い四角も同じように1:1.618で分割することが出来ます。

image8[4]


8.この赤と紫の分け方は、向きを変えると、あと3パターンありますね。

image9[4]

image10[4]

image11[4]


9.4つの図を1つにまとめて省略化すると、次のような分割線(グリッド線)が見えてきます。

image12[4]

これが黄金比による分割線です。カメラのファインダー内に表示されるデジタルカメラも多いですね。

たくさん線が出ていますが、どの線を使ってもいいのです。1本だけでなく、2本、3本、4本と併用して使用しても構いません。

デザインの要素をこの補助線を使って分けると、バランスのとれた構図をつくりやすいのです。

黄金比を使うことのメリット

黄金比の分割線を使うメリットはたくさんありますが、大きいもの5つを上げます。

1:ルールに従うことで統一感が生まれる。
2:間を適正に保てる。
3:情報を整理できる。
4:判断を速くできる。
5:説得材料となる。

1:ルールに従うことで統一感が生まれる。

黄金比は縦横の比率だけでなく、いろいろなものに使えます。色々な要素に同じルールを適用すると、統一感が生まれてデザインに洗練された印象を与えます。

2:間を適正に保てる。

デザイン要素を詰め込み過ぎると非常に読みづらくなります。また雑な印象や稚拙な印象を与えることになります。

黄金比を意識すると、要素の配置にバランスをとることになり、結果的に適正な間を持ったデザインになります。

3:情報を整理できる。

すべての情報を均等に表示するようなデザインは、結局どの情報も受け取ってもらえません。
黄金比だと、大きく表示する文字情報と小さく表示する文字情報を区別する必要があります。
結果的にどの情報がどの順番で重要かを考えて整理することになります。

4:判断を速くできる。

黄金比の比率はきまっていますので、デザインをするときに統一した基準となりえます。
「もうちょっと左かな?右かな?」と配置に悩んだり、「もうちょっと大きくかな?小さくかな?」とサイズに悩んだりすることが減ります。
これによって、デザイン作業がスピードアップするのです。

5:説得材料となる。

ひょっとしたら、制作したデザインについて、「なぜこの位置に、このサイズで配置したのか」と問われるかもしれません。
そのときに、「黄金比率に従って配置した」というフレーズは説得力を持ちます。
また、自分自身にも、ルールに従ってデザインしたという裏付けが自信になるのです。
3と4のメリットが、特に大きいように思います。一番のメリットは4番ですね。
黄金比は絶対ではありません。別の機会に譲りますが、美しいとされる分割方法は、白銀比や3分割法というものもあります。

実をいうと、構図を分割するルールはどれどもいいのです。
速く、綺麗に作る指針となればどのルールを採用してもいいです。

では、次は黄金分割比を使ってデザインしてみましょう。