Webの最新トピックを配信中!

デザイン力を最短最速で向上させる方法

Webデザイナーを名乗るなら必須のスキルが「デザイン力」です。

デザイン力とは、一部のセンスのある人間しか持ちえない謎の特殊スキルと思われがちです。僕も長らくそう思っていました。

しかし、デザイン力は、実は、訓練をすればしっかりと身につく後天的なスキルだと気づくことができました。でも、闇雲に、適当に量をこなしていても、デザインスキルは向上しません。あることを常に意識しながら制作することが最短でデザイン力を上げるコツであり、同時に、それができなければ優れたデザイナーになることはできません。

「あること」とは、
『デザイン力とは、「知識」と「道具」の二つで構成されるシンプルなスキルであること』。

これを常に意識し、前提としてデザインを制作することが重要になります。

デザインとは、知識(対象の実現したい目的や本質、表現したい世界観)と、道具(配色・ジャンプ率・余白などデザインのためのさまざまな道具)の掛け合わせになります。思い込みや主観に捉われず、デザインの対象が実現したい目的をしっかりと知って意識した上で、どの色を使うのか、余白は多く取った方がいいのか等、デザインで使用できるテクニック(道具)を活用する、ということです。

それぞれ「知識」と「道具」をどう身につけていくか、そして、もう一つの重要な要素である、「デザインをレビューしてくれる存在」の重要性についても説明します。

「知識」「道具」「レビュー」、この三つがデザイン力を最短最速で向上させるために必須の“3種の神器”だと胸に刻んでおいてください。

こういうマインドセット的なことはスクールではあまり教えてくれません。まともなWeb制作会社に行くと、先輩デザイナーが教えてくれたり、仕事を進めていくうえで自然と体得していくものです。僕ももう少し前から知っておきたかったです。

安心してください。Webデザインに関して限って言えば、デッサンなど絵のスキルは必要ありません。あるに越したことはありませんが、現場で仕事しているWebデザイナーの多くがデッサン経験など無いのですから。美大出身でなくてもいいんです。デザインは、自分にもぜったいに習得できる!と自信を持ってくださいね。

デザイン力向上に必須の「知識」とは

「知識」とは、デザインを始める上で必要な情報です。具体的には、大きく「クライアント」「製品・サービス」「ユーザー」の三つを知ることです。これを知らないままデザインを始めると、だいだい、曖昧で自己満足の制作物ができあがり、クライアントからノーが出ます。

この三つの内訳の例はこのようになります。クライアントや状況によって変わるので、自分の臨むデザインをする上で何を重視すべきかを考える必要があります。

クライアント:どんなブランド?目指す目的は?(売上?認知度向上?)等
製品・サービス:何を解決してくれるもの?誰が作ったの?どんなイメージを持つもの?高級?等
ユーザー:対象のユーザーは?どんな問題を抱えているの?性別・年齢層・知識レベル・アクセス解析のデータはどんな感じ?等

この三つについて、考え尽くします。
僕の自宅のホワイトボードには、「目的・本質・悩み・感情・魂」といつも書いてあります。デザインをする上で、目的を失わず、対象の本質を見据え、ユーザーの悩みを解決して、さらに感情をふるわせ、魂に響く物を作ることを忘れないようにするためです。友達が遊びに来てこの文字を見ると心配がられますが…(笑)

デザインは、カッコイイもの・カワイイものを作ることが目的ではなく、あくまで問題・課題解決の手段の一つです。そんなもんわかってるよ、と思われるかもしれませんが、制作しているとつい忘れがちになります。課題(クライアント・ユーザーの要望)を解決することが、デザインの役目です。

なので、デザインを提出する際には、意図がものすごく重要になります。目的と言ってもいいです。サイトの配色、レイアウト、問い合わせボタンの位置、使用した背景テクスチャの意味、角丸である理由、アイコンを使った意味などなど、デザインにおけるそれらすべての使用意図・目的を説明できなければなりません。現場ではそれはプレゼンやメールでクライアントに伝えます。

その意味では、デザインには制約があると言えます。クライアントに合わせないといけないわ、ユーザーが使いやすいように設計しないといけないわで、デザイナーの好き勝手なことはできません。でも、ここが面白いところで、このように制約があるのに、完成するデザインはデザイナーによって千差万別なのです。似たようなものができることはありますが、それでも十人十色で、全く同じものができることはありません。「限られた条件の中でもデザイナーのオリジナリティが必ず発露し作品になりうる」ことが、デザインがアートに近くエキサイティングなポイントです。

グッドデザインカンパニーの水野学さんの本「センスは知識から始まる」は、デザインに苦手意識を持つ人、業界未経験からWebデザイナーを目指す人にとっては、まさに救いの書あり、必読です。よく聞く「センス」という言葉の正体について噛み砕いてわかりやすく解説してくれます。水野さんは、「センス」は、特別な人に備わった才能などではなく「知識」の集積であると言い切ります。センスの正体がわかります。実はデザインってすごく論理的な作業なんだと気づかされます。

現在のトレンド(「普通」という感覚)、クライアント、製品・サービスそれ自体、そしてユーザー、これらに対する知識の蓄積がその人のセンスを形づくると言います。センスは、対象に合わせて「物事を最適化」するスキルであり、現在そして今後もデザイナーはもちろん経営者や一般の人にとっても求められる重要なマナーであると言います。
身近なところで、普段の業務でもそうだなぁとしみじみ思います。汚いパワポの資料を作るのはマナー違反で、文字の大きさ、色、図や写真を盛り込んだりと、読み手のことを考え尽くして資料は作られるべきだと思います。センスは、思いやりとも言えると僕は思っています。

センス(デザインセンス)は、才能ではなく、努力をすれば普通に身につくスキルの一種なのです。

デザインの「道具」を集めよう

道具とは、デザインをする上で使用するテクニックと言えます。テクニックの引き出しを増やしましょう。
道具を適切に自然に使いこなせるようになると、サクサクと良いデザインが生み出せるようになります。

道具は思いつくだけでも無数にあります。
色(各色の意味・配色・補色等)/ジャンプ率/視認性/レイアウト/近接/整列/見出しのパターン/ユーザーの視線の動き/フォント(種類・それぞれの特長・有名な定番フォント等)/わかりやすい表・グラフ/写真の上に文字をきれいに載せる方法 etc…

現場でいくつかサイトのデザインを作っていき、同じようなテイストや世界観の案件を受けた時に、「あれ、なんか前よりもスピーディーにデザインできてる!」ということがよくあります。たくさんデザインをして経験が増えれば増えるほど、引き出しの中の道具が増えていくからです。

じゃあ、その道具自体はどこから仕入れてこればいいのか。本とWebサイト自体が重要な仕入れ先になります。

「ノンデザイナー・デザインブック」は、業界の人ならほぼみんな知っている超定番の本です。僕も古い版ですが大事に持っています。「そもそもデザインとは何なのか」や近接・整列・反復・コントラスト等のデザインの基本原則を掴むには最適な本ので、しっかりと読み込んで、傍らに置いて定期的に読み直しておくといいです。こういうデザインの基本原則が学べる本は必ず一冊は通読した方がいいです。

図やフォント等のサンプルがやや古臭かったのですが、第4版になって刷新され、より現代に即した内容になりました。デザインのルールが学べる本は他にもいくつも出ていますが、この本はベストセラーでダントツです。

「Webデザインの見本帳」では、Webサイトのデザインがカタログのように紹介されています。たくさんのWebサイトのデザインを観ることで、そこで使われている配色・パーツ・フォントとそれの組み合わせを自分の中にストックとして吸収していきます。

よく「Webデザインの最短の上達方法は“模写”である」と言われます。優れたデザインのWebサイトをまるまるPhotoShopで再現するのです。実際に手を動かすことで、良質なデザインのパターンに慣れるしデザインの意図も汲み取れると。でも、はっきり言って、そんなことやる気力ありませんw

いや、できるなら絶対やった方がいいとは思いますよ。でも、僕はそこまでやらなくていいと思います。この本のようなサイトのカタログをいつも近くに置き、何かあればすぐに参考にするだけでいいです。

この本では、例えば、「黒を基調としたWebサイト」の項では、黒色をベースとした複数のサイトの写真とアクセント色の配分、使用されやすいパーツや使用フォントについてまで、詳しく解説されています。
その他、業種ごとに「学校・幼稚園サイト」「美容室・エステサイト」等や、「和を感じるデザイン」「エレガントで気品に満ちたデザイン」等、印象ごとにも非常によくまとめられています。

僕は暇があればいつもペラペラとこの本をめくってます。見ているだけで楽しいし、「今度この方法使ってみよっ!」と得るものがすごく多いからです。下で紹介しているギャラリーサイトと違って、レイアウトや配色などの解説が付いているのが、カタログ本の良い点です。


サイトのカタログでいうと、優れたWebサイトを紹介するギャラリーサイトもあります。これは「I/O 3000」というギャラリーサイトで、僕は2~3日に一回は見ては、美しいなぁとしみじみと魅入っています。

他に有名どころでは、業界の人ならだいたい知っている昔からある「イケサイ」です。紹介サイトの数が多く、さらに業種や色のカテゴリで検索できる点がおススメのポイントです。カタログとしての一覧性も高いので、自分が求めているサイトのデザインを発見しやすいです。

「レビュー」が無ければ成長は難しい

「知識」「道具」と紹介してきて、最後の「レビュー」です。

「レビュー」とは、優れた先輩デザイナーや周りの人からデザインのフィードバックをもらい改善を繰り返すことです。「自分の持つ知識と道具の掛け合わせであるデザイン」の正当性を審査してくれる存在は、デザイン力向上には必須です。

上で書いた「優れた先輩デザイナー」という点がまずはポイントです。不幸にもテキトーで経験の浅いWebディレクターと仕事をしてしまうと、自分の好み嫌いの感覚で「ここ赤色にして」等と伝えてくれる場合があるので要注意です。まずは、デザインを理解している方に巡り合えるかどうが、それがものすごく重要になります。

自分の制作したデザインは本当にかわいいものです。どれだけ「知識」を増やし、「道具」を駆使したと自分で思い込んでいたとしても、新米のWebデザイナーの場合、クソひどいデザインを作っていることがほとんどです。僕もそうでしたが、そのクソなデザインをドヤ顔で平気で提出してしまうのです。
だから、そのクソデザインにしっかりとダメ出しをしてくれる方が必要なのです。そして、そのレビューを素直に受け入れて、提出したデザインを修正します。すると、どうでしょう。うわ!やっぱ先輩すげー!ぜったいこっちのデザインの方がいいわ、とほぼ100%なります。

よくビジネス用語で「PDCAを回す」と言いますが、デザイン力向上にもこれが重要というわけです。Plan(デザイン案を練る)→Do(実際にデザインする)→Check(レビューしてもらう)→Action(デザインの改善)、このサイクルの繰り返しの中で、何が優れたデザインなのかを理解し体得していけるのです。

「すぐそばに優れたデザイナーがいてデザインをチェックしてくれる」環境があること、デザイン力を向上させたかったら、まずはこの環境を整えるために、自分に合いそうなWeb制作会社を見つけて、入ってみてください。

コラム:Webデザイナーを強くオススメする理由

あなたはたぶんエンジニアにはなれません。
だからこそ、このサイトでは、Webデザイナーになることを強くオススメしています。

でも、もし、エンジニアになれれば、月収100万円以上も可能です。実際に僕の友人も軽く年収1000万円は超えています。

ほとんどの人がエンジニアにはなれないので、30〜40万円以上はする高額なプログラミングの学校に行くのはお金をドブに捨てる可能性があります。どうしてもエンジニアになりたい方は、無料でプログラミングを学べるProEnginner開講の学校『エンジニアカレッジ』に行きましょう。エンジニアカレッジは、学校&就職支援の一体型サービスです。ここは本当にありがたい存在です。ソーシャルゲーム大手企業で有給インターンまで可能です。ここで、自分にエンジニアとしての素質があるのかチェックしてください。もし、あなたに才能があったら、最高にラッキーな人生です。
参考記事 : なぜ「エンジニア」ではなく「Webデザイナー」をすすめるのか

無料のプログラミング学校『エンジニアカレッジ』の詳細を読む

質問や感想などお気軽にどうぞ!

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

  • 管理人(ねこポン)について

    ぬるま湯でぬくぬくと週3日だけ働く30代半ばウェブデザイナーです!
    インテリ風&仕事できる風を醸し出す腕前では右に出る者はいませんが、電話すら怖くて取れないし、無断欠勤してしまい自宅に警察が来たほどのコミュ症ポンコツ人間です。
    現在Web業界5年目。事業会社とWeb制作会社のウェブデザイナーを経て、フリーランスになりました。

    > 僕の20代まるごと黒歴史ストーリー

  • Web制作会社を歩き回れるゲームを作ってみました!ぜひ探検してみてください。(注意:音が出ます!)

    一番上へ