長者丸産業大学

詩的・私的・市民大学講座

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

time 2016/03/20

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

MKJ_ryoutedemeishiwowatasu_TP_V

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

sponsored link

名刺の情報を整理する

デザインに必要な情報

・ロゴデザイン
・会社名
・肩書
・氏名
・連絡先(メール・ 住所・電話番号・ウェブサイトの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

sponsored link

down

コメントする




CAPTCHA


sponsored link