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年後はきっと苦手ではなくなっているはずです!自分に言い訳をせずに、チャレンジしてみましょう!