※記事内に商品プロモーションが含まれる場合があります
- 未経験からWebデザイナー、UI/UXデザイナーを目指しています
- Webデザイナー、UI/UXデザイナーに必要なスキルを知りたい！
- スキルがいっぱいありすぎて、どれから身に付けたらいいかわからん
- Webデザイナー、UI/UXデザイナーに必要なスキルをまとめてみたよ
- 転職に必要な最低限のスキルから、先々必要になりそうなスキルまでをまとめて、優先順位をつけてみたよ。
詳しく見ていきましょう。
はじめに
ぼく
先生
ぼく
先生
ぼく
Webデザイナー、UI/UXデザイナーに必要なスキルを検索して調べると、本当にたくさんの項目が出てきます。
Webデザイナー、UI/UXデザイナーに求められるスキルは年々増えてきており、どれも大切なものばかりですが、
転職に最低限必要なスキルはどれなのか、時々わからなくなってしまうことはありませんか？
ということでこのページでは、未経験から事業会社のUI/UXデザイナーになったぼくが自身の経験則から、
転職に必要な最低限のスキルから、先々必要になりそうなスキルまでをまとめ、優先順位をつけてみました。
何かの助けになれれば幸いです。
もちろん目指す会社によって必要なスキルの優先度が異なる場合もあるので、自分の目指したい会社と照らし合わせながら参考にしていただけると幸いです。
ちなみにここで紹介するスキルの優先順位は、ポテンシャル採用枠とかでWebデザイナーやUI/UXデザイナー、Webディレクターを目指す方向けの内容になります。
【重要度☆☆☆】転職に必要な最低限のスキル
未経験からWebデザイナー、UI/UXデザイナーを目指すのであれば、次にあげる5つのスキルはけっこう重要なので、優先的に身に付けておきましょう。
- デザインの基礎知識とスキル
- PhotoshopとIllustrator
- HTMLとCSS
- コミュニケーション力
- 情報収集力
それぞれ見ていきましょう
☆☆☆ デザインの基礎知識とスキル
「デザイナー」というのですから、デザインの基礎をおさえ、ある程度洗練されたデザインを作れるようになっておく必要があります。
デザインの独学法についてはこちらの記事でまとめているのでここでは詳細は省きますが、
デザインの基礎を学べるオススメ書籍として、「ノンデザイナーズ・デザインブック」と「なるほどデザイン」の2冊があるので、紹介しておきます。
この2冊はデザイン界では王道中の王道で、デザイン初心者にもわかりやすくまとめられている良書です。
デザインはアウトプットすることでスキルがついてきます。どんどんデザインを作りましょう。
デザインスキルを上げるおすすめの方法に”デザインの模写”があります。自分が「いいな」と思ったサイトやバナーを忠実に真似し、色遣いやフォント、文字間など、プロの技術を肌で感じてみてください。
数を重ねるたびに自分の引き出しが増え、デザインの幅が広がり、質も向上していくはずです。
☆☆☆ PhotoshopとIllustrator
Adobeのデザインソフトはデザイナーの必須アイテムです。
Webサイトのビジュアルイメージ（モックアップと言います）やバナーを作るときに使います。
PhotoshopとIllustoratorの使い方はAdobeの公式チュートリアルサイトで学習するとよいでしょう。
無料で学習できるし、動画でわかりやすく解説してくれるのでオススメです。
PhotoshopとIllustratorの違いはザックリ次のような感じです。
- Photoshopー写真や画像の加工、合成に向いている。
- Illustratorー写真や画像の配置（レイアウト）に向いている。チラシやパンフレットのようなDTPデザインに強い。
IllustratorとPhotoshopはAdobe Creative Cloudに契約すると利用できるようになります。料金プランが色々ありますが、PhotoshopとIllustratorを使うだけなら「フォトプラン」と「単体プラン（Illustrator）」を選択すればかなりお安く使えると思います（2020年1月現在。状況が変わってたらごめんなさい…！）。
また後述しますが、余裕があればAdobeXDも触っておくとよいでしょう。こちらはCreative Cloudのアカウントがあれば無料で利用することができます（2020年1月現在。状況が変わってry）。
☆☆☆ HTMLとCSS
- HTML：Webページの骨組みを作るもの
- CSS：HTMLで作った骨組みに装飾を施し見た目を整えるもの
HTMLとCSSはWebサイトのページを作るのに必要なマークアップ言語で、「テキストエディター」と呼ばれるツールを使ってコードを書き込んでいきます。
このHTMLとCSSを書き込む作業を「コーディング」と呼びます。
HTMLとCSSは、ドットインストールというサイトで概要を学びつつ、「HTML5&CSS3デザインブック（新版）」という本を使って勉強するのがオススメです。
HTML、CSSの独学法についてはこちらの記事でまとめているので、よろしければ。
Webサイトを作る際、デザインツールでモックアップを作った後、HTMLとCSSをガリガリ書いて、そのモックアップ通りのWebページを作っていきます。
ですからモックアップを作る段階でコーディング作業をふまえたデザインができなければいけません。これがWebデザインの特徴というか、ちょっと厄介なところです。
実際の業務ではデザインとコーディングが分業になっていることもあれば、会社によってはWebデザイナー、UI/UXデザイナー自身がコーディングまで担当するところもあります。
☆☆☆ コミュニケーション力
Webサイトにはいろんな人が関わっています。
Webディレクターはもちろん、Webデザイナー、UI/UXデザイナーも多くの関係者と話し合いながらサイトを制作、運営していかなければならず、コミュニケーション力がけっこう求められます。
ぼく
Webディレクター
ぼく
とはいえ、営業マンみたいな高い交渉術とか、駆け引きのセンスみたいなものはなくても大丈夫です。
「話の本質をきちんと理解し、相手にわかりやすく伝えられる力」があればおおむね大丈夫かなと思います。
（…まあ、これがけっこう難しかったりするのですが…(^^;）
☆☆☆ 情報収集力
調べ中
最近の情報に敏感になる、ということももちろん大切なのですが、
それ以上に、何かわからないことがあったら自分で調べる、という姿勢があることが、とても大切かなぁと思います。
Webデザイナー、UI/UXデザイナーは何かサイトを作るときに、クライアントや商品のことを深く理解していないといけません。
ネットで調べたり、直接人に会って話をしたり、実際に商品を使ってみたりなど、自ら動いて情報をかき集めることが大切です。
サイト制作以外のことでも、最近のニュースやコラム、ビジネス本、映画、マンガなど、日常的にさまざまな情報に触れておくと良いです。常にアンテナを張り、さまざまなインスピレーションを得ておくと、柔軟に仕事に取りかかれるかと思います。
【重要度☆〜☆☆】転職するときに持っているといいかんじのスキル
ここからは、「絶対にないとダメ！」とまでは言わないものの、
持っていると面接で一歩踏み込んだ話ができ、「お、こいつ分かってるな…!」という印象を与えられるようなスキルを紹介していきます。
ぼく
☆☆ マーケティングの知識
Webサイトは売上アップや商品の認知度向上など、マーケティング手法のひとつとして使われます。
ですので効果の高いWebサイトを作るためには、マーケティングを意識したWebサイト設計、プロモーション等が必要です。
とはいえ、一言で「マーケティング」と言ってもその領域はかなり幅広く、しっかり勉強しようとするとかなり時間がかかります。
（正直ぼくもちゃんと理解できているわけではありません…）
マーケ博士
ぼく
個人的には、Webデザイナー、UI/UXデザイナーとしてはいったん次の4つの知識があれば十分かなぁと思います。
- 3c：自社がどのような経営環境に置かれているのかを分析するフレームワーク。「自社（company）」「競合（Competitor）」「市場（顧客：Customer）」の3つの観点から分析する。
- 4p：商品の販売戦略を立てるためのフレームワーク。「Product（製品・サービス）」「Price（価格）」「Place（立地・流通・販路）」「Promotion（販促・広告）」の4つの観点で自社商品の差別化ポイントを探し出す。
-
ペルソナ：マーケティングのターゲットをなるべく具体的な人物像に落としこんだもの。年齢、性別のほか、趣味や人柄、仕事の様子といった、細かいところまでイメージする。
-
カスタマージャーニー：ペルソナの購買行動をマップ化したもの。ターゲットにどのタイミングで、どのようなアプローチを行うのかを決める。
ペルソナとカスタマージャーニーについては、「Webディレクションの新標準ルール」という本がわかりやすくまとまっているのでオススメです。
この本にはサイトディレクション全般の基本的なことが網羅されており、Webサイト制作の観点でペルソナやカスタマージャーニーの作り方がまとまっています。
Webに携わるならばぜひ読んでおきたい1冊です。
☆☆ グーグルアナリティクス
Webサイトの分析をするためのツールで、サイトのアクセス状況やユーザー属性、サイト内での行動などを計測できます。
Webサイトの運用や改善提案には欠かせないツールです。
グーグルアナリティクスは、グーグルのアカウントがあれば無料で利用できます。
ポートフォリオサイトを作るときに導入してみて、どんなかんじなのか触っておくといいでしょう。
☆☆ グーグルサーチコンソール
こちらもWebサイトの分析をするためのツールで、グーグルからどんなキーワードで検索し、どのページに流入してきているのかがわかります。
グーグルアナリティクスがサイト内部の分析に使われるのに対して、サーチコンソールは主にサイト外部からの流入部分の分析に使われます。
また分析だけでなく、グーグルの検索エンジンにインデックスさせるときにもサーチコンソールが役に立ちます。
こちらもグーグルアカウントがあれば無料で利用できるので、ポートフォリオを作ったときにでもいじってみるといいでしょう。
サーチコンソールの導入方法についてはこちらの記事にまとめているので、よければ参考にしてみてください。
☆☆ SEOの基礎知識
SEOとは「Search Engine Optimization」の略で、日本語に訳すと「検索エンジン最適化」です。
すごくざっくり説明すると、
「グーグルで検索したときに自分たちのサイトが検索上位に来るように、あれこれ頑張ること」
とも言うことができます。
ぼく
SEOはけっこう奥が深く、サイトのレイアウト（特に文字間）やコーディングなどもSEO評価の対象となるので、
Webデザイナー、UI/UXデザイナーでもSEOを意識する場面がよくあります。
SEOを初めて勉強するなら「10年つかえるSEOの基本」という本と「沈黙のWebライティング —Webマーケッター ボーンの激闘—」という本がオススメです。この２冊で、SEOの大まかな概要はだいたい理解できると思います。
どちらも難しい単語がなく読みやすいです。ボーンの方はかなり分厚い本ですが、マンガでストーリー立てているのですぐに読み切ってしまうかと思います。
☆☆ FTPツール
Webサーバーにファイルを格納するときに使うツールです。
Webサイトを作る際、HTMLやCSSなどのファイルは最終的にWebサーバーに格納しなければなりませんが、
FTPツールを使うとファイルを簡単にWebサーバーにアップロードすることができます。
実際の仕事でもよく使うので、使い方を知っておくと入社してからが楽です。
FTPとはFile Transfer Protocol（ファイル転送プロトコル）の略で、インターネットを使ってファイルを送受信する通信の決まりごとを指す言葉なのですが、
よくわからなければ、おおざっぱに「PCとサーバーとをつないで、ファイルの送受信を行えるようにするもの」だと思っていただいて大丈夫です。
正直ぼくもFTPについてよくわかっていないのですが、いったんFileZillaというFTPソフトをダウンロードして、どんなかんじなのか試してみるといいと思います（操作感がなんとなくわかれば十分です）。
無料でダウンロードできますし、MacとWindowsどちらにも対応しています（こちらのサイトからダウンロードできます）。
☆☆ デザインの中上級スキル
抽象的な話ではありますが、グッとくるデザインというものは、文字間や色使い、フォントなど、細かい部分のバランスがうまく取られているものです。
ここの感覚は独学でサクッと習得できるものではなく、何度もアウトプットをして養っていったり、経験とかセンスがモノを言う世界だったりしますが、
デザインを売りにしているWeb制作会社とかだと、入社前の段階でこうした中上級のレベルのデザインスキルが求められます。
そういった会社に入社したいのであれば、学校に行ってプロにデザインを習うなど、しっかりと準備をする必要があるでしょう。
ぼく
デザイン上達のコツとしては、上手い人のデザインをまねることと、何度もアウトプットしてデザインの上手い人にレビューしてもらうことの2点があるかなと思います。
デザインをまねるというところで言うと、個人的にはバナーやWebサイトの模写がオススメです。
ピンタレストとかで「これいいな！」と感じたデザインをストックし、フォントや色遣いなど細かいところまで忠実にまねることで、プロのデザイン感覚を自分の中にインストールすることができ、デザインの引き出しが広がっていきます。
☆☆ Adobe XD
Webデザイン向けに最適化されたAdobeのデザインツールです。
PhotoshopやIllustratorよりも軽いデータ容量でサクッとデザインを作ることができます。
またプロトタイプ機能も備わっており、クリックした時のページ推移やスクロールした時の挙動など、実際のWebサイトに近い形でデザインを見せることができます。
Webデザイン、UI/UXデザインの現場ではかなり重宝されていて、PhotoshopやIllustrator以上に使う頻度が多いかもしれません。
ぼく
操作方法はPhotoshopやIllustratorと似ている部分が多く、この２つを習得していればAdobe XDは後から習得するのでも問題ないかと思います。
Adobeアカウントを持っていればスタータープランという無料プランでXDを使うことができるので（2020年現在）、時間に余裕があれば試してみるといいでしょう。
☆ ライティング
バナーやLPの制作で、WebデザイナーやUI/UXデザイナーがキャッチコピーやテキスト原稿まで考えることも時々あります。
ライター並みのスキルでないにしても、要点をまとめて文章化できるスキルがあると、何かと便利です。
☆ イラスト、アイコン作成力
内容をわかりやすくキャッチーに伝えたいときに、イラストやアイコンはとても効果的です。
無料素材でもたくさんのイラストやアイコンがありますが、オリジナルで作れるとサイトのオリジナリティを高めることができ、１つの武器になります。
イラストはわりと経験やスキルが求められますが、アイコンとかならサクッと作れたりするので、着手しやすいかと思います。時間があればぜひトライしてみてください。
☆ 写真撮影
写真も内容をわかりやすく伝えたり、サイトの世界観を作り出すのに効果的です。
ネットで写真素材を探してデザインを進めてもいいのですが、
自前で写真撮影ができると、写真素材に依らないオリジナリティの高いデザインを作ることができます。
ぼく
写真の世界は奥が深く、極めようとすると”沼”だと言われていますが（カメラやレンズ代で何十万、何百万かかるそうです…）、写真撮影の基本（光の入り具合など）をおさえておけば、そこそこいいかんじの写真が撮れるんじゃないかなと思っています。
ちなみにぼくは写真スキルが全くありませんw。いつも無料素材にお世話になっています。
☆☆ 動画の制作、ディレクションスキル
近年Webサイトへの動画実装技術が進み、手軽に動画を載せられるようになってきました。
その流れに沿って、Webデザイナー、UI/UXデザイナーにも動画を扱うスキルを求められつつあります。
がっつり動画編集ができる必要はないですが、ある程度制作の流れとかを知っておくと、外注先とのコミュニケーションもやりやすくなると思います。
ぼくは3か月くらいだけ動画制作の会社にいたのですが、おかげで動画の外注のし方とかコスト管理とかの感覚が身に付き、今の仕事でもだいぶ役に立っています。
余裕があれば、AdobeのPremiere Rushというアプリで簡単な動画編集（切り貼り）ができるので、よければいじってみてください。Rushが使えると動画編集の指示出しがしやすくなると思います。
☆☆ gifアニメーション
SNSとかでよく見る、尺の短い音なしアニメーションです。
作り方は意外と簡単で、Photoshopで画像をコマ送りにして作ることもできますし、撮影した動画をgifアニメーションに変換してくれるサイトもあります。
作り方を知っておくだけでもだいぶ表現に幅が出るでしょう。
ぼく
☆☆ WordPress
WordPressはHTMLやCSSのスキルがなくてもWebサイトを制作することができるソフトウェアで、ブログ系のサイトとかでよく使われています。
（世界的にもシェアが高く、使い方やしくみを知っておくと何かと便利です）
WordPressでは記事の投稿や更新などを手軽に行えるようにするために、PHPやJavascriptといったプログラミング言語でがっつりシステムが組まれています。
個人的な意見ですが、このPHPとJavascriptの制御をなんとなくわかっていると、Webデザイン、UI/UXデザインをより現実的に進めることができるようになるかな？と思っています。
（詳細は、Wordpressについてまとめたこちらの記事をご参照ください）
ぼく
会社によってはWordPressの編集とかカスタマイズをメインでやっているところもあります。そういうところに入社したい場合は、PHPやJavascriptをしっかり身に付けておく必要があるかもしれないです。
☆☆ JavaScript
Webサイトに動きをつけたり、快適なUIを実現するのに必要不可欠な言語です。
タブやモーダルなど、普段何気なく体験しているUIにはJavaScriptがよく使われています。
（ちなみにぼくは全然Javascriptできません）
ぼく
☆☆ jQuery
jQueryとは、JavaScriptを手軽に使えるように設計されたJavaScriptライブラリのことで、少ないコーディングでJavaScriptの挙動を実装することができます。
カルーセルやハンバーガーメニューなど、Webサイトで定番となっている”動く”機能の実装には、jQueryがよく使われています。
ぼく
☆ PHP
プログラミング言語の1つで、主にWebサーバー上で動くプログラムを作るときに使われます。
ぼく
…ピンと来なくても大丈夫です。
PHPは主にエンジニアが扱う言語で、WebデザイナーやUI/UXデザイナーがPHPをいじることはほぼないと思います
（正直ぼくもPHPについてはよくわかっていませんし…）。
すごくざっくり説明すると、動的にWebサイトのコンテンツを生成、表示しているようなやつ（例えばアマゾンの商品詳細ぺーじとか価格、ヤフーニュースの記事など）には、PHPがよく使われています。
あと、お問い合わせフォームから入力、送信された内容を、メールで管理者に飛ばす時にも、PHPが使われています。
デザイナーとしては、「ここの機能はPHPで実装するところかな？」みたいな判断ができれば十分です。
ぼく
まとめ
- 求められるスキルはたくさんあるけど、転職に必要な最低限のスキルとしては次の5つをおさえておけば大丈夫。
- デザインの基礎知識とスキル
- PhotoshopとIllustrator
- HTMLとCSS
- コミュニケーション力
- 情報収集力
以上でスキルのお話はおしまいです！
ぼく
