Bonjour!
プリちゃん(＠PriusShota)です!
WEBデザイン未経験の著者が
「独学でプログラミング、WEBデザインを勉強して身につけるステップ」について書いています。
未経験から独学でプログラミング、WEBデザインを勉強する方法
「プログラミング、WEBデザインを勉強したいけど、どうしたらいいの？？」
私もかつてこのような悩みを抱えていた一人です。
しかし、今はありがたいことにGoogleで検索すると沢山の情報と
無料でも学べる動画もあったりと、英語と同じように独学で勉強できる環境が整っています。
私のプログラミング、とりわけWEBデザインを学びたいきっかけは、
「自分のHPを持ちたくて、できることであればサイトもデザインできるようになりたい！そこからブログも更新していきたい！」
これが原動力となって仕事終わりに夜な夜なプログラミング学習の動画を見ていたものでした。
最初はちんぷんかんぷんだった、HTMLやCSSも気づけば理解できるようになり、
このサイトはWordPressで作ったのですが、デザインも自分でカスタマイズできるくらいまでできるようになりました。
そこで今回は、「未経験の方がプログラミング、WEBデザインを独学で学ぶステップ」についてご紹介しますね。
目次
1. HTML、CSSを勉強する
このHTMLとCSSは”基礎の土台”に当てはまるもので、
Webデザイン上ではとても大切な内容になります。
グラフィックデザインツールなどでデザインしたものを、これらのHTMLとCSSで、コーディング(HTMLやCSSなどを入力作業)をすることで初めてWEBサイトが見れる形になります。
初めはこのコーディング作業が難しいのですが、できるようになってくると自分がデザインしたことを、コーディングすることでWeb上に反映することができる楽しみが生まれてきます♬
「それぞれ何のことを指しているの？？」と思う方もいるかもしれません。
簡単に説明してみると、、
HTML ＝ Webサイトの骨組みに当たるもので、今読んでいるこのブログも
記述されているHTMLによって表示されています。
CSS = 記述されたHTMLをよりお洒落に見栄えを整えていくためのもので、
例えば”画像を真ん中に配置させる”といった レイアウトだったり、文字の大きさやフォント・色を変更したり。
この二つさえ理解すれば、私のブログのように簡単な使いやすいサイトデザインは自分でできるようになります。
これら二つは他の言語と比べて独学で学びやすいので、
これから勉強する場合は、「オンラインサービス」を利用して
学習すると非常に効率的で良いですよ。
2. おすすめのオンラインサービス
ドットインストール
こちらは3分動画でプログラミング言語をマスターすることを売りにしているオンラインサービスで、
実際に運営者の方がHTMLやCSSなどをチュートリアル形式でコーディングの方法などわかりやすく動画で説明してくださり、
何度も繰り返し動画を視聴しながら学習できる点がとても良いです。無料版だけでも豊富なコンテンツなので、HTMLとCSSのさわりだけでも試しに学習してみるのも良いと思います。
Progate(プロゲート)
こちらは実際にHTML,CSS,JavaScript,jQueryなどをブラウザ上でコーディングをしながら、ゲーム感覚で学べるとても優秀なオンラインサービスです。
Webデザインについて理解することも大事ではありますが、一番力になるのは実際に手を動かしてアウトプット、コーディングをしていくこと。
無料コースだけでも沢山ありますが、レベルアップされたい方は有料課金することで更に高度なレッスンを受けることができます。
3. JavaScript 、jQueryを勉強する
またまた新しいワードが出てきましたね。。！
このJavaScript, jQueryが何かというと、シンプルに言えば”Webサイトに動きをつける役割”をします。
例えばWebサイトを見ている時に、トップページにスライダーがあったり、スマホからサイトを見た時にクリックするとHOMEなどメニューがすっと出てくるのは見たことはありますよね？ そういったWebサイト上で動きをつける役割をJavaScriptとjQueryが担当しています。
因みに、JavaScriptとjQueryの違いは何かというと、
JavaScriptは何十行もコーディングをしなければいけない難しいものですが、jQueryはほんの数行で済ませることができるのです！！つまり、JavaScriptをより使いやすくしたものがjQueryです！！
特別デザインに拘りがなければ、これらを学習しなくてもHTMLやCSSだけで良いかもしれません。
ただ、一からサイトを構築していく場合はJavaScriptとjQueryの知識は身についていた方が、よりユーザーにとって使いやすく魅力的なデザインに仕上げることができます。
これらも先述した、ドットインストールやProgateのオンラインサービスでも対応しているので、気になった方は是非学習されてみてくださいね。
4. デザインの基礎や原則について勉強する
「デザインってセンスが必要なんじゃ。。。」と思い悩まれている方もいらっしゃるかもしれませんが、
実際はセンスより「問題解決能力」が一番問われることなので、その問題解決能力を磨くためにデザインの基礎や原則を勉強することがとても良いです！
オンラインでも学ぶことはできるのですが、ぎゅっと情報が濃縮している
本を数冊読むことがオススメです。
| おすすめの本について |
ノンデザイナーズ・デザインブック
デザインをされている方なら誰しも一度は見たことがあるくらいの良書です。ノンデザイナーズとあるように、デザイナーでない人のためのデザイン基本書。
デザインのベーシックがこの一冊にまとまっており、Webデザインに限らずデザインそのものについて学ぶことができる素晴らしい本です。
 |
ノンデザイナーズ・デザインブック ［第4版］ [ RobinWilliams ] 価格:2,354円 |
なるほどデザイン
こちらはノンデザイナーズ・デザインブックよりもっと読みやすく、色々なデザインの事例(良い・もう少し改善すべき)について絵や写真を見比べながら、「なぜこのデザインなのか」というように、デザインについてより深く学ぶことができます。ほんのちょっとしたデザインで全く伝わる効果が変わってくるので、パラパラ見ていても面白い本です。
 |
なるほどデザイン 目で見て楽しむデザインの本。 [ 筒井美希 ] 価格:2,160円 |
5. おすすめのグラフィックデザインツール
グラグィックデザインツールは色々ありますが、特にSketch(スケッチ ※Macのみ対応! 注意! )というツールはillustratorやphotoshopと比べてよりシンプルにUI(ユーザーインターフェース)デザインを作成することができるので、とてもよく使われている人気ツールです！
Sketch(スケッチ)は、サクサクとスピーディに動く操作性+とにかくわかりやすいので、たった数分でデザインを作ることができて初心者でも使いやすいツール！ファイルサイズがとても小さいことも魅力的。
基本有料ソフトになりますが、Free Trialとして30日間無料でお試しすることができます。
6. 実際にサイトを作ってみる！
これまでご紹介した知識などを身につけたとしたら、後はとにかく自分でWEBサイトをWordPressなどで作ってみると非常に力になります。実際に制作してみることでつまづく壁であったり等、色々問題が出てきます。
その問題をどのように解決していくのか、実践しながら解決のために情報をググったりと何度も繰り返すことで、初めて技術が体に染み付いていくからです。最初はとてもとても時間がかかりますが、染み付いてくると応用も利くようになっていきます。
7. まとめ
デザインの分野も身につけるために最初は沢山のことを覚えないといけないですが、
プログラミング、WEBデザインを独学で学ぶことは可能です！只、わからないことに直面すると自分でその問題を解決してくためにググる能力はとても必要だと思います。その分、WEBデザインの知識も養えますし、できなかったことができるようになる喜びはとても大きいですよ！
あとは普段から色々なWEBサイトを見続けて真似していくことも、デザインを考える時の参考になって質もあげていくことができますね。
もし独学が苦手で誰かにしっかり聞きたいのであれば、独学ではなく課金をしてでもオンラインスクールに通われることをお勧めします。
例えば、TechAcademy [テックアカデミー] 
なら、現役のプロのサポートのもと、プログラミングやWEBデザインをオンラインで学べます。気になる方は、1週間無料体験 
からどうぞ。
今回の記事が少しでも役に立てれば幸いです。
プリちゃん
｜｜ クリエイターツールに関する関連記事 ｜｜
東京在住のアートフォトグラファー・
『心に灯す光と色彩のパレット』
★プリちゃんの撮影はこちらから！
★プリちゃんのInstagram、フォローしてね！
★プリちゃんと個別で連絡とりたい方
IDは @tlg0780j で検索！
