Cursorでダークモードを後付けする方法｜専門知識なしで実装

「自社サイトをダークモードに対応させたいけれど、制作会社に頼むと費用も時間もかかる」「かといって、自分たちでCSSをいじるのは怖い」。そんなふうに足踏みしていませんか。

結論から言うと、いまはAIコードエディタのCursorを使えば、専門知識がなくてもダークモードの後付けは現実的にできます。この記事では、Cursorへの具体的な頼み方、最初にやるべき3ステップ、公開前の確認、そして起こりやすい失敗の防ぎ方までを、順番に解説します。読み終わるころには「自社でどこまでやれて、どこをプロに任せるべきか」の判断がつくはずです。

Contents / 目次

1. まず押さえるべき結論。ダークモードは「3つの判断」で決まる
2. Cursorでダークモードを実装する具体的な手順
3. ダークモード対応で、実際どんな変化が起きるか
4. よくある失敗と、その防ぎ方
5. 導入前に知っておきたい落とし穴と妥協点
6. よくある質問

まず押さえるべき結論。ダークモードは「3つの判断」で決まる

ダークモードの実装と聞くと、いきなり「コードをどう書くか」を考えがちです。ですが、最初に決めるべきはコードではありません。次の3つを先に決めると、Cursorへの指示がブレなくなり、やり直しが激減します。

• 切り替え方式：来訪者のスマホ設定に自動で合わせるか、画面上のボタンで手動切り替えできるようにするか。
• 色の設計：背景を真っ黒にするのか、少し明るいダークグレーにするのか。文字色やアクセントカラーをどうするか。
• 対象範囲：サイト全体を一気に変えるのか、まずトップページだけ試すのか。

ここで言う「切り替え方式」を、かんたんに言うと2タイプあります。ひとつは、来訪者が使っているスマホやパソコンの設定（OS全体がダークモードかどうか）を読み取って自動で合わせる方式です。もうひとつは、サイト上に月マークのボタンを置いて、来訪者が好きなときに切り替えられる方式です。どちらが正解ということはありません。まずは自動対応だけで始め、手動ボタンは必要になってから足す進め方もできます。

3つの判断を一覧にすると、こう整理できます。自社がどれを選ぶか、読みながら当てはめてみてください。

判断ポイント	かんたん設計（おすすめの第一歩）	こだわり設計
切り替え方式	OS設定に自動で合わせるだけ	自動＋手動ボタンの両対応
色の設計	背景はダークグレー、文字は明るいグレー	ブランドカラーに合わせて細かく調整
対象範囲	トップ＋主要1〜2ページから	全ページ＋画像・図版も最適化
かかる手間	半日〜1日でテスト公開まで可能	数日〜。確認と微調整が必要

ポイント。いきなり全部を完璧にしようとしないこと。まず「自動対応だけ」「主要ページだけ」で小さく出して、反応を見てから広げるのが、もっとも失敗しないやり方です。

Cursorでダークモードを実装する具体的な手順

ここからは実際の進め方です。Cursorは、ひとことで言うと「AIに話しかけながらサイトの中身を直してくれるエディタ」です。コードそのものを自分で書く必要はなく、日本語で「こうしたい」と伝えれば、AIが該当箇所を探して書き換えてくれます。とはいえ丸投げでは思った通りになりません。順番が大事です。

最初にやるべき3ステップ

• ステップ1。バックアップを取る：作業前に、必ず今のサイトのファイル一式をコピーして別フォルダに保存します。Gitを使える人は、新しいブランチを切ってから作業しましょう。「元に戻せる状態」を作ってから触るのが鉄則です。
• ステップ2。色のルールを先に言葉にする：「背景は濃いグレー、本文の文字は少し明るいグレー、リンクとボタンは今のオレンジを少し明るめに」のように、色の方針を日本語でメモしておきます。これがそのままAIへの指示になります。
• ステップ3。1ページだけで試す：いきなり全ページではなく、トップページなど1枚だけで試します。うまくいったやり方を、あとから他ページに横展開する流れです。

Cursorへの頼み方（指示の型）

Cursorのチャット欄に、次のような形で頼みます。あいまいな「いい感じにダークモードにして」ではなく、具体的に伝えるのがコツです。

指示の例。「このサイトにダークモード対応を追加してください。来訪者のOS設定がダークのときだけ自動で切り替わるようにします。色はCSS変数で管理し、背景は#1a1a1a、本文は#e0e0e0、リンクは今のオレンジを少し明るくした色にしてください。既存のレイアウトやクラス名は変えず、色の指定だけを追加してください。」

ここで「CSS変数で管理して」と伝えているのには理由があります。CSS変数とは、かんたんに言うと「色に名前をつけて一か所でまとめて管理する仕組み」です。たとえば「背景色」という名前の箱に色を入れておけば、あとで色を変えたいとき、その箱だけ書き換えれば全体に反映されます。これを最初に頼んでおくと、あとの微調整がぐっと楽になります。

もうひとつ大事なのが、「既存のレイアウトは変えず、色だけ追加して」と必ず指定することです。これを言わないと、AIが親切心でレイアウトまで作り直してしまい、思わぬ崩れが出ることがあります。範囲を狭く区切るのが、AIに作業させるときの基本です。

手動切り替えボタンも付けたい場合

「来訪者が自分で切り替えられるボタンも欲しい」という場合は、続けてこう頼みます。「画面右上に、ライトとダークを切り替えるボタンを追加してください。来訪者が選んだ状態は、次に来たときも覚えているようにしてください」。この「覚えておく」という部分は、ブラウザに設定を保存する仕組み（localStorage）を使うことで実現できますが、難しい言葉は知らなくても大丈夫です。「次に来ても覚えておいて」と日本語で伝われば、AIが適切な方法を選んでくれます。

なお、Cursorには、Agents Window内のブラウザで、表示したページのボタンや見出しを直接クリックして「ここをこう変えて」と指示できる「デザインモード（Design Mode）」という機能もあります（2026年10月時点）。コードのどこを指しているのか分からない、という悩みが起きにくくなる仕組みです。最新機能の仕様は変わりやすいので、詳しい使い方はCursorの公式ドキュメント「デザインモード」を確認してください。

サイトの修正作業そのものをCursorに任せるコツは、CursorでWordPress修正｜コードが読めなくても自分で直す手順でも詳しく解説しています。あわせて読むと、ダークモード以外の更新作業にも応用が利きます。

ダークモード対応で、実際どんな変化が起きるか

では、対応するとどんな良いことがあるのでしょうか。正直に言うと「ダークモードにしただけで問い合わせが倍増する」ような魔法はありません。ですが、地味だけれど確実な効果はいくつかあります。

• 「ちゃんとした会社」という印象：BtoBでは、サイトの細部が信頼につながります。来訪者のスマホがダークモードなのに、自社サイトだけ目に刺さるような白背景だと、それだけで「古いサイト」という印象を与えかねません。
• 夜間・長時間閲覧での読みやすさ：暗い環境で長く読むユーザーにとって、目への負担が軽くなります。資料的なページや、じっくり読ませたい導入事例ページとは相性が良いです。
• 省電力という副次効果：有機EL（OLED）の画面では、黒い部分の消費電力が抑えられる特性があるとされています。スマホで長く見てもらうサイトでは、地味に効いてきます。

成果という観点で見ると、ダークモード対応そのものよりも「AIで自社サイトを自分たちで直せる体制が手に入る」ことのほうが、はるかに大きな価値になります。たとえば、これまで制作会社に「色を変えたい」と依頼して数日待っていた作業が、社内で半日で試せるようになります。年間で何回も発生する小さな修正をすべて外注していたとして、その都度の依頼・見積もり・確認のやり取りがなくなるだけで、担当者の体感工数はかなり軽くなります。

内製化を進めるなら、いきなり大改修をしないことです。まずダークモードのような分かりやすく区切れる作業でAIエディタに慣れてから、フォーム改修やページ追加へと範囲を広げると、確認の手間を抑えられます。自社サイトが時代に合っているか不安な方は、AIサイト診断のやり方もあわせて確認してみてください。

よくある失敗と、その防ぎ方

ここが一番大事なところです。AIに任せると速いぶん、確認を怠ると事故も起きます。起こりやすい失敗を、3つの状況別に紹介します。

失敗1。文字が背景に溶けて読めない

AIが背景を暗くしたものの、文字色や、もともと薄いグレーだった注釈・キャプションの色を変え忘れ、暗い背景に暗い文字が乗って読めなくなる、という状況で起きます。とくにボタンの中の文字や、表のヘッダー部分で起きがちです。

防ぎ方は、公開前に必ず「文字と背景のコントラスト（明暗の差）」を目視で確認することです。読みやすさの目安として、ウェブのアクセシビリティの国際的な指針であるWCAGは、文字と背景のコントラスト比を4.5対1以上にする基準を示しています（W3C「Understanding Success Criterion 1.4.3: Contrast (Minimum)」）。難しければ、Cursorに「すべての文字が背景に対して読みやすいコントラストになっているか確認して、足りない箇所を直して」と追加で頼むと、抜けを拾ってくれます。

失敗2。画像やロゴが反転して変な色になる

背景を暗くする処理を雑にかけると、写真やロゴ、図版まで色が反転してしまい、商品写真が不自然な色になる、という事故が起きます。とくに白背景前提で作られたロゴ画像は、暗い背景に乗ると周囲だけ白く浮いて見えることがあります。

防ぎ方は、最初の指示の段階で「画像・写真・ロゴの色は変えないでください」と明記しておくことです。ロゴが暗い背景で浮く場合は、白背景前提のロゴとは別に、暗い背景用のロゴ画像を用意して出し分けるのが確実です。

失敗3。AIがコードを盛りすぎて重くなる

「全部いい感じにして」と大きく頼むと、AIは要求を満たそうとして余計なコードを何重にも足してしまい、ページの表示が遅くなったり、後から直しづらくなったりします。これはAIが、目の前の指示をその場で解決することを優先し、長期的な保守やページの軽さまでは考えないために起きます。

防ぎ方は、指示を小さく区切ることです。「ダークモードの色だけ」「次にボタンだけ」と一回ずつ範囲を絞り、変更後は毎回サイトを表示して確認してから次へ進みます。一度に全部を作らせないのが、結果的にいちばん速く、きれいに仕上がります。

AIが生成したコードは、構文として正しくても、論理的なミスやセキュリティ上の穴、無駄な処理を含むことがあります。本番に反映する前に、必ず動作確認とレビューをしてください。「動いたから完成」と見なすのが、いちばん危ない判断です。

導入前に知っておきたい落とし穴と妥協点

ここまで読んで「意外と自分でいけそう」と感じた方もいるはずです。実際、ダークモードの後付けはAI内製化の入り口として最適です。ただ、正直にお伝えしておきたい現場のリアルもあります。

まず、WordPressなどのCMSで動いているサイトは、見た目以上に手強いことです。テーマやプラグインが複雑に絡み合っていると、CSSを足しても効かない、特定のページだけ崩れる、ということが起こります。シンプルなHTMLサイトより、確認と調整に時間がかかると見込んでおいてください。ここは「自社サイトの作りがどうなっているか」次第で、難易度が大きく変わります。

次に、アクセシビリティ（誰にとっても使いやすいこと）の細やかな配慮は、AIだけでは抜けがちです。色覚に特性のある方への配慮や、支援技術を使う方への対応など、人の目でしか気づけない部分が残ります。「とりあえず暗くなった」のと「誰が見ても快適」の間には、けっこうな距離があります。

そしてコストの見落とし。AIエディタ自体は安く始められますが、本当に時間がかかるのは「確認」と「微調整」です。色の出方をブランドに合わせて詰めていく作業や、全ページの崩れチェックは、地味で時間を食います。ここを軽く見積もると「思ったより終わらない」となります。

だからこそ判断軸はシンプルです。シンプルな構成のサイトで、まず試してみたいなら自社で十分やれます。一方で、CMSが複雑、ブランドの色にこだわりたい、アクセシビリティまできちんと担保したい、という場合は、最初だけプロと一緒に型を作ってしまうほうが、結果的に速くて安全です。ダークモード単体ではなく、その先のサイト全体の内製化まで見据えるなら、なおさらです。サイトをアプリのように使ってもらう工夫についてはCursorでPWA化する手順も参考になります。

よくある質問

サイトの見た目も含めて、リニューアルを検討している方は、コレットラボのホームページ制作・LP制作をご覧ください。スマートフォン版を先に設計してから、その内容をパソコンの画面幅に合わせて配置し、公開前にどちらでも文章とリンクを確認します。