10/23/2014

ソフトを使うだけじゃ絶対覚えられないデザインの重要ポイント4つ!

info@themarsknowledge.com'

リアル・オンラインにて場所も時間も関係なく学べるデザインの学校をつくる会社です。Webサイトのローンチまで裏話や活動報告をこちらにてお届けいたします。 https://twitter.com/marsknowledge


マーズナレッジ・トレーニングサービスでは、実際の案件をもとに実習を行います。今回は生徒さんに作ってもらったフライヤーを紹介します。

名称未設定-1.jpg

上記の画像は生徒さん、トレーナー、それぞれが作ったものです。

このように、同じ作品を生徒とトレーナーが作ることで「正解がない」と言われるデザインを理解し、「真似しよう」と生徒さんの引き出しを増やすような授業も行っています。

不便を知ることで次に活かす知識を蓄える

今回作成してもらったフライヤーは、コワーキングスペース「こけむさズ」のリニューアルオープンチラシです。

最寄り駅にてビラを配ったり、近隣の飲食店などに置いてもらい、これまでリーチできていなかった高円寺にて勤務したり、地元に住んでいるけど「コワーキングスペース」自体を知らない層に知ってもらうことが目的です。

掲載原稿はFacebookでのパーティー概要を使ってもらうという雑な原稿を渡してみました。

ttps://www.facebook.com/events/1433639710219217/

実際の案件でも、原稿をしっかり用意していただけないケースなどまちまちです。「これがないと作れない!」という情報はどういったものか。それを知ってもらうことは非常に重要です。

もし生徒さんが自身で案件を請けるとき、どういった原稿が必要かをしっかり見極めクライアントにお願いすることができるようになります。

最初からしっかり原稿が用意されていると、失敗から学ぶことができません。

実際の案件では自分のスキルレベルなど関係なくクライアントや会社から仕事がふられていきます。そういった時のためにも便利でスグできるものを用意せず、まずは生徒さんに原稿が整理されてない不便さを知ってもらう。

不便を知ることが学習の一歩目になる。

こういった不便、そして間違いをたくさん感じることで「もっと良くならないかな?」「ラクするためには?」と、自分で考える力を養ってもらいます。

生徒によるはじめての作品

まずは、生徒にさきほどのURLに書かれている内容をもとに、何も教えず制作をはじめてもらいました。

できあがった初稿がこちらです。

Ishijima 2014 10 19 20 39 53

少し、白い部分が多く寂しく感じてしまいます。もう少し飾りを入れたりするなどして、にぎやかな印象にしたくなりますね。

ここでまず、生徒さんのスキルレベルなどの紹介をいたしましょう。

ヒダさん

北海道出身。現在東京都在住。
手を動かすことができるWebディレクターを目指して修行中!

もともとPCスクールのトレーナーだったヒダさんはAdobeソフトの基本的な操作はできているようです。ディレクターとして現在は東京都でお仕事中。地元である北海道に帰って、独立してもごはん食べていけるように一通りのデザインスキルを習得することが希望だそうです。

そんなヒダさんは、シンプルなデザインが得意です。写真もとるので可愛らしいビジュアル作りに期待ですね。

自分のデザインの根拠を話す

今回の作品について、ヒダさんはどのようなコトを意識して制作したのでしょう。

Image

ええっと…ビラ配りをするとのことだったので、三つ折りにして渡せるようにしました。

だから写真と地図、そしてイベントの概要を3つに分けてみました。この、写真の部分を上にして渡すようにしてます。

Image

ふむふむ。でも渡された人は写真だけだと、お店とかが分からないよね?

情報が、読まなくても目に入ってくるようにできるとさらに良くなるよ!

トレーナーによる修正指示

  • タイトルに工夫をしよう
  • 文字組みに変化を!
  • 文章を読みやすく

写真を活用してタイトルを目立たせよう

3つのセクションの中で、一番完成度が高いのが最下部の連絡先のところです。

Ishijima 2014 10 19 21 32 35

住所や地図もしっかり掲載されていますし、整列もできていますね。さらに、当時のWebサイトのデザインのデータがあったので、それを上手く利用して黒板とこけを生やしたビジュアルも取り入れています。デザインの基本部分ができていると言えるでしょう。

ただ、残りふたつの部分はデザインを決めかねているようです。

Ishijima 2014 10 19 22 19 32

ソフトが使えるけれどもデザインが苦手というのはたくさんの人が抱えている悩みだと思います。

Image

「どうやって作ったらいいの?」は、マーズナレッジトレーニングサービスの得意なところです。しっかりレクチャーしていきますよ!

まずは、フインキをイメージしやすい写真とフライヤーのタイトルが一緒に見えるようにしましょう。ここを考えることで、ビジュアルをどう作っていけばいいかの足掛かりを見つけましょう。

と、言うことでトレーナーは、このように赤ペンを入れてみました。

10726560 10204773346994932 1839315333 n

生徒からの2稿

Image

できましたー。先生に言われたように、タイトルを乗せてみたり、日付の部分を分かりやすくしてみました。

Ishijima 2014 10 19 20 40 04

タイトルとして、

  • 店名
  • イベント名
  • 日付

というもっとも重要なものが写真の上にレイアウトされました。

Image

おお、できてきたね。とくにここら辺がいい

ishijima_-2014-10-19-21.45.44.png

トレーナー イシジマ

リニューアルオープンの文字に薄く白背景を入れたり、文字のふちを白くしたりして可読性を良くしつつ、ビジュアルとしても目立つように作ってある。日付のところは、情報を細かく分解して大小区別しているのが良いね。

ただ、まだまだ読まないといけない文章が多いかな。

文字は読まれないことを前提に!

Ishijima 2014 10 19 21 52 19

トレーナー イシジマ

人はあんまり文字を読まないから、パッと見て分かるようにすることが大切なんだよ。

Ishijima 2014 10 19 21 55 18

Ishijima 2014 10 19 21 55 12

トレーナー イシジマ

こんな風に箇条書きにしてみたり。あとはフライヤーで良く使われるパターンを真似するのも重要、普段チラシとかはけっこう見るじゃない?だからみんな慣れててイメージしやすい。

もうちょっと、工夫してみようか。ここを、ね、こんな風に…。

10744649 10204773347074934 338283152 n

ポイント

  • 写真にかぶりすぎているタイトルを調整しよう
  • 同じことを2度書かない
  • 版面は重要なもので大きくとろう
ヒダさん

うう、まだまだ先が見えません。

トレーナー イシジマ

くじけるな!確実に良くなってるゾ!

写真は下げた方がいいね。で、一番重要なのが『同じことは二度書かない』だよ。

単純にスペースがもったいないでしょう?2回書かなくていいようにしっかりと目立たせればいいんだよ。

まだまだWebっぽいね。文章なんかもそう。Webだとアイコン+見出しで文章を続けたりするんだけど、フライヤーはどちらかと言うと読みものじゃないからね。

さきも言ったような『読まなくて済むレイアウト』をしていこう。

ヒダさん

はい!もうちょっとやってみます!そして早速作りました!今度はどうでしょう。

10745114_10204773347034933_917543496_n.jpg

トレーナー イシジマ

いいね!いいよ!出来てきた!タイトルのとこなんか花丸あげちゃう!もう一息だね。

せっかくの写真が見えなくなってるのが勿体ないなぁ。ぼかしをグラデーションツールでかけるんじゃなく、ブラシで部分ごとにかけていった方がいいよ。

そうすれば全体像、とくにインテリアや人がいるところを残せるでしょう?

トレーナー イシジマ

あとはこの白いところかな。たまたまそうなっちゃったのか、それともこの白い部分は他のデザインを上手く引き立てているのか。

原稿をデザインの原則にのっとってレイアウトしたら今度はそこを見てみよう。

トレーナー イシジマ

そして、やっぱり文章のところだね。まだ、文章をどう扱っていいか見えてないんだな。例えば、参加費のところ。値段と差し入れに関する文章、これはどっちの方が重要?

ヒダさん

値段…。ですよね。そうか、お金のところは強い動機になるから、これはもっと大きくした方が良かったですね。他も同じようにしてみます!

ポイント

  • 写真を下げたことでタイトルが見やすくなった!
  • 写真をぼかしすぎて全体が見えずらい
  • ビールのアイコンがしつこいかな
  • 項目にぶらさがる文章をもっと噛みくだこう
ヒダさん

こうでしょうか?けっこう良くなってきたと自分でも実感してきましたぁ!

トレーナー イシジマ

すごく良くなったねー! 写真もしっかり目に入るし、必要な情報がちゃんと読みやすく並んでいて、これならクライアントに出しても恥ずかしくないレベルだよ。もうあとはちょこっと直すだけ。

全体の調和を整える

10735640 10204773346954931 1706233077 n

ポイント

  • 読まれる順番。Z型を意識しよう!
  • サムネイルを入れるのいいね!

生徒の完成稿

ヒダさん

か、完成しました!

Ishijima 2014 10 19 20 40 21

トレーナー イシジマ

うおおおお!おつかれさまー!いいねいいね。じゃあ、これ印刷してみよう。実際に刷り上がったものを見ると感動するよー。

トレーナー イシジマ

あ、そうだ。同じものを別の人が作るとどうなるかも気になる?

ヒダさん

気になりますー。他の人がどうしてるのかって考えちゃって、なかなか作れませんでした。

トレーナー イシジマ

じゃあ、さっそくやってみるね。解説しながら作るけど、良く分からない操作があったりしたら、聞いてね。

トレーナーの完成稿

Ishijima 2014 10 19 20 42 52

トレーナー イシジマ

写真を活かすように作ったところがポイントかな。構図を見て、写さなくていいところに大きく日付を入れたり。あとはぼかしを使わないで、天井部分の色をひきのばしてタイトルを配置するためのバックに使ってみたりね。

あと、元の原稿自体を添削したり、加工したりしてる。

原稿をしっかり読んで、適切なカタチに加工しよう

トレーナー イシジマ

重要なのは原稿を読みとくところ、全部をそのまま掲載しなくても要点が伝われば納得してくれたりもするから。とくに伝えたい『オープニングパーティーに来てね!』というところ以外は小さくおまけ程度にしているよ。それだけじゃイマドキお客さんは興味もたないから、キャッチコピーも足してるね。

ヒダさん

なにも売らない?変な店がオープン!』ですか? 確かに、このひとことがあるだけでお客さんの『なんだろう?』を作れそうですね。

チラシで伝えたいことは何?どうしたらお客さんはこれを見て行動を起こしてくれるの?っていうところをちゃんと考えていけば、大きくしたり、小さくしたりはできそうです!

ですね。あとは写真を工夫したり文字の並べ方とかを、先生やおでかけしたときに見つけたものから真似していけばいいんですね。

トレーナー イシジマ

そう!そういうコト!

今回のデザインの重要なポイント

  • 配布するシーンをイメージする
  • 優先順位を意識する
  • 文章は極力少なく
  • コンテンツ同士の位置付けを意識する

「ソフトが使えるけど、デザインが苦手」という人は目的と原稿の優先順位をしっかりチェックしてレイアウトしてみることから始めましょう。

ふだんデザインをしている人でも、文脈に関係ないデザイン。していませんか? 文字を黒板風の背景に置いてみたり、ギンガムチェックのシールを貼りつけてみたりなどなど…。そのデザインは文章を引き立てているでしょうか?補足をしているでしょうか?

文脈を見ていけば、自ずとビジュアルは出来上がっていきます。ぜひ参考にしてみてくださいね。

あなたも一緒にレッスンしましょう!

なんと、この授業3日程度のことなんです。最初のデザインから見ると驚くべき進歩をしていると思いませんか?

ひとりで学習できるようになることが一番良いですが、最初は何をやっていいのかちんぷんかんぷんでどんな本を買ったらいいかも検討がつかないでしょう。何から覚えるといいのか、そのためには何を調べると理解できるのか。そういったことを教え、いずれアナタがひとりで学習できるようになることを応援するのがマーズナレッジ・トレーニングサービスです。

こんな授業、あなたも受けてみませんか?マーズナレッジ・トレーニングサービスでは生徒さんを随時受付ております。ヒアリングは無料!ぜひお申し込みを〜。

無料のスキルチェック・トレーニングを受けてみる