【Webデザイン　独学】地方に住んでても何とかなる？

f:id:tukumosanzou:20180719205000j:plain

「Webデザインをどうすれば学べるんだろう？」

「独学でやってみたいけど、どうすればいいのだろう？」

今回は独学でこれからWebデザインを学びたい方たちへ

地方に住んでても、学校が無くても学べる方法があるんです。

そう、インターネット環境さえあれば！

このやり方で一から未経験でもWebサイトを作ることができるようになります。

はじめに言っておきますが、初心者は本を買うのは後回しですよ。

本は情報の更新が止まってしまうので、適切なサイトで学んだあとで参考書がわりに買うのがベストです。

自分にとってどのような内容の本が必要か、自分で判断できるからです。

目次

・ HTML/CSSを学ぶ。

・デベロッパーツールを学ぶ。

・ Sassを学ぶ

・サイトのコピーを作る。

・ JavaScriptを学ぶ。

・ jQueryを学ぶ。

・ Bootstrapをまなぶ。

・ WordPressを学ぶ。

・おすすめ情報サイト

・おすすめ本

・まとめ

Webデザインの独学という選択肢。

少し前まではWebデザインを未経験で独学するとなると大変でした。

しかし今はインターネットで学べるようになりました。

良い時代になりましたよね。

自宅等で気軽にオンラインで学べるプログラミングスクールも増えてきましたね。

HTML/CSSを学ぶ。

Webデザインを学ぶにはまずHTMLとCSSを学ばないと始まりません。

とても簡単なので心配は要りません。

使いやすくてしかも、基礎的な部分は無料で学べる質の高いサイトが出てきてますので、とりあえずはそういうところで試して見ましょう。

無料で学ぶという選択肢。
気軽に始めるためには、無料で始めるのがオススメです。

TechAcademy [テックアカデミー] ではWebデザインを含めコースも豊富でいろいろ学べます。

オンラインなので、自宅にいながら学習可能です。

※１週間の無料体験ができるので、その間に Webデザインの基礎を学ぶのもありです。
オンラインブートキャンプ無料体験はこちら

Progateが超おすすめです！。

f:id:tukumosanzou:20180717153828p:plain

基礎部分は無料でまなべます。

スライド中心で学べるようになってます。

サイト内に学習環境が準備してあるので登録するだけですぐ始められるのもうれしいです。

実際にエンジニアに就職・転職した方も多数いるので信頼性は高いです。

デベロッパーツールを学ぶ。

Progateで学べます

HTML/CSSのコースが終了したら、ページの下の方にチュートリアルが３つありますのでそれも学んでしまいましょう。

とくに真ん中の検証ツールの使い方は学んでおくと便利です。

f:id:tukumosanzou:20180719212401j:plain

Sassを学ぶ

またまたProgateで学べます。

SassはCSSをより便利に効率的にするための言語です。

最初のうちはCSSでも事足りるのですが、Webデザインが複雑になるにつれて必ず役に立ちますから、この機会に学んでおきましょう。

f:id:tukumosanzou:20180719214740j:plain

サイトのコピーを作る

Webデザインの初心者からレベルアップするにはサイトのコピーを作成すると勉強になります。

この段階では、サイトの形だけをコピーしてください。

アニメーションなどの動きの部分は、無視してかまいません。

テンプレートをコピーするのも良いです、無料のテンプレートにはレベルの高いものがたくさんあるので、勉強になりますよ。

TEMPLATEDというサイトがオススメです。

そのためにはProgateHTML/CSSの学習コースにあるミニチュートリアルの「HTML/CSSの開発環境を用意しよう！」を学習してください。

テンプレートをデベロッパーツールで解析しながら見た目が同じになるようにコピーします。

全く同じにコピーするのもいいのですが、答えは必ずしも一つではないので同じやり方にこだわらなくても大丈夫です、見た目が同じなら良しとして数をこなしましょう。

10個くらいコピーをこなすとレベルがアップしますよ。

YouTubeにオススメのチャンネルがあります。

Mackenzie Child

ここでデザインからコーディングまでの流れが学習できます。私もここでかなり勉強させてもらいました。

JavaScriptを学ぶ

WebデザインでWebサイトやWebアプリケーションにアニメーション等の動きを追加することができます。
※CSSでもある程度は、できますがCSSはあくまで装飾が担当だと思うので。

Progate

f:id:tukumosanzou:20180720140145j:plain

jQueryを学ぶ。

JavaScriptコードをより容易に記述できるようにするために設計されたJavaScriptライブラリです。

Progate

f:id:tukumosanzou:20180720140629j:plain

ここで、またサイトのコピーをしてみてください。

今回は、アニメーションなどの動きの部分もチャレンジしてみてください。

Bootstrapを学ぶ

BootstrapはWebデザインを効率よく行うためのデザインテンプレートの集合体です。

HTML/CSS/Sass/JavaScript/jQueryの基礎がわかってないと、使うのが大変なので基礎はしっかり学びましょう。

実際の製作現場でも使われているので使えるようになっておくと便利です。

Bootstrapは慣れると簡単ですが、コツをつかむのには動画の方が適しています。

ドットインストールで学べます。

動画で様々なプログラミングを学ぶことができるサイトです。
国内でここまでレベルの高い動画があるのは、今のところここだけですね。

f:id:tukumosanzou:20180720093611j:plain

PHPを学ぶ

HTML/CSSがフロントエンドの言語と言われるのに対し、サーバーサイドの言語といわれます。

データのやり取りなどを制御するために使われます。

WordPressを学ぶ上で必ず必要となりますので学びましょう。

Progateで学びましょう。

f:id:tukumosanzou:20180720101521j:plain

SQLを学ぶ

SQLはデータの管理や分析を行うデータベース言語です。

f:id:tukumosanzou:20180720130906j:plain

PHPとSQLはWordPressの内部処理で使用されています。

基礎だけでも学んでおくとWordPressを学ぶ中で役に立ちますよ。

WordPressを学ぶ

ブログを作成するためにつくられたソフトウエアです。

最初は少し戸惑いますが、使うとブログを製作・運営するのが楽になります。

Webデザインでは使えるのが現状必須となりますので学んでおきましょう。

WordPressとは何か？
サルワカさんでわかりやすく解説されています。

株式会社デザインプラスはWordPressテーマを販売する人気のサイトです、その中の「WordPressの使い方大全集」で学ぶと良いでしょう。