今回はWEBデザインをする上でよく使うツールや言語についてお話しします。
これからWEBデザインを勉強しようとしている方は、何をどこまで使いこなせるようになればいいのかわからないと思いますので、ぜひこちらの記事を参考にしてください。
Adobe XD
僕が今の仕事をする上で一番使うのがXDです。
XDというのはWEBデザインを作成するソフトです。
以前は後述のPhotoshopやIllustratorを用いることが多かったみたいですが、最近ではこのXDがよく使われます。
なぜXDが使われるようになったかというと、便利さと操作性が優れているためです。
XDは共有リンクを生成することで自分が作成したデザインを他の人に見せることができます。
Photoshop・Illustratorだと、一度PDFやJPGなどの形式に書き出して、そのファイルを送付しないと他の人に見せることができなかったんですが、XDならボタンひとつでリンクを生成し、それを送るだけで共有することができるので、利便性が格段に高いんです。
それ以外にもXDはWEBデザインを作成したりデモンストレーションを実施する上で便利な機能がたくさん備わってるので、気になる方はネットや書籍等で調べてみてください。
またXDはPhotoshop・Illustratorに加えてソフトの動きが軽く、サクサクと操作ができるのも利点のひとつです。
XDは他のソフトに比べるとできないこともあるんですが、その分操作が軽いのでみんな好んで使っているわけです。
最近だとXD以外にもfigmaというサービスもよく使われるようですね。
僕はfigmaは操作画面だけ見たことがあって、実際に触ったことはないんですけど、パッと見た限りではXDとよく似ているように感じましたので、おそらく一方が使えればもう一方もすんなり使えるようになるんじゃないかと思います。
（少し前にAdobeがfigmaを買収したので、今後は今以上に互換性がよくなるんじゃないかと期待しています）
XD自体も操作方法はとてもシンプルなので、コーダーやディレクターのようなデザイナーではない方にも好まれます。
そう言った点から考えても使いこなせるようになった方がいいツールであると言えるでしょう。
フリー素材サイト
意外と侮れないのがこのフリー素材サイトです。
僕はunsplashという海外の無料サイトや「写真AC」「イラストAC」「シルエットAC」といった国内の有料サイトを使っています。
同じデザインでも画像ひとつで全体のイメージは大きく変わりますので、適切な検索ワードを用いて自分が必要な画像を短時間で見つけられるというのもひとつのスキルだと思います。
イラストACは普通のイラストだけでなく、背景画像・フレーム・テクスチャなどを探す上でも便利なので、ぜひ使いこなせるようになっておきたいですね。
Adobe Photoshop
今でもPhotoshopでWEBデザインを作成している会社さんもあるみたいなので、こちらもひと通りは使えるようになった方がいいですね。
それにXDでデザインを作成する場合でもPhotoshopの習得は必須だと思います。
そもそもPhotoshopというのは画像加工のソフトなので、画像の色味や明るさを調整する際には必ず使います。
フリー素材や撮影データの写真は、無加工のまま使うとどこか素人っぽさが出てしまいます。
なので僕は現場でも写真を無加工のまま使用することはほとんどなく、色味や明るさのコントラストなどを調整して使用することが多いですね。
あとは電線の削除、シワやニキビを取り除いたりといったレタッチや、写真から人物だけを切り抜いたりすることもよくあります。
Photoshopは使えるツールが豊富で色んな用途で使うことができますが、その分初学者の方は混乱してしまいがちなので、模写などを通じてよく使うツールを中心に使い方をマスターしていくことをおすすめします。
Adobe Illustrator
Illustratorはチラシやポスターなどの印刷物のデザインで使われるソフトですが、WEBデザインでもよく使われます。
XDではできない縦書きや文字のグラデーション、円などの図形に沿って文字を並べるといった、凝ったデザインを作成する上ではIllustratorの方が適していると思います。
もちろんXDでWEBデザインを作成する上でも、Illustratorは使えた方がいいですね。
WEBデザインではイラストやアイコン、ちょっとしたあしらいを用いる時に、Illustratorを使って形や色を微調整することがあります。
また円や長方形といった綺麗な図形ではなく、ちょっといびつな形の図形で画像を切り抜くときなどに、Illustratorでササッとシェイプを描き、それをXDにペーストして画像にマスクをかけることもあります。
ベジェ曲線でロゴやキャラクターのデザインをできるまでのレベルは必要ありませんが、基本的な操作だけはできるようになっておくと作業をする上でとても役に立つので、入門書1冊分ぐらいは勉強しておくとよいでしょう。
HTML CSS
いわゆるコーディングと呼ばれるスキルですね。
HTMLとはテキストや画像を表示させたり、コンテンツの区分けをしたりするための言語で、CSSとはHTMLに装飾をつけるための言語です。
XD・Photoshop・Illustratorはあくまでホームページの見た目の図面をつくるためのもので、それを実際にSafariやChromeのようなWEBブラウザ上に表示させるには、HTML・CSSでコーディングを行う必要があります。
僕が働いている会社ではデザインとコーディングは分業制を採っていますが、会社によってはひとりでデザインからコーディングまでやらないといけないこともあると思います。
ですので制作会社等への就職を考えている方であれば、コーディングはできるようになっていた方がいいでしょう。
また、もし仮に分業制の会社でデザインの担当になったとしても、コーディングの知識があった方がデザインの精度が上がったり、レスポンシブ対応（スマホとパソコンのように、画面幅が異なるデバイスで表示を切り替えること）を考慮したデザインができるようになったりと、コーディングのことを理解しておくメリットはとても大きいと思います。
HTML・CSSは苦手意識を持っている方も割といるようですが、WEB制作に関わる以上最低限の知識は持っておいた方がいいですし、できればレスポンシブデザインの実装までできるようになっておくことが望ましいと思います。
これまでにお伝えしてきたことをマスターしていただければ、就職する上で必要なスキルは十分だと思います。
ここから先は、他の求職者に差をつけたい方や実務未経験のハンデを少しでも小さくしたい方、やる気や学習意欲の高さをアピールしたい方におすすめのスキルをご紹介します。
（さらに極めたい人向け：その1）JavaScript・jQuery
JavaScriptはWEBサイトに動きをつける言語です。
例えば3本線のメニューアイコン（＝ハンバーガーメニュー）をクリック（タップ）するとメニュー画面がビロンと出現したり、質問をクリック（タップ）すると回答がビロンと出現するといった動きなどを実装することができます。
あとはWEBサイトを開いた時にトップページの一番上に3枚ぐらいの画像がスライドショーのように表示される動きとか、画面をスクロールすると下からフワッとテキストや画像が飛び出してくるような演出もできます。
このように、別に無くてもWEBサイトとしては成立するものの、あると便利で見やすかったり遊び心や美意識を感じたりできるような演出をする上ではJavaScriptが必要になります。
そしてもうひとつjQueryというものがあります。
これはJavaScriptの一部で、より短いコードで手軽にJavaScriptを実装するための言語です。
個性的でマニアックな演出をしたいわけではなく、上で挙げたハンバーガーメニュー・スラーダー画像・アコーディオンメニューのように、数多のサイトで用いられているような演出であれば、jQueryで実装してしまった方が手軽で時短になります。
言わばJavaScriptはカレーをスパイスの調合から作るようなもので、jQueryは市販のルウで作るようなものだと思ってもらえればわかりやすいでしょうか。
JavaScriptは近年色んなフレームワークが登場しており、jQueryは役目を終えたと言われることもあるようですが、僕の知る限りでは実際の現場でもまだまだ使われてるのを見かけますし、便利なものであることは間違いありません。
ですので最も理想的なのはJavaScriptもjQueryも、それ以外のReactやVue.jsなどのフレームワークも使えるようになり、場面ごとに最も適切なものを使えるようになることだと思います。
ですが初学者の方であれば、ひとまずのところはJavaScriptとjQueryを使えるようになっておくのがおすすめですね。
（さらに極めたい人向け：その2）WordPress
WordPressはCMSのひとつで、CMSとはWEBサイトを簡単に更新できるシステムのことです、
元々はブログ作成のツールだったのですが、最近では大企業の公式サイトでも使われるようになっており、WordPressでサイトを作る制作会社もたくさんあります。
WordPressではテーマというデザインのテンプレートがあり、他の人が作った無料のテーマをカスタマイズしてホームページを制作することもできます。
ですがもし自分で考えたデザインをWordPressで実装したいのであれば、専用のテーマを自分で作成する必要があります。
WordPressテーマを自作するにはHTML・CSSに加えて、PHPというプログラミング言語を使わないといけません。
普通のWEBデザイナー志望者の方でここまでできる人はかなり少ないと思います。
実際WordPressで使うPHPはそれほど難しいものではないので、余裕があれば一度挑戦してみてもいいかもしれません。
先ほども言った通り、WordPressは本当によく使われていますし、その割にWEBデザイナーはできない人が多いので、僕個人的には非常に勉強する価値のあるところだと思います。
以上がWEBデザインで使用するツールのご紹介です。
フリーランスであれば何か一つに特化して他のことは外注することもできますが、どこかの会社に就職しようと考えると、ひと通りのことは自分でできる人の方が重宝されますので、就職を狙っている人はできるだけ食わず嫌いをせず、苦手意識を持たないように勉強してもらえればと思います。
それでは、さよなら。
