読者です 読者をやめる 読者になる 読者になる

コードノート

コードノートはwebを中心にテクノロジー・クリエイティブを伝えるWebメディアです。コードリンク代表、片岡亮が執筆しています。

イケてるwebデザインの違いとは何か。ユミソラIllustrator基礎講座のススメ

デザインコード

f:id:moba13:20170213115154j:plain

3年前にお世話になった、ユミソラ先生のIllustrator講座の感想です。これまで3名ぐらいにオススメだよ!と紹介して送り込んでいますが(内1名は元々webデザイナーで今では売れっ子 )、改めてブログを通してご紹介を。

僕は普段の自己紹介では色々説明を省いて、デザインもプログラムもできますなどと言っているのですが、元はディレクターでちょっとデザインツールも触れるノンデザイナーです。変な人よりは出来ると思いますけど。

そんな僕がなぜデザイン講座に足掛け1年毎週3時間(Illustrator講座単体では2か月)通っていたのかを、これからwebデザインを学びたい人はもちろん、web製作に関わる人全員に向けても書いていきます。

webデザインにセンスは必要なのか

f:id:moba13:20170205155355j:plain

上記の画像は実際にIllustrator講座中や独自に作った成果物の一部です。

例えばトランプのマークや桜の花びらは講義内で作った成果物ですが、見てのとおり非常にシンプルな形状です。しかし、シンプルだからこそ誤魔化しが効かず、学習時に問題点や操作法を洗い出すのに好都合なのです。

シンプルなパーツ作り=操作の未熟さを浮き彫りにすることなので、Illustratorの使い方を集中して学習することができます。

「センス」というと良い言葉に聞こえますが、webデザインにおいてはそのセンス(感覚)に依存していて、「基本的なツールの操作スキルが未熟」という人がチラホラ見受けられます。センスで未熟さをある意味誤魔化しているんですね。

それでも良いっちゃ良いのですが、デザインが分かる人が見ると色々と粗いんですよね、やっぱり。センスがあっても、細部が粗いものに僕はokを出せません。逆に特別なセンスが無くても、細部が整っているものはサクッとokが出せます。

センスがある人こそ基礎を固めて、それをもっと上位の箇所で利用すべきです。またセンスに自信がないという人でも、基礎があれば良い成果物を作れます。センスはそれに+αされるおまけです。

センスの前に必要な基礎の未熟さを明確にし、あとはその具体的な改善点を学ぶだけ、それがユミソラ式Illustrator講座です。

最近のweb製作はシンプル&ビジュアル重視の大味のものが多い

さて、最近のwebサイトというと以下のサイトにあるようなページを見ることが多くないでしょうか。

f:id:moba13:20170131233314p:plain

lp-web.com

メインビジュアル(サイトを開いた時最初に目に入るところ)は画面一杯に画像がドーンとあって、以前のwebサイトのようなサイドバーなどなく1カラムで構成されていて、見出しは大きな文字+装飾で、画像やボックス要素がシュッ!っと横から出てくる。

それこそmacやiPhoneなどAppleのサイトをその走りとして印象に持つ人が多いかと思います。このようなシンプルなデザインのサイトは、スマホで閲覧する際にも閲覧性が高いため相性が良くここ2,3年流行りとなっています。

一方で下積みが少ないデザイナーでも、それこそセンスゴリ押しでそれっぽいものを作りやすく玉石混合な状態になってきています。最近ではwixペライチといったデザインサイトを誰でも作れます!といったサービスも出てきてその傾向はより顕著です。

ではイケてるシンプルデザインサイトとイケてないシンプルデザインサイトの違いはどこにあるのでしょうか。

最低三手間の原則

Illustrator講座の中では、ツールの使い方はもちろんですが、要所で講師のユミソラ先生のデザインに関する思考法を教えてもらえます。

その中で僕が一番よく覚えているのが「最低三手間の原則」です。

文字通りではありますが、デザインパーツを作る際に最低3つの手間をかけるとイケてるデザインになるということです。

講座を受けてから3年経った今でも、自分でデザインやってて微妙なところを見つけると「ここ一手足りてないな。」などとよく一人でやっています。「手抜き」なんて言葉がありますが、あれは手が入っていないのではなく、手数が足りないということなんですよね。

先ほど、最近のwebサイトはシンプル志向だなんて話をしましたが、そんなシンプルなデザインの時でもこの最低三手間の原則は適用されます。

シンプルというのは中々難しい言葉で、安易に受け取るとただの手抜きになります。シンプルなのに手間数をかける、これは矛盾した言葉に見えますが、デザイナーの仕事とはそれを成り立たせるところにあるわけです。

「最低三手間の原則」こそ、イケてるシンプルデザインとイケてないシンプルデザインの違いであり、書籍で独学したり、ツールの使い方を学ぶだけの講座では身につけることができないスキルです。

手間をかけるにはスピードが必要

では限られた納期の中で三手間をかけるにはどうしたら良いでしょうか?一発で良いモノを作るセンスでしょうか。確かにそんな天才もいるかもしれませんが、それだとセンスの乏しい我々凡人は困ってしまいます。笑

凡人が手間をかけるために必要なものはズバリ「スピード」です。センスが無くてもスピードがあれば試行錯誤をたくさん繰り返し良いデザインが作れます。

そんなわけでユミソラ式Illustrator講座では、単純な機能を使いこなすスピードを身につける講義が前半のほとんどを占めるといっても良いでしょう。

Illustratorというベジェ曲線がーみたいな難しい機能の話になりがちですが、それは中盤以降。もちろんベジェも大切ですが、基本機能で出来ることをまずはとにかく身につけます。

そしてその中で、難しい機能を使わないでもできることが、たくさんあるということに気がつくこともできるのです。

デザインソフトの基本操作スピードというのは、文書を書く時やプログラミングの時でいうタイピングのスピードです。まずはそれが必須なのは自明ですよね。でもデザインだとタイピング特訓ソフトのようなものは無いわけで、それを学ぶことのできる場は非常に貴重です。

◼︎ユミソラ先生のお言葉

シンプルという名の手抜きに依存すると変化の時に滅びる

そんな中、今の時代手を抜いてようがそれっぽいデザインができるなら良いじゃないか、という話もあります。

確かに今の時代はそれで良いのですが、デザインのトレンドは常にシフトしていきます。今のデザインの風潮も元々以前に流行っていたものが、進化して戻ってきたものですし。

www.asobou.co.jp

そうなると、ただの手抜きに依存したwebデザイナーはまた風潮が変わった時に、もしその風潮がリッチなものでスキルが大きく求められる流れだったとしたら、変化に適応できず絶滅することとなります。

また昔からwebをやっているデザイナーさんと仕事をすると感じるのですが、そういった方々のデザインは前の風潮の時に磨かれたスキルを今の時代にマッチさせていて、そこに強みがあるのですよね。

先ほど、シンプルな中に三手間を入れるのはバランスが難しいみたいな話をしましたが、そのバランス感覚のようなスキルはまた次の流行に変わった時にはきっと磨きづらいスキルとなり、それを持っていること自体が強みとなってくるのです。

ノンデザイナーこそ勘どころが大事だし、それがないと良いと言われるデザイナーになれない。

僕は仕事でなくライフワークとしてもwebサービスを作る人間ですので、そういった時にはデザインもプログラムも基本全部自分一人でやることになります。そんな時webデザインで大事なことは、締めるべきポイントをちゃんと締めるという勘どころです。

うちのサイトでいえばこの歌い手のまとめサイトでは、キャラクターアイコンというポイントに手間をかけ(もちろん学んだIllustrator力で作成)その他装飾は少ないですがバランスは取ってありそのおかげでデザインをお褒めいただくこともあります。これが仕事だとしたらもっと詰めていくべきところはたくさんあるんですけどね。

f:id:moba13:20170204150825p:plain

極端な話そんなポイントさえ抑えられていれば、仕事の案件でもクライアントさんからokが出ます。

これは説明が難しいのですが、必ずしもすべてのパーツに気合が入っていればokが出るわけではなく、全体の調和感みたいなところです。締まってないポイントがあるだけで、その箇所だけでなく全体のパワーが抜け落ちてしまうのです。

ここは中々書籍などでは学びづらいところで、最終的には自分でたくさん手を動かしながら学んでいくような領域なのですが、それでもまず最初に言葉で学んでおくことでかなりショートカットができます。

割とそこそこwebデザイナー歴がある人でも独学でやってきたような場合ここが抜けてることがあるので、意識が重要なポイントなのでしょう。

おそらく僕もノンデザイナーと言いながらも、ユミソラ先生はもちろん、これまでいた環境でお世話になってきたデザイナーさんの成果物や話を見聞きする中でほんの少しその感覚を分けてきてもらっていたのだと思います。

◼︎ユミソラ先生のお言葉

Illustrator講座、4~5月にまた開催されます。

そんなわけでIllustratorの使い方はもちろん、webデザインの思考術も学べるユミソラ先生のIllustrator基礎講座がまた2017年4月よりまた開催されます。

不定期での開催のため一度募集が終わると、また次回開催までだいぶ待つことになります。ぜひこの機会に学んでください。

詳細やお申し込みは下記のページからどうぞ。

tukilog.jugem.jp

具体的なことに対する質問や、最新・捕捉情報はTwitteも併せて参照ください。

twitter.com

少し調べていただければわかるかと思いますが、実践的なwebデザインスキルを学ぶ場というのは本当に貴重です。決してお安くはありませんが(といっても英会話教室に通う程度)良き学びをどうぞ。

Illustrator講座詳細ページへ