センスいいねって褒められる！今日から使えるデザイン術＃SPECIAL 年末年始でデザイナースキルを身に着けよう！

これまでは、現在のお仕事の中で生かせるデザインのポイントをご紹介してきましたが、今回は年末年始特別編！
ご自身のスキルアップのためや転職や副業としてWebデザイナーに挑戦してみたい方へ、何からどのように勉強すればいいのかをご紹介します！

Contents

そもそもWebデザイナーとは？

Webデザイナーとは、企業や個人のWebサイトを目的に沿ってデザイン制作する人です。
サイトを装飾し、配色を決め見た目を整えていくイメージが強いと思います。
もちろんそれもデザイナーの仕事の一部ですが、サイト制作の目的やターゲットを整理し、ユーザーにどのように伝えるか、また運用が必要なサイトであれば運用がしやすいように「情報整理」を行うことが中心になります。

見た目がどれだけ素敵でも、ユーザーに情報が伝わらないサイトだと意味がないですよね。

よく「私は美大を出ていないし、センスもないし、イラストも描けないからデザイナーになれない」と、思う方もいらっしゃいます。
もちろん、そういった専門的な勉強をされていたり、イラストが描けることは強みにはなりますが、そうではないからデザイナーに向かない、デザイナーになれないということではありません。

「センスは知識を増やしていくこと」だと、私が尊敬するクリエイティブディレクターの水野学さんがおっしゃってましたので、ぜひ気になる方は著書を読んでみてください。

Webデザイナーになるために必要なスキルって？

まず、Webデザイナーになるためには、デザイン作業に使用するアプリケーションの操作とマークアップ言語等の習得が必須です。

代表的な習得しておきたい、アプリケーションと言語はこちら！

Adobe Photoshop
Adobe Illustrator
Adobe XD
HTML/CSS
JavaScript
jQuery
PHP
WordPress

このほかにもWebサイト制作に必要なアプリケーションや知識は様々ありますが、Webデザイナーとして転職を考えた時に、必須なものは「Adobe Photoshop」「Adobe Illustrator」「HTML/CSS」は基礎なので覚えましょう。

基礎を覚えた後はご自身で目指したい方向でスキルを習得していきましょう！
デザインメインでやっていきたい場合はデザインスキルを。
コーディングなどフロントエンドエンジニアとしてやっていきたい場合は「JavaScript」や「WordPress」など……といったイメージです。

PhotoshopとIllustrator

こちらに関しては、過去にセンスいいねって褒められる！今日から使えるデザイン術　＃07 Illustrator・Photoshopの基本で詳しく書いていますので、参考にしてみてください。

HTMLとCSS

HTMLとCSSは、普段皆さんが見ているWebサイトのほとんどで使用されている言語です。
HTMLがサイト内の情報の文書構造を示し、CSSが見た目を整える役割を持っています。

Wordなどで「イベントのお知らせ」のような文書を作成するときには、「イベント名は大きく太字でピンクに」「ここは本文なので読みやすい文字サイズで」「最後に日時や場所を箇条書きで太文字に」
という風に作成すると思いますが、Webブラウザの場合にはそれをすべて文字で指示してあげる必要があります。

■作成したいお知らせ

■HTMLとCSSの例

例えば、「h1＝この文書の中で一番重要な見出し」であることを表します。
HTMLでは開始タグと終了タグで囲むことで、この範囲は見出しになってください！という指定をします。

CSSは見た目を整える役割なので、例えば、h1は文字は太字「font-weight:bold;」、色はピンク「color:#ef8b8b;」になってください。という指定をCSS例のように記述します。

基礎は何から勉強するといいの？

何から勉強していくのかは目指す方向によって変わってきますが、今回はParanavi読者に合わせて、Webデザイナーとしてパラキャリする！を前提にご紹介します。
副業で自分一人でWebデザイナーとしてお仕事をしていくのであれば、
まずは必須科目！「Adobe Photoshop」「Adobe Illustrator」「HTML/CSS」から覚えましょう！

もし、学生時代に学んでいたものがあればそちらから覚えるで大丈夫ですし、コーディングメインでやりたい！ということであれば「HTML/CSS」から勉強を始めていただいて大丈夫です。

PhotoshopとIllustratorどっちから？？

PhotoshopとIllustratorそれぞれ扱うデータの形式・用途・得意なことが違うことを確認し、まず作ってみたいものを考えてみましょう！

例えば…
年賀状や名刺を！であれば、紙媒体の制作が得意なIllustrator。
自分のSNSの画像（Twitterのヘッダーなど）を！であれば、画像の編集が得意なPhotoshop。

こだわりがなければ、その流れで手を付けた方から覚えるで良いと思います。

WebデザイナーであればPhotoshopから！という記事もありますし、たしかに画像データを作っていく作業なので、画像加工が得意なPhotoshopから覚えるのも間違いではないです。
また、Illustratorのペジェ曲線を描くことなど独特の操作から入る方が後々楽だという意見もSNSではみられるので、迷うと思います。
個人的には、Illustratorに慣れるとPhotoshopでの表現や制作の幅が広がると思っているので、プロを目指すのであればIllustratorから入るのもオススメします。

ですが、せっかく勉強するのであればその時に作りたいものがある方を勉強した方が楽しいですよね！
楽しくないと続かないので、自分が楽しいと思う方から試してみましょう！
お仕事としてWebデザインやその一部分のバナー制作などを受けていくのであれば「Photoshop」も「Illustrator」も避けては通れません。
どちらも覚えるのであれば、まずは冬休みに楽しくできそうな方から始めてみてください！