誰かに見てもらうための、簡単なデザイン

私がデザインする時に気をつけていること(スライド)

2013年10月19日の姫路IT系勉強会にて「私がデザインする時に気をつけていること」という題で、お話しする機会を頂きました。
私は紙デザインが今までの主な仕事で、WebとかITとかまだまだ勉強不足…で、紙デザインについてもそんな語れるようなことはありませぬ…(;´Д`)。
が、とりあえずまとめてみた(・∀・)!ので、そのまとめをしますです。
人数も普段より少なかったお陰もあってか、発表というよりはディスカッションに近い形で、皆さんの意見が色々聞けて、発表もしつつ、かなり勉強になるお話しが聞けました。
私が実践していることはこのブログでぼちぼち公開しているので、ブログのまとめになった感が強いです…(;´∀`)。

25_pencil

本当に基本的なことばかりですが、補足説明なども交えてまとめています。

スライドはこちら

今回のスライドはこちらです。

1019 design point

進撃の巨人ネタばかりのスライドですみませんすみません(´;ω;`)ブワッ
まぁ、このスライドを何年か先に見て、「イヤァァァァァァァー!!」とか叫んじゃうのは私なんですけど。。。
腐女子(ヲタク)って、何年か先に、その時自分がハマっていたものの痛い歴史とかみると、消えたくなるんですよね。

配色

これは「色相環は指揮総監!〜色、死にたもうことなかれ〜」という記事で紹介した、色相環に関することです。
私は、色相環は本当に色の指南に役立つと思っていて、特に初心者の方には視覚的にも分かりやすいと思うので、オススメしてますです。
この話で出てきたのが[ HUE / 360 ] The Color Scheme Application

hue360_screen

HUE360は、好きな色を1つ選ぶと、合わない色がカラーパレットから消えてくれるという便利なものです。
ネットに繋がっていればすぐ出来るのも嬉しいですし、カラーコードとかも表示してくれます。
詳しい使い方はこちらに詳しく書かれています。

「Webサイトの配色で困った!」→「HUE/360使えば良いじゃない」 | 56docブログ

これを使えば、合わない配色をしてしまう…ということが減らせると思うので、色が苦手な方や、どうすれば良いか分からない方は、とりあえずやってみるといいかもです。
私は、色相環を参考にしつつも、大体感覚や、シャレで色を決めることが多いです。
例えば、会社の名前が「フォレストカンパニー」だったら緑をメインにしようとか、「ムーンライト」だったら、黄色と青を使おうとか…ですかね…。合わない組み合わせが出てきたら、彩度や明度を調節して合わせますね。
そんなんだから「あの人中身オッサンやで」とか言われるんですよね。

まぁそんな話はさておき、これは勉強会で出た意見なのですが、
「感覚で色を決めるのはアーティストで、情報を分かりやすく整理するのがデザイナー、だから、色は感覚ではなく、法則(色相環やHUE360など)も考えて決めた方がいい」という声がありまして、なるほどな(・∀・)!と思いました。
そうだよ、法則に則れば、きっと綺麗で分かりやすいデザインができるはず!デザイナーはそれが大事!
そこに自分らしさを加えられたら尚良し。

インスピレーション

ここでつまづく人も多いと思う「インスピレーション」。
デザインしよう!と思っても、どんなデザインがいいの?どこから始めればいいの?と思う方も多いはず。

デザインのストックを作る

私は、なんにも思い浮かばない時は、撮りためた写真などを参考にします。
普段、出かけた時なんかに「これイイ!」と思ったデザインなどを、写真に撮ってます。
(デジカメを持ち歩いてるのではなく、iPhoneで撮ってます。iPhoneでの写真の撮り方も以前記事にしたよ☆)

他に、PinterestISSUU – Art designなどを参考にする、という意見もありました。
Pinterestはご存知の方も多いと思いますが、アーティスティックな写真などが一覧でずらっと出てくるので、なかなか刺激になります。ISSUUは、紙デザインが主にまとめられています。とってもオシャレです(*^_^*)♪
こういう、ネタ帳というか…デザインの引き出し的なものを持っておくと後々助かりますね。

私は、デザインのアイディアが降りてこなくて何からやっていいか分からない時とかは、とりあえず綺麗な写真を置いてみる、気になった色で着色してみる、書くべき文言を書いてみる、など、とりあえず何でもいいからモノを置いて適当に作り出し、そこから広げていくタイプです。
考えても出てこないので、とりあえず手を動かします。
ストックは、そういう時の最初の一歩に役立つんじゃないかなぁと思ったりします。

模写する

あとは模写。模写から始めたらいいんだよ!丸パクリはいかんけど、模写で得られることもあるはず!
手を動かして真似して書いてみたり、色とか真似して、どんな感じになるか、自分の中に落としこんでも良いかと思います。
スケッチの大切さは、こちらの記事でも書かれています。Webサイトのスケッチについてですが…。

[連載]Webデザイン入門(2:スケッチしよう) | Stocker.jp / diary

ちなみに、私の祖母(80歳半ば)も、スケッチはよくやっているようです。
最近絵の面白さに目覚めたらしく、上達するにはスケッチだー!みたいなことを言っていたような…。
メールとか打つ時、誤字や意味の分からない文章が80%を超える祖母ですが、そんな祖母でも出来ちゃうお仕事です。
そんな祖母の描いた絵を、ここで公開したいと思います。

IMG_1210

なんでユンケル選んだの。

これを見て、私もスケッチ頑張ろうと思いました。

他の人の考え方に触れる

周りに同じくデザインに興味を持っている人がいるのなら、その人達を集めて、お題を決めて「バナーを作ってみよう!」みたいな会を開いてみてもいいかもしれません、というのが勉強会で出た話。
みんながどんな風に考えてそれを作ったのか、お互いに検討しあう会など出来れば良いですね。
刺激にもなるし、ストックにもなるかと。
そんな勉強会やってみたい。

レイアウト

レイアウトも、どんな配置がいいか分からない…と思う人が多いかも知れませんが、とりあえず「近接」「整列」「コントラスト」「反復」の4つができていれば、綺麗なレイアウトができるんじゃないだろうか…ということです。
ちょっと崩れて見えるデザインは、この中のどれかがなってない…ということも多いと思います。
普段、この4つは無意識にやってることが多いと思うのですが、ちょっと意識することでより良くなるんじゃない?みたいな。

私は、この4つの法則「デザインの4原則」は、特に文章を書くときにも有用なんじゃないかなぁ…と思っていて、それを記事にしたのがこちらでございます。

きっちり揃えて、あとは「見出し→写真→本文」を繰り返す、など、一定の流れを決めてレイアウトしていくことも大事です。
それをすることで「リズム感」が生まれます。一定のリズムに乗って写真を見せたり、文を読ませたりすると、頭に入っていきやすいと思うんですよね。

人の視線は左から右に流れる、みたいな「見せるための法則」みたいなものありますが、コントラストで文字などに強弱をつけることによって、視線の誘導もできます。人は一番大きな文字を一番に読みますし、それが一番大事だと認識します。これを使えば、伝えたい情報を的確に伝えられるはず…。

まとめ

そんな感じで、私は気をつけていることは、本当に基本的なことばっかりでした…。目新しいもの…ないかも…(´・ω・`)。
色決めろ!パクれ!揃えろ!みたいなことですね。
あら、一行でまとまってしましました。
こんなんですが、共に議論していただいた皆様に感謝です!ありがとうございます!

それでは!Have a nice design!