無料でWebデザインを勉強する方法・注意点を簡単に解説！

Webデザイナーになる為には何を学べば良いか

まず初めに、webデザイナーになる為にはこれを勉強すれば大丈夫！というものを挙げました。

webデザイナーに転職するために必要なwebデザインの知識は、下記の通りです！

• デザインの知識：文字・配色・配置・デザインの目的など
• Webデザインの概念：Webデザインとは？・レスポンシブデザイン
• 使用するツール：Adobe Photoshop・Adobe XD（最低限）
  • スムーズに操作ができる・クオリティは別として、Webサイトのデザインカンプやバナーが作れるレベル※Illustrator・Figmaは、余裕があれば勉強する
• Webの仕組み：ローカルとサーバーの違い・サーバーへの接続方法は最低限必要
• Webデザインの制作手順：Webサイトの制作手順・バナーの制作手順
• HTML：Webサイトを作成できる・見出しタグやSectionタグなど、よく使うタグの意味を知っている
• CSS：Webサイトを作成できる・デベロッパーツール上でスタイルの変更ができる
  • 可能であれば、Javascriptが（jQuery）・WordPressの知識あるとより良いです。

Webデザイナーになる為に必要なスキルレベル

デザインの知識

Webデザイン特有の勉強とは別に、デザイン基礎の勉強が必要です。

デザイン基礎の具体的な内容は、余白・文字組・レイアウト・配色・トンマナ（トーン＆マナー）・そもそもデザインとは？などの学習をすると良いかと思います。

学習方法は、Webや本など自分のやりやすいもので大丈夫かと思いますが、本を選ぶ際、上記にあげた具体的な内容が書かれているかチェックしてみてください。

ちなみに、上記の内容はネットで十分勉強できる内容ですので、どれか1、2つ抜けていても問題ないかと思います。

Webデザインの知識

Webデザインで必要な知識は多く、使用するデザインツール・Webで使われている主流の画像（jpgやpngなど）・画像オブジェクト（ビットやラスターなど）・HTML・CSS・レスポンシブデザイン・Webが動く仕組み・UI・UX・Webサイトの種類・Webサイトの種類に応じたサイトの作り方などがあります。

そして、上記の勉強を進めていくと出てくる、わからない単語や概念の勉強も加わります。

ここにかなりの時間を使い、挫折してしまう人が出てくるかもしれません。

ですので、ある程度理解したら次に進み、つまづいたら、その都度必要な知識を復習することを強くおすすめします！

Adobe Photoshop

Photoshopは、切り抜き・色変更・クリッピングマスク・レイヤーマスク・描画モード・バナー制作ができれば大丈夫かと思います！

恐らく皆さんは「Photoshopのどの機能を使ったらいいの？」という疑問が浮かぶと思いますが、どの機能を使うかは自由という認識で良いかと思います。

もし、最良ではない手段で作成した場合、その際は先輩からのご指導が入ります。

細かい部分の作り方は、会社によって異なるため会社に合わせるのが良いと考えております。

Webデザインの場合、実務でも勉強でも、1番大切なことはとにかく形にするということです。

Adobe XD・Figma

Adobe XDとFigmaはどちらもワイヤーフレームやデザインカンプを作成する際に使用するツールです。

こちらの勉強範囲は、XDとFigmaそれぞれの違いと長所を知る・ワイヤーフレームとは・デザインカンプとは・ワイヤーフレームとデザインカンプが作成できるです。

その理由は、最近Figmaを導入する企業も増えてきており、2023/12月時点では、ワイヤーフレーム・デザインカンプをXDかFigmaどちらで作るかを決めず、クライアントによって使い分けているという企業もあります。

そのため、Figmaを全く触ったことがない事がマイナスポイントになってしまう場合があります。

プラスの面では、Figmaをある程度使えるだけでなく、情報のキャッチアップ力と行動力もアピールすることができます。

なぜなら、XDのみ勉強して、Figmaを知らない方が一定数いらっしゃるためです。

「Figmaを知っているけど使ったことない人」と「知ってるし少し触ってみた」という人では採用担当の印象はかなり異なるでしょう。

HTML・CSS

今やWebデザイナー必須のスキルといわれている、HTMLとCSSの勉強範囲は、見出しタグ、div、span、p、aタグの役割を知る・サイトの模写ができるです。

正直なところ、サイトの模写さえできれば問題ないかと思いますが、よく使うタグの役割を知っておいたほうが、実務に入ってから先輩とのやり取りがスムーズに行えます。

ちなみに、WebデザイナーはHTML・CSSの他に、「JavascriptとWordPressも触れないとダメ」といわれますが、必ずしもそのようなことはありません。

ですが、Javascriptは、if文が読める程度に勉強しておくと実務に入ってから困る要素が1つ減るので余裕がある方は勉強してみてください。

WordPressは、実務で使うのなら入った段階で覚えても問題ありません。

こちらもJavascript同様、余裕がある時に勉強してみてください。

Webデザインの学習の流れ

ここでお伝えするのは、あくまで1例ですが、勉強しつつ制作物が仕上がっていくので、モチベーションの維持がしやすい事が1番のメリットです。

このWebデザインの勉強方法は、

• Photoshopを使用したバナー制作
• XD・Figmaを使用したワイヤーフレームとデザインカンプの作成
• HTMLとCSSを使用したサイト制作

3つに分けて勉強を進めていきます。

他にも、ベターなサイト制作の流れを実際に行ってみるという経験もできますので、よりWebデザイナーの仕事がイメージしやすくなるかと思います！

※下記のフローでは、参考サイトを見つけるなどの事前準備は省いております。

Photoshopの勉強方法

Photoshopの勉強方法は至ってシンプルです。

バナー参考サイトから、要素の少ない簡単なバナーをピックアップし、真似して作成します。

ここでのポイントは、簡単なバナーであることと、色と配置は全く同じに作ることです。

フォントは完全一致でなくても良いですが、文字感覚や行感覚・明朝体かゴシック体かは合わせると良いかと思います。

そして、バナー制作をしていると、「これどうやるんだろう？」という壁にぶつかります。

そうなったら、Googleの出番です。

回答が見つかるまで探しまくりましょう。

この探しまくる作業がWebデザイナーの仕事で活きます！

なぜなら、振られたタスクを完了させるためにわからない技術を使わないといけない場面が必ず出てきます。

そうすると、当然調べながら進めます。

過去に「回答が見つかるまで探しまくる」という経験が少ない人は、回答にたどり着く力（ググり力）が鍛えられていないため、適切なキーワードで検索できなかったり、集中力が続かなかったりします。

ですので、ググり力を鍛えるため、「回答が見つかるまで探しまくる」ということは習慣化しておくと良いでしょう！

※注意点としては、どつぼにハマっては元も子もないので、MAX2時間調べてわからなかった潔くあきらめることです。

XD・Figmaの勉強方法

XDとFigmaの勉強は、先ほどお伝えした通り、ワイヤーフレームとデザインカンプの作成です。

XDかFigmaを使って自分の気に入ったサイトを真似して作ってみましょう！

ここで大事なのが、XDとFigmaをマスターするのではなく、Webサイトの「デザインを形にできる」というレベルまで使えるようになることです。

もし可能であれば、XDならグリット。Figmaならコンポーネントが使えるとより良いでしょう！

HTML・CSSの勉強方法

HTML・CSSは、サイトの模写ができるレベルまであげたいところです。

まずは、見出しタグ、div、span、p、aタグの役割を知るところから始めました。

例えば、見出しタグはSEOに影響がある。aタグはリンクを張る時に使い、別タブで開く設定をする際は、target=”_black”を使用する。などといった感じです。

そして、HTMLとCSSの基本的な書き方を勉強したら、サイト制作をします。

XDとFigmaの勉強をした際に作ったデザインカンプを元に、コーディングしていきましょう！

もしコーディング中につまづいたら、その部分を改めて勉強しなおし、再びサイト制作に入ります。

無料でWEBデザインを学べるサイト3選

無料でWEBデザインを学べる、おすすめのサイトを3選抜粋しました。

それぞれ特徴がありますので、ご自分にあったサイトを選んでみてください。

chot.design（ちょっとデザイン）

1つのカリキュラムが5〜10分前後で学べる内容となっておりますので、隙間時間に取り組めるのが魅力です。

また、学べる範囲も広いため、私も重宝しております。

Adobe Creative Cloud ラーニングとサポート

検索ボックスに勉強したいソフト名を入力して検索をすると、勉強できる内容の一覧が表示されます。

自分が勉強したい内容がありましたら、是非学んでみてください。

Daily UI

Daily UIは、UIの勉強に特化した無料の学習サイトです。

100日間UIに関するお題が毎日メールで届き、そのお題の内容でUIデザインしTwitterなどSNSでハッシュタグ「#DailyUI」付けて発信するという、少し遊び心のあるサイトです。

Webデザインの学習する際の注意点

Webデザインの学習する際の注意点は、守破離の守を意識することです。

Webデザインの勉強では、参考となるデザインを真似する機会がかなり多く、沢山の方がバナーやWebサイトの模写をしているでしょう。

ですが、模写をしても得るものが少ないやり方があります。

そのやり方とは、下記の2つです。

• ざっくりとしか真似できていない（フォント以外はほぼ一致するレベルが理想）
• サンプルと模写したバナーを比較して振り返りを行わない
  • 全体から受けるイメージや装飾の意味などを考えると良いです
  • 何が真似できて何が真似できていないかを知る

デザイン業界で、一昔前は「神は細部に宿る」といわれている通り、ほんの少しの工夫でデザインの質が大きく変わります。

ですので、2点を行わないとほんの少しの工夫を怠ったり、気付けないで終わってしまうため、得るものが少なくなってしまいます。

沢山の情報に触れすぎないこと

Webデザインの勉強中、「自分のやり方はこれでいいのか？」や「どの教材を使って勉強したらいいんだろう」という疑問を持つことがあるかと思います。

もし、その悩みが出たときに、自分が何にも取り掛かっていなかったり、勉強教材が何もない場合は、その情報を探しても問題ありません。

しかし、何かやりかけの場合は、そのタスクを終わらせてから情報収集をしたほうが良いです。

その理由は、沢山の情報に触れてしまうとどれが正しいかわからなくなる危険性があるからです。

どれが正しいかは自分で経験してみないとわからないため、１つの手段を知ったらそれを行うことを繰り返すのがベストだと考えておりますし、私の場合は実際にその通りでした。

ですが、誤解してほしくないのが、今勉強している内容や教材が明らかに合っていないとわかった場合は、もうやらないと決めて情報収集にいっても問題ありません。