Webの世界は変化のスピードが速く、新しい技術・手法・トレンドなどが次々と生まれています。
それに伴い、Webデザイナーが理解しておくべき知識や求められるスキルも多岐にわたります。
最低限必要なスキルとは何か、さらなるスキルアップやキャリアパスを形成するにはどんなスキルを身につけたらよいのか、現在のWeb業界とWebデザイナーに求められるスキルをまとめてみました。
Webデザイナーに最低限必要な基本スキル
Webデザイナーとして仕事をするための最低限必要な基本スキルを紹介します。
Webデザイン初心者の方や未経験からWebデザイナーになりたい人が、まず身につけておくべきスキルです。
HTML・CSS
Webページを表示させるために必要なのがHTML・CSSというマークアップ言語で、これらのソースコードを記述していく作業をコーディング（＝コードを書くこと）と言います。
HTMLとCSSはプログラミングと違い、初心者にもとっつきやすいコンピュータ言語です。
プログラミング言語はコンピュータに何かしらの処理をさせるための命令などを書くのに対し、マークアップ言語は表示したい内容を直接記述するための言語です。
HTMLファイルは「HTMLドキュメント（文書）」とも言われていて、厳密にはプログラムファイルとは区別されています。
プログラミングとマークアップの言語の違いについては、実際に勉強していくと理解できるので、最初は区別ができなくてもかまいません。
デザイン理論
デザイン理論の基礎的な知識です。
具体的には、レイアウト、カラー・配色、タイポグラフィ（フォント）などに関する基本的な知識です。
ロジカルに、あるいは科学的にデザインを考えられる知識や思考を持っておくことが重要です。
裏を返すと、Webデザインがセンスや感覚で行うものではないことを意味します。
「自分には特別なデザインセンスがないかも…」のように心配することはありません。
誰でもなれる？センスがないとダメ？Webデザイナーの適性教えます
Photoshop, Illustrator
デザイン作業をする上で必要なソフトウェアがAdobe社のPhotoshopとIllustratorです。
Webデザインの場合は、Photoshopをメインに使うことが多いでしょう。
ロゴやイラストなどの作成、あるいはSVGフォーマットの画像の作成でIllustratorを使うことがあります。
Photoshopの操作は必須で、Illustratorも基礎レベルを習得しておくとよいでしょう。
同じような機能を持つ代替ソフトもありますが、実質的な業界標準はAdobeのソフトです。
まずは、代替ソフトではなくPhotoshopとIllustratorを習得しておくべきです。
jQuery (JavaScript)
JavaScript (ジャバスクリプト) はWebブラウザ上で動かすことのできるプログラミング言語です。
例えば、クリックやタップで開閉するメニューなどを思い浮かべるとわかりやすいでしょう。
ユーザーの操作などで何かしらのイベントを検知して、ページの状態を変化させます。
Webデザインでよく使われるJavaScriptにjQueryというものがあります。
jQuery (ジェイクエリー) とは、JavaScriptのライブラリの一つで、言ってみれば、独自の記法でJavaScriptを扱えるようにしたものです。
Webデザイナーにとって理解しやすく、比較的シンプルな記述で機能を実装できるのがjQueryの特徴です。
世界的に普及しているライブラリなので、Webデザイナーがまず覚えるべきはjQueryと言えるでしょう。
Webデザイナーのスキルアップ項目
ここからは、基本スキルを習得し、サイト制作業務が板についてきた段階で、さらなるスキルアップを目指したい方のためのスキルを紹介します。
必ずしも全てを習得する必要はなく、自分の興味や得意な分野に合わせて習得していきます。
WordPressのテーマ制作
圧倒的なシェアを誇るCMSであるWordPressを使ったオリジナルサイト（オリジナルテーマ）制作スキルです。
WordPressの案件は当たり前のようにあるので、基本スキルを習得した後に学ぶべきスキルと言ってもよいでしょう。
WordPressはPHPというプログラミング言語で動くシステムなので、PHPの知識が必要になることがあります。
ただし、ブログを付けるなどのシンプルな機能程度なら、WordPress独自のコード（テンプレートタグ）とちょっとしたPHPを書くだけでも実装できます。
高度なカスタマイズができるようになりたければ、PHPもしっかりと学ぶ必要があります。
UI/UXデザイン (ユーザビリティ)
UI/UXデザインという言葉が年々注目を集めるようになってきています。
人間工学・心理学・マーケティングなどの視点から、ユーザーの操作～行動（体験）を考慮してサイトをデザインすることです。
UI (User Interface)、UX (User Experience) という言葉は、スマートフォンアプリの誕生頃から注目されるようになり、最近では IoT (Internet of Things) でも重要視されています。
Webサイトの場合、ザックリ言うと、次のようなことを意識してサイトをデザインします。
- 理解しやすい
- 操作しやすい
- 使っていて心地よい印象だ
- ユーザーの目的を達成しやすい（コンバージョン行動に繋がりやすい）
- また訪れたい
Webサイトでは、以前から「ユーザビリティ」という用語が使われていましたが、いずれもユーザーを中心に置いた設計という点では、同義のものと考えてよいでしょう。
UI/UXデザインは、最終的にサイトを運営する企業・会社の印象や利益に影響するため、非常に重要な役割があります。
フロントエンドエンジニアにシフトしたい方も押さえておきたいスキルです。（後述）
プロトタイピング
プロトタイプは試作品のことで、プロトタイピングはプロトタイプを作ることを指します。
プロトタイピングは、アプリやWebサービスの開発で取り入れる手法ですが、最近ではWebサイトの制作プロセスにも取り入れられるようになってきました。
Photoshop等のグラフィックソフトで作ったデザインカンプでは、サイトのアニメーションまでは表現できませんでしたが、プロトタイピングでは、Webサイトの動きをデザイン段階から含めることができます。
つまり、より実物のWebサイトに近いイメージで制作物の仕様を検討できるというメリットがあります。
有名なプロトタイピングツールにAdobe XD, Sketch, Figmaなどがあります。
イラスト・漫画・グラフィックデザイン
Webデザイナーと言っても、イラスト・漫画などの絵を描ける人や創造的なグラフィックデザインができる人は実はそれほど多くありません。
むしろ、割合としては絵を描ける人の方が少ないでしょう。
Webデザインと絵が描けることは別のスキルです。
もしグラフィックデザインが得意なら、それはWebデザイナーとしても強みになるので、そのスキルを活かすことができます。
イラストや漫画を取り入れたサイト作りのノウハウなどを蓄積していけば、デザイナーとしての差別化にもなります。
Sass
Sass (Syntactically Awesome Stylesheets) はCSSメタ言語です。
メタ言語とは「言語のための言語」のことです。
端的に言うと、効率的にコードを書くために開発されたCSSの拡張言語です。
変数・関数・演算・条件分岐などのプログラミング的な書き方ができたり、セレクタの入れ子による簡素な記述ができたりと、便利な機能が多くあります。
Sassを用いた案件もあったりするので、覚えておくと対応範囲が拡がるし、業務の効率化に大きな効果を発揮します。
フロントエンドエンジニアを目指したい方は必ず習得しておくべきスキル（後述）ですが、デザイナーもぜひとも覚えておきたいスキルです。
その他、HTMLの記述の手間を減らしてくれるEmmet、テンプレートエンジンのPugやEJSといった効率化ツールが色々と考案されています。
いずれも、コーディング作業の手間を軽減してくれるツール類です。
CSSフレームワーク
CSSフレームワークとは、Webサイトを作るためのレイアウト・パーツ・機能などをまとめたもので、いわば、Webサイトの制作用キットです。
CSSフレームワークを使うことで、1からデザインを起こさずにある程度見栄えの整ったWebサイトが作れます。
工程の省略や時間の短縮になるので、状況によってはCSSフレームワークを使った方が良い場合もあるでしょう。
CSSフレームワークを指定している案件も中にはあります。
代表的なCSSフレームワークに次のようなものがあります。
最も有名なのはTwitter Bootstrapでしょう。
各フレームワークにはある程度のルールが定められていて、それに沿ってサイトを構築していきます。
フレームワークのメリットの1つとして、チームビルディングを行う時のルールの共有にあります。
チームで行う場合、誰がどんな意味のコードを書いたのかをメンバー間で把握しづらい、といった問題が往々にして起こります。
CSSフレームワークを利用すると、ルールや仕様等があらかじめ理解している状態から始めていけるので、トラブルが起こりにくくなります。
どちらかと言うと、デザインが苦手なエンジニアが使っている印象ですが、CSSフレームワーク自体がサイト設計の勉強になるので一度使ってみるのも良いでしょう。
CSS設計
CSSそのものはシンプルなルールですが、それゆえにきちんと考えてコードを書かないと破綻が起きやすくなります。
- 同じような指定を何度も書いてしまう
- 意図せず既存の指定を上書きしてしまう
- 書き方に統一性がない
などなど、管理しづらいCSSを書いてしまいがちです。
そこで、「CSSの記述に規則性を持たせてメンテナンスに優れたCSSを書こう」というのがCSS設計思想です。
代表的なCSS設計思想に以下のようなものがあります。
- OOCSS
- BEM
- SMACCS
- FLOCSS
CSS設計は、その考え方や命名規則を取り入れるものであって、CSSフレームワークのようにデザインパーツ等が提供されているものではありません。
したがって、制作物自体は1から自由に構築できます。
CSS設計もまたチーム開発を行う際に威力を発揮しますが、管理しやすいCSSという点では、1人で制作する時にも役立つスキルです。
フロントエンドエンジニアを目指したい方は習得しておくべきスキルです。（後述）
WebデザイナーからWebディレクターへ
Webデザイナーからのキャリアパスとして代表的なのが、Webディレクターへのキャリアアップです。
制作の実務から離れ、クライアントとの折衝、要件策定や設計、制作陣への指揮や進行管理など、プロジェクトリーダーとしての業務を行います。
制作に関する全般的な知識に加え、コミュニケーション能力やマネジメント・スキルも必要となります。
デザイナーと区別される職種ですが、フリーランスならクライアントとのやり取り〜制作まで全て1人で行う場合もあるため、ある程度のディレクションスキルは全てのデザイナーが身につけておきたいスキルとも言えるでしょう。
フロントエンドエンジニア向けのスキル
Web制作に関わる技術は次々と新しいものが生まれ、必要となる知識やスキルは増える一方です。
そのような背景から、Webデザイナーが全てを担当するのではなく、分業体制で行われます。
大別すると、Webデザイナーとフロントエンドエンジニアに分けられます。
フロントエンドエンジニアは、コーディングやプログラミングなどの技術的な領域により深い知識とスキルを持つ職種です。
端的に言うと、デザイン方面に専門性を発揮するのがWebデザイナー、Web技術方面に専門性を発揮するのがフロントエンドエンジニア、という棲み分けです。
Webデザインを学習していく中で、コーディングやプログラミングの分野に興味を持ったなら、フロントエンドエンジニアへキャリアをシフトしていくのもよいでしょう。
ここでは、フロントエンドエンジニア向けの専門スキルについて紹介します。
なお、『Webデザイナーのスキルアップ項目』で紹介したスキルの中にはフロントエンドエンジニアに必要なスキルが含まれています。詳しくは各スキルの解説をご覧ください。
JavaScript
フロントエンドエンジニアと言えば「JavaScriptの専門家」と言っても過言ではないくらい重要なスキルです。
Webデザイナーよりも深くJavaScriptを理解し、コードを書けるスキルが求められます。
最近、JavaScript界隈は非常に賑わっており、Angular.js、Vue.js、React、node.jsなど様々なライブラリやフレームワークが人気を集めています。
JavaScriptをマスターすれば、Webアプリの開発なども行えるようになるし、案件の幅が拡がるのも大きなメリットです。
Git
Gitはソースコードの変更履歴を記録・管理するバージョン管理システムです。
過去の状態が記録されているため、以前のバージョンにファイルを戻すこともできます。
「誰がいつどのファイルを変更した」のか変更履歴が残るので、チーム開発をする際に編集の衝突ミスを防げます。
Webデザイナーの方が覚えておいても役立つスキルです。
タスクランナー
タスクランナーとは、制作工程内の様々な単純作業を自動化・効率化してくれるツールのことです。
例えば、SassからCSSを書き出したり、コードをある規則に従って変換・整形したり、ソースコードの改行を全て削除してサイズを縮小させたり、それらを一連の流れとして自動的に処理させます。
代表的なものに、gulp、Grunt、Webpack、npm scriptsなどがあります。
タスクランナーを利用するには、CUI (character user interface) を扱う必要があります。
CUIとは、コマンドラインの操作、いわゆる「黒い画面」の入力操作のことです。
少し敷居が高く感じてしまいますが、Webデザイナーが覚えておいても作業の効率化に役立ちます。
PHP, MySQL
PHPとMySQLはWordPressで利用されているため、Webサイトの制作においても重宝されるプログラミングスキルです。
PHPを習得すれば、より高度なWordPressのカスタマイズやプラグイン開発ができるようになります。
PHPプログラマーとして活躍することもできるでしょう。
他にもプログラミングを学んでWebエンジニアを目指す道もあります。
Webデザイン+αのスキル
ここまで紹介してきたものは、デザイナー向けのものであれエンジニア向けのものであれ、実制作の業務スキルでした。
制作スキル以外にもWebデザイナーがステップアップする方法があります。
それが、マーケティングと関連性のあるスキルを身につけることです。
言い換えると、クライアントの利益に直接的に貢献できるスキルです。
Webデザイナーがマーケティングスキルを身につければ、制作物にそのエッセンスを反映させられるため、大きな強みにすることができます。
SEO
Webマーケティングの代表格として一般的にもある程度認知されているのがSEOですね。
SEO内部対策と呼ばれるSEOに適したコーディングは制作スキルとしても重要ですが、さらに運用を見据えたSEO戦略やサイト設計なども行っていきます。
制作後もSEOのコンサルティングを通してクライアントに関わることで、制作以外の収入を得ることもできます。
コンテンツ企画・制作 (ライティング)
一般的なWeb制作では、クライアントに原稿や素材を提出してもらいます。
言い方はよくありませんが、コンテンツの作成をクライアント任せにしておくと、非常に味気のないコンテンツになることがあります。
デザイナーがどんなに素敵なデザインで作っても、肝心のコンテンツがつまらないと、サイトの魅力は半減します。
そこで、どんなコンテンツにするとサイトがもっと魅力的になるか、もっとコンバージョンに繋がるのか、というところからクライアントと一緒に作っていきます。
ライティングまでも請け負った制作をすることもできますし、ライターと連携してもよいでしょう。
コンテンツはWebサイトの中枢なので、クライアントのビジネスに対する理解力が要求されるスキルです。
Web広告
SEOと双璧をなすWebマーケティングの手法がWeb広告です。
PPC広告やディスプレイ広告を使うには、LPなどのWebページが必須になります。
コンテンツの企画から関わり、「コンバージョンが獲れるLPデザイナー」というように特化型のデザイナーとして活躍することもできます。
広告運用までカバーできると、クライアントとの継続的な関係性を築けます。
Web解析・サイト運用
アクセス解析ソフトのデータを分析してマーケティングに反映させていく、いわゆるアナリストと呼ばれるスキルです。
データから読み取れる情報を元に、仮設～検証を繰り返し、クライアントのビジネスを成長させていく手伝いをする業務です。
Web解析も基本的に終わりのない業務なので、クライアントと継続的な関係性を築いていけます。
Webプロデュース (Webコンサルティング)
クライアントに合った最適なWebマーケティング手段や戦略を選び、制作～運用までを実現させていくのがプロデューサーです。
クライアントのビジネスへの理解とマーケティング全般に関する広い知識が要求されます。
コミュニケーションやディレクションのスキルも重要です。
世の中には、「Webを活用していきたいけどもよくわからないので手が出せない」とか「過去に失敗してそれっきり怖くてWebに力を入れていない」という中小企業はたくさんあります。
そういった潜在的な需要を持つクライアントに対してアプローチができれば、まだまだ新たな顧客層を開拓することもできます。
やり方次第で独自のポジションを築くことができます。
SNSマーケティング
もはやWebマーケティングの1つの分野として確固たる地位を築いているSNSマーケティング。
うまく使えば大きな注目を集められる一方で、炎上トラブルなど企業・会社にとってリスクを感じやすい諸刃の刃がSNSです。
適切なSNSでの発信・運用・サイトへのアクセス誘導などができれば、SNSマーケティングはかなりの需要が見込めるでしょう。
動画マーケティング
SNS同様、動画マーケティングも大きく伸びてきていますね。
動画の撮影や編集といった制作業に限らず、動画チャネルの企画・運用・アクセスアップなどへの貢献ができれば、かなり需要を見込めるスキルになるでしょう。
自分の得意分野を伸ばそう
Webデザイナーとしてのスキル、あるいは、さらにステップアップしていくためのスキルを解説してきました。
Webに関連する技術やスキルは、より専門性が要求されるとともに多方面に及んでいて、1人で全ての領域をマスターすることは不可能です。
したがって、自分が興味を持てることや得意な分野を見つけて、そのスキルを磨いていきましょう。
デザインに自信があるならデザインそのものを追求してもよいし、技術的な応用力を身につけたいならフロントエンドエンジニアを目指してみるのもよいでしょう。
クライアントの利益に貢献できるマーケティングスキルを身につければ、コンサルタント兼デザイナーになれますし、コンサルタントやプロデュース業を専門にしていくこともできます。
いずれの方面に進んでも、Web制作のスキルは必ず役に立ちます。
例えば、デザインを理解しているフロントエンドエンジニアはそう多くありませんし、マーケティング戦略を理解して制作物に落とし込めるデザイナーは希少価値が高いです。
逆に、制作現場を理解しているマーケッターもまだまだ不足しています。
各分野が複雑に深化していくほど、それぞれの領域を有機的に繋げてクライアントに提案できる存在は重要になってきます。
そういったスキルの土台になるのが、まさにWeb制作リテラシーです。
突出した専門スキルを持つか、複数分野を掛け合わせた独自のスキルか、これからのWebデザイナーにはそのどちらかのスキルが求めれることでしょう。
コメントをどうぞ