初心者必見！webデザイナー独学のすすめ

webデザイナーになるためには、web制作におけるwebデザインはもちろん、サイトを構築するプログラミング（コーディングと呼ばれる作業）の両方ができるようにならないといけません。初心者が独学でWebサイト制作をしようとしたとき、何から手をつけていくべきか、またスキルアップを目指したときにどのように勉強していくべきかを今回は記事にしたいと思います。

まずはWEBデザインをたくさん見よう

Webデザインを学ぶためにはまずは目を肥やすこと。これに尽きます。デザインのトレンドも年々変化していく中で、トレンドを追うことはもちろん、基礎的な部分もまずは色々なデザインを見て学んでいきましょう。どうしてこのデザインがよく見えるのか？どこが魅力的なのか？そういったところまでしっかりと見て、さらには余白の取り方や画像の見せ方、サイトの導線など、いいサイトを見ながら学んでいくのが一番です。基礎的な部分に関しては学校などでも学ぶことができますが、日々の変化については自分で養っていくしかありません。定期的にWebデザインのギャラリーサイトなどを見たり、関連する記事を読んだりする習慣をつけられるといいと思います。

実際にデザインしてみよう

自分の引き出しをたくさん作っていったところで、次に取り掛かりたいのは実作業としてデザインを作成していきましょう。手っ取り早くデザインスキルを身に付けたいのであれば、以前記事でもご紹介した「トレース」をしてみるのが一番だと思います。
参考記事：Webデザインを上達させる第一歩「トレース」
また、デザイン制作だけでなく、Webサイト制作全体で見ていくのであれば、コーディングまで意識して、レイヤーの作り方、分け方などもしっかりと見ていけるといいですね。こちらに関してはWebサイト制作の先輩などがいれば一度データを見せてもらったりすると一目瞭然かと思います。どのようにわけていくとコーディングしやすいのか、実作業をしながら学んでいくのもありですし、先輩の技術から学んでいくのもありだと思います。

コーディングって何から勉強すればいいのか？

今回の記事の本題です。デザインに関してはいろいろと独学でも勉強できる方法がネット上でもあげられていますし、最近は動画などでツールの使い方なども効率よく学ぶことができます。ただ、コーディングに関しては、どうしても専門知識が必要なのでは？と思われる方が多いかと思います。結論から言ってしまえば、コーディングも独学でしっかりと学ぶことができます。用語がわからなくても、英語が読めなくても、知識さえしっかり学習すればできるものです。デザインからコーディングまでできるようにならないとWEBデザイナーとは名乗れませんので、わからないからといって諦めず、勉強していきましょう。

ではまず、何から勉強したらいいのでしょうか？

とりあえずはHTMLとCSSのスキルを習得しましょう！
HTMLとCSSの独学をするのであれば、入門レベルの書籍をまずは1冊購入してみましょう。HTMLとは何か、CSSとは何か、どんな言語・用語が使われるのか、そういったものは実戦ではどうしてもわかりにくく、把握をしないまま実作業を行っても全体像がわかりにくく理解し難いと思います。本を読んでいてもわからないところがあったりしたら、検索をかければたくさんの情報が出てきます。タグなども何を表しているのかわからなければ検索をかけてみると、何を意味するのか、どうやって使うのかも事細かく出て来ます。
バリバリWeb制作を行っている人でも、何も調べずにガツガツコードがかけるか？というとそんなわけではありません。調べ方をわかっているというところも大きいと思います。わからなければ調べる、それを習慣づけましょう。

コーディング学習法いろいろ

独学でもオンラインの学習サイトなどで最近では勉強しやすくなっているようです。Webサイト制作の実践まではまだいけない人向けに色々とご紹介させていただきます。

ドットインストール

活字を読むのはどうも・・・という人向けに、動画で解説などがされているサイトがあります。HTML入門からphpやjavascriptまで幅広く動画が公開されています。３分程度の動画ですが、見て覚える人や自分のペースで勉強していきたい人にはおすすめです。

Schoo

こちらも動画学習サイトです。Web業界で有名なデザイナーやプログラマーの方が授業をしてくれます。入門講座ではHTML入門からPhotoshopやIllustrator　入門まで幅広くあります。また、職種ごとにいろいろな動画があり、中にはコラム的な内容や仕事術的なものなど、見ていて楽しそうな動画がたくさんあります。

Progate

他にもオンラインで使える学習サイトもありました。実際にコーディングをしながら学べるサービスで、初心者にもわかりやすく使いやすそうです。無料会員でも17レッスン受けることが可能なので、HTMLとCSSだけとりあえず勉強したい！という方には十分なサービスではないでしょうか。スライドに沿って学習していくサービスで、わかりやすく、サイトのデザインも可愛らしいので楽しく勉強できそうです！

CODEPREP

こちらもブラウザで学べるプログラミング学習サービスです。穴埋め問題でコーディングをしていくような問題があったり、短時間で細かく学習するのに向いていそうなサービスです。

Codecademy

オンラインでプログラミングを学べる世界的に有名なサービスです。英語サイトなので、本格的に勉強するには英語対応のみ、なのでハードルが高いかもしれませんが、翻訳機能なども使いながらだったら使えそうですね今回は初心者向けのサービスのみご紹介させていただきましたが、調べているとエンジニア向けのものだったり、よりシステムに特化した学習サービスだったり、色々とあるようです。仕事として実務をこなしながら学んでいくと、どうしても基礎知識を飛ばしての応用ばかりを強いられてしまうので、基礎を固めるにはベテランの人にもぜひぜひおすすめしたサービスです。

実践してみよう！

デザイン、コーディングとある程度学習できたところで、実践にうつしてみましょう。まずは簡単なページを1ページ作ってみるところから始めましょう。自分の起こしたデザイン通りにコーディングをすること、に集中して行っていってください。コードが綺麗かどうか、効率よく書かれているかどうか、はその次の段階です。まずは見た目。見た目がしっかりデザイン通りになっていればOKです。テキストのフォントの種類・サイズ、余白などもしっかりと合わせていくことが大事です。

ある程度知識がついたところで、スキルアップを目指すには実践なしでは不可能です。実践をしていくこと、数をこなしていくこと、をしていくことがスキルアップに繋がります。
デザイン通りにコーディングができるようになってきたら、次は新しいことにチャレンジしてみましょう。いろいろな効果をつけてみたり、動きをつけてみたり、そういったバリエーション。増えれば増えるほど、デザインの引き出しも多くなり、幅広いWebサイト制作ができるようになっていきます。

まとめ

実際にWebデザイナーとしてお仕事をしている人の大半は独学で学んでいるのではないでしょうか？しっかりスクールに通ったりされている人ってなかなか少ないと思います。専門知識がないから無理、と決めつけずにオンラインでの学習サービスなども活用しながら、効率よく勉強していきましょう！

マーケティングでお悩みでしたら、
Bigmacにお任せください。