webデザイナーを目指す人の中には、デザインは出来ても『コーディングが苦手!できない!』と言う方も多いのではないでしょうか。
でも、安心してください！下には下がいます！
就職当時の私は、これを見てくださっている皆さんより、
おそらくはるかにコーディングは出来ませんでした！( ･´ｰ･｀)どや
・・・なんて声がどこからか聞こえてきそうですが、就職当時の私はほぼコーディングの知識はゼロでした。
それどころか、デザインもできない、ソフトもまともに使えない。よくそんな奴雇ったなという感じですね(*´∀｀*)
でも、今はコーディングが好きになりました！コーディングには、デザインとはまた違った面白さがあると思っています！
今回は、
- コーディングが苦手に感じてしまう理由
- webデザイナーに必要なコーディングスキル
- 苦手なコーディングを克服するための方法
などをお伝えしたいと思います！
コードを見ただけでマーライオン状態になってしまう方は必見です！
もくじ
コーディングが苦手に感じてしまう理由は実は…
結論から言うと、コーディングが苦手に感じてしまう理由は「思い込み」だと思います。
『コードを見ただけでなんか吐き気が…』→『オレは（わたしは）コーディングが苦手なんだ！』となってしまうわけですね。
でも、本当に「コーディングが苦手」なのでしょうか？
苦手なのではなく、単純に経験値が少ないだけでは？と私は思います。
ドラクエやFFで言うと、レベル1の初期装備状態で強い敵と戦って死んでしまって、『戦闘が苦手なんだ・・・』と言っているようなものです。
いやいやいや、まずは弱い敵を倒してレベルアップして、装備も整えれば勝てるようになるじゃん！と思うわけです。
コーディングもそれと同じです。（・・・と偉そうに言っていますが、私も昔はコーディングが苦手だと思っていました^^;）
webデザイナーもコーディングが出来たほうが絶対に良い！
webデザイナーもコーディングが出来たほうが絶対に良いです。その理由は・・・
コーディングの知識がないと、「コーダー泣かせのデザイン」を作ってしまうから
webのデザインを作るためには、最低限のコーディングの知識が必要です。コーディングの知識がないと、実装不可能なデザインを作ってしまうことがあるからです。
例えば、雑誌のような複雑なレイアウトのデザインは、コーディングするのにかなり骨が折れます…。そうなると、分業制の場合コーダーが困ってしまいますよね。
「デザインしかできないwebデザイナー」は淘汰される！
私は最初、web業界ではない会社のホームページ更新担当でした。（詳しくはプロフィールをご覧ください。）
それでも、必死に頑張った結果、コーディングはある程度出来るようになりました。HTML・CSSの他、PHPでお問い合わせフォームも作っていました。
web業界ではない人間が見よう見真似でそこまで出来てしまうのに、これからwebデザイナーを目指す人がデザインしかできないってヤバくないですか？（・・・とちょっとあおってしまいました。すみません・・・＞＜）
でも、やっぱりwebデザイナーに求められるスキルレベルは年々上がってきているので、「デザインしかできないwebデザイナー」は淘汰されてしまう恐れがあります…。
ちょっと厳しいお話をしてしまいましたが、最低限HTML・CSSが出来るくらいのコーディングスキルは身に着けておきたいですね。
コーディングができると給料もUPするかも！
デザインしか出来ないwebデザイナーより、コーディングも出来るwebデザイナーのほうがやはり給与は高くなります。しかも、もっとスキルアップしてフロントエンドエンジニアになると、かなり稼げます！夢が膨らみますね♪
webデザイナーに必要なコーディングスキルはコレだ！
- HTML
- CSS
- JavaScript(JQuery)
本当に本当の最低限のスキルはHTMLとCSSですが、それにプラスしてJavaScript(JQuery)が出来ると望ましいですね。JavaScript(JQuery)は、まずはすでにあるコードをちょっと編集出来る程度のスキルレベルを目指しましょう。
HTML
HTMLは、webページの構造を定義するための言語です。HTMLでコーディングすると、『ここは見出しだよ』とか『ここは箇条書きだよ』などとGoogle先生に教えてあげることができます。
CSS
CSSは、webページのレイアウトや装飾をするための言語です。文字の色を変えたり、背景画像を入れたりといったwebページの見た目に関わる部分をCSSが担当します。
HTMLでもレイアウトや装飾は出来ますが、現在では「レイアウトや装飾はCSSでする」という棲み分けがされています。
JavaScript(jQuery)
JavaScript(jQuery)は、webページに動きを付けるための言語です。スライドショーやボタンをマウスオンしたら動くなどといった動きを付ける際に、JavaScript(jQuery)を使うと便利です。
jQueryとは、JavaScriptをより簡単に記述できるようにしたものです。
欲を言えば・・・こんな知識もあると強い！
欲を言えば、
- WordPress
- PHP
- レスポンシブwebデザイン
- SEO対策
などの知識もあると、さらに良いですね！
私が実践した、苦手なコーディングを克服する方法
就職当初、コーディングがほぼ出来なかった私が実践した、苦手なコーディングを克服する方法を伝授したいと思います！
習うより慣れろ！とにかく手を動かすべし！
コーディングは頭で覚えようとしても難しいので、実際に手を動かして覚えましょう。ノートを取ったり、コードを丸暗記する必要はありません。
『どうしてもノートを取りたい！ノートを取らないと死んでしまう・・・！』という方は、いつも間違えてしまうところやなかなか覚えられないことだけノートにメモしておきましょう。
webサービスを利用する
最近は学習に便利なwebサービスも増えたので、ぜひ活用しましょう！私の場合、就職当初は参考書で勉強しましたが、後からwebサービスを利用してみて、その便利さに驚きました！
- Progate（「基礎」：無料、「応用」「実践」：有料 / 月額980円）
無料で始められる、初心者向け学習サイト
https://prog-8.com/ - CODEPREP（有料 / 月額980円）
プログラミングを書いて覚える実践型のプログラミング学習サービス
http://codeprep.jp/ - Schoo（有料 / 月額980円）
参加型の生放送授業と動画教材両方で学べる
https://schoo.jp/guest - ドットインストール（有料 / 月額980円）
3分動画でマスターできる、初心者向けプログラミング学習サイト
https://dotinstall.com/ - CodeCamp（有料 / 料金はレッスンによって異なる）
経験豊富な現役エンジニア講師による個人レッスン
https://codecamp.jp/ - Udemy（有料 / 料金はレッスンによって異なる）
スマホで学べるオンライン学習サービス
https://www.udemy.com/ja/
webサイト制作に必要な知識「だけ」を身につける。それ以外はググるべし！
HTMLだけでも膨大な量のタグが存在しますが、webサイト制作で実際に使うタグは数十個です。
マイナーなタグまで覚える必要はありません。
デベロッパーツールを使う
ブラウザでデベロッパーツール（Google Chromeだと、[Ctrl]+[Shift]+[I]）を使うと、webページがどのようにコーディングされているのかがわかります。『いいな！』と思うサイトやコンテンツがあったら、デベロッパーツールを使って見てみましょう。
Adobe Dreamweaverを使えるようにする
エディタはとりあえずDreamweaverだけ使えればOKです！・・・と言っても、Dreamweaver自体は難しいソフトではないので、ご安心ください。使っているうちにすぐに慣れると思います。
背景が白だとwidthやmargin・padding等がわかりにくいので、各要素に仮でbackground-colorを指定してあげると、わかりやすくなります。
まとめ：苦手だからと諦めないで！
コーディングが苦手に感じてしまう理由は、経験値不足による思い込みです。
webデザイナーはコーディングスキルが絶対にあったほうが良いので、『苦手だから…』と諦めず、まずは挑戦してみましょう！
- HTML
- CSS
- JavaScript(JQuery)
上記では、私が実践した、苦手なコーディングを克服する方法もご紹介していますので、ぜひ参考にしてみてくださいね！
レペゼン地球のDJ社長の動画の中で、「”今”は人見知りなのに、”私”人見知りに変わってくる」という言葉があります。
人見知りは初対面の人とのコミュニケーションが苦手なだけなので、コミュニケーションの練習をすればある程度克服できるはずなんですよね。でも、多くの人が「私は人見知りだから…」と頑張る前から諦めてしまうんです。
コーディングも同じです。今はコーディングが苦手なだけで、勉強すれば1年後はきっと苦手ではなくなっているはずです！自分に言い訳をせずに、チャレンジしてみましょう！
