Webデザインするぞ

時間のない社会人がWebデザインを独学で勉強するには。おすすめのサイトや本を紹介

2017年08月03日

Webデザイナーの小久保です。先日TwitterでWebデザイナー楽しすぎー!! 遊んでるみたいー!! ヒャー!! みたいなウザめのツイートをしていたところ、こんなリプライをいただきました。


この方(中学の友人)はとても良い一歩を踏み出そうとしています。というのもWebサイトってスマホが普及した今、見ない人ってあんまりいないじゃないですか? ほとんどの人は1日1回は何かしらWebサイト見てるんじゃないですかね? 総務省のデータにも出てる。

2015年末のデータだけれども13歳〜59歳までは9割の人がインターネットを利用している。

まあインターネット=Webサイトというわけではないけれど、「インターネットの利用目的」を見てもほぼほぼみんなWebサイトを見てます。つまりめっちゃ需要がある。なのでこの方のように、今の時代にWebデザインに興味を持つというのは非常に理にかなっています。まあ、とは言ってもやってみないと始まんないわけです。

ということで、「時間もない」「専門学校に通う費用もない」、無い無い尽くしで詰んでる! それでもWebデザインやってみたい! という社会人や学生の方に向けて、どのようにWebデザインを独学で勉強したら良いのか説明したいと思います。僕はこの方法でWebデザイナーになったので確度は高いです。

いきなり本を買うな

未経験の人がいきなり「HTML入門!」みたいな本を買ってくるのはオススメしません。なぜなら僕はそれで何回も挫折したから。

いきなり書籍から入ると

読む→理解する→コーディングする

というプロセスが実に面倒です。頑張って理解して、本を書き写してコーディングして、いざブラウザで表示してみたら、全然何も表示されない! とかね。良くある。だいたい書籍のほとんどは必ず誤植があるので、そのまま書き写しても動かないなんてことはめっちゃある。中級者なら調べられるんでそれでもいいんですが、初めてHTML触りましたっていう人にそれが起こるとまあ大変。ググり方もわからないから泥沼にはまって、「俺には向いてないんだ。。。」って諦める人続出です。

じゃあどうすれば良いのか。答えは簡単で

いきなり書く→ 何かが表示される → 嬉しい

このサイクルをガシガシ回していく。この「嬉しい」というのが重要で、嬉しいと思っているうちは挫折しません。一番大切なのは「理解すること」ではなく「挫折しないこと」なので、小難しい顔をして書籍を読むのはもうやめましょう。

そんなことできるの? と思われるかもしれませんが、できます。まずは無料の動画学習サービスを使いましょう。

ドットインストールの動画で無理せず趣味レベルに

ドットインストール
3分動画でマスターする初心者向けプログラミング学習サイトです。HTML, CSS, JavaScript, PHP, Rubyをはじめ、iPhoneやAndroidアプリの作り方も学...

ドットインストールはプログラミングのレッスンが動画で公開されているサービスです。会員登録は必要ですが、ほとんどのレッスンは無料で受けることができます。また動画自体も1レッスン3分程度と激短で時間のない社会人には最適です。まずはこんな感じ、というのを下記から見ていただければ。

基本的に動画の通りに操作すればWebサイトが出来上がっていくので、必ず動くものを作ることができます。ひとつひとつのレッスンは規模が小さいので動画を見ながらその通りに書くのも苦ではないです。なんたって動画では動いてるんですから信頼感が違います。プレミアム会員(月額980円)になると、ソースコードもページで見ることができるので、書籍通りに書き写したのに動かない! ムキー! なんてことは無くなります。

んで、ドットインストールを使って、Webデザインを趣味レベルでできるようになるための講座を順番にまとめました。全部無料で見れるやつなので、まずは騙されたと思ってこの順番でやってみてください。HTMLはもちろん流行りのWordpressでもサイトを作れるようになります。さらにさらに、スマホ対応のサイトも作れちゃうので、これを全部やれば「サイト? 作れるよ? もち、Wordpressでレスポンシブデザインでね」とドヤっても良いと思います。

HTML5/CSS3系

HTML入門 (全24回)
ホームページやウェブサービスの画面を作る際に必要な、構造的な文書を書く方法について学びます。

CSS入門 (全23回)
ホームページの見た目を制御することができるCSSについて基本的な使い方を学んでいきます。

CSSレイアウト入門 (全15回)
CSSでよく見るレイアウトを組み上げていく方法について説明していきます。

実践!ウェブサイトを作ろう (全17回)
サービスを紹介するウェブページを作りながら、様々なレイアウト手法について学んでいきます。

レスポンシブウェブデザイン入門 (全14回)
一つのソースコードで複数のデバイスに応じたレイアウトを実現する、レスポンシブウェブデザインについて見ていきます。

WordPress系

WordPress入門 (全23回)
人気のブログシステムであるWordPressについて、基本的な使い方やゼロからテーマを作る方法について解説していきます。

Javascript/jQuery系 (オプション)

JavaScript入門 (全24回)
主にブラウザに実装されているJavaScriptについて、基本的な使い方を学んでいきます。

jQuery入門 (全20回)
JavaScriptをより簡単に扱うためのライブラリであるjQueryについて、その基本的な使い方を学びます。

 

PHP系(オプション)

PHP入門 (全30回)
高度なウェブアプリケーションを作ることができるPHPについて学んでいきます。

オプションはサイトをひとまず作るだけであればいらないかなあと思います。ただやっておくとかなり自由度が広がるのでオススメです。僕も面白くて定期的にやってたんですが、いつの間にか300レッスンやってました(笑) それでも動画視聴時間は12時間とかなので、投資時間に対してのリターンはかなりでかいです。

プロレベルになるための勉強方法

ここまでやると趣味レベルでは申し分のないレベルに達します。友人知人から重宝がられることでしょう。ただ、プロらしくなるためにはあともう少し勉強が必要だと思います。下記でさらにレベルを上げるためのおすすめサービスを紹介します。

TechAcademy

未経験からプロを育てるオンラインブートキャンプ | TechAcademy [テックアカデミー]
プログラミング学習で、もう挫折しない。パーソナルメンターがつくオンラインブートキャンプ。

TechAcademyは現役のエンジニアが担当につき、未経験から数ヶ月で実務的なスキルが身につけられるサービスです。テキストがとにかく優秀でWebデザインに必須なPhotoshopやgit、Sassなどの使い方、サイト設計の仕方など必要なことがほぼ網羅できます。アフター5でできる分量なので、本業がある方におすすめ。僕が受けたのは下記のセットコース。これをやったおかげで巷に溢れる様々なWordpress案件を受けれるようになったので感謝しています。

Webデザイン+WordPressセット(オンラインスクール)
WebデザインコースとWordPress。現役Webデザイナー・エンジニアのパーソナルメンターが毎日の学習をサポート。週に2回のマンツーマンメンタリング...

12週間コースで¥268,000とちょっと高めですが(僕が受けた時16万ぐらいだったのに)、弊社の公式ツイッター宛にDMをいただければ友達紹介で安くできますので、ご連絡ください。

ハローワークの職業訓練学校

札幌市 ハローワーク 職業訓練 募集情報【2017年】
札幌市のハローワークが窓口の、職業訓練(求職者支援訓練) 開講コースをご紹介。

これは札幌のハローワークのサイトですが、職業訓練学校でほぼ無料で数ヶ月かけてプロのスキルを身につける方法もあります。自治体によりますが条件が合えば月10万円の補助ももらえるという。スキルもついてお金ももらえるという謎の仕組みがあります。国、頑張っとるやん。なので、求職者や無職の方限定ですが、職業訓練学校も視野に入れてみても良いと思います。

ノンデザイナーズ・デザインブック(書籍)

さらに、Webサイトはいかにうまく作れてもデザインができないとしょうがありません。僕の場合TechAcademyだけだとデザインまでやる時間が取れなかったので下記の書籍「ノンデザイナーズ・デザインブック」で勉強しました。

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

いろいろ書籍はありますが、これさえやっておけば「あ、素人くさいな」みたいなデザインからは脱却できます。センスがないない言われ続けていた僕でさえ、最近は「デザインかっこいいね」と言われることが増えてきましたからね(笑)

Webデザイナーへの一歩を踏み出してみませんか?

ここまでやるのに大体早くても半年はかかると思います。ただ、不景気な昨今。逆に半年勉強しただけで手に職がつくというのは大きな利点です。皆さんもまずはドットインストールを無料で始めて、Webデザイナーの第一歩を踏み出してみませんか。そしてWebデザイナーになった暁には、ぜひ我々と一緒に仕事しましょう(ここが本記事のコンバージョンポイント(笑))