Web業界には独学でスキルを付けてお仕事されている方がたくさんいます。っということで今回、Web制作・Webデザインの独学する方法をまとめてみました。
ご紹介する方法は実際にWeb初心者が実践してとても効果があった方法です。これからWebの勉強を始めたい方や初心者の方はぜひ参考にしてみてください。
1. Webの概要を理解する
全体を大まかに把握してから少しずつ掘り下げていくほうが効率よく学ぶことができるので、まずはWebの概要だけをザックリと学んで理解しておきましょう。
独学するコツは「憶えようとしないこと」です。「理解すること」「慣れること」を優先して取り組むことを意識してみてください。楽に勉強できるようになります。
以下に概要が学べる記事をピックアップしてみました。
ホームページの仕組み｜インターネットを使ったサービス｜基礎知識｜国民のための情報セキュリティサイト
- HTMLの書き方－HTMLの基本
- ブロックレベル要素とインライン要素－HTMLの基本
- CSSとは？－CSSの基本
- CSSを使用するメリット－CSSの基本
- CSSの書き方－CSSの基本
- HTML文書にCSSを適用する－CSSの基本
2. 実際どのようにWebページがつくられているのをテンプレートを参考に理解する
Web制作を独学する際はいきなりつくり始めるのではなく、できあがっているWebページを参考に勉強するほうが手っ取り早く理解を深めることができるので、テンプレートを参考に実際どんな風につくられているのかを理解していきましょう。
テンプレートは「ホームページ テンプレート」で検索するとたくさんあります。シンプルなものをダウンロードしてエディタで開いて確認してみてくださいね。
テンプレートは以下のようなサイトでダウンロードできます。
《無料》ホームページテンプレート.com | 商用可能なホームページテンプレート・WordPressテーマが完全無料
HTMLとCSSとブラウザ表示の連動性を理解しよう
テンプレートのHTMLとCSSのファイルをエディタで開いていろいろ編集してみましょう。同時にブラウザで表示を確認すると、HTMLとCSSとブラウザ表示の連動性がわかってきます。
（文字を書いたりタグを一部消してみたりしてみるといいです。）
テンプレートファイルは遠慮なく編集できるのであれこれトライしてみましょう。いじり倒していると構成も理解できるようになってきます。
HTMLやCSSは一から憶えようとする必要はありません
HTMLやCSSはわからないところだけを調べて理解していくようにしましょう。そのほうが圧倒的に楽に学べます。一から憶えようとする必要はありません。
（一から憶えようとすると大変なので挫折しそうになります^^;）
最初はほとんどわからないと思いますが、ひとつひとつ意味を調べて理解を深めていくと、憶えようとしなくても勝手に憶えてきます。
テンプレートに記述されているHTMLやCSSは意味を調べて理解するようにしましょう。
3. Webデザインスクラップをつくる
テンプレートでHTML・CSSに慣れてきたら、練習したいデザインや興味を引くデザインを集めたWebデザインスクラップをつくりましょう。
Webデザインスクラップはデザインの引き出しになる資産となるので、継続的にスクラップを溜めていくことをオススメします。
Webデザインスクラップのやり方については以下が参考になります。
厳選！あなたの引き出しを増やすデザインスクラップツールまとめ | KAYAC DESIGNER’S BLOG – デザインやマークアップの話
4. Webページをトレースする（真似てつくってみる）
初心者の方は一からデザインするとなるとなるとハードルも高くなかなか進まないので、まずはトレースする（まったく同じになるように真似てつくる）ところから始めましょう。
上手なデザインをトレースすれば、Webデザインは必ず上手くなります。
画像の細かい部分の編集まで真似ることをしていると自ずとテクニックもついてくるので、ぜひシンプルなデザインから挑戦してみてください。
わからないところがでてきたら、課題としているWebページのソース（HTML・CSS）をチェックしてみると、どのようにつくられているのかを参照することができます。
5. 配色・レイアウトの基礎を学ぶ
Webページをトレースすることができるようになる頃には、かなり実力がついています。
そろそろオリジナルデザインのWebサイトをつくりたくなってきますが、その前に配色・レイアウトの基礎を学んでおきましょう。
配色・レイアウトはWebデザインの印象の大部分を決める要素ですので、しっかりと基礎を学んでおくとデザインしやすくなります。
勉強になる記事を以下にピックアップしてみました。
ノンデザイナーこそ押さえておきたい! 配色・レイアウトの基礎が学べる7個の厳選スライド | Find Job! Startup
素人でもプロ並みの配色ができるデザインパターン参考サイト22選Code部
デザインの基礎力をワンランクアップしたい私（Webデザイナー）の注意書き
6. Webデザインスクラップのいいとこ取りでオリジナルデザインををつくる
配色・レイアウトの基礎を学んだらオリジナルデザインのWebサイトに挑戦してみましょう。きちんとここまでのステップを踏んできたら、すでにオリジナルデザインをつくれるだけの実力がついているはずです。
オリジナルデザインを上手につくるコツは、Webデザインスクラップのいいとこ取りをしながらつくってみることです。ドンドン技を盗みましょう。
また、素材を活用するとクオリティも上がり、制作の手間も省けるのでオススメです。ぜひ上手に活用しましょう。以下に使いやすい素材を配布するサイトをピックアップしておきます。
2016年用、日本語のフリーフォント219種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 | コリス
ロイヤリティフリーストックフォト・写真素材・イラスト・動画・ 音楽素材 – 123RF
まとめ
Web制作・Webデザインの独学は、テンプレートとWebデザインスクラップがあるととても捗ります。ぜひ上手に活用してみてください。
Webデザインスクラップはトレースするときもそうですが、実際にオリジナルサイトをつくる際のアイディアにとても役に立ちます。ぜひ継続的にスクラップを増やしていきましょう。
実際、アイディアの引き出しをたくさん持っておくと制作スピードは格段に早まります。自分のWebデザインスクラップを持っていない人はぜひお試ししてみてください。
また、初心者の方はトレースで練習することもとてもオススメです。細部をきちんとデザインするとプロっぽい仕上がりになるので、素敵なデザインをトレースして技を盗みましょう。
