【10秒で理解】私がWebデザインの参考にしたサイトまとめ

WEB制作、デザインの勉強してるけどもっと効率よく進めたい…!

という方へ向けて、私が半年前に実際にWebデザインの勉強をしていたさいに参考にしていたサイトや学習方法、ツールなどをカンタンに紹介します!さきに結論だけ書くので、この記事をブックマークしておいて、勉強の時に開いてチェックしていくのがいいかもしれないです!

チェックしておきたいサイトまとめ

まずWebデザインの学習方法について話すと、基礎(HTML,CSS,Javascript,必要ならPHP)を勉強したらあとは常にアウトプットしていくのが一番です。LPやWEBサイトなど、既存のものを参考にして、そのサイトの構造をChrome開発ツールでみては、模写&模写です。

じゃあ基礎はどうやって勉強したらいい?というと以下の学習サイト、ツールをだいたい50時間程度勉強したらOKです。それ以上はほとんど成長はないので、あとはアウトプットしていきましょう。

 

もう常識?学習サイトまとめ

progate
  • Progate
  • ドットインストール
  • Schoo

この他にもたくさんの学習サイトがありますが、正直これだけでOKです。もしこのうち一つも見たいことがない!というのがあれば一度チェックしておきましょう。これまでと違う観点から学習できるかもしれません。

そして、Progateは2週までにしておくのがいいです!それ以上やりすぎるとただのレベル上げになって、全く成長しません。課金するかどうかは個人的にはしなくてもいいと思っています。もしWebデザイン以外にも、アプリケーション開発などやってみたいなら、アリだと思います。

ドットインストールは私も重宝していて、JavaScriptの簡単なチュートリアル動画がたくさんあるので課金してもいいと思います。いくつかやってみて、合わなそうなら次に進みましょう。Schooは動画で学習できるサイトですが、無料の場合「ライブ動画」しか見れないので、移動中などにさくっと見るくらいがいいかもしれません。

 

Webデザイン、制作の学習の進め方を解説

初めにご紹介した記事はあくまでデザイン例や、デザインの基礎を紹介しているだけなので、どうやって進めればいいのか?ということは書かれていません。

まずはじめにHTML,CSS,JavaScriptはWebデザイン、制作のなかでいえばはじめの一歩なのでこれらをある程度書ける状態になることは当たり前です。そして、ここに時間をかけすぎるのはもったいなのでやめましょう。ほんとに。

繰り返しになりますが、先ほど紹介した学習サイトで50時間程度勉強したら十分です。それ以上やるのは時間の無駄なのでやめておいたほうがいいです。

言語学習の次にやるべきこと

じゃあ次は何をすればいいか?というと、アウトプットに入る前にWebの基礎を学んだほうがいいです。

例えば…

・Webの基礎
・DBの基礎
・セキュリティの基礎

このあたりの本を1冊ずつ読めば十分だと思います。それぞれ2,000円程度でしょうか。中古でもいいので、体系的にまとめられているものを選びましょう!

「Web制作やりたいです!」という人の7割くらいはここを意識していません。あるいは必要だと思われていないのでしょう…。でも、もし仕事としてWeb制作をやるのなら「当たり前のこと」として求められる話です。

例えば、お客さんがECサイトを作りたい、となったときにWebデザインだけができるひとと、サーバー、インフラの構築、セキュリティも理解している人だったらどちらが選ばれるでしょうか?デザインはあくまで +αのスキルなので、Webの基礎を学んだほうが結果として早く・たくさん稼げる機会に恵まれます。

自分のポートフォリオをつくる

ここまでやってはじめて、かたちになるものを作れる段階だと思います。正直私はWebの基礎をすっ飛ばしてポートフォリオサイトを作っていたのですが、今思えばはじめからやっておけば製作スピードがだいぶちがったかなと思います。

ポートフォリオサイトってどうやって作るの?というところで初めに紹介したWebデザインの記事たちがでてきます。

もちろん最初なので雑なものでも大丈夫です。とにかくあなたが初めて作る、ということが大事です。使うのはGithubアカウントだけです。Github.ioではGithubにあげたコードから、静的Webサイトを自動で公開してくれます。ドメインはgithubに紐付いたものになりますが、一番手軽に始められます。

デザインはこうやって決める!

じゃあ、中身はどうやって書いていけばいいの?となると、サイトデザイン例を参考にするのが一番です。でも参考にするといっても難しいので、本当に最初は「HTML、CSSをそのままコピペで公開」をおすすめします。

勉強にならないやん!と思われるかもしれませんが、最初の最初はそれでいいと思います。このテンプレートを使って、サイトを公開する、というところまで完成できることが大事です。もちろんテキストや配色などは簡単に変えられるので、好きなように変えてみましょう。そうしたら、あなただけのWebサイトが公開されます。

テンプレートサイトはココで決まり!

先程お話したテンプレートサイトについてはこちらのFREEHTML5.COを使いましょう。英語ですが、とてもおしゃれなデザインのテンプレートが無料で使えます。

とにかく大事なことはこのテンプレートとGithub.ioを使って、独自のサイトを公開まですることです。そこから好きなようにデザインを調整していくことで、学習スピードがあがります。もし気に入らなければ他のデザインにしたり、あるいはゼロから自分で作ればいいんです。

私の経験でいうと、この作業に費やしたのは2時間程度ですが、私個人のポートフォリオサイトを公開して、それを使ってWebデザインの案件を獲得したりしていました。もちろん納品したサイトは独自でつくったものですよ!

最後に

Webデザイン、Web制作の勉強は覚えることよりも、手を使って作っていくことのほうが大事です。色んな本を読むよりも、自分でデザインしたものをどんどん公開して、製作スピード・質をあげることのほうが大事です。

もし仕事にしたいのであれば作ったものを積極的に公開していくのがいいでしょう。そこからお仕事につながるかもしれません!

そして、もしアプリケーション開発に進みたいのであればWebデザインに時間を費やすのはあまりオススメしません。より専門的な知識・技術が必要になります。

 

人気記事【未経験あり】いまWEBエンジニアに人気転職サイト4選

人気記事【2019年最新版】Twitterで評価の高いスクール5選