【Adobeデザイン&画像コラム】非デザイナーがグラフィックデザインについて知っておくべきこと 4つ

非デザイナーがグラフィックデザインについて知っておくべきこと 4つ

ローラ・キンズヴェーター

Vermeer painting of Girl with a Pearl Earring with the girl holding a camera

将来は視覚的なものが中心となります。最近では(文章で何度もやり取りするのではなく)微妙な情報を豊かに表現する画像を使ってコミュニケーションをとることが一般的となり、視覚的リテラシーが必要条件になってきています。この新しい現実に対し、わたしたちはどのようにしてコミュニケーションをとり、社会とつながることができるでしょうか?

ニューヨーク州北部にあるポール・スミス・カレッジの公共サービスで司書として勤めるミーガン・フロストは、最近ネブラスカ州図書館委員会にてグラフィックデザインについての驚くべきプレゼンテーションを行いました。彼女はデザインが良い場合、わたしたちはそれに近づきたくなると説明しました。このことにわたしたちは注目しました。

彼女は人を引き込む材料を作成する上で必要なグラフィックデザインの 4つの基礎や 3つの便利なショートカット、また追加でどのようにインスピレーションを得るかを伝えました。

ミーガンのグラフィックデザインの 4つの基礎の概要は以下の通りです。

two newsletter designs side by side, starting effort compared to final product

1. レイアウト:デザインについて良い質問をしよう

レイアウトを設定している時、次の質問を自問しましょう:

  • 目的は何か?
  • わたしの制約は何か?
  • どのようにして情報を整理するのか? (重要度とは?)
  • 何が最も重要なのか?
  • どのようにして重要性を示すのか?色またはテクスチャ、配置、サイズで?
  • 流れは意味をなしているか?
  • 明確か?
  • 必要でないものはないか?

パソコンの画面を凝視すると本当に疲れるので、要素がどこに置かれるか非常にラフなスケッチを紙に書いくことをおすすめします。
次にパソコンに向かい、実際に置いてみましょう。下書きを印刷し、少し離れてみましょう。再度自分に上の質問をしてみてください。

改善し、必要に応じて手順を繰り返します。上の画像はミーガンのニュースレターの再編集の例です。左側が彼女の最初のデザイン、右側が完成品です。

natural, refined, and calming palettes vs. vibrant, vivid, and energizing palettes

2. 色:どのようにして色を決めるのか

カラーパレットは自然で洗練され心を落ち着かせるものであったり、活気に満ち鮮やかで元気なものであることができます。
ミーガンは白黒に加え、3色までの色を選ぶようすすめています。 限られたカラーパレットはデザインを良くします。

以下は色を選ぶ際に便利な無料ツールです。

  • ブラウザのアドオン Colorzilla — スポイトツールを使って興味のあるウェブページから色を選択する。
  • DeGraeve ­— 画像の URL を入力すると DeGraeve がカラーパレットを作成してくれる(2つのバージョン:くすんだ、明るい)。
  • Design Seeds — インスピレーションを得る。たくさん中から画層を選択し、それにマッチしたカラーパレットを作成してくれる。

Design Seeds screenshot showing palettes and matching images

3. 画像:どこで良い画像を探すのか

ミーガンお気に入りの無料画像サイトは以下の通りです。

  • Flickr — かっこよく、優良な写真がたくさんある。クリエイティブ・コモンズ・ライセンスの画像を検索できる。
  • Google — フィルターを使ってライセンスの種別により使用可能な画像を検索できる。
  • Morgue File
  • Pixabay — 品質を下げずにサイズを変更することができるベクター画像がある。(格子状の模様で示されている)背景が透明なものを有効活用できる。
  • The Noun Project — 写真やデザインに追加することができる莫大な数のアイコンの多くを見つけることができるサイト。

TechSoup Global の 10の無料画像(英語)についてのブログ記事もご覧ください。

Pixabay image of a moose with a transparent background

4. フォント:ヒントとツール

繰り返しとはなりますが、少ない=多いということです!ミーガンは 2つまたは多くても 3つのお互いに明らかに異なるフォントを使うことをすすめています。
以下はフォントを使う際の彼女のお気に入りのツールです。

  • 1001 Fonts — ダウンロード前に指定したフォントで文章を見ることができるため、時間節約とストレスの回避になる。
  • DaFont — おしゃれな渦巻きや曲がった矢印などデザインに追加できるたくさんの良い変わったものがある。
  • Typewolf — 「自然の中」のフォントの使用例とそれがどのフォントかを教えてくれる。また、フォントの組み合わせ方の説明もある。

3 つのクイックデザインへの近道

これら 4つのすばらしいグラフィックデザインの基礎に加え、ミーガンは以下の 3つの近道(あなたのデザインの力量をあげるツール)を教えてくれました。

  1. PicMonkey — コラージュを作ったり、画像を調整するのにとてもパワフルな画像処理ツール。自分の写真を吸血鬼やゾンビのようにすることのできるテーマもある。
  2. Canva — プレゼン資料用といった様々なテンプレートのあるデザインサイト。約半数が無料だが、ミーガンは無料のもので事足りているとのこと。
  3. Infographic generators — ミーガンのお気に入りは Easel.lyPiktochart

Picture of Meggan in which she has made herself look like a vampire eating cherry pie

インスピレーションの材料

あなたはどこでアイデアを見つけますか?多くのアーティストは後でインスピレーションの材料として使えるよう、自分が本当に好きな概念やデザインを思い出させるものを集めています。
サンプルとなるものを見つけ、新しい、または関連している別の何かを作ることは昔ながらの伝統です。

ミーガンは自分が良いデザインだと思うものを保存するための時間を設けました。
アカウントを持っていなくても色の組み合わせやパレットに便利な Pinterest に彼女はそれらを保管しています。

彼女はまた他の人たちがどのようにしてコミュニケーションを取っているのかがわかる Librarian Design Share というブログもおすすめしています。

デザインについて学ぶための彼女のお気に入りサイト:


TechSoupのデザイン用ソフトウェアはこちら

デザインと画像コラムをお気に入りいただけましたか?次はどういったことを学びたいですか?ぜひコメント欄よりお知らせください!

画像:ミーガン・フロスト