Webデザインに興味があるけど、どんなことをするの？どんなスキルが必要なんだろう？何を使えばできるの？と疑問をお持ちの方に、Webデザイナーがやることをまとめてみました。
目次
仕事は大きく分けるとデザインとコーディング
Webデザイナーの仕事はざっくり分けると「デザイン」と「コーディング」に分けられます。
デザインは見た目を作ることです。このサイトは色々なHPのデザインをまとめているのでイメージがつきやすいかと思います。
HPは、見た目のデザインをWeb上に反映するためにHTMLやCSSといったコードで構成されています。こんな感じです。
こんな難しいものを書かなくても、ただ画像を貼ってWeb上に表示させるほうが楽なのでは？と思うかもしれませんが、画像だけで作成するととても表示が遅いページになってしまったり、検索したときに引っかからないというデメリットがあります。
そのためコーディングが必要になってくるのですが、私はコーディングが非常に苦手です。。
会社によっては「デザイナー」と「コーダー」でポジションが別れていることもありますが、小さな会社さんだとデザイン〜コーディングまでまるっと担当するところも多いです。
また、フリーで活動していくとなると、デザイン〜コーディングまで全て自分でできるようになる必要があります。
（なお、このブログで使っているコーディングが不要なワードプレスというサービスや、Wix、STUDIOなどコーディング不要でデザインの自由度の高いHPが作れるサービスもありますがそれぞれメリットデメリットがあります）
デザインを作るツールはPhotoshop、またはAdobeXD
見た目のデザインを作るためによく使われるのがPhotoshopです。
Photoshopは本来、画像のレタッチや加工をすることができるソフトなのですが、Webデザインやバナーを作るときによく使われるソフトです。
なぜPhotoshopが使われるのかというと、HPって写真を使うことがほとんどですよね。逆に写真を使わないHPって珍しいのではないでしょうか。
Photoshopを使えば文字を入れるなどのデザインだけでなく、「この写真の明るさを足したい」「この画像の不要な部分を加工して消したい」という作業も一緒にできる点でメリットがあります。
また、AdobeXDというソフトも使われることが多いです。こちらはよりWebデザイン制作に特化したソフトで、操作もPhotoshopと比べて簡単で、動作も軽いので使いやすいです。
また、共同編集の機能があるためチームで１つのサイトをデザインするという場合にはメリットがあります。
しかし、Photoshopでできるような細かい画像の加工ができなかったり、字間の調整(カーニング)機能が無かったりするので、私はデザインの大枠や簡単なバナーはXDで作り、写真の加工やビジュアルに拘りたいヘッダーの作成はPhotoshopで、と使い分けています。
（ちなみにこの記事のアイキャッチ画像はXDで作成しています）
どちらも単体で契約すると月額1,000円前後ですが、個人的にはPhotoshopのほうが使える機能が多いため、フォトショを契約するのがおすすめです。
コーディングは無料のエディタを使う(SublimeTextやVisual Studio Code)
冒頭でお伝えしたコーディング、あれって実はどのPCにも元々入っている「メモ帳」機能でもできちゃいます。
メモ帳でコードを書いて、それをサーバーにアップすればHPとしてWeb上に表示されます。
この本が超超初心者向けのコーディングの本で、メモ帳機能を使ってHPを作る内容になっています。
HTMLとCSSを使ってこの本のとおりにコードを書いていけばHPが形になるのでとても分かりやすくておすすめです。（「ここでクリックする」のレベルで解説してくれています）
私はスクールでコーディングが苦手すぎてWebデザインを挫折しかけたのですが、この本でもう一度基礎の基礎から理解してなんとか1つHPを作ることができました。
ただし、コーディングは１つ「/」が抜けたり「>」が抜けていたりすると、それだけでエラーになってしまいうまくWeb上に表示されない、ということが起きます。
そこで、Sublimetext やVisual Studio Codeというエディタ(コーディングをするための専用のメモ帳のようなソフト)を使うと、書きたいコードを最後まで書かなくても自動で入れてくれる機能があり、「ここの>を書き忘れてたから反映されなかったんだ・・」というミスが少なくなるので、コーディングの専用ソフトを使うのがおすすめです。
私が通っていたシーライクスではSublimetextを使ってコーディングをしました。
無料でコーディングを学べるドットインストールではVisual Studio Codeを使ってコーディングを進めるようなので、「お金をかけずにコーディングがどんなものなのか見てみたい」という方はドットインストールを覗いてみるのがおすすめです。
まとめ
Webデザインってどんなことをするのか、簡単にまとめてみました。
これから勉強を始めようと思っている方に、少しでも参考になれば嬉しいです。
