未経験から独学でプログラミング、WEBデザインを勉強する方法

 

Bonjour!

プリちゃん(PriusShota)です!

WEBデザイン未経験の著者が

「独学でプログラミング、WEBデザインを勉強して身につけるステップ」について書いています。

未経験から独学でプログラミング、WEBデザインを勉強する方法

photo by @priusshota

 

「プログラミング、WEBデザインを勉強したいけど、どうしたらいいの??」

私もかつてこのような悩みを抱えていた一人です。

 

しかし、今はありがたいことにGoogleで検索すると沢山の情報と

無料でも学べる動画もあったりと、英語と同じように独学で勉強できる環境が整っています。

 

私のプログラミング、とりわけWEBデザインを学びたいきっかけは、

「自分のHPを持ちたくて、できることであればサイトもデザインできるようになりたい!そこからブログも更新していきたい!」

これが原動力となって仕事終わりに夜な夜なプログラミング学習の動画を見ていたものでした。

 

最初はちんぷんかんぷんだった、HTMLCSSも気づけば理解できるようになり、

このサイトはWordPressで作ったのですが、デザインも自分でカスタマイズできるくらいまでできるようになりました。

そこで今回は、「未経験の方がプログラミング、WEBデザインを独学で学ぶステップ」についてご紹介しますね。

 

 

 

1. HTML、CSSを勉強する

photo by @priusshota

 

このHTMLCSS基礎の土台に当てはまるもので、

Webデザイン上ではとても大切な内容になります。

グラフィックデザインツールなどでデザインしたものを、これらのHTMLCSSで、コーディング(HTMLCSSなどを入力作業)をすることで初めてWEBサイトが見れる形になります。

初めはこのコーディング作業が難しいのですが、できるようになってくると自分がデザインしたことを、コーディングすることでWeb上に反映することができる楽しみが生まれてきます♬

 

「それぞれ何のことを指しているの??」と思う方もいるかもしれません。

簡単に説明してみると、、

 

 

HTML Webサイトの骨組みに当たるもので、今読んでいるこのブログも

記述されているHTMLによって表示されています。

 

 

CSS  = 記述されたHTMLをよりお洒落に見栄えを整えていくためのもので、

例えば画像を真ん中に配置させるといった レイアウトだったり、文字の大きさやフォント・色を変更したり。

 

 

この二つさえ理解すれば、私のブログのように簡単な使いやすいサイトデザインは自分でできるようになります。

 

これら二つは他の言語と比べて独学で学びやすいので、

これから勉強する場合は、「オンラインサービス」を利用して

学習すると非常に効率的で良いですよ。

 

2. おすすめのオンラインサービス

 

ドットインストール

 

こちらは3分動画でプログラミング言語をマスターすることを売りにしているオンラインサービスで、

実際に運営者の方がHTMLCSSなどをチュートリアル形式でコーディングの方法などわかりやすく動画で説明してくださり、

何度も繰り返し動画を視聴しながら学習できる点がとても良いです。無料版だけでも豊富なコンテンツなので、HTMLCSSのさわりだけでも試しに学習してみるのも良いと思います。

ドットインストール

 

Progate(プロゲート)

 

こちらは実際にHTML,CSS,JavaScript,jQueryなどをブラウザ上でコーディングをしながら、ゲーム感覚で学べるとても優秀なオンラインサービスです。

Webデザインについて理解することも大事ではありますが、一番力になるのは実際に手を動かしてアウトプット、コーディングをしていくこと。

無料コースだけでも沢山ありますが、レベルアップされたい方は有料課金することで更に高度なレッスンを受けることができます。

 Progate(プロゲート)

 

3. JavaScript 、jQueryを勉強する

photo by @priusshota

 

またまた新しいワードが出てきましたね。。!

このJavaScript, jQueryが何かというと、シンプルに言えば”Webサイトに動きをつける役割をします。

例えばWebサイトを見ている時に、トップページにスライダーがあったり、スマホからサイトを見た時にクリックするとHOMEなどメニューがすっと出てくるのは見たことはありますよね? そういったWebサイト上で動きをつける役割JavaScriptjQueryが担当しています。

 

因みに、JavaScriptjQueryの違いは何かというと、

JavaScriptは何十行もコーディングをしなければいけない難しいものですが、jQueryはほんの数行で済ませることができるのです!!つまり、JavaScriptをより使いやすくしたものがjQueryです!!

 

特別デザインに拘りがなければ、これらを学習しなくてもHTMLCSSだけで良いかもしれません。

ただ、一からサイトを構築していく場合はJavaScriptjQueryの知識は身についていた方が、よりユーザーにとって使いやすく魅力的なデザインに仕上げることができます。

 

これらも先述した、ドットインストールやProgateのオンラインサービスでも対応しているので、気になった方は是非学習されてみてくださいね。

 

4. デザインの基礎や原則について勉強する

photo by @priusshota

 

「デザインってセンスが必要なんじゃ。。。」と思い悩まれている方もいらっしゃるかもしれませんが、

実際はセンスより「問題解決能力」が一番問われることなので、その問題解決能力を磨くためにデザインの基礎や原則を勉強することがとても良いです!

オンラインでも学ぶことはできるのですが、ぎゅっと情報が濃縮している

本を数冊読むことがオススメです。

 

| おすすめの本について |

 

ノンデザイナーズ・デザインブック

デザインをされている方なら誰しも一度は見たことがあるくらいの良書です。ノンデザイナーズとあるように、デザイナーでない人のためのデザイン基本書

デザインのベーシックがこの一冊にまとまっており、Webデザインに限らずデザインそのものについて学ぶことができる素晴らしい本です。

 

ノンデザイナーズ・デザインブック [第4版] [ RobinWilliams ]

価格:2,354円
(2019/4/5 23:48時点)
感想(3件)

 

なるほどデザイン

こちらはノンデザイナーズ・デザインブックよりもっと読みやすく、色々なデザインの事例(良い・もう少し改善すべき)について絵や写真を見比べながら、「なぜこのデザインなのか」というように、デザインについてより深く学ぶことができます。ほんのちょっとしたデザインで全く伝わる効果が変わってくるので、パラパラ見ていても面白い本です。

 

なるほどデザイン 目で見て楽しむデザインの本。 [ 筒井美希 ]

価格:2,160円
(2019/4/5 23:42時点)
感想(5件)

 

5. おすすめのグラフィックデザインツール

 

グラグィックデザインツールは色々ありますが、特にSketch(スケッチ ※Macのみ対応! 注意! )というツールはillustratorphotoshopと比べてよりシンプルにUI(ユーザーインターフェース)デザインを作成することができるので、とてもよく使われている人気ツールです!

Sketch(スケッチ)は、サクサクとスピーディに動く操作性+とにかくわかりやすいので、たった数分でデザインを作ることができて初心者でも使いやすいツール!ファイルサイズがとても小さいことも魅力的。

基本有料ソフトになりますが、Free Trialとして30日間無料でお試しすることができます。

 Sketch(スケッチ)

 

6. 実際にサイトを作ってみる!

photo by @priusshota

 

これまでご紹介した知識などを身につけたとしたら、後はとにかく自分でWEBサイトをWordPressなどで作ってみると非常に力になります。実際に制作してみることでつまづく壁であったり等、色々問題が出てきます。

その問題をどのように解決していくのか、実践しながら解決のために情報をググったりと何度も繰り返すことで、初めて技術が体に染み付いていくからです。最初はとてもとても時間がかかりますが、染み付いてくると応用も利くようになっていきます。

 

7. まとめ

photo by @priusshota

 

デザインの分野も身につけるために最初は沢山のことを覚えないといけないですが、

プログラミング、WEBデザインを独学で学ぶことは可能です!只、わからないことに直面すると自分でその問題を解決してくためにググる能力はとても必要だと思います。その分、WEBデザインの知識も養えますし、できなかったことができるようになる喜びはとても大きいですよ!

 

あとは普段から色々なWEBサイトを見続けて真似していくことも、デザインを考える時の参考になって質もあげていくことができますね。

もし独学が苦手で誰かにしっかり聞きたいのであれば、独学ではなく課金をしてでもオンラインスクールに通われることをお勧めします。

例えば、TechAcademy [テックアカデミー] なら、現役のプロのサポートのもと、プログラミングやWEBデザインをオンラインで学べます。気になる方は、1週間無料体験 からどうぞ。

今回の記事が少しでも役に立てれば幸いです。 

プリちゃん

 

スポンサーリンク

 

|| クリエイターツールに関する関連記事 ||

おしゃれ写真好きな方必見!インスタ映えな写真加工ができる無料アプリ!PICSPLAY 2 フォトエディター

Pinterest(ピンタレスト)Creator Conferenceに参加して学んだこと。

人気のnoteはどうやって使うの? 使い方を簡単に解説!

本当は教えたくない、愛用しているiPhoneデザインアプリ。

 

 

Prius Shota (プリちゃん)
Art Photographer / Designer

 

東京在住のアートフォトグラファー・

デザイナー。
写真と語学が大好きな27歳。
好奇心旺盛でフレンドリーな性格。

 

『心に灯す光と色彩のパレット』

写真創作活動オリジナルテーマ。(since 2016)
淡い光と豊かな色彩で描く幻想的な作品を通して、
穏やかな気持ちや癒し、日常にアートをお届け。
吉祥寺にて初個展開催、ロンドンの展示会にも出展経験あり。
お仕事依頼に関しては、“CONTACT+ABOUT ME”から。

 

 

★プリちゃんの撮影はこちらから!

 

 

★プリちゃんのInstagram、フォローしてね!

 

 

★プリちゃんと個別で連絡とりたい方

IDは @tlg0780j で検索!

 

Loading Facebook Comments ...

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です