▶ 3日で初案件PR
この記事でわかること
コーディング不要で受注できる案件の種類と見分け方がわかります。ノーコードツール（STUDIO）で納品範囲を広げ、単価10〜30万円台を目指す方法がわかります。外注費を見積もりに組み込んで利益を確保しながら案件を回す3ステップがわかります。
コーディングができなくてもWebデザイナーとして活動できます。デザインと実装を分業する体制は実務では一般的であり、外注・ノーコードを組み合わせれば案件獲得も可能です。この記事では、コーディング不要で受注できる案件の種類から、外注費を見積もりに載せるフローまでを解説します。
今のデザインの仕事で、一番近い悩みは？
この記事の結論
コーディングができないWebデザイナーがフリーランスとして活動する方法は大きく3つあります。デザイン専任・ノーコードツール活用・外注連携のいずれかを軸に決め、自分が対応できる範囲をクライアントに最初から伝えておくことが受注につながります。HTML/CSSの基礎だけは把握しておくと、デザイン段階での修正漏れやクライアントとの認識ズレを防げます。
最初に確認すること
自分が目指す働き方が「デザイン専任」「ノーコード実装込み」「外注連携型」のどれに近いかを確認することです（5分）。この3分類を把握してから案件を選ぶと、受注時の範囲確認とポートフォリオの方向性が決まりやすくなります。
状況別ショートカット
| 状況 | 読むべきセクション | 所要時間 |
| コーディングなしで受けられる案件を知りたい | Webデザイナー コーディングできないまま受けられる案件は3分類 | 3分 |
| ノーコードで実装まで担当したい | ノーコードで納品範囲を広げる2つの選択肢 | 4分 |
| 外注を使って案件を回したい | 外注連携で案件を完結させる仕組みは3ステップ | 4分 |
| HTML/CSSを最低限だけ学びたい | フリーランスが先に押さえるべきHTML/CSS知識は4領域 | 3分 |
| 自分の状況が今どれに当てはまるか確認したい | コーディングできないWebデザイナーの働き方を4パターンで診断 | 2分 |
Webデザイナー コーディングできないまま受けられる案件は3分類
実際にはデザインだけで完結する案件が一定数あります。コーディングができないことを理由に断り続けているとしたら、受注機会を逃している可能性があります。
判断基準1: デザイン成果物のみを求める案件
バナー制作・SNS用画像・サムネイル・パンフレット・名刺などは、デザインデータを納品すれば完了します。FigmaやAdobe XDで作ったデザインカンプをそのまま成果物として扱う案件もあります。クライアントがコーダーを別途持っているケースや、印刷物を扱う案件はこの分類に入ります。案件募集文に「デザインカンプの作成」「PSDまたはFigmaファイルで納品」と記載があれば、コーディングを求めていない可能性が高いです。
判断基準2: LP（ランディングページ）のデザインカンプ制作
LP制作案件には「デザインのみ」と「コーディングまで一貫」の2種類があります。募集文に「コーディングは別途対応予定」「デザインデータの納品のみ」と書かれているものがデザイン専任案件に当たります。LPのデザインカンプ制作は単価が1〜5万円台から始まることが多く、実績を積むうえでも着手しやすい領域です。
判断基準3: ディレクター・UI提案型の案件
クライアントが制作チームを持っていて、デザイン方向性の決定やワイヤーフレームの作成だけを外部に依頼するケースがあります。この種の案件では、FigmaやAdobe XDを使ったUI提案、デザインガイドラインの作成、配色・フォント選定などがスコープに含まれ、コーディングは求められません。フリーランスのWebデザイナーの仕事内容や独立に必要なステップでも解説しているように、実績が積み上がってくるとこのタイプの案件に声がかかりやすくなります。
CHECK
▶ 今すぐやること: クラウドソーシングサイト（ランサーズ・クラウドワークス）で「デザインカンプ」「バナー制作」のキーワードで案件を5件確認し、募集要件に「コーディング不要」と読める表現があるか確認する（10分）
Q: コーディング不要の案件だけでフリーランスとして食べていけますか？
A： バナーやSNS画像など単価の低い案件だけでは安定が難しい場合があります。LP制作や複数クライアントとの継続契約、ノーコードを組み合わせることで収入の幅を広げられます。完全にコーディング不要の案件のみに絞ると案件数に限りが出るため、後述の外注連携かノーコード活用を検討してください。
Q： 案件募集文でどう見分ければよいですか？
A： 「デザインカンプ」「PSD/Figmaファイルで納品」「コーディングは別途」「HTMLファイル不要」という表記があればコーディング不要の案件です。逆に「HTMLコーディングまで」「WordPress組み込みまで」と書かれていればコーディングが必要な案件と判断できます。
ノーコードで納品範囲を広げる2つの選択肢
デザインだけでは単価が上がりにくいのは事実です。ノーコードツールを使えば、コードを書かずに公開まで担当でき、単価交渉の材料になります。
選択肢1: STUDIO（デザイン重視のWebサイト向け）
STUDIOは日本語の操作画面があり、Figmaで作ったデザインをそのまま再現しやすい構成になっています。ブロックを組み合わせてレイアウトを作り、CSS知識がなくてもレスポンシブ対応が可能です。コーポレートサイトやポートフォリオサイト、LP制作での利用実績が多く、フリーランスが最初に触れるノーコードツールとして導入しやすいです。STUDIO公式で無料トライアルが利用できます。
noteの体験談（pompochi）では、STUDIOを覚えてからデザインカンプ+実装込みで受注できるようになり、単価が上がったと報告されています。
ただし、複雑な動的コンテンツや会員管理機能はSTUDIOでは対応が難しく、こうした要件が入った案件では別のアプローチが必要になります。
選択肢2: Webflow（英語圏クライアントや高単価案件向け）
Webflow公式はSTUDIOより学習コストが高い一方、英語圏でのフリーランス案件で需要があります。CSSの概念を視覚的に操作できる設計のため、ある程度のCSS理解があると操作しやすくなります。国内案件で使う場合は、クライアントへの説明コストが生じることがあります。
STUDIOから始めてWebflowへの拡張を検討するという順序が実務上無理がありません。どちらを選ぶにしても、ツールの得意領域とクライアントの要件を照合してから使い始めることが先決です。なお、ノーコードツールを活用したポートフォリオの作り方についてはポートフォリオデザイナー作り方｜未経験でも5ステップで完成も参考になります。
Q: ノーコードで制作したサイトの単価はどれくらいですか？
A： ノーコードツールを使ったLPやコーポレートサイトの制作費は、デザイン費込みで10〜30万円台が目安として言われています。クライアントの要件や実績によって幅があり、ツールだけで単価が決まるわけではありません。
Q： STUDIOで作ったサイトはSEOに影響しますか？
A： STUDIOはメタタグやOGP設定、サイトマップ出力に対応しています。基本的なSEO設定はツール内で完結できますが、外部サービスとの連携や細かいパフォーマンスチューニングはSTUDIOの�様に依存します。受注前に要件を確認してください。
コーディングできないWebデザイナーの働き方を4パターンで診断
自分の状況がどのパターンに当てはまるかで、次に取るべき行動が変わります。2分で確認できます。
Q1: 現在、納品物としてデザインカンプ（FigmaやPSDファイル）のみを求める案件を受けていますか？
Yesの場合はQ2へ、Noの場合はQ3へ進んでください。
Q2: その案件の単価や件数に満足していますか？
Yesなら→ Result A（デザイン専任型として継続。ポートフォリオの整理を優先）。Noなら→ Result B（ノーコード活用で納品範囲を広げることを検討）。
Q3: コーディングが必要な案件を受けようとして困っていますか？
Yesの場合はQ4へ、Noなら→ Result A（案件の取り方を見直す。デザイン専任案件に絞った提案文を作成）。
Q4: 外注コーダーとの連携や協力者はいますか？
Yesなら→ Result C（外注連携フローを整備する）。Noなら→ Result D（外注先を探しながらHTML/CSS基礎を並行して学ぶ）。
Result A: デザイン専任型として継続
現状の案件範囲でポートフォリオを整理し、得意領域を明確に打ち出します。バナー・LP・UIデザインに特化した実績を積み、継続案件につながるクライアントとの関係を優先します。
Result B: ノーコード活用で範囲を広げる
STUDIOのトライアルから始め、1件を納品まで試します。既存クライアントへ「公開まで対応できるようになりました」と提案するのが実績を作る早道です。
Result C: 外注連携フローを整備する
見積もりへの外注費の組み込み方と、コーダーとの作業分担を言語化します。後述の3ステップを参照してください。
Result D: 外注先を探しながら基礎を学ぶ
外注先の候補を2〜3件リストアップしつつ、HTML/CSSの基礎を週2〜3時間の範囲で進めます。どちらか一方だけに集中すると案件が止まるリスクがあります。
Q： フリーランス1年目でも外注は使えますか？
A： 使えます。ただし、外注先とのやり取りや品質確認を自分でコントロールできる状態にしておく必要があります。最初の1〜2件はクライアントへの納期に余裕を持たせ、確認工程を含めたスケジュールで進めてください。
Q： ノーコードかHTML/CSS学習か、どちらを先に始めるべきですか？
A： 今すぐ案件を増やしたい場合はノーコードを先に学ぶ選択が効率的です。長期的にコーディング案件も担当したい場合はHTML/CSS基礎を優先します。次の3か月で取りたい案件の種類で決めると迷いにくくなります。
PR提供: 日本デザインスクール（デザスク）
外注連携で案件を完結させる仕組みは3ステップ
外注を使うことで採算が合わなくなると心配になる方もいます。ただ、外注費を見積もりに最初から組み込む設計にすれば、利益を確保しながら案件を回せます。
ステップ1: 外注先の候補を3件リストアップする
クラウドワークスやランサーズで「HTML/CSSコーディング」「WordPress実装」を得意とするコーダーを探し、プロフィールと過去実績を確認します。実際に依頼する前に、小さな修正作業を1件試して対応速度と品質を確認しておくと、本番案件でのリスクを減らせます。外注先は1人に絞らず2〜3名を確保しておくと、急ぎの案件にも対応できます。
ステップ2: 見積もりに外注費を組み込む
デザイン費と外注コーディング費を分けて見積もる方法と、制作費一式として提示する方法があります。フリーランスの場合は「制作費一式」でクライアントに提示し、そこから外注費を差し引いた分が手元に残る設計にするケースが多くあります。外注費の割合が制作費全体の30〜40%を超えると手取りが薄くなりやすいため、デザイン作業の単価を適切に設定してください。
外注連携を始めると、最初の1〜2件は想定より時間がかかります。外注先への指示の作り方、確認のタイミング、修正の返し方など、経験してみないとわからないことが多く、noteの体験談（utsumi_kazuto）でも最初の案件で慌てたと記録されています。
ステップ3: 対応範囲をクライアントに事前に伝える
「デザイン制作とディレクションを担当し、コーディングは信頼できるコーダーと連携して進めます」という説明を最初の提案段階で伝えておくと、受注後のトラブルを防ぎやすくなります。外注連携であることをあえて隠す必要はなく、品質管理に責任を持つことを伝えることがクライアントの安心につながります。なお、外注費の経費処理や源泉徴収については外注費の源泉徴収が必要か3分で判定｜税率10.21%の計算と仕訳も確認しておくとよいでしょう。
CHECK
▶ 今すぐやること: クラウドワークスで「HTMLコーディング 修正 小口」を検索し、外注先候補を2名以上ブックマークする（15分）
Q: 外注コーダーに依頼する際のデータ形式は何を渡せばよいですか？
A： Figmaのデザインカンプと画像書き出し素材（JPG/PNG/SVG）を渡すのが標準的です。フォント情報・カラーコード・余白の数値・ブレークポイントの指定をデザインデータ内に記載しておくと、コーダーへの説明コストを減らせます。
Q： 外注費が想定を超えた場合はどう対応しますか？
A： クライアントへの追加請求は難しいことが多いため、最初の見積もり段階でバッファを含めておくことが現実的です。外注先への依頼仕様を詳しく書くことで、追加費用の発生リスクを減らせます。
フリーランスが先に押さえるべきHTML/CSS知識は4領域
JavaScriptまで学ばないといけないのかと学習範囲に迷う方は多くいます。コーディングが主業務でない場合、全部を学ぼうとするより優先領域を絞る方が実務に直結します。
領域1: HTMLの基本構造とセマンティクス
h1〜h6、p、div、section、header、footerの使い分けを理解することで、デザインしたレイアウトがコーダーに正しく伝わりやすくなります。デザイン段階でセマンティクスを意識しておくと、コーダーへの指示が具体的になり、修正依頼の回数が減ります。完全に覚える必要はなく、主要タグと用途の対応関係を把握しておけば十分です。
領域2: CSSのボックスモデルとレスポンシブの概念
余白（margin/padding）・横幅・高さの指定方法と、メディアクエリの仕組みを理解することで、デザイン段階でスマートフォン表示を意識したレイアウトを作れるようになります。デザイナーがレスポンシブを無視してPCデザインだけ作ると、コーダーが実装段階で判断を求めてくる箇所が増え、案件の進行が遅れることがあります。
領域3: デベロッパーツールでの確認操作
ブラウザのデベロッパーツール（F12キー）を使ってHTMLの構造とCSSの値を確認できると、表示崩れの原因がデザインにあるのかコーディングにあるのかを自分で切り分けられます。コーダーへの修正依頼が具体的になり、やり取りの回数を減らせます。
領域4: WordPressの管理画面と投稿・固定ページの概念
WordPressを使ったサイト案件では、テーマやプラグインの実装はコーダーが担当するとしても、クライアントへの引き渡し後の更新作業の説明を求められることがあります。管理画面の操作と、投稿・固定ページの違いを把握しておくと、クライアントへの説明が自分でできます。
Q： JavaScriptは学ばなくてよいですか？
A： コーディングを主業務にしない場合、JavaScriptの優先度は低いです。アニメーションや動的な機能が必要な案件を担当する予定がなければ、HTML/CSSの基礎を固めてからJavaScriptの学習を検討する順序で問題ありません。
Q： Webデザイナーがコーディングを学ぶ際の学習教材はありますか？
A： 基礎を学ぶ手段として、ドットインストールやProgateのHTML/CSSコースがよく使われています。どちらも無料プランで基本操作を体験できます。実際のサイトをトレースしながら作る「模写コーディング」も理解を深めやすい方法として知られています。
コーディング不要のWebデザイナーが案件を増やす5つのノウハウ
対応範囲を明確にしながら、得意領域に絞った受注を積み上げることが案件を増やす基本です。
ノウハウ1: 案件募集文から「コーディング不要」を見極めて即応募
【対象】: コーディング不要案件を効率よく探したいフリーランスWebデザイナー
【手順】: クラウドワークスやランサーズで「デザインカンプ」「バナー」「LP デザインのみ」のキーワードで案件を検索します（5分）。次に、募集文に「HTMLファイル不要」「PSDまたはFigmaで納品」「コーディングは別途」の表記を確認します（3分）。上記の表記がある案件を5件ブックマークし、提案文を送ります（30分）。
【コツと理由】: 「Webデザイナー 募集」で全案件を見ようとするより、「デザインカンプ」「バナー」など成果物名で検索した方がコーディング不要案件に絞り込みやすくなります。検索キーワードを成果物名に切り替えるだけで、応募候補の案件が変わります。
【注意点】: 「デザインのみ」と書かれていても、「納品後の修正対応」にコーディングが含まれる場合があります。提案前に「HTML納品は不要ですか？」と確認することで、受注後の認識ズレを防げます。
ノウハウ2: STUDIOで「デザイン+実装」の受注を始める
【対象】: デザイン専任から納品範囲を広げ、単価を上げたいWebデザイナー
【手順】: STUDIOの無料プランでアカウントを作成し、テンプレートを使って簡単なLPを1本作成します（2時間）。次に、自分のポートフォリオサイトをSTUDIOで作り、「STUDIO制作可」とスキルに追記します（3〜4時間）。最後に、既存クライアントか新規案件に「公開まで対応可能」として提案します（20分）。
【コツと理由】: 「自分のポートフォリオサイトをノーコードで作る」という実績を先に作ることで、クライアントへの説明がしやすくなります。ツールの理解と実績作りを同時に進めることで、学習期間中に発生する機会損失を抑えられます。
【注意点】: STUDIOは機能のアップデートが頻繁に入るため、学んだ操作が変わることがあります。公式ドキュメントを定期的に確認する習慣をつけておくと、アップデートによる混乱を減らせます。既存サイトのリニューアル案件では、旧システムからSTUDIOへの移行コストが想定より高くなることもあります。
ノウハウ3: ポートフォリオをデザイン専任用に作り直す
【対象】: コーディング不要のデザイン専任案件を安定して取りたいWebデザイナー
【手順】: 過去の制作実績からデザイン面での評価を受けたものを5〜7件選びます（30分）。各作品に「担当範囲: デザインカンプ制作」「コーディングはコーダーが担当」と明記します（1時間）。ポートフォリオページに「対応業務: デザイン・ディレクション（実装は連携コーダーと対応）」と記載します（15分）。
【コツと理由】: 「このデザイナーは何をどこまでやってくれるのか」がわかりやすいポートフォリオは、クライアントの判断コストを下げ、提案通過率が上がりやすくなります。対応範囲を隠すより明示する方が、長期取引につながるクライアントに選ばれやすくなります。
【注意点】: コーディングができないことを「できません」だけで記載すると、クライアントに不安を与える場合があります。「デザイン・ディレクションを担当し、実装は信頼できるコーダーと連携します」という書き方の方が、プロジェクト管理能力として評価されやすくなります。
ノウハウ4: 外注コーダーとの分担を「クライアントへの説明文」として整備する
【対象】: 外注連携で案件を受けているが、クライアントへの説明に迷っているWebデザイナー
【手順】: 「対応範囲の確認」という見出しで、自分とコーダーの担当領域を整理します（20分）。初回提案メールのテンプレートに、上記の対応範囲説明を組み込みます（30分）。受注後の最初のミーティングで、改めてスコープを確認します（10分）。
【コツと理由】: 「コーディングは外注で対応します」とだけ伝えて終わるのではなく、「デザイン・ディレクションを担当し、コーダーへの指示と品質管理は私が行います」という伝え方に変えることで、プロとしての関与を示せます。品質に責任を持つ立場であることを明示することで、外注を使っていることへのクライアントの懸念を減らせます。
【注意点】: クライアントの中には「外注を使うなら直接コーダーに頼む」と考える方もいます。そうした場合に「デザインのディレクションとクオリティ管理が私の役割です」と説明できる準備をしておいてください。外注を使うことを最初に伝えないまま進めると、納品後に信頼を損なうリスクがあります。
ノウハウ5: HTML/CSS基礎だけを先に学んで「確認できるデザイナー」になる
【対象】: コーディングは主業務にしないが、コーダーとのやり取りを円滑にしたいWebデザイナー
【手順】: ドットインストールのHTML入門・CSS入門コース（各30レッスン程度）を1週間で進めます（1日30〜40分、合計4〜5時間）。作ったデザインカンプのレイアウトをCSSで再現しようとしてみます（2〜3時間）。デベロッパーツールで既存サイトのCSSを確認し、自分のデザインと比較します（1〜2時間）。
【コツと理由】: JavaScriptやPHPから学ぼうとするより、「コーダーと会話できる程度のHTML/CSS」から始める方が、デザイン業務への直接的な効果が出やすくなります。コーダーとの修正確認で「余白の指定値」「フォントサイズの指定方法」を理解しているだけで、案件内でのやり取りの質が上がります。JavaScript以降は、実際に必要な案件が出てきてから学ぶで十分です。
【注意点】: HTML/CSS学習を始めると「全部習得しないといけない」という感覚に陥ることがあります。コーディングが主業務ではない場合、JavaScriptのDOM操作・Sass・ビルドツール・サーバー設定は後回しにしてよいです。学習を始めて1か月経ってもデザイン業務に活かせている実感がなければ、ノーコード学習に切り替えることを検討してください。
Webデザイナー コーディングできなくても仕事は取れる：今日から始める3つの行動
コーディングができないWebデザイナーがフリーランスとして活動する方法は、デザイン専任・ノーコード活用・外注連携の3つに整理できます。どの方向に進むにしても、自分の対応範囲をクライアントに最初から明示することが受注につながる共通の原則です。HTML/CSSの基礎はコーダーとのやり取りを円滑にするために把握しておく価値がありますが、JavaScriptやサーバー設定は案件で必要になってから学ぶ選択で問題ありません。
自分がコーディングできないことを対応範囲として明確にして得意なデザインで実績を積む方向に切り替えると、長期的に取引が続くクライアントとの関係が作りやすくなります。Yahoo!知恵袋の体験・意見でも、コーディングができないことを先に伝えたら、逆にデザインの仕事だけ任せてもらえるようになったという声が確認できます。
受注したい案件の種類を1つ決め、その案件に特化したポートフォリオ整理から始めてください。フリーランスとして安定した収入を得るための全体的な案件獲得戦略については、フリーランスが初営業で挫折しないためにも参考にしてみてください。
| 状況 | 次の一歩 | 所要時間 |
| デザイン専任案件に絞りたい | クラウドソーシングで「デザインカンプ」案件を5件確認 | 10分 |
| ノーコードを使ってみたい | STUDIOでアカウント作成→テンプレートで1LP作成 | 2〜3時間 |
| 外注連携を始めたい | コーダーを2〜3名リストアップしてメッセージを送る | 30分 |
| HTML/CSSの基礎を学びたい | ドットインストールHTML入門を1週間で完了 | 4〜5時間 |
Webデザイナー コーディング できないに関するよくある質問
Q: コーディングができないWebデザイナーは需要がなくなりますか？
A： デザイン専任の需要はなくなりません。デザインとコーディングを分業する体制は現在も実務で広く使われており、バナー・UI・LP制作では今後もデザイン専任の役割が続くと見られています。ノーコードツールの普及やAIによる自動化の進行に合わせて、デザイン判断力やクライアントとのコミュニケーション能力が相対的に重要になっています。
Q： WordPress案件はコーディングなしで受けられますか？
A： WordPress案件の内容によります。既存テーマを使ったサイトのデザイン変更・コンテンツ更新・画像差し替えはコーディングなしで対応できる場合があります。テーマ自作やプラグインのカスタマイズが必要な案件はコーダーへの外注が現実的です。受注前に「使用するテーマ」「カスタマイズの範囲」を確認してください。
Q： コーディングを学ぶ時間がない場合、何から始めるべきですか？
A： 時間が限られている場合は、ノーコードツール（STUDIO）の基礎操作を優先してください。HTML/CSS学習よりも短期間で納品範囲を広げる効果が出やすいためです。STUDIOの基本操作は数時間で把握できる範囲に収まります。並行してHTML/CSSを学ぶ場合は、週2時間を目安に無理のないペースで進める方が継続しやすくなります。
【出典・参照元】
Yahoo!知恵袋 Webデザイナー コーディングに関する体験・意見
noteの体験談（pompochi）STUDIOを使った受注経験