こんにちは。LIGが運営するWebデザインスクール「デジLIG」運営のペイです。

「自分にはデザイナーは向いていないのかも」「センスがないんじゃないか」

デザインを学びはじめたばかりのころ、多くの人が一度は思うことかもしれません。

実際、デジLIGの講座や相談の場でも、そうした不安の声を聞くことは少なくありません。けれど、その「センスがない」という感覚は、本当に才能の問題なのでしょうか。

今回は、元LIGデザイナーであり、現在はフリーランスをしながらデジLIGの看板講座「デザイン集中講座」の講師を務めるもりぐさんにインタビュー。

デザイン初学者がつまずきやすいポイントや、「センスがない」と感じてしまう正体について、じっくりと話を聞きました。

センスをひねり出すのではなく、まず知ることから始める。その考え方は、これからデザインを学ぶ人にとって大きなヒントになるはずです。

「センスがない」と感じる正体

―― デザインを学び始めたばかりの方と話していると、「自分には向いてないんじゃないか」「センスがないのかも」って不安になる人がすごく多いなと感じていて。もりぐさんは、そういう声をどう受け止めていますか？

センスって、「ひらめき」や「降ってくるもの」だと捉えられがちですが、今からでも身に着けられるものだし、その後天的なセンスでデザイナーの仕事はある程度はできると思っています。つまり、どれだけデザインを知っているかという「知識」だったり、経験の積み重ねのことですね。

そもそも、知らないものは判断できないじゃないですか。だから「自分にはセンスがない」と感じている人の多くは、才能がないというより、まだ手持ちの選択肢が足りないんじゃないかなと思っています。

―― 「選択肢が足りていない」というのは、すごくしっくりきます。初学者の方を見ていると、最初からオリジナルを作ろうとしてしまう人も多い印象があって。

デザインをはじめたばかりなのに、自分の頭の中だけでアイデアを考えようとしてしまう人は多いです。周りにまったく頼らずに自分でオリジナルを作らなきゃいけない、みたいに思ってしまう。

でも、デザインってゼロから何かを生み出すものじゃなくて、実際には、過去のなにかとなにかを組み合わせて作られていることがほとんどなんですよね。

Webデザインの型を知ろう

―― 「過去のなにかとなにかの組み合わせ」とのことですが、Webデザインでいうとそれはどういうものなのでしょうか？

そもそもWebサイトって、なにかを伝えるための媒体なんです。サービスの強みや事例、会社の住所といった「情報」を伝えたり、かっこいい、カワイイといった「印象」を伝えたり。

その中でも「情報」を伝えようとすると、見せ方が似てくる傾向があります。これがWebサイトにおけるひとつの「型」です。おしゃれなサイトは装飾や動きに目を奪われがちですが、具体的な情報の部分は同じような型に沿った見せ方になっていることが多いです。

初学者さんには、まずこの型を身につけてほしい。

―― どうして見せ方が似てくるんでしょうか？

そのほうが「わかりやすい」からです。スマホアプリって説明書なしでだいたい使えるじゃないですか。なぜ使えるかというと、前に使ったアプリと操作方法が似ているからなんですよね。「こうやるとこうなるかな……？ あぁやっぱりなった」みたいに。

以前見たことがある、やったことがあると、人は安心して使えるので、情報も同じように型で伝えてあげるほうがわかりやすいのかなと。なので、情報のわかりやすい見せ方は、なにかの型に集約されがちなんです。

―― なるほど……。たとえばどんな「型」があるんでしょうか？

一番わかりやすいのは、ヘッダーの左にロゴ、次にグロナビ、一番右にボタンを配置するパターン。グロナビとボタンは右に寄っている。さらに言うなら、ロゴの大きさも文字の大きさも余白の取られ方もだいたい同じだと思います。これは多くのサイトに共通する型といえます。

―― たしかに、よく見るパターンですね。共通の型はどうやって見つけたらいいんでしょうか？

いろいろなサイトを眺めて、100個見たときに、ある程度繰り返し出てくる表現であれば、それはあるあるの型だと思っていい。お知らせもFAQもインタビューも、だいたい似た型でできていることに気づけるんじゃないかと。

逆に、100個中1個しか見ないような表現は「それはそれ」としてインプットしておく。でも、そういったレアな表現であっても、実はWebサイトの王道の型を派生させて作られていたりします。

ギャラリーサイトに載っているサイトは斬新な表現ばかりだと思われがちですが、情報をちゃんと伝える見せ方をしたうえで、表現をぶっとばしているんです。

型を守ったままだとよくある見た目になるし、普通から離れようと型を崩しすぎると情報が伝わりにくくなる。多くのデザイナーさんがこのジレンマと葛藤していらっしゃるんじゃないかと。案件によってそのバランスを使い分けている人を見るたびに「上手だなぁ……すごいなぁ……」と思っています。

イケてるデザインを知ろう

―― たくさんのサイトを見比べるとなると、ギャラリーサイトを活用するのがよさそうですね。

そうですね。型を知るのと同時に、審美眼も養っていきたいところです。

でも初学者さんは「イケてる」の見分けがつかない。そんなときこそイケてるクリエイターさんが運営しているギャラリーサイトを見てみましょう。以下のような実績のあるクリエイター・会社が選定しているサイトとか。

• S5-Style（田渕将吾さん）
• MUUUUU.ORG（ムラマツヒデキさん）
• Brilliant Design Collect（間部盛貴さん）
• me ki ki ki（株式会社メガホンさん）
• 81-web.com（株式会社TRACEさん）
※上記は一例。 他にもたくさんあります！

見るコツとしては、自分の好みはいったん置いて、「この人たちが選ぶからには、イケてる理由があるんだろうな」と素直に受け止めてみる。イケてる人の選ぶ基準をいったん信じてみてください。「このサイトはなにが優れてるから選ばれたんだろう？」と探っていくのもいいですね。そうやって見ていくことで、その人の選球眼を少しずつ自分のものにしていくんです。

―― “イケてる理由”を探るうえで、チェックすべきポイントはありますか？

たくさんありますが、まずは「文字・画像・余白」を中心に意識して観察してみてほしいです。

突き詰めると、Webサイトの情報のほとんどは「文字・画像・余白」でできています。どんな書体をどれくらいの文字間、行間で組んでいるか、画像はなにをどういうクオリティで使っているか、それぞれにどれくらい余白を取っているか。

これは基礎でもあり奥義でもあると思っていて。初学者さんは装飾や演出に目を奪われがちですが、Webやグラフィックも問わず、情報を扱うデザインの上手さはこの3つに集約されると思っています。

―― 「文字・画像・余白」の使い方のお手本となるようなサイトの例があれば教えてください！

最近話題になっていたところだと、このサイトですかね。

装飾をほとんど使わず、「文字・画像・余白」で構成されています。そのバランスがただただすごいなぁと。法人向けに情報をしっかり見せつつ、とても美しい。個人的にもすごく印象に残ったサイトです。

―― こういう素晴らしいデザインに出会えるからこそ、イケてるギャラリーサイトを見るべきなんですね。

そうですね。同じ情報を伝えるならどうせなら美しいほうがいいと思うし、ギャラリーサイトの中から「文字・画像・余白」を用いた「イケてるアウトプット」を中心にたくさん知ってほしいです。

情報はちゃんと伝えつつ、美しい。そんな事例をたくさん知ることが、デザインの守破離の「守」になるのかなと。

浴びるほど見よう

―― ギャラリーサイトを見るときに、分析しましょうとか言語化しましょうみたいなことをよく聞きますが、やはりそうしたほうがいいんですかね？

もちろんそうしたいです。が、まだ初学者さんには難しいと思います。なぜなら、なにを分析したらいいかわからないから。

分析するには頭の中にデザインのチェックリストが必要なんです。何も知らない状態では分析できない。学習が進むにつれてチェックリストが増えてくるので、やっとそこでそれぞれのサイトの違いを見比べることができるようになります。

その前にまずは「なんかわからんけどいっぱい見る時期」があってもいいと思います。「いざ分析しよう！」となったときに初めてサイトを見るより、もっと前に見ておきたい。とにかく浴びるほど見てほしいです。

―― たしかに。判断基準がないからこそ、はじめは「量」を優先したほうがいいんですね。

そうです。みなさんが思っている10倍、100倍は見てほしいです。ひとつのギャラリーサイトを直近3、4年まで遡って何周も見て、「見たことある」「あのときのあれだ」と覚えられるくらいに。

最初はただスクロールして眺めるだけでもいいし、移動中や休憩中に見るのもいい。これは僕がみてきた中での話ですが、初学者さんで伸びる人はいいデザインを大量に見ている人がほとんど。当然、ギャラリーサイトも見倒しています。プロ同士だって「あのサイトのあの部分」みたいに共通言語になるくらい、みんな見ているんです。

ギャラリーサイト以外では、SNSでイケてるクリエイターをフォローするのもひとつですね。とにかく良いデザインに触れる回数を増やすこと。それが、審美眼を育てるいちばんの近道だと思います。

見たものを分解しよう

―― ちなみにもりぐさんはどのような見方をしているんですか？

一言で言うと「抽象化する」なんですが、このワード自体が抽象的な気がしてて（笑）。抽象化が難しい場合は、まず「分解してみる」といいのかなと。

―― 分解、ですか。

はい。抽象化が「構造を読み解いて、そこにある共通点や法則を見つけること」だとしたら、分解はそのための手段のひとつです。

デザインは数多くの要素の組み合わせでできているので、それをパーツごとに分けて見ていきます。構成、情報の優先順位、書体・文字間・行間、画像、余白、配色、線、装飾、アニメーション……みたいに。はじめはざっくりでもかまいません。

最初はチェックリストが少ないから細かく見るのが難しいけど、学んでいくうちに観点が増えていって、分解の精度が上がっていくイメージです。

―― 例として、NewsPicksさんのサイトを分解していただくことはできますか？

もちろんです。では、FVでやってみましょうか。まずは大きく分解してみます。