webデザイナーのコーディングが苦手・できない理由は●●だった!

コーディングが苦手な理由は実は・・・

webデザイナーを目指す人の中には、デザインは出来ても『コーディングが苦手!できない!』と言う方も多いのではないでしょうか。

でも、安心してください!下には下がいます!

就職当時の私は、これを見てくださっている皆さんより、
おそらくはるかにコーディングは出来ませんでした!( ・´ー・`)どや

えりー
ドヤることじゃないですね。。。
にゃーご
え~そんなこと言って、出来てたんじゃないのかにゃ~

・・・なんて声がどこからか聞こえてきそうですが、就職当時の私はほぼコーディングの知識はゼロでした。

それどころか、デザインもできない、ソフトもまともに使えない。よくそんな奴雇ったなという感じですね(*´∀`*)

でも、今はコーディングが好きになりました!コーディングには、デザインとはまた違った面白さがあると思っています!

今回は、

  • コーディングが苦手に感じてしまう理由
  • webデザイナーに必要なコーディングスキル
  • 苦手なコーディングを克服するための方法

などをお伝えしたいと思います!

コードを見ただけでマーライオン状態になってしまう方は必見です!

コーディングが苦手に感じてしまう理由は実は…

結論から言うと、コーディングが苦手に感じてしまう理由は「思い込み」だと思います。

えりー
「なんか生理的に無理・・・・」ってヤツですね。
にゃーご
一番言われたら辛いヤツにゃ・・・

『コードを見ただけでなんか吐き気が…』→『オレは(わたしは)コーディングが苦手なんだ!』となってしまうわけですね。

でも、本当に「コーディングが苦手」なのでしょうか?

苦手なのではなく、単純に経験値が少ないだけでは?と私は思います。

ドラクエやFFで言うと、レベル1の初期装備状態強い敵と戦って死んでしまって、『戦闘が苦手なんだ・・・』と言っているようなものです。

いやいやいや、まずは弱い敵を倒してレベルアップして、装備も整えれば勝てるようになるじゃん!と思うわけです。

コーディングもそれと同じです。(・・・と偉そうに言っていますが、私も昔はコーディングが苦手だと思っていました^^;)

えりー
まずはスライムから倒しましょう!

webデザイナーもコーディングが出来たほうが絶対に良い!

webデザイナーもコーディングが出来たほうが絶対に良いです。その理由は・・・

コーディングの知識がないと、「コーダー泣かせのデザイン」を作ってしまうから

webのデザインを作るためには、最低限のコーディングの知識が必要です。コーディングの知識がないと、実装不可能なデザインを作ってしまうことがあるからです。

例えば、雑誌のような複雑なレイアウトのデザインは、コーディングするのにかなり骨が折れます…。そうなると、分業制の場合コーダーが困ってしまいますよね。

「デザインしかできないwebデザイナー」は淘汰される!

私は最初、web業界ではない会社のホームページ更新担当でした。(詳しくはプロフィールをご覧ください。)

それでも、必死に頑張った結果、コーディングはある程度出来るようになりました。HTML・CSSの他、PHPでお問い合わせフォームも作っていました。

えりー
OLがPHPもやる時代です。。。
にゃーご
今は小学生もプログラミングを勉強してるらしいにゃ

web業界ではない人間が見よう見真似でそこまで出来てしまうのに、これからwebデザイナーを目指す人がデザインしかできないってヤバくないですか?(・・・とちょっとあおってしまいました。すみません・・・><)

でも、やっぱりwebデザイナーに求められるスキルレベルは年々上がってきているので、「デザインしかできないwebデザイナー」は淘汰されてしまう恐れがあります…。

ちょっと厳しいお話をしてしまいましたが、最低限HTML・CSSが出来るくらいのコーディングスキルは身に着けておきたいですね。

コーディングができると給料もUPするかも!

デザインしか出来ないwebデザイナーより、コーディングも出来るwebデザイナーのほうがやはり給与は高くなります。しかも、もっとスキルアップしてフロントエンドエンジニアになると、かなり稼げます!夢が膨らみますね♪

にゃーご
スキルは給与に直結するんだにゃ・・・
えりー
実力主義は大変だけど、シンプルで良いよね

webデザイナーに必要なコーディングスキルはコレだ!

webデザイナーに必要なコーディングスキル
  • HTML
  • CSS
  • JavaScript(JQuery)

本当に本当の最低限のスキルHTMLとCSSですが、それにプラスしてJavaScript(JQuery)が出来ると望ましいですね。JavaScript(JQuery)は、まずはすでにあるコードをちょっと編集出来る程度のスキルレベルを目指しましょう。

HTML

HTMLは、webページの構造を定義するための言語です。HTMLでコーディングすると、『ここは見出しだよ』とか『ここは箇条書きだよ』などとGoogle先生に教えてあげることができます。

CSS

CSSは、webページのレイアウトや装飾をするための言語です。文字の色を変えたり、背景画像を入れたりといったwebページの見た目に関わる部分をCSSが担当します。

HTMLではレイアウトや装飾はしない
HTMLでもレイアウトや装飾は出来ますが、現在では「レイアウトや装飾はCSSでする」という棲み分けがされています。

JavaScript(jQuery)

JavaScript(jQuery)は、webページに動きを付けるための言語です。スライドショーボタンをマウスオンしたら動くなどといった動きを付ける際に、JavaScript(jQuery)を使うと便利です。

jQueryとは
jQueryとは、JavaScriptをより簡単に記述できるようにしたものです。
えりー
CSS3でもアニメーションを付けることはできます!

欲を言えば・・・こんな知識もあると強い!

欲を言えば、

  • WordPress
  • PHP
  • レスポンシブwebデザイン
  • SEO対策

などの知識もあると、さらに良いですね!

えりー
WordPressにはPHPが使われています

私が実践した、苦手なコーディングを克服する方法

就職当初、コーディングがほぼ出来なかった私が実践した、苦手なコーディングを克服する方法を伝授したいと思います!

習うより慣れろ!とにかく手を動かすべし!

コーディングは頭で覚えようとしても難しいので、実際に手を動かして覚えましょう。ノートを取ったり、コードを丸暗記する必要はありません。

『どうしてもノートを取りたい!ノートを取らないと死んでしまう・・・!』という方は、いつも間違えてしまうところなかなか覚えられないことだけノートにメモしておきましょう。

えりー
自転車と一緒ですね!コーディングは体で覚えましょう!

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/
えりー
私のおすすめはProgateです!ゲーム感覚でコーディングを学べます♪

webサイト制作に必要な知識「だけ」を身につける。それ以外はググるべし!

HTMLだけでも膨大な量のタグが存在しますが、webサイト制作で実際に使うタグは数十個です。
マイナーなタグまで覚える必要はありません。

えりー
普段使わないタグは、必要になったらググればいいんです。

デベロッパーツールを使う

ブラウザでデベロッパーツール(Google Chromeだと、[Ctrl]+[Shift]+[I])を使うと、webページがどのようにコーディングされているのかがわかります。『いいな!』と思うサイトやコンテンツがあったら、デベロッパーツールを使って見てみましょう。

えりー
デベロッパーツールは頻繁に使うので、覚えておきましょう!

Adobe Dreamweaverを使えるようにする

エディタはとりあえずDreamweaverだけ使えればOKです!・・・と言っても、Dreamweaver自体は難しいソフトではないので、ご安心ください。使っているうちにすぐに慣れると思います。

えりー
「デザインビュー」ではなく「コードビュー」を使うようにしましょう!
コーディングのプチテクニック

背景が白だとwidthやmargin・padding等がわかりにくいので、各要素に仮でbackground-colorを指定してあげると、わかりやすくなります。

まとめ:苦手だからと諦めないで!

コーディングが苦手に感じてしまう理由は、経験値不足による思い込みです。

webデザイナーはコーディングスキルが絶対にあったほうが良いので、『苦手だから…』と諦めず、まずは挑戦してみましょう!

webデザイナーに必要なコーディングスキル
  • HTML
  • CSS
  • JavaScript(JQuery)

上記では、私が実践した、苦手なコーディングを克服する方法もご紹介していますので、ぜひ参考にしてみてくださいね!

レペゼン地球のDJ社長の動画の中で、「”今”は人見知りなのに、”私”人見知りに変わってくる」という言葉があります。

人見知りは初対面の人とのコミュニケーションが苦手なだけなので、コミュニケーションの練習をすればある程度克服できるはずなんですよね。でも、多くの人が「私は人見知りだから…」と頑張る前から諦めてしまうんです。

コーディングも同じです。今はコーディングが苦手なだけで、勉強すれば1年後はきっと苦手ではなくなっているはずです!自分に言い訳をせずに、チャレンジしてみましょう!

ABOUTこの記事をかいた人

猫と気ままに暮らすフリーランスwebデザイナー。
芸術学科卒 → 超ブラック企業のホームページ更新担当(正社員) → 正社員よりも稼ぐフリーター → 制作会社(バイト→正社員) → フリーランス(今ここ)
苦労もたくさんしてきましたが、やっぱりwebデザインは楽しい!これからwebデザイナーを目指す人にもwebの楽しさを伝えたい!そんな気持ちで記事を書いています。