デザイナーが「そのコード、実装できません」と言う理由｜職種間のズレを埋める対話術

2026年05月12日

クリオ

Web制作ディレクター / フロントエンジニア

こんにちは！

今日は「デザイナーが『そのコード、実装できません』と言う理由」について解説します。
これ、めっちゃリアルな現場の話なんですよ。

「実装できない」は何が原因なのか

僕も駆け出しの頃、デザイナーからもらったデザイン案を見て「これ、CSSだけで実装するの無理じゃないですか？」と言ってしまったことがあります。
その時のデザイナーの表情、今でも忘れられません。「えっ、なんで？」って感じの。

ほんまに多いのが、この「なんで実装できないの？」というズレ。
デザイナーからすると「こういう表現をしたいんです」っていう願いで、エンジニアからすると「ブラウザの制約や技術的限界」が見えてるんです。

例えば、こんなシーン：

これらって、デザイナーが「悪い」わけじゃないんです。
単に、デジタル表現の制約を全て把握してないか、制約があることを知らなかっただけなんですよ。

大事なのは、ここからです。
「できません」って拒否するんじゃなくて「こういう理由で、こういう選択肢があります」って提示することなんです。

これ、ほんま現場での揉める話題ナンバー1です。

デザイナーは「ビジュアル面での最高の体験」を追求します。
複数のフォント、高解像度の画像、複雑なアニメーション…全部が「美しさ」に繋がるから。

一方、エンジニアは「全てのユーザーが快適に使える状態」を追求します。
ページの読み込み速度が遅いと、モバイル回線の弱い環境ではストレスになりますし、離脱率も上がります。

僕が経験した失敗例を話しますね。

あるECサイトの案件で、トップページに15個の動画と20枚の高解像度画像がありました。
デザイナーは「これで高級感が出ます」って言ったんです。
実装してみたら、ページ読み込み時間が8秒かかりました。

実は、その後の分析で、3秒以上かかると30%のユーザーが離脱することが分かりました。
つまり、「美しさ」の追求が、実際のビジネス機会を失っていたんです。

じゃあ、どう解決したか。

遅延読み込み（Lazy Loading）の実装です。
最初は必要な画像だけ読み込んで、スクロール時に追加で画像を読み込む方式にしました。
すると、初期ロードが1.5秒になり、でもビジュアルは損なわない。

これ、デザイナーとの事前の相談があれば、もっと早く気づけたと思います。

<img loading="lazy">とか、picture要素での複数フォーマット対応とか、工夫する余地はめっちゃあるんですよ。

「実装できない」というズレをなくすには、コミュニケーションの質が全てです。

大事なポイントを3つ、お話しします。

デザインが完成してからエンジニアに投げるんじゃなくて、デザイン途中で相談するといいですよ。

「このアニメーション、こういう感じで実装できますか？」
「このフォント、何個まで使っても大丈夫ですか？」

こういう質問を早めにもらえると、デザイナーも制約の中で最高のデザインを作れるし、エンジニアも「あ、この表現ならCSS Gridで対応できるな」とか事前に考えられます。

デザイナーが「このフォントじゃなきゃダメです」って言ったら、「なぜですか？」って聞いてみるといいですよ。

「ブランドのイメージが出せるから」
「本文との対比で、タイトルが目立つから」

こういった背景が分かれば、エンジニア側も「では、このフォントで似たような表現をする案はどうですか？」って提案しやすくなります。

「できません」だけじゃなくて「こうしたらどうですか？」って複数案を出すことが大事です。

例えば：

こうやって選択肢を示すと「あ、こういう制約があるんだ」ってデザイナーも理解しやすいんです。

実は、最高のコミュニケーションって「相手の世界観を知る」ことなんですよ。
デザイナーも、エンジニアの制約を知れば。
エンジニアも、デザイナーの意図を知れば。
自然と「どうしようか」って一緒に考える姿勢が生まれます。

「デザイナーが『そのコード、実装できません』と言う理由」って、実は単純なんです。
技術的な制約か、パフォーマンスの制約か、ブラウザの互換性の制約か、アクセシビリティの制約か。
何らかの理由があるわけです。

大事なのは「できません」で話を終わらせるんじゃなくて「こういう理由で、こうしましょう」って、デザイナーと一緒に最高の着地点を探すことなんですよ。

デザイナーとエンジニアって、実は同じ方向を向いてるんです。
「ユーザーにとって最高の体験を作る」っていう目標で。
ただ、見てる世界が違うだけ。
その違いを理解して、対話するから、初めて素