Webデザインとコーディングの両方をやりたい人におすすめの勉強法
どうも、現役Webディレクターの「あんこ（夫）」です！
今回は「Webデザインとコーディングの両方やりたい人におすすめの勉強法」についてです。
デザインもコーディングも興味がある！面白そう！…でもどこから手を付ければいいか分からない！という方におすすめの記事です。
- Webデザインとコーディングの両方をやりたい人の悩みとその解決方法
- Webデザインとコーディングの基礎知識を別々につける
- デザインソフトの操作方法を覚える
- よく使うHTMLタグとCSSを覚える
- ホームページを１つ作り上げる
【未経験者～中級Webデザイナー向けのシリーズ記事】
第１弾：Webデザイナーの仕事とは？未経験でも大丈夫？将来性は？すべて答えます
第２弾：Webデザイナーが就活・面接で内定をもらうために絶対押さえておきたい6つのポイント
第３弾：面接で好印象・内定確率を上げるポートフォリオの作り方
第４弾：給料・年収の不安を解消！お金に困らずにWebデザイナーをやる方法
第５弾：Webデザイナーが「残業無し・定時あがり」で仕事をするコツ
第７弾：このデザイン最初からやり直し！と言われないようにする方法
第８弾：デザインセンス不要！「デザインが不得意な人向け」Webデザイナーの必勝法
第９弾：Webデザイナーもコーディングスキルは必要？どのレベルまで覚えれば良い？に答えます
第10弾：Webデザインとコーディングの両方をやりたい人におすすめの勉強法
第11弾：ホームページ案件受注～納品までに必要なスキルと手順のすべて
第12弾：Webデザイン好き、という最強の武器があれば何も心配いらない説
では、本題へ入ります！
Webデザインとコーディングの両方をやりたい人の悩みとその解決方法
Webデザインとコーディングの両方をやりたい人は、覚える範囲が広すぎるのが悩みですよね。
✔両方なんて覚えられるのか？
✔どこから始めてどこまで勉強すれば仕事になるのか？
などは気になるポイントかなと思います。
Webサービスを作りたいとか、ホームページを作りたいとか、人によって作りたいものが異なると思いますが、ここでのゴールは「ホームページを作り上げる」ことにしたいと思います。
ホームページを作ることをゴールにする理由は、20～40万円規模のデザイン＆コーディングの仕事ができるようになるからです。
ついでに、5～10万円規模のLPの仕事もできます。
さらにさらに、今後Webデザインのスキルでもコーディングスキルでも好きな方を伸ばしていけます。
これで覚える範囲が明確になってきたと思います。
次は何をどのように覚えれば良いのかについてです。
Webデザインとコーディングの基礎知識を別々につける
もし、基礎知識も無いまま、いきなり実践に入りホームページを作り上げながらWebデザインからコーディングまでを流れで覚えようと思ったら、Webデザインであれもこれも知らなくて調べたりしながら進めることになり、その間ずーっとコーディングを覚えられなくなります。
両方やりたい人にとってはウズウズしますよね。
ですので、自分の気分次第で「今日はデザインをして明日はコーディングをやろう！」とか、「午前中はデザインをして午後はコーディングをやろう！」みたいに同時進行でやっていくと良いと思います。
具体的に言うと、
✔Webデザインの方はデザインソフトの基本操作の把握
✔コーディングはよく使うHTMLタグとCSSの理解
を同時進行することです。
デザインソフトの操作方法を覚える
何と言ってもソフトが使えなければ何も作業が出来ません。
Webデザイナーは、Illustrator（イラストレーター）とPhotoshop（フォトショップ）を両方使う、または片方を使い込んで仕事をしています。
最初に操作方法をマスターする必要はありませんが、デザインソフトでどんなことが出来るのか全体的に把握しておき、必要に応じて作業中にも調べて覚えると効率が良いと思います。
Illustrator（イラストレーター）はキャラクターなど何かのイラストを作る場合や名刺やチラシのような紙媒体をデザインするのに適しています。
ちなみに、この記事のタイトルバナーはイラストレーターを使ってすべて作りました！
Photoshop（フォトショップ）は写真の加工、デッサンのような手書きイラストに適しています。
最近はインスタ、LINEカメラ、ツイッターなども写真の加工機能がついていて雰囲気作れますが、フォトショップだと目の色や髪の色を変えるとか、被写体の背景をまったく違うものに変えるなど高度な加工ができます。
まずはデザインソフトで何が出来るのか一通り把握するために操作方法がまとまっている本を一冊持っておくとベストかなと思います。
作業中に分からないことがあった時の逆引きとして使うのにも便利です。
この辺のランキングから気になる本をピックアップして、本屋さんでちょっと読んで良かったら買ってみてはどうでしょうか。
Amazon.co.jp 売れ筋ランキング: Photoshop の中で最も人気のある商品です
よく使うHTMLタグとCSSを覚える
デザインの勉強と並行して、良く使うHTMLとCSSを覚えてしまいましょう！
面倒に思うかもしれませんが、基礎を飛ばして高度なコーディングに入ると、何故か崩れてしまったけど直せない、、ということが多発します。
ちゃんとHTML、CSSを理解しておけばほとんどの崩れはサクッと直せます。
以下のようなオンライン上でコーディングの勉強が出来るサービスを使って覚えても良いですし、本を買って覚えても良いですし、自分のやりやすい方法で勉強してみてください。
Progate | プログラミングの入門なら基礎から学べるProgate[プロゲート]
また、HTML、CSSの逆引きには以下のサイトがおすすめです。
私は今でも書き方を忘れた時などに見ています。
ホームページを１つ作り上げる
一通り学習サービスや本などでデザインソフトやコーディングについて学んだ後は、ホームページを作ることを目標にして実践で覚えていきましょう！
まずはどんなサイトでも良いので自分の作りたいと思ったサイトをデザインソフトを使って作ってみてください。
または、世に出ているホームページの中から好きなサイトを選んで真似して作ってみてください。
ただし、アニメーションなど動きを付けるのは難易度が上がるので、初めてサイトを作る人にはおすすめしません。
デザインをしてみると、
✔どうやって作ればこうなるんだろう
✔今まで気づかなかった見てなかったけどこんな工夫がこらしてあるんだ
とか気づきがいっぱい出てくると思います。
その気づきが経験値アップになっていきます。
また、デザインのイメージはあるけれど、知識が足りなくてソフトの操作方法が分からないということが出てくると思います。
ネットで調べても分からない時は、
✔出来ないことを恥じずに経験値が高いかつ教えてくれそうな人に聞く
✔今できることで代用して作る
といったことで、イメージ通りにならなくても出来る範囲でやり遂げてください。
そして次はコーディングですね。
コーディングの大まかな流れ
①CSSのことは考えずにHTMLでマークアップする
②各エリアにidやclassをつける
③デザインしたものをスライスして画像にしておく
④idやclassとCSSを紐付けていきレイアウトを組む
⑤各ブラウザで確認して崩れているブラウザがあれば修正する
この辺のことはオンラインの学習サービスや本で勉強している時に出てくると思いますので覚えおいてください。
勉強してきた知識を組み合わせて、今回のホームページのコーディングしてみてください。
デザインと同様に、ネットで調べても分からない時は、
✔誰かに聞く
✔今できることで代用して作る（＝中央揃えにならないけど左揃えになって表示されているからOKとするとか）
で進めていってください。
コーディングに関しても、出来ないことがあっても良いのでとにかく形にすることでかなりの経験値が上がると思います。
次回はホームページを作るためのスキルについて具体的に紹介します。
★コーポレートサイトや店舗サイトのホームページを作るのに必要なスキルと手順
以上、「Webデザインとコーディングの両方やりたい人におすすめの勉強法」でした！
【お知らせ】
ツイッターでもWebデザイナー&Webディレクター&マークアップエンジニア向けに呟いていますのでフォロー＆お声がけ頂けると嬉しいです( ´▽` )ﾉ
おわり！あんこ（夫）
