Webデザイン学習

Webデザインって何?必要なツールは?Webデザイナーってどんな仕事?

記事内に商品プロモーションを含む場合があります

Webデザインに興味があるけど、どんなことをするの?どんなスキルが必要なんだろう?何を使えばできるの?と疑問をお持ちの方に、Webデザイナーがやることをまとめてみました。

仕事は大きく分けるとデザインとコーディング

Webデザイナーの仕事はざっくり分けると「デザイン」「コーディング」に分けられます。

デザインは見た目を作ることです。このサイトは色々なHPのデザインをまとめているのでイメージがつきやすいかと思います。

https://lp.webdesignclip.com/

 

HPは、見た目のデザインをWeb上に反映するためにHTMLやCSSといったコードで構成されています。こんな感じです。

こんな難しいものを書かなくても、ただ画像を貼ってWeb上に表示させるほうが楽なのでは?と思うかもしれませんが、画像だけで作成するととても表示が遅いページになってしまったり、検索したときに引っかからないというデメリットがあります。

そのためコーディングが必要になってくるのですが、私はコーディングが非常に苦手です。。

 

会社によっては「デザイナー」と「コーダー」でポジションが別れていることもありますが、小さな会社さんだとデザイン〜コーディングまでまるっと担当するところも多いです。

 

また、フリーで活動していくとなると、デザイン〜コーディングまで全て自分でできるようになる必要があります

(なお、このブログで使っているコーディングが不要なワードプレスというサービスや、Wix、STUDIOなどコーディング不要でデザインの自由度の高いHPが作れるサービスもありますがそれぞれメリットデメリットがあります)

デザインを作るツールはPhotoshop、またはAdobeXD

見た目のデザインを作るためによく使われるのがPhotoshopです。

Photoshopは本来、画像のレタッチや加工をすることができるソフトなのですが、Webデザインやバナーを作るときによく使われるソフトです。

なぜPhotoshopが使われるのかというと、HPって写真を使うことがほとんどですよね。逆に写真を使わないHPって珍しいのではないでしょうか。

 

Photoshopを使えば文字を入れるなどのデザインだけでなく、「この写真の明るさを足したい」「この画像の不要な部分を加工して消したい」という作業も一緒にできる点でメリットがあります。

 

また、AdobeXDというソフトも使われることが多いです。こちらはよりWebデザイン制作に特化したソフトで、操作もPhotoshopと比べて簡単で、動作も軽いので使いやすいです。

また、共同編集の機能があるためチームで1つのサイトをデザインするという場合にはメリットがあります。

 

しかし、Photoshopでできるような細かい画像の加工ができなかったり、字間の調整(カーニング)機能が無かったりするので、私はデザインの大枠や簡単なバナーはXDで作り、写真の加工やビジュアルに拘りたいヘッダーの作成はPhotoshopで、と使い分けています。

(ちなみにこの記事のアイキャッチ画像はXDで作成しています)

 

どちらも単体で契約すると月額1,000円前後ですが、個人的にはPhotoshopのほうが使える機能が多いため、フォトショを契約するのがおすすめです。

コーディングは無料のエディタを使う(SublimeTextやVisual Studio Code)

冒頭でお伝えしたコーディング、あれって実はどのPCにも元々入っている「メモ帳」機能でもできちゃいます。

メモ帳でコードを書いて、それをサーバーにアップすればHPとしてWeb上に表示されます。

 

この本が超超初心者向けのコーディングの本で、メモ帳機能を使ってHPを作る内容になっています。

HTMLとCSSを使ってこの本のとおりにコードを書いていけばHPが形になるのでとても分かりやすくておすすめです。(「ここでクリックする」のレベルで解説してくれています)

私はスクールでコーディングが苦手すぎてWebデザインを挫折しかけたのですが、この本でもう一度基礎の基礎から理解してなんとか1つHPを作ることができました。

 

ただし、コーディングは1つ「/」が抜けたり「>」が抜けていたりすると、それだけでエラーになってしまいうまくWeb上に表示されない、ということが起きます。

 

そこで、Sublimetext やVisual Studio Codeというエディタ(コーディングをするための専用のメモ帳のようなソフト)を使うと、書きたいコードを最後まで書かなくても自動で入れてくれる機能があり、「ここの>を書き忘れてたから反映されなかったんだ・・」というミスが少なくなるので、コーディングの専用ソフトを使うのがおすすめです。

 

私が通っていたシーライクスではSublimetextを使ってコーディングをしました。

無料でコーディングを学べるドットインストールではVisual Studio Codeを使ってコーディングを進めるようなので、「お金をかけずにコーディングがどんなものなのか見てみたい」という方はドットインストールを覗いてみるのがおすすめです。

 

まとめ

Webデザインってどんなことをするのか、簡単にまとめてみました。

これから勉強を始めようと思っている方に、少しでも参考になれば嬉しいです。