デザイナー初級編 デザイン

デザイン未経験でもプロ並みのレイアウト!黄金比で作る名刺デザイン

あなた

何となくパワーポイントでデザインをすることはできます。

デザインすることにすごく興味を持ちはじめていて、試しに名刺を作ってみたんですが何だか素人感が丸出しでかっこ悪い名刺になってしまって。。。

やっぱり基礎的なことを知っていないとダメなんですよね?

結論から言いますと、基礎を知らなくても黄金比を使うだけで手っ取り早くプロ並みのデザインに仕上がります。

ポイント

  • 関連する情報は近づけてユニットにする
  • 余白を十分に取る
  • 色数を絞る

基礎は基礎で必要なのですが、実践しながら学ぶ方が効率が良いと思います。

この記事を書いた人

【主なWebメディアの実績は以下です】
>HOUSTO-おウチの収納.com
>売場の安全.net

そして私はデザイン学校に通わずに、営業マンから独学でデザインを習得して、独立しました。

この記事を読むと、以下のことが分かります。

ポイント

  • デザイン未経験の方でも手早くプロっぽいレイアウトの名刺が作れるようになります
  • 名刺をレイアウトする注意点やコツが理解できるようになります

そもそも黄金比ってどうデザインに関係するの?

黄金比は人が最も美しいと感じる比率です。

意識しながらこれをデザインに取り入れると、美しさがグッと上がりますので、ぜひ使ってみましょう。

1.黄金比とは

黄金比とは、1:1.618で構成される比率です。

フィボナッチ数列(2つ前の項と1つ前の項を足し合わせていくことでできる数列)とも深い関わりがあり、この黄金比1:1.618は人間が最も美しいと感じる比率とされています。

以下のようなもので、これが黄金長方形です。

黄金比

1:1.618の長方形の角から角へ緩やかなカーブを描いていくと、オウム貝の貝殻の螺旋形状みたいになります。

これが黄金螺旋です。

2.自然界や人間界にも存在する黄金比

黄金比は歴史的な建造物や彫刻にも用いられています。

例えばこれです。

パルテノン神殿

有名なパルテノン神殿ですが、これは高さが1で横幅が1.618の比率で建てられています。

安定感や美しさを感じるのは、黄金比を持っているからなんです。

他にもあります。

モナリザ
ミロビーナス

モナリザとミロのビーナスです。これらも黄金比で成り立っています。

ちなみに、モナリザの顔のタテとヨコのサイズも1:1.618で構成されていますよ!

身近なものだと、若干数値は異なりますが、名刺のサイズは 55mm×91mmで比率は1:1.65で出来ています。ほぼ黄金比です。

名刺サイズ

では、本題の名刺のレイアウトへの応用を紹介していきます。

黄金比を使って名刺をレイアウトしてみよう!

1.デザインするアプリケーションの準備をしましょう

ここから、デザインするアプリケーションを使っていきます。

パワーポイントでOKです

Googleアカウント(Gmail)を持っている方なら、PowerPoint同様にスライドを作れるGoogleスライドが無料で使えるのでこちらもオススメです。

デザインできるアプリケーションをまったく持っていないという方は、オンラインでデザイン制作できる「Canva」を使うと良いです。

CanvaMV

今回行なう名刺デザイン作業のみに絞ってソフト比較しますと、こんな感じです。ご参考までに!

IllustratorPhotoshopPowerPointGoogleスライドCanva
有料 / 無料有料(7日間は無料)有料(7日間は無料)有料(30日間は無料)無料無料(無料プラン)
使い勝手◎レイヤー機能で動かしたくないパーツを固定できるのでとても使いやすい△レイアウト編集はIllustratorの方がはるかにやりやすく、テキストが若干扱いづらい◯使いやすい◯使いやすいが、PowerPointとは使い勝手が若干違うので戸惑う◯使いやすい
フォント選択△別途インストール必要△別途インストール必要△別途インストール必要◯用意されているフォントから選ぶ◎かなりたくさんのフォントから選べる
カンタン度△各ツールの役割が分かればそれ程難しくない△各ツールの役割が分かればそれ程難しくない◯感覚的に作っていける◯感覚的に作っていける◎テンプレート素材が多く、選ぶだけで簡単に作っていける
自由度◎イラスト作りからやれるなど、オリジナリティを追求しやすい◯オリジナリティを追求しやすい△いいところまで出来るが、かゆい所に手が届かない△いいところまで出来るが、かゆい所に手が届かない△いいところまで出来るが、かゆい所に手が届かない
詳細詳細詳細詳細詳細

基本的にはどれも優秀なソフトであることに間違いありません。

ポイント

  • 使いやすいソフトで作るならPowerPoint、Googleスライドがベスト
  • とにかく手っ取り早く作るなら、フォントやテンプレート素材が揃っているCanvaがベスト
  • オリジナリティを追求するならIllustratorやPhotoshopがベスト

レイアウトをマネしてみよう

以下の例をマネてみるだけで、プロっぽいしっかりとしたレイアウトになりますのでやってみましょう。

まずは、以下の黄金比シートの画像を右クリックなどで任意の場所へ保存してください。

黄金比シート
データはPNGです。(透過)

サンプル的に、このような感じのシンプルなものを作ってみました。

まずはこのようなシンプルなもので黄金比の使い方の基本を感覚的に掴んでみてください。

名刺例1
名刺例1黄金比
黄金比をこのような感じで使っています。

黄金比シートを2枚使い、螺旋が左上と右下に来るようにして組んでみました。

よく見てほしいところは、

黄金比シートに対して、文字やデザインパーツをどのように配置しているのかという部分です。

なるほど、と理解できたら次の参考例も見てみましょう。

今度は、黄金比シート4枚で、キャンバスに対してやや内側に黄金比シートを押し込む形で考えました。

名刺例3
名刺例3黄金比

いかがですか?

黄金比のポイントの上に文字やデザインパーツを配置していくだけで、美しくまとまりのあるものが簡単に出来上がってしまいます。

黄金比って、すごいですね!

ポイント

  • 目が行きやすい「渦巻きの一番中心」に見せたいものを合わせて配置すると効果的
  • 絶対にそこに当てはめなくてもOK。黄金比は「要素を配置するためのものさし」

黄金比シートを用紙サイズ最大サイズに合わせて、その上にデザイン素材や文字を配置してみましょう。

慣れてきたら、どういうふうに黄金比シートをキャンバス上に置くか、いろいろ試してみると、デザインの幅が広がります。

内容が掴めたら、実際にデザインソフトで上記のようなレイアウトをマネしてみましょう。

名刺のレイアウトで気をつけること

黄金比を使ってレイアウトしても、基本的なところを押さえていないとせっかくの美しいレイアウトが台無しになってしまいます。

気をつけたいことを3つ紹介していきます。

1.関連する情報は近づけてユニットにする

「連絡先」はバラけさせないで近付けておきましょう。

デザイン性を優先したり奇抜さを狙うと、全体のバランスを崩してしまい、肝心な情報を読み取りづらくさせてしまいます。

名刺デザインで大切なことは、渡す相手に「自分が何者であるか」を間違えなく、分かりやすく伝えることです。

ポイント

  • 関連する情報(連絡先となる住所・電話番号・メールアドレスなど)は、分離させない

これはデザインの基本原則「近接」と言いまして、割と重要な法則となります。

2.余白を十分に取る

空白を活かしながらデザインしましょう。

色々な要素を詰め込むと、かえって見づらくなります。

つい、やってしまいがちなのが、

空白が不安→埋め尽くしてしまう

です。

空白は目立たせたいものを見やすく照らすスポットライトになりますので、恐れずに余白を十分にとりましょう。

3.色数を絞る

これは絶対、というよりお好みになりますが、2色か3色までに絞った方が良いでしょう。

あまりにも色数が多いと、

・アイデンティティがわかりづらい
・見づらい
・強いて言えば、美しくない

という問題が出てきます。

キーカラーを一つ決めて、それを補完する色を1〜2色決める、といった感じで、シンプルで美しい配色を目指しましょう。

まとめ

いかがだったでしょうか?黄金比と名刺デザインの関係性に興味を持って頂けましたでしょうか?

以下まとめていきます。

黄金比を使おう

黄金比を使ってレイアウトすると、要素の配置をどうするか、これが感覚頼りにならずに素早く決めることができる

デザインするアプリケーション

  • 使いやすいソフトで作るならPowerPoint、Googleスライドがベスト
  • とにかく手っ取り早く作るなら、フォントやテンプレート素材が揃っているCanvaがベスト
  • オリジナリティを追求するならIllustratorやPhotoshopがベスト

黄金比の使い方

  • 目が行きやすい「渦巻きの一番中心」に見せたいものを合わせて配置すると効果的
  • 絶対にそこに当てはめなくてもOK。黄金比は、要素を配置するためのものさし

名刺のレイアウトで気をつけること

  • 関連する情報(連絡先となる住所・電話番号・メールアドレスなど)は、分離させない
  • 余白を十分に取る
  • 色数は2〜3色に絞る

デザインを学びたい・デザイナーで活躍したい方へ

デザインの勉強を本格的にしてみたいと思われた方は、デザインスクールに資料請求や説明会に参加をしてみるのもアリです

今現在(2021年9月)資料請求や学校説明会を無料で行なっているスクールを紹介します。

気になる方はご参考までに。

デジタルハリウッド

デジハリ

デジタルハリウッド

未経験からWebデザイナーへ転職したい方
Webデザインを学びフリーランスとして独立したい方
Webデザインを学び将来在宅ワークをしたい方

転職やスキルアップのためにしっかりWebのスキルを学びたい!という方に自信をもって提供できるプログラムです!

>>無料でデジタルハリウッドに相談してみる

テックキャンプ デザイナー転職

テックキャンプ デザイナー転職

テックキャンプ デザイナー転職

未経験から10週間でプロのデザイナーへ

テックキャンプ デザイナー転職は600時間をかけてデザインの基礎からコーディングなどゼロから1人で成果物が作れる技術力が身につきます。
サポート体制が充実!オンライン問わずメンターに質問し放題なため、途中で諦めてしまうことがありません。

・専属のトレーナーの存在
トレーナーは毎週の学習計画の作成、日々の進捗確認、キャリアアドバイザーへのフィードバックなど期間中は二人三脚となってサポートします。

・専属のキャリアアドバイザー
転職志望の方であれば毎週のキャリア面談、面接対策や履歴書の添削、企業提案など転職が決定するまでサポートし続けます。
また、企業に入社した後も半年間であれば無料でキャリア相談を受け付けています。

>>無料でテックキャンプ デザイナー転職に相談してみる

※まずは無料カウンセリングでTECH::CAMP(テックキャンプ)が自分に合っているか確認してみましょう。

インターネット・アカデミー

インターネット・アカデミー

インターネット・アカデミー

1995年に開校した日本初のWeb専門スクール。

開校から25年のあらゆる実績と講師力、 そして卒業生の活躍がその質を証明。Webデザイン、プログラミングなど、現場で活躍出来るIT人材の育成をインターネットの黎明期から行い、3万人の卒業生が活躍!

随時入校OK、オンライン&通学を組み合わせて、自分の好きな時間に学べるフリーライム制なので、働きながらでも学びやすいのが魅力です。

Web、IT業界に就・転職を考えている方 ・仕事の中でWeb、ITのスキルが必要になった方など初心者から中級者まで、年齢等の制限はありません。
信頼できる学びをご希望ならこちらの学校がオススメです。

>>無料でインターネット・アカデミーに相談してみる

※実績が十分な学校です。無料カウンセリングでインターネット・アカデミーが自分に合っているか確認してみましょう。

以上になります。

最後までお読みいただきましてありがとうございました。

  • この記事を書いた人

ハタケイスケ

【経歴】大学卒業 ▶営業マン ▶広報マン(Webデザイナー・DTPデザイナー・メディアプランナー兼務)▶メディアサイト12万PV/月実績 ●東京都在住、パンクロッカーです。ヘタなドラムを叩いてます

-デザイナー初級編, デザイン
-