2016年09月21日

初心者がゼロからWeb制作・Webデザインを効率よく独学する6ステップ

Web業界には独学でスキルを付けてお仕事されている方がたくさんいます。っということで今回、Web制作・Webデザインの独学する方法をまとめてみました。

ご紹介する方法は実際にWeb初心者が実践してとても効果があった方法です。これからWebの勉強を始めたい方や初心者の方はぜひ参考にしてみてください。

1. Webの概要を理解する

全体を大まかに把握してから少しずつ掘り下げていくほうが効率よく学ぶことができるので、まずはWebの概要だけをザックリと学んで理解しておきましょう。

独学するコツは「憶えようとしないこと」です。「理解すること」「慣れること」を優先して取り組むことを意識してみてください。楽に勉強できるようになります。

以下に概要が学べる記事をピックアップしてみました。

ホームページの仕組み|インターネットを使ったサービス|基礎知識|国民のための情報セキュリティサイト

ホームページの仕組み|インターネットを使ったサービス|基礎知識|国民のための情報セキュリティサイ

HTMLとは?-HTMLの基本

HTMLとは?-HTMLの基本

2. 実際どのようにWebページがつくられているのをテンプレートを参考に理解する

Web制作を独学する際はいきなりつくり始めるのではなく、できあがっているWebページを参考に勉強するほうが手っ取り早く理解を深めることができるので、テンプレートを参考に実際どんな風につくられているのかを理解していきましょう。

テンプレートは「ホームページ テンプレート」で検索するとたくさんあります。シンプルなものをダウンロードしてエディタで開いて確認してみてくださいね。

テンプレートは以下のようなサイトでダウンロードできます。

《無料》ホームページテンプレート.com | 商用可能なホームページテンプレート・WordPressテーマが完全無料

《無料》ホームページテンプレート.com | 商用可能なホームページテンプレート・WordPressテーマが完全無料

無料ホームページテンプレートのNikukyu-Punch

無料ホームページテンプレートのNikukyu-Punch

無料ホームページテンプレート Template Party

無料ホームページテンプレート Template Party

HTMLとCSSとブラウザ表示の連動性を理解しよう

テンプレートのHTMLとCSSのファイルをエディタで開いていろいろ編集してみましょう。同時にブラウザで表示を確認すると、HTMLとCSSとブラウザ表示の連動性がわかってきます。

(文字を書いたりタグを一部消してみたりしてみるといいです。)

テンプレートファイルは遠慮なく編集できるのであれこれトライしてみましょう。いじり倒していると構成も理解できるようになってきます。

HTMLやCSSは一から憶えようとする必要はありません

HTMLやCSSはわからないところだけを調べて理解していくようにしましょう。そのほうが圧倒的に楽に学べます。一から憶えようとする必要はありません。

(一から憶えようとすると大変なので挫折しそうになります^^;)

最初はほとんどわからないと思いますが、ひとつひとつ意味を調べて理解を深めていくと、憶えようとしなくても勝手に憶えてきます。

テンプレートに記述されているHTMLやCSSは意味を調べて理解するようにしましょう。

3. Webデザインスクラップをつくる

テンプレートでHTML・CSSに慣れてきたら、練習したいデザインや興味を引くデザインを集めたWebデザインスクラップをつくりましょう。

Webデザインスクラップはデザインの引き出しになる資産となるので、継続的にスクラップを溜めていくことをオススメします。

Webデザインスクラップのやり方については以下が参考になります。

厳選!あなたの引き出しを増やすデザインスクラップツールまとめ | KAYAC DESIGNER’S BLOG – デザインやマークアップの話

厳選!あなたの引き出しを増やすデザインスクラップツールまとめ | KAYAC DESIGNER'S BLOG - デザインやマークアップの話

4. Webページをトレースする(真似てつくってみる)

初心者の方は一からデザインするとなるとなるとハードルも高くなかなか進まないので、まずはトレースする(まったく同じになるように真似てつくる)ところから始めましょう。

上手なデザインをトレースすれば、Webデザインは必ず上手くなります。

画像の細かい部分の編集まで真似ることをしていると自ずとテクニックもついてくるので、ぜひシンプルなデザインから挑戦してみてください。

わからないところがでてきたら、課題としているWebページのソース(HTML・CSS)をチェックしてみると、どのようにつくられているのかを参照することができます。

5. 配色・レイアウトの基礎を学ぶ

Webページをトレースすることができるようになる頃には、かなり実力がついています。

そろそろオリジナルデザインのWebサイトをつくりたくなってきますが、その前に配色・レイアウトの基礎を学んでおきましょう。

配色・レイアウトはWebデザインの印象の大部分を決める要素ですので、しっかりと基礎を学んでおくとデザインしやすくなります。

勉強になる記事を以下にピックアップしてみました。

ノンデザイナーこそ押さえておきたい! 配色・レイアウトの基礎が学べる7個の厳選スライド | Find Job! Startup

ノンデザイナーこそ押さえておきたい! 配色・レイアウトの基礎が学べる7個の厳選スライド | Find Job! Startup

素人でもプロ並みの配色ができるデザインパターン参考サイト22選Code部

素人でもプロ並みの配色ができるデザインパターン参考サイト22選Code部

レイアウト|伝わるデザイン

レイアウト|伝わるデザイン

デザインの基礎力をワンランクアップしたい私(Webデザイナー)の注意書き

デザインの基礎力をワンランクアップしたい私(Webデザイナー)の注意書き

6. Webデザインスクラップのいいとこ取りでオリジナルデザインををつくる

配色・レイアウトの基礎を学んだらオリジナルデザインのWebサイトに挑戦してみましょう。きちんとここまでのステップを踏んできたら、すでにオリジナルデザインをつくれるだけの実力がついているはずです。

オリジナルデザインを上手につくるコツは、Webデザインスクラップのいいとこ取りをしながらつくってみることです。ドンドン技を盗みましょう。

また、素材を活用するとクオリティも上がり、制作の手間も省けるのでオススメです。ぜひ上手に活用しましょう。以下に使いやすい素材を配布するサイトをピックアップしておきます。

2016年用、日本語のフリーフォント219種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 | コリス

2016年用、日本語のフリーフォント219種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 | コリス

フォントフリー – 無料で使える日本語フォント投稿サイト

フォントフリー - 無料で使える日本語フォント投稿サイト

Fotolia、写真素材、画像、イラスト素材、動画素材

Fotolia、写真素材、画像、イラスト素材、動画素材

ロイヤリティフリーストックフォト・写真素材・イラスト・動画・ 音楽素材 – 123RF

ロイヤリティフリーストックフォト・写真素材・イラスト・動画・ 音楽素材 - 123RF

まとめ

Web制作・Webデザインの独学は、テンプレートとWebデザインスクラップがあるととても捗ります。ぜひ上手に活用してみてください。

Webデザインスクラップはトレースするときもそうですが、実際にオリジナルサイトをつくる際のアイディアにとても役に立ちます。ぜひ継続的にスクラップを増やしていきましょう。

実際、アイディアの引き出しをたくさん持っておくと制作スピードは格段に早まります。自分のWebデザインスクラップを持っていない人はぜひお試ししてみてください。

また、初心者の方はトレースで練習することもとてもオススメです。細部をきちんとデザインするとプロっぽい仕上がりになるので、素敵なデザインをトレースして技を盗みましょう。

私たちはホームページ制作から、ビジネスブログ・オウンドメディア構築サポート、リスティング運用までワンストップでご提供しております。集客のお悩み、どうぞお気軽にご相談ください。

follow us in feedly