こんにちは！未経験からWebデザイナーになった@AoiDesignです。
今回は、コーディングが苦手で何度も挫折した私が、どうやってその壁を乗り越えたのか、実際に使ったサービスや勉強プロセスをシェアしていきます。
こんな不安、ありませんか？
悩む人・コーディングができるようになるか不安
・HTMLをかじってみたけど全然分からない
・どのレベルまで勉強すればいいのか分からない
私も当時は、まさに同じ気持ちを抱えていました。
ただ、デザイナーとして6年やってきた今だから言えるのは、Webデザイナーがリアル現場で必要とされるコードスキルは、そこまで高くないということ。
さらに、今はChatGPTのようなAIがあるので、初心者でもAIをうまく活用すれば、コードは驚くほど簡単に書ける時代になっています。
この記事では、
- 本当に必要なコーディングスキル
- どのくらいのレベルを目指せばOKか
- 具体的な学習ステップやおすすめサービス
- 勉強でつまずいたときの解決法
をまとめています。
最後まで読んでいただければ、Webデザイナーに特化したコーディングの全体像と学習ステップが理解できるはずです。
それでは、さっそくみていきましょう。
この記事を書いた人
Webデザイナーに必要なコーディングって？
まずはコーディングについて簡単に説明しますね！
コーディングとは、Photoshopなどのデザインツールで作成したデザインを、実際にWeb上で閲覧できる形に変換する作業のこと。
<h1> や <p> といった「タグ」を使って、ソースコード（＝コンピューターに指示を出すための文章）を書いていきます。
例えば、こちらは以前に私が作ったサイトの一部です。
そして、そのページのコードはこんな風に書かれています。
コードを書くときは「エディタ」と呼ばれる編集ソフトを使います。
私はVisual Studio Code（通称：VS Code）という無料のエディタを愛用しています。
RIKAVS Codeは無料なのに高機能で、多くのコーダーやデザイナーに支持されている定番エディタ！おすすめです
Webデザイナーにとって必須のスキルではない
Webデザイナーにとって、コーディングスキルは必ずしも必須ではありません。
なぜなら、コーディングが不要な仕事もあるし、外注する方法もあるから。
私自身、コーディングが苦手だったので、駆け出しの頃はバナーやサムネイルなどの画像制作だけをやっていました。
また、フリーランス1年目にはペライチを使ったWeb制作を始めましたが、ペライチはノーコードツールなので、コーディングスキルは必要ないです。
もちろんコードの知識は、あるに越したことはないし、制作会社で働く場合は応募条件として必要なこともあります。
なので、将来的にどんな働き方をしたいか？、どんなものを作りたいか？によって必要かどうかが変わってくる感じですね。
詳しくは、下記の記事も参考にしてください。
Webデザイナー向けコーディング習得の3つのポイント
- 作りたいものから逆算して考える
- すべて暗記する必要はない
- 一度に全てを学ぶ必要はない
習得のポイント①：作りたいものから逆算して考える
まず、自分が何を作れるようになりたいのか？を考えることが大切です！
なぜなら、Webサイト一つとっても、何を作るかによって必要なコーディングスキルが変わるから。
たとえば、
- 本格的なオリジナルサイトを一から制作
- ランディングページ制作
- Studioなどのノーコードツールを使ったサイト制作
この3つでは、求められるスキルのレベルが異なります。
RIKA私は、ランディングページ（LP）を専門に制作していますが、例えば美容系やサプリメント、情報商材のLPなら、最低限のコーディングスキルで十分な場合が多いです。
なぜかというと、こうしたジャンルのLPはページの大部分が画像で作られているから。
PhotoshopやIllustratorなどでデザインを作ったら、それをブロックごとに画像として書き出し、コーディングで上から順に配置していく感じです。
コードで書くのは、ボタンやリンクなどの簡単な動きの部分だけですね。
一方で、BtoB用のサイトの場合は、その大半をコードを書いて作ることが多いので、より高いコーディングスキルが求められます。
こんな感じで、自分が作りたいものによって必要なスキルは変わります。その点を踏まえつつ、学習計画を立てるといいですね！
習得のポイント②：すべて暗記する必要はない
コーディングは、暗記する必要は全くありません。
というのも、コードは調べながら書けるし、よく使うタグは何度も書いているうちに自然と覚えるから。
また、コードを書く前には毎回書く基本の型がありますが、こういったものは使い回しができます。
つまり、テンプレートとして保存しておき、作成のたびにコピペして、必要な部分だけ編集する感じですね！
▼HTMLのテンプレート例
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ページタイトル</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
</body>
</html>私自身、初心者の頃も今も、コードを一から書くことはありません。テンプレ化して、毎回コピペでOKです！
特に、前述したVS Codeには、
- タグの候補を自動で表示してくれる
- 間違った箇所はエラーで教えてくれる
このような拡張・補完機能もあるので、ホント便利です。
さらに、今ではChatGPTのような神ツールもあります！
RIKAコードで分からないことは、ChatGPTで何でも解決できます！
私の初心者時代はなかったので、今から学ぶ人は本当に恵まれていると思います。
▼例えば、こんな感じで指示を出します
デザイナー左にロゴがあり、右にメニューとお問い合わせボタンがあるヘッダーのHTMLを書いてください
すると、ChatGPTがコードを作ってくれます。
<header class="header">
<div class="container">
<div class="logo">
<a href="#">MyLogo</a>
</div>
<nav class="nav">
<ul>
<li><a href="#">ホーム</a></li>
<li><a href="#">サービス</a></li>
<li><a href="#">会社情報</a></li>
<li><a href="#">お問い合わせ</a></li>
</ul>
</nav>
<a href="#" class="btn-contact">お問い合わせ</a>
</div>
</header>
これを土台にして、必要な箇所だけ編集していく感じですね。
こうした便利なツールはどんどん活用して、楽に！スピーディーに！コーディングスキルを身につけていきましょう。
習得のポイント③：一度に全てを学ぶ必要はない
コーディングは、一度に全てを学ぶ必要はありません。
まずは、超簡単なサイトが作れようになるだけで十分です！
Webスクールなどのカリキュラムの場合、課題として出されるサイトがけっこう複雑で難易度の高いことがあります。
実際、私が最初に受講したオンラインスクールもそのパターンで、コード初心者だった私はすぐに挫折しました・・・
コーディングの学習は、簡単なサイトから徐々にステップアップしていくのコツですが、
受講期間が短いスクールだと、慣れていない段階からそれなりのレベルが要求されることがあり、自信をなくしてしまう人も少なくないです＞＜
そうならないためにも、まずは超簡単なサイトから始めましょう。
RIKA私の話をすると、私は主にランディングページ制作を通じて、コーディングを学びました。
初期の頃は、スクールでもらったテンプレートを使って、画像中心のランディングページを作れるスキルを身につけ、それで受注を始めました。
半年〜1年ほど経った段階で、コードに慣れてきたので、さらに新しい教科書や講座を使ってスキルアップ。
その結果、より難易度の高いサイトも作れるようになりました。
こんな感じで、最初はそこまで高いスキルがなくても、実際にサイト制作をお仕事として受注することは可能です。
完璧を目指して何ヶ月も勉強ばかりしても、結局一円も稼げず飽きてしまったり、挫折してしまったり…それはもったいないですよね。
だからこそ、最初はシンプルで簡単なサイトを作れるスキルから始めて、実際に受注してみるのがおすすめです。
お仕事をこなしていく中で、徐々に実力レベルを上げていくのが、一番早く成長できる方法です！
コードが苦手だった私がHTML・CSSを習得した方法【4ステップ】
ここからは、私が実際にコーディングスキルを習得した方法を、ざっくり4ステップに分けて解説していきます！
おすすめの無料サービスや実際に使用した教材などもご紹介していくので、ぜひチェックしてみてくださいね。
- ProgateのHTML & CSSコースを3周する
- Webサイトのテンプレートをいじってみる
- 一から簡単なWebサイトを作ってみる
- 徐々に難易度の高いサイト制作に挑戦する
ステップ1：ProgateのHTML & CSSコースを3周する
まず、プログラミング学習の定番である「Progate」という有名なサービスを使いました。
RIKAかわいい忍者のキャラクターが横について教えてくれます♪
楽しく学べるので、私は挫折ぜずに最後までクリアできました！
Progateは無料で使えますが、コースによっては途中から有料のプラスプランが必要になります。
といっても、「1,490円（税込）/月」とめっちゃお手頃価格だし、月単位で契約できるので安心です。
最初の1〜3ヶ月だけでもいいので課金して、基礎をしっかり固めるのがおすすめですよ。
RIKA私はこの「HTML & CSSコース（初級編・中級編・上級編）」を一通り、3周しました。
| 1周目 | 最初は何がなんだか分からない部分も多かったですが、手を動かしてコードを書いていくうちに少しずつ慣れてくる。 |
|---|---|
| 2周目 | 1周目でやった内容の理解を深め、コードの全体像をつかめるようになる。 |
| 3周目 | 可能な限り答えやヒントを見ずに、自分の力でコードを書けるように練習。 |
もし中級・上級編が難しい場合は、とりあえず初級編を何度か繰り返すのもOK！
前述したように、コードは暗記する必要もなければ、一度で全部理解する必要もありません。
「全部覚えなきゃ…」と気負ってしまうと苦手意識が出てきて、挫折の原因になりやすいです。
最初は「へぇ、こんな感じで動くんだ〜」くらいの軽い理解で、どんどん進めていきましょう。
ステップ2：Webサイトのテンプレートをいじってみる
私はステップ2の段階で、デザインを学ぶためにオンラインスクールを受講していました。
「ゼロイチWebデザイン」というスクールで、詳細は別記事にまとめています。
このスクールは、Photoshopとバナー制作がメインのカリキュラムなので、コードについてはほんの少し触れる程度でした。
カリキュラム後半に「テンプレートを使ってHPを作成する」レッスンがあり、私はそこでコードを体験しました。
一からコードを書くのではなく、テンプレートを土台にして、
- テキストや画像を入れ替える
- 文字や背景の色を変える
といったカスタマイズをする内容です。
RIKAコードをガッツリ学びたい方には物足りないと思いますが、コードが苦手だった私にはちょうど良いレベルでした。
この「テンプレートをカスタマイズしてHPを作る練習」は、初心者におすすめで、ProgateでざっくりHTML & CSSを理解した後にやると、コードへの理解がより深まります！
HPのテンプレートについては、無料の配布サイトがいくつかあります。
カスタマイズのやり方
- 配布サイトからデータをダウンロードする
- エディタ（おすすめはVS Code）で開く
- HTML・CSSをいじって編集してみる
このように、テキストや画像を入れ替えたり、背景色を変更したりします。
「どこのコードを編集すると、どのように変化するのか？」を実際にいじりながら試していく、というイメージですね！
VS Codeでコーディングする方法は、別記事でまとめています。
ステップ3：一から簡単なWebサイトを作ってみる
次は、一からコードを書いていくステップです。
具体的には、デザインカンプをもとにコーディング練習を行いました。
この「デザインカンプからコーディング」の流れを、難易度を少しづつ上げながら取り組んでいきました。
デザインカンプは、こちらの配布サイトからダウンロードがおすすめ↓
Codejump
Adobe XDとFigmaのデータが無料でダウンロードできます。実務ではFigmaが主流なので、Figmaで練習するのがおすすめです。
このようなカンプを見ながら、同じレイアウト・デザインになるようにコードを書いていきます。
エディタは、前述したVS Codeを使うのがおすすめです。
具体的な使い方は、別記事にまとめています。
おすすめ教材：コーディング演習課題全部盛り
デザインカンプからのコーディング練習を本格的にやるなら、私のおすすめは 「コーディング演習課題全部盛り」 です。
前述した配布サイトのカンプで練習するのもいいんですが、この教材なら実務に近い練習ができて、かつプロからの添削サービスもついています。
RIKA累計販売数700万部突破の人気教材で、私自身も購入して、すべての課題を完走済みです！
コーディング演習課題全部盛り
- 本格的なコーディング演習ができる
- HTML初心者〜上級者までOK
- コーディング力に自信が付く！
- プロの本気レビューが受けられる
- オリジナルポートフォリオが作れる
- 実案件で使えるセルフチェックシート付き
＼ 即戦力が身につく！実践型の人気教材 ／
レビュー記事も書いているので、ぜひ参考にしてみてください。
ステップ4：徐々に難易度の高いサイト制作に挑戦する
最後は、徐々に難易度の高いサイト制作に挑戦するステップです。
ステップ3で紹介した「デザインカンプからのコーディング」をもとに、より上級のカンプに取り組んでいきました。
例えば、
- 複雑なレイアウトが組み込まれたサイト
- 複数の動き（アニメーション）が加わったサイト
- 装飾が多めでデザイン性の高いサイト
こうした実務に近いサイトにチャレンジすることで、実力がどんどん上がっていきます。
前述のおすすめ教材「コーディング演習課題全部盛り」 なら、初級から上級まで一貫して練習が可能です。
これなら課題探しをする必要がなく、カリキュラムに沿って進めるだけで、自然と初級〜上級とレベルアップできるのでおすすめですよ！
本でコーディングを練習する方法
教材ではなく、本を使って練習する方法もあります。
▼たとえば、初級〜中級向けならこちら
RIKA5つのサイト制作を通じて、コードテクニックを学んでいきます。
どれも今風のオシャレなデザインなので、楽しみながら作っていけますよ！
その他コーディングのおすすめ本は、別記事でまとめています。
コーディング学習でつまづいたらコレで解決！3選
- ChatGPTに聞く！
- MENTAでメンターを探す
- Webデザイン・プログラミングスクールを利用する
対処法①ChatGPTに聞く！
一つ目は、ChatGPTを活用することです。
コーディングのような作業は、まさにChatGPTが得意とする分野のひとつ！！
基本どんな質問でも答えてくれるので、勉強でも、お仕事の現場でも役立ちますよ。
例えば、コードを一から丸ごと書いてもらうこともできます。
あとは、自分で書いたコードがうまく反映されないときに、例えば
コード初心者ボックスを横並びにしたいけど、できません。どこが間違ってるのか教えて！
といった感じでコードを貼り付ければ、エラーや間違いを教えてくれます！
RIKA私は、ページに動きをつけるJavaScriptは、ChatGPTに書いてもらうことが多いです。
JavaScriptは、サイト制作でよく使われる言語ですが、私は正直ほとんど勉強していません…＞＜
というのも、よく使う動き（アコーディオンやスライダーなど）は、ネットにサンプルコードが豊富にあるから。それをコピペして編集するだけで、十分対応できちゃいます。
さらに今はChatGPTがあるので、「この動きを作りたい」と伝えれば、すぐにコードを生成してくれます。
ただし、ChatGPTのコードは必ずしも完璧ではありません。
たまに動かないコードや、おかしな表示になるコードが出てくることも…
なので、やはり基礎レベルのコード知識は持っておいた方が、上手に活用できますね！
対処法②MENTAでメンターを探す
ChatGPTなどのAIではなく、人に直接質問したい場合はMENTA（メンタ）がおすすめです。
MENTAは、その道のプロや現役エンジニア・デザイナーさんから、マンツーマンで質問対応やサポートをしてもらえるサービスです。
しかも、スクールに比べるとかなりお手頃価格！
▼例えば、こんなサービスがあります
「コーディング」カテゴリーのサービス一覧（2025.8）
- 未経験から3ヶ月プログラミング学習サポート
- Web制作の独学・営業・案件対応サポート
- 現役エンジニアがお悩み何でも解決サポート
RIKAちなみに…私もMENTAでサービスを出品しています！
ご相談はこちらからどうぞ
コーディング（HTML/CSS）の質問以外にも、こんな内容に対応しています。
- 未経験からWebデザイナーを目指す方へのお悩み相談
- スクール選びやスキル習得法、ポートフォリオの作り方のアドバイス
- デザイン添削やアドバイス
- Photoshopなどのデザインツールに関する質問対応
MENTAを初めて利用する方は、以下のリンクから登録すると500円割引クーポンがもらえます！
＼ 500円クーポンがもらえる！ ／
対処法③Webデザイン・プログラミングスクールを利用する
三つ目は、Webデザイン・プログラミングスクールを活用する方法です。
悩む人・独学でやったけど何度も挫折した
・カリキュラムに沿って一から体系的に学びたい
・卒業制作やポートフォリオ用の作品を作りたい
・専属の先生について、たくさん質問がしたい
こんな方は、スクールを受講した方が、早く効率よく習得できると思います。
私の実体験からいうと、特にコードが苦手な方はオンラインよりも対面スクールの方が合っていると思います。
その理由は、コーディングは人によっては難しく、挫折率が高いから。分からないことをその場ですぐ質問できる環境が、かなり大事になってきます。
自学が苦手な方や独学で何度も挫折している方は、対面で直接サポートしてくれるスクールの方が安心です！
とはいえ、私は過去に対面のプログラミング系スクールで失敗した経験があるので、「ここならおすすめ！」というスクールがないです…
一方で、オンラインスクールに関して言うと、私はデイトラをおすすめしています。
デイトラは、総受講者数30,000人超の国内最大級のオンラインスクールで、SNSの口コミから広まった人気サービス。
受講生の多くは、副業やフリーランス、転職を目指す20〜30代が中心です。
RIKA私もデイトラ受講生で、すでにWebデザインコースとShopifyコースを受講しています。なので自信を持ってオススメできます！
コーディング（HTML・CSS）を学びたいなら、Web制作コースが対象です。
もちろんWebデザインコースでもOKですが、コーディング力に特化して実力アップしたいなら、Web制作コースの方がいいですよ。
デイトラWeb制作コースの特徴
- HTML・CSSの基礎から実践まで学べる
- 業界最安級
- オンライン完結
- 1年間の質問対応つき
- 案件獲得の際に使えるポートフォリオが作れる
- プロのメンターによる課題レビューあり
- SNSで一緒に学ぶ仲間と繋がれる
＼ まずは体験してみよう ／
