コードが苦手だった私がHTML/CSSを習得した方法【未経験からWebデザイナーへ】

こんにちは！Webデザイナーの@AoiDesignです。

Webデザイナーを目指す方にとって「コーディングスキルの習得」は一つの大きな壁だと思います。

一方、今はAIのおかげで驚くほど簡単にコードがかける時代になりました。

そうなると、

こんな疑問を抱える方も多いはずです。

そこで今回は、6年以上の実務経験から分かった「Webデザイナーに必要なコーディングスキルと学習法」を解説していきます。

さっそくみていきましょう。

Webデザイナーに必要なコーディングスキル

まず、そもそも論のお話になりますが、

コーディングスキルは「Webデザイナーにとって必須のスキル」ではないです。

また、最近ではAIの発達によって「テキストで指示を出すだけでコードを生成」してくれるようなツールもあります。

そう考えると、本当に苦手だった場合は、ムリしてコーディングをやる必要はないと言えます。

ただし、そうはいっても、コードの知識はあるに越したことはないです。

なぜかというと、まず「コーダーさんの作業効率を考え、コーディングしやすいデザインデータを作れるスキル」というのは、結構大事だから。

また、私のような零細フリーランスの場合は、デザインに加えてコーディング工程も合わせて受注した方が、単価が高く稼ぎやすいからです。

ただ、いづれにせよ、Webデザイナーに必要なコーディングスキルというのは、けっこう限られています。

ここからは、Webデザイナーに特化したコーディング学習のポイントを解説していきますね。

【Webデザイナー向け】コーディング学習の3つのポイント

①作るものから逆算して考える

一つ目は、自分が作りたいものから逆算して必要なスキルを身につけることです。

なぜなら「Webサイト」といっても、何を作るかによって必要なコーディングスキルが変わるから。

例えば、

例えば、私は④のLPを専門に制作するデザイナーです。

LP制作で必要になるコーディングスキルは、通常の「HP制作」で求められるスキルと比べると、かなり限られています。

特に、美容系や健康系、情報商材系の分野に多い「画像」が主体のLPが、その典型です。

このタイプのLPは、ページの大部分を画像をつなぎ合わせて作ります。

なので「ボタン部分の実装」や「リンクの設置」など、最低限のコーディングスキルで十分なんですね。

一方で、企業サイトなどを作る場合は、その大半をコードを書いて作るので、本格的なコーディングスキルが必要になってきます。

こんな感じで、制作するものによって必要なコードスキルが異なります。

必要ないレベルまで学んで挫折してしまうのを避けるためにも、まずは自分に必要なコーディングレベルをざっくりと把握することが大切ですね。

②一からコードを書く必要はない

AIが発達した今の時代「一から自分でコードが書ける力」はもう必要なくなりました。

必要なのは「AIが書いたコードを調整や修正する力」です。

現時点ではまだ、一度や二度の指示で完璧なコードを生成するのは難しいので、大体は修正が必要になります。

それでも、基本的なHTML/CSSの知識さえあれば修正可能ですよ。

また、私は「VS Code」というエディタツールを使ってコーディングを行っています。

このツールでは、例えば

こういった補完機能がついているので、とても便利です。

③一度に全てを学ぶ必要はない

3つ目の学習ポイントは「コーディングは一度に全てを学ぶ必要はない」ということです。

Webデザインスクールなどで学ぶ場合、課題で出される練習サイトが、けっこう難易度が高かったりします。

私が実際にそうでしたが、初心者で受講したスクールの課題が難しすぎて、すぐに挫折しました。

特に受講期間が短いスクールだと、慣れていない段階からハイレベルが要求され、自信をなくしてしまう方も多いです。

例えば、通常「HTML/CSS」の学習の後出てくる「JavaScript/jQuery」「WordPress」などは、後回しでも全然大丈夫かと思います。

「HTML/CSS」だけでも、作れるサイトの種類はたくさんありますよ。

それに私は「JavaScript/jQuery」は超苦手なので、今はAIに丸々コードを書いてもらうか、ネットで拾ったコードをコピペで利用させてもらっています。

【4ステップ】私がHTML/CSSを習得した方法

ここからは、私が実際にコーディングスキルを習得した方法を「4ステップ」で解説していきます。

①Progateの「HTML & CSSコース」を3周する

私はまず最初に「Progate」という有名な学習サービスを使いました。

Progate（プロゲート） とは？
初心者向けのプログラミング学習サービス。手を動かしながら、段階的にコードの知識やスキルを身につけられます。

この「HTML & CSS 初級編と中級編」を3周して、コーディングの全体像を把握した感じです。

1周目	最初は何がなんだか分からない部分も多かったですが、手を動かしてコードを書いていくうちに少しずつ慣れてくる。
2周目	1周目でやった内容の理解を深め、コードの全体像をつかめるようになる。
3周目	可能な限り答えやヒントを見ずに、自分の力でコードを書けるように練習。

「上級編」は、できそうな方だけやればいいと思います。

Progateは無料で使えますが、コースによっては途中から有料のプラスプランが必要になります。

といっても「1,490円（税込）/月」とかなりお手頃価格だし、月単位で契約できるので安心です。

1〜3ヶ月だけでもいいので課金し、まずは基礎固めをしっかりするのがおすすめです。

②Webサイトのテンプレートを編集してみる

次が、Webサイトのテンプレートを編集してみるステップです。

自分でコードを書いてサイトを作るのではなく、完成したサイトをいじってみるだけです。

具体的には、

といったカスタマイズをします。

カスタマイズ方法

③一から簡単なWebサイトを作ってみる

ステップ3では、一からコードを書いていきます。

私は、無料で配布されている「デザインカンプ」を元におこないました。

デザインカンプとは？
PhotoshopやFigmaなどで作られたデザインデータのこと。実務ではカンプを元にコーダーがコーディングを行います。

デザインカンプは、こちらの配布サイトがおすすめです。

Codejump 作って学ぶコーディング学習サイト
「Adobe XD」と「Figma」のデータが無料でダウンロード可能。主流になりつつある「Figma」で練習するといいと思います。

▼具体例

このようなカンプを見ながら、同じレイアウト・デザインになるようにコードを書いていきます。

エディタは前述した「VS Code」を使うといいと思います。

おすすめ教材：コーディング演習課題

デザインカンプからのコーディング練習を本格的にやるなら、私のおすすめは 「コーディング演習課題」 です。

実務と同じ流れで練習ができ、かつプロからの添削サポートもついています。

▼受講レビューも書いています。

④少し難易度の高いWebサイトに挑戦してみる

最後のステップは、少し難易度の高いWebサイト制作への挑戦です。

ステップ3の練習と同じですが、より難易度の高いデザインカンプに取り組んでいきます。

実務に近いサイトへ挑戦することで、ドンドン実力が上がっていきますよ。

実力レベルが上がる良質な「デザインカンプ」の探し方

前日した「コーディング演習課題全部盛り」 なら、初級〜上級までレベルごとに難易度を上げて練習ができます。

また、書籍を買って練習する方法もあります。

▼具体例

▼その他のおすすめ本は、別記事でまとめています。

コーディング学習でつまずいた時の3つの解決策

①ChatGPTなどAIを使う

1つ目は、ChatGPTをはじめとするAIを活用する方法です。

チャッピーは無料で使えるし、基本的にどんな質問にも答えてくれます。

例えば、

といった感じで質問すると、間違いや解決策を教えてくれます。

やはり有料版のほうが、回答の精度が高いですね。

また、質問数やファイル追加の制限もないので、思い切ってどんどん使えます。

これからAIを使って勉強する方は、学習期間の数ヶ月だけでも、有料プランに入っておくのがおすすめですよ。

②MENTAで質問をする

AIではなく、人に質問したい方には「MENTA（メンタ）」がおすすめです。

MENTAとは？
その道のプロや現役エンジニア・デザイナーさんから、マンツーマンで質問対応やサポートをしてもらえるサービス。

有料のサービスですが、デザインスクールなどと比べるとお手頃価格で購入できます。

▼こんなサービスがあります

初回利用する方は、以下のリンクから登録で「500円割引クーポン」がもらえます。

＼ 500円クーポンがもらえる！ ／

③Webスクールを利用する

3つ目は、Webデザインやプログラミングなどのスクールを活用する方法です。

デイトラは、未経験からWebスキルを学べるオンライン学習スクール。

受講生の多くは、IT企業への転職、副業やフリーランスを目指す20〜40代の男女です。

コーディング（HTML・CSS）を学びたいなら「Web制作コース」が対象になります。

＼ 無料レッスン動画も見れる／

▼受講レビューも書いています。