今、Webデザインを始めるために必要なスキル

どうもユウイチローです。

デザインを始めたいっていう人の多くは、まず初めに「Webデザイン」を選ぶケースが多いですね。

今回はWebデザインを始めたい、けどWeb業界ってどんどん進化するっていうし、今からなるには何から手をつければよいの？という方に向けた記事を。

突き詰めていくとWebデザインってとても様々な領域にまたがっており、一言でこういう領域を指しますっていうのは定義しにくいのですが、いわゆる一般的なWebの制作現場で存在する「Webデザイナー」に必要なスキルをご紹介しようと思います。

「Webデザイン」をする上で必要なスキル

端的にまとめると以下。

①表現面でのデザイン

ひとまず「良いデザイナー」と呼ばれるには最低限はコレは必須。そしてWebデザインのとっかかりとしてもこのスキルから学んでいくのが、スキルが制作物として表面化されるのでわかりやすいですね。

いわゆるテクニック的であり、一般の方が「デザイナーらしい」と感じるところかもしれません。

デジタルもアナログも関係なく、デザイン表現の理論「デザインの基本４原則（近接、整列、反復、コントラスト）」や「配色ルール」、その他多くのルールが存在し、知っておかないと本来はデザイナーとして成立しないもの。実際はこの理論と表現手法を身に付けるのは５〜１０年ほどかかるものですが、もはやそんな時間がある人はいないと思います。なので、「実践しながら学ぶ」が現実です。

また、後述しますが「Photoshop」「Illustrator」などのツールは今でも、Webデザインの現場では鉛筆を使うように道具として使用できないと仕事ができないです。

②デザイナーとしての思考

①は「作業」する上で必要なスキルですが、デザイナーとして大切なのはこちらでしょう。ユーザが何を求めているかを観察する、探す、理解すること。プロジェクトの与件、課題に即したアイデアを生み出し、解決策を投じる対象（何を？誰に？どのタイミングで？どんな場所で？どうやって？）も考える。時には課題が何かすらを探し当てて決めてしまう。最後の過程として、サイトやページなどの表現に落とし込み、市場に投入するのです。ロジックでつきつめてつきつめて、最後に感性でジャンプアップして、それをロジックで人に説明する。

大切なことは、「デザイン」は「人間を中心に設計されている」ことをしっかりと理解すること。この辺りはUXにつながるとても深い話になるので、とりあえず初めの段階では、デザインとは「ただ見た目をキレイにすること」では決してなく、「課題を解決する手段」であることを理解することです。

③UI・UX

UIは表現面でのデザインの中でもよりインターフェースの側面が強く、エンジニアリングの要素も入って来ます。②にも通じますが、そのデザインに接するユーザーが「どんな心理」でいるのか。こう思っているだろうから、こういうボタンを用意しよう、こういうアニメーションをいれてあげよう、こういうカラーリングにしようなど、しっかりと操作する「人間」を中心として設計してあげること。もちろん、美しく、心地よい表現でユーザーを魅了することもUIには必須です。

UXこそ②の要素が強く、表現的な側面は小さく、ユーザー中心に、課題発見、分析、調査、情報設計など、アナリスト・マーケの知識にも及ぶ幅広いスキルを要します。②を抑えた上で、様々な専門スキルを複合して情報を設計する役割ですね。

両者とも、世間的には「Webデザイナー」と切り分けることも多いので、とっかかりとしてはマストではないかもしれません。

④コーディング知識

ブラウザなどでの見た目を作るスキルです。今はコーディングが「できる」ことは必須ではないですが、知識を持つことはデザイナーでも必須です。

コードの中でも、HTMLやCSSを整えることが、わかりやすく読みやすいWebサイト作りにつながります。「HTML」とはWebサイトの情報構造（ヘッダーやフッター、見出しなど）を形づくるもので、「CSS」はレイアウトやマージン、文字の色など、サイトの装飾を整えるためのものです。

しかし、昨今では「コーディング自体が存在しなくなるためコーディングスキルは実は必要ないものでは」「いやいやコーディングは必須で、誰もが参入しやすすぎ、簡単すぎたのでもっと参入障壁を高くすべきだ」みたいな議論がエンジニア中心にされているようで、デザイナーとして「必須」とは言えない状況に。

大切なことは、今、デザインで制作したこの表現は実装（コーディングやプログラミング）でどれぐらい実現可能か、不可能なのか、それは時間・費用があれば可能なのか、をデザイナーが知ることです。

⑤プログラミング知識（フロントエンド）

こちらもサイト上での見た目の動きなどをつけるプログラミングです。JavaScriptやjQueryといった言語を使用します。タップすると詳細を表示したり、写真をスライド式で表示したりと動きをもたせることで、より使いやすくデザイン性も高まります。

上記コーディングと合わせて、「フロントエンドエンジニア」と呼ばれるいわゆる人が担当することが多いです。なのでデザイナーがマストで使えないといけないわけではないですが、知識としては知っておくべき項目。

⑥マーケティング知識

こちらも「思考」の方に通じるのですが、そもそもウェブサイトが何のために使用されるのかを理解することが必要です。営業、集客、認知と様々な役割がサイトには求められます。

ユーザーにアクセスしてもらうためには「SEO（サーチエンジン最適化）」の知識も必要ですし、PDCAを回すには「アクセス解析」も必須です。

このあたりは、デザインやコーディングの段階で取り入れておかないことも多いため、情報設計をする時点では必須の知識となります。

UXデザイナーとしては必須で取り入れないといけないスキルでしょう。ただし、デザイナーとしてマーケの達人になる必要はない。マーケの中でも、Web制作の上で必要な最低限知識を身につけている、ことが大事なのです。

マーケティング知識もとっかかりとしては必須ではないですが、制作の上流過程ではマストで必要な要素となります。

⑦ビジネス（お金）の知識、テクノロジーの知識

ここは、取り急ぎはデザイナーとしては必須ではないです。しかし、これから生きていく上ではとても重要な部分だと感じています。

ビジネスの知識は簡単にいえば「稼ぐための知識」。⑥のマーケの知識にも通じてきますが、これからフリーで活躍していきたい、起業して会社の代表としてやっていきたい、と考えていれば、お金の知識はマストです。というか、本当はまずはお金の知識が必要なんですが、「デザイナーになりたい」人にいきなり「お金」の勉強しなさい、っていってたら見てくれないですしね笑

加えて、「テクノロジーの知識」大事です。世界の時価総額TOP10なんかを見ると、ほとんどがアメリカのIT企業であることからわかるように、今世界経済を引っ張っているは概ねテクノロジー（特にIT分野）です。この動きは今後しばらく続くでしょう。様々な分野に「テック」がひっついてくる。要は、古い業態をテクノロジーが横串を刺して「IT」で繋げていってるのです。ここをおさえておくことも、これから生きていく上でとても重要。まあ同じく、「デザイン」を学びたい人にいきなりこちらの学習をオススメはしません。

-----------

このように、Webデザインといっても扱う領域がとても広いことが伺えます。そして、これら全てのスキルが必要か？というと答えはNoです。領域を広くまたがっていたとしても、それぞれの領域での「深さ」が足りないと、薄っぺらいスキルの集合体になり、価値は薄い。

逆に、いずれか１つだけを深掘りした、「職人」になることも、ひと世代前では通用しましたが、デジタルの時代では通用しづらい。それ以外の知識がすっからかんだと、今プロジェクト全体でどういう動きをしているのか、例えば打ち合わせの場で話に一切ついていけない、みたいな状況になりますからね。

理想は、「１つ専門的なスキル」でまずは深ぼる。そして、エンジニアリングやマーケスキル、お金の知識・・と横に広げていく。「T型」を描くような（一本縦にのびたスキル、上部で横に広がるスキル）スキルマップにすることです。

Webデザインにおいては、まずは①の「表現でのデザイン」をある程度極める。並行して②「デザイナーとしての思考」も学ぶ。考えを表現に落とし込めるスキルを身に付けるのです。

そして、①②が板についてきたら横に広げて、UIUXのスキル、実装の知識、マーケなど学んでいく。僕もこうやってデザイナーとして渡り歩いてきた一人です。

まあ兎にも角にも、「①ができる」がないと「デザイナー」と呼ばれないでしょう。

なので、以下に①を身に付ける上で必須のツールをご紹介します。

Webデザイナーとして使用するツール

表現に落とし込む際や、情報設計する際に使用するツールです。

Photoshop（フォトショップ）

Photoshopは、写真加工やWebデザインに用いられるソフトです。デザイン全体のレイアウト、写真全体の色味を調整したり、フィルター効果やぼかしを加える、ビジュアル面での作り込みに最適。

Webデザインというかデザイン全般のマストツールですが、それゆえに機能が相当多く、初心者は慣れるのに時間がかかります。ただ、Webデザインのみで考えた時に使う機能はさほど多くないので、必要な機能にしぼって習得しましょう。

価格は、フォトプランで11,760円（税抜）/年、単体プランで26,160円（税抜）/年です。

Illustrator（イラストレーター）

Illustratorは、線、曲線などを扱って使う作成・編集用ソフトです。拡大しても劣化しない「ベクター」という要素で作ります。Photoshopでデザイン・レイアウトしたのち、Illustratorでアイコンやロゴ、イラストなどのパーツを作ることや、Illustratorでデザイン・レイアウトまで行う人もいます。

僕なんかの元グラフィックデザイン出身のデザイナーは、イラレの方が馴染みがあり、パパッとラフを作る時なんかはこちらを使うことが多いですね。

価格は、単体プランで26,160円（税抜）/年となっています。

Adobe XD

PhotoshopやIllustratorなどと異なり、ページのレイアウトといったUIデザイン・Webデザインに特化したツールです。

Webだけの用途ではないフォトショやイラレはどうしても、Web用に最適化した作り方に少し手間がかかります。XDはWebに特化しているため解像度の変化に強いのが特徴で、操作も非常に直観的です。

最近は激しくアップデートされており、バージョン管理機能やフォトショ連携機能もつき、下で紹介するsketchといつも機能追加で戦っているツールです。

無料で体験版を手に入れることもできますが、単体プランの価格は、1,180円（税抜）/月です。

Sketch（スケッチ）

PhotoshopやIllustratorなどと異なり、ページのレイアウトといったUIデザイン・Webデザインに特化したツールです。

XD同様、Webに特化しているため解像度の変化に強いのが特徴で、操作も非常に直観的です。

全て英語表示なのであしからず。まああんまり気にならなくなりますけどね。

価格は99ドル/年で、1年間のアップデート保証があります。

その他

sketchと同時に使うのがバージョン管理用のabstractなど、プロトタイプ用のinvision、またコミュニケーションに最適なslackなどもろもろ便利なツールはあるのですが、ここでは詳しくは記載しません。ひとまず上記４ツールはデザイナーが使えないといけないツールでしょう。

ただし、XDとsketchは主として使用するのはどちらかを決めておいても良いかと思います。

まとめ

今回は、Webデザイナーとして持つべきスキルと、ひとまず持つべき「表現としてのデザイン」に必要なツールのご紹介をしました。

デザイナーとして必要なスキルセットは時代によりどんどんアップデートされていく。しかし極端な話、時代は変われど、人間に５感がある限りデザイナーという専門職はなくならないと思います。だから、デザインを「いつ始めたか」はさほど重要ではなくなると思う。３〜5年の差はほぼ無いに等しいでしょう。そういうわけで、「今から」始めることは遅くない。是非、デザイン界をもっともっと盛り上げていきましょう。

今後は、それぞれのスキルやツールを深ぼった、より入門として具体的に必要な技術や知識のお話しをできればと思います！

ではまた！

ユウイチローデザインカレッジというチャンネルにて
YouTubeでデザインにまつわるお話をさせてもらってるのでそちらもよろしくお願いします！