独学でWebデザインを学びたい!おすすめの効率的な勉強法

Webデザイン

SHElikesの講座のなかでも、ダントツで大人気のWebデザイン講座。

Webデザインに携わる女性が増えつつある今、スクールと独学の狭間で迷っている方も多いです。正直、Webデザインを学ぶためにスクールに通うのはお財布に痛いなあと感じている方もいらっしゃるでしょう。

独学で効率よく学びたい。でも、まず何から手をつけたらいいのだろう?

そんなふうに悩んでいる方のために、今回は未経験者がWebデザイナーになるうえで必要なスキルと、独学時の効率的な勉強法についてご紹介します。

スクールも気になる人は、SHEのWebデザインを体験してみましょう!↓

Webデザイナーになるために必要な4つのスキル

⑴ 重要なのは‘‘問題解決能力’’!デザインスキル

「デザイン」という言葉に、素晴らしいセンスが必要なイメージを抱いている人は少なくありません。

しかし、デザインに必要なのはセンスではなく、問題解決能力なのです。どうしたら1番伝えたいことを1番良いかたちで届けることができるのか、顧客の問題を解決するには何が必要か。それを考え抜き形にするのが「デザイン」なのです。

とはいえ、デザインには理論がありますので、まずはデザインの4つの原則などを覚えて使えるようになる必要があります。

⑵ Webデザインには欠かせないグラフィックソフト

Webデザインをする上で欠かせない、Photoshopやillustratorなどのグラフィックソフト。

Photoshopは世界で最も有名な画像編集ソフトと言われ、写真の加工・合成・補正などに使います。

一方illustratorは細かなデザインに強く、ロゴやイラストの作成に使います。

⑶ サイトの骨組みとスタイルを作る、HTMLとCSS

HTMLとCSSは、Webデザインをするうえで基本中の基本です。

HTMLとは、いわばサイトの骨組み。わたしたちが普段見ているWebページのほとんどがHTMLで表示されており、サイトの情報構造やページ内の各要素の意味を書いていきます。

一方CSSは、サイトのデザイン部分を整える役割を果たします。色やサイズ、レイアウトなどの表示スタイルや、動きの秒数など、細かい部分を指定します。

この2つを知らなければ、Webサイトを制作できません。しかしHTMLとCSSは他の言語と比べ覚えることが少なく独学しやすいので、比較的短時間で習得できるでしょう。

⑷ 動的なサイトを作るためのJavaScriptとjQuery

JavaScriptやjQueryを使えば、「動的」なWebサイトを制作できます。

jQueryはJavaScriptを使いやすくしたもの。JavaScriptだと何十行も書かなければならないコードも、jQueryを使えば数行書くだけで済むなど、便利なプラグインがたくさんあるんですよ。

クリックするとメニューが出る「ハンバーガーメニュー」や、ふわんっと動くスライドは、HTMLとCSSだけでは作れないのです。

HTMLやCSSに比べ難易度は高くなりますが、この2つのスキルを身につけると、さらに使いやすくデザイン性の高いWebサイトを制作できるのです。

効率的にwebデザインを独学で勉強する4ステップ

⑴ グラフィックソフトをとにかく触る

Webデザインをするうえで必要なPhotoshopやillustratorを使えるようになりましょう。

参考書を片っ端から覚えるのは現実的に無理ですから、とにかくまずはソフトを触ってみることをおススメします。

「この画像をこんな風に加工したいな」と思った時、いろいろ触ってみて分からなかったらネットで調べたり、参考書を開いたりすればいいのです。

まずはとにかく触って、体験することから。繰り返しているうちに体が覚えていきますよ。「それでもやっぱり使い方を先に知りたい!」という人は、以下の2サイトを参考にしてみてくださいね。

⑵ デザインの基礎と原則を学ぶ

グラフィックツールを触りつつ、デザインの基礎や原則を学んでいきましょう。Webデザインを勉強するうえで読んでおきたい3冊をご紹介します。

ノンデザイナーズ・デザインブック

デザイナーでない人のための、デザイン基本書。4つの原則を知ることで、あなたのデザインはもっと良くなります。名刺やパンフレットなどのデザインにも応用が利くので、1冊持っておきましょう。

なるほどデザイン

イラストが多く、見ているだけでワクワクしてくる1冊です。デザイン初心者にもやさしい、分かりやすい説明がなされています。

「この本をとにかく読みこんでデザイントレース50本ノックやればWebデザイナーいける」と、SHEのWebデザイン講座の講師さんも仰っていました。

けっきょく、よはく。

読みやすくて洗練されているデザインに重要なのは、余白。ポスターやチラシなどさまざまな作例で良いデザイン、悪いデザインを紹介しているので、とても勉強になります。

余白を上手に使えば、品のある洗練されたデザインを次々と生み出せること間違いなし!

⑶ 本とオンラインでHTMLとCSSを習得

デザインを学びながら、次はHTMLとCSSを習得していきます。参考になる本2冊と、基本を学ぶのにオススメなオンライン学習サービスを順にご紹介しますね。

初心者向け!HTMLとCSSを学べる2冊

スラスラわかるHTML&CSSのきほん


小さなサイト制作を通してHTMLとCSSを学べる、初心者にやさしい参考書です。

とてもわかりやすいので、「HTML」「CSS」という言葉を聞いただけで拒否反応がでそうになる人はぜひここから始めましょう!

HTML5&CSS3デザインブック

Webページのデザイン=ボックスを並べること、という視点で、レイアウト方法を徹底的に解説した1冊。スマートフォンなどのデバイスにも対応し、使い勝手や見栄えをアップさせるテクニックが盛り込まれています。

基本を学ぶのにオススメなオンライン学習サービス

Progate

わたし自身も大好きでよく使っている、Progate。ゲーム感覚で知識をインプットしながらアウトプットもできるので、楽しんで言語を習得できます。HTMLとCSSの他にも、JavaScriptやjQueryなどたくさんの言語が学べるので、ぜひ登録してみてください!

ドットインストール

さまざまなプログラミング言語を3分間の動画で学べる、ドットインストール。実際にコーディングしている様子を見ながら説明を聞くことで、流れやイメージを把握できます。無料で視聴できるなんて、使わない手はありません!

⑷ とにかく良いデザインを真似する

デザインとHTML&CSSの基礎を学んだら、あとは良いデザインをとにかく真似し続けるのみ。

好きなWebサイトのデザインを、トレースして形にしていきましょう。積み重ねていくことで自分の中にデザインの引き出しが増えていきますよ!

美しいWebデザインが集められたギャラリーやリンク集は、こちらの記事から飛ぶことができます。

まとめ

Webデザイナーになるためには、必ずしもスクールに通わなければならないわけではありません。

本やオンライン学習サービスを駆使し、毎日トライ&エラーを繰り返していけば、独学でもその夢を叶えられるのです。

Webデザイナーとして活躍している人だって、最初は未経験者。スキルと知識をコツコツと身につけて、夢を叶えましょう!

 

【執筆】

SHEshares編集部 めくばせ
2016年、服飾の専門学校に進学するも「わたしの人生で大切なものではない」と気づき、2017年1月に中退。同時期にライターを開始。現在はshares編集部としてライターさんのフォローなどをしている。
昔からモノづくりが好きで、2018年4月にはSHElovesでWebデザインを受講。ピアス制作やWeb制作にも注力中。
生粋の天秤座女で、常にフラット・バランス命。すべてを肯定し愛せる人間になりたい。
Twitter(@_____ilil_
おすすめ執筆記事
服飾学校を中退→Web業界へ。やさしい言葉で人々を救う‘‘保健室の先生’’が選んだ「自分を幸せにする」生き方
【私を救ったコトバたちvol.4】「あなたは大丈夫。人生はめちゃくちゃ魅力的だ。」

関連記事一覧

ライター育成します