コラム

デザイナーはHTMLを知っておくべき？コーダーはデザインを知っておくべき？

2026.01.19

ホームページ・Web制作において、「デザイン」と「コーディング（実装）」は切り離せない関係です。
今ではAIを使った制作もあるので、いまどきどーでもいいのでは？という声もあるとかないとか。
しかし、基本の「き」を知っているかどうかは、AIの成果物を判断する基準にもなるので、非常に大事です。

本題ですが、デザイナーはHTMLを知っておくべきでしょうか、コーダーはデザインを知っておくべきでしょうか。
実務では「自分はデザイン担当だから」「コードのことはエンジニアに任せている」「わたしは専門外」と同じ社内・チームなのに自分の領域に閉じこもってしまうケースも少なくありません。

結論から言えば、「どちらも相手の領域を知っているほうが、よりクオリティの高いプロダクトを生み出せる」ようになります。

1. デザイナーが「実装（HTML/CSS）」を理解する価値

デザイナーの最終的なアウトプットは、画像データ（FigmaやAdobe XDなど）ではなく、ユーザーがブラウザ上で触れる「動くWebサイト」です。
実装の仕組みを理解することは、デザインの精度を実際に触れるレベルへ引き上げることにつながります。

「実装不可能」や「非効率」なデザインの回避

ブラウザの描画特性や、CSSで実現しやすい表現（または困難な表現）を知ることで、コーダーからの「これ、再現できません」という手戻りを最小限に抑えられます。
デザインデータにおいても乗算が使用されてたり、ここが数ピクセル違うだけで、工数は半日変わる…なんてこともよくある話です。

Webサイトは「動くもの」という想像力

Webサイトは静止画ではありません。画面をスクロールした時の挙動、ボタンに触れた時の変化、データ読み込み中のスケルトンスクリーンなど、「時間軸」や「状態の変化」を考慮したデザインが必要です。
それぞれの状態をどうデザインするか、どう変わっていくかを考える必要があります。

アクセシビリティと構造への配慮

HTMLは、ハイパーテキストマークアップランゲージ（HyperText Markup Language）の頭文字を取ったものです。
あくまでもベースはテキスト = 文章なのです。
タグの構造（見出しレベルやボタン要素など）を意識することで、見た目が美しいだけでなく、検索エンジン（SEO）やスクリーンリーダーにも優しい、情報の整理が行き届いたデザインができます。

2. コーダーが「デザインの意図」を理解する価値

コーディングは、単にデザインをブラウザで見えるようにする作業ではありません。
デザインの背後にある「ロジック」を汲み取ることが、サイトの完成度を左右します。

デザインの「ゆらぎ」を正しく解釈できる

制作過程では、デザインデータ上の余白が数ピクセルずれていることもあります。
デザインの原則（整列、近接、反復など）を理解していれば、「ここは意図的なズレか、単なるミスか」を自分で判断し、最適な実装へと導けます。
デザインデータだと、他は75pxで揃ってますが、ここだけ73pxだったので、そうしよー…なんてことはよくある話です。

一貫性のある設計

「なぜこの場所でこのフォントサイズが使われているのか」という意図を理解することで、CSSの共通クラス化やコンポーネント設計がスムーズになります。
結果、メンテナンス性の高い、美しいコードが書けるようになります。

ユーザー体験（UX）への貢献

「この配置だとスマホでは指が届きにくい」「このアニメーションはユーザーを迷わせる」といった視覚的な違和感に気づき、コーダーの視点から改善を提案できるようになります。

3. 両者が歩み寄ることで生まれる「圧倒的な相乗効果」

お互いの領域に「10%〜20%」ずつ踏み込むだけで、プロジェクト全体にプラスが生まれます。

コミュニケーション

専門用語が共通言語となり、「あれ、これ」といった曖昧な指示が激減します。

制作スピード

実装を意識したデザインと、意図を汲んだコーディングにより、修正回数が劇的に減ります。

プロダクトの品質

|「見た目」と「機能」が高度に融合し、ユーザーにとってストレスのない体験を提供できます。

ちなみに個人的にUI/UXの参考にしているのは、ゲームです。
一目で見ればボタンとわかるデザイン、特に説明がなくてもなんとなくで操作できてしまうUI、複数の情報をどうグラフィカルに見せるか、といった学ぶべき箇所がたくさんあります。
また、新しいUIの発見にも繋がります。※特許はしっかり調べましょう。

4. 線を引かないことが武器になる

現代のホームページ・Web制作では、デザインと実装の境界線はどんどん曖昧になっています。
Figmaを使いこなすにはオートレイアウトのような「コーディング的思考」が求められたり、CSSのFlexboxやGridを使いこなすには「レイアウト設計の美的センス」が求められます。

「自分の専門外だから」と線を引くのではなく、「隣の領域を少しだけ知ってみる」。その気持ちが、単なる「作業者」ではない、付加価値の高いクリエイターへの第一歩となります。