目次
  1. はじめに
  2. グラフィックデザインとWebデザインは「別の言語」だった
  3. ギャップ①：ツールが「描くもの」から「記述するもの」へ
  4. Webで必要になったもの
  5. ギャップ②：カラーモードの「常識」が覆る
  6. ギャップ③：サイズの単位が変わる
  7. どうやって学んだか
  8. まとめ

はじめに

「フロントエンド言語でサイトを修正して」

ドメイン移管、メールサーバー移管と続いた後に来た、3つ目のむちゃぶりです。

この記事では、グラフィックデザイナーの視点からHTML/CSSを学んだ体験と、最初に「これは全然違う世界だ」と感じた3つのギャップをお伝えします。

グラフィックデザインとWebデザインは「別の言語」だった

グラフィックデザインとWebデザインは、見た目は似ていても根本的な仕組みが違います。

 グラフィックデザインWebデザイン
主なツールIllustrator / Photoshop / InDesignHTML / CSS / JavaScript
設計ツール紙にラフFigma / Adobe XD
出力先印刷物・固定サイズのPDFブラウザ（デバイスごとに可変）
デザインの単位mm・ptpx・rem・%・vw/vh
カラーモードCMYKRGB / HEX
レイアウトカンバス上で自由に配置（絶対座標）構造に沿った配置（流動的）

Illustratorで「ここにこの画像を置く」と直感的に配置していた感覚で、CSSのfloatやflexboxを触った時「なぜ右に寄せたいだけなのに、親要素や回り込みを気にしなきゃいけないの！？」と、自由度の低さに絶望しました・・

ギャップ①：ツールが「描くもの」から「記述するもの」へ

グラフィック時代のツール

グラフィックデザイナーとして長年使ってきたのはAdobeのツールです。

  • Illustrator：ロゴ・チラシ・図版など、ベクターデータの制作
  • Photoshop：写真加工・バナー画像の制作
  • InDesign：冊子・カタログ・パンフレットなどのページ物

どれも「画面上でビジュアルを作る」ツールです。完成形を目で見ながらデザインできます。

AdobeのツールはWebサイトの作成でもたくさん使います！
Webサイトに載せたい写真を加工したり、素材を作ったり・・
上記のようなツールが使えるのは、大変強みです！

Webで必要になったもの

Webデザインでは、ビジュアルをそのまま貼り付けるのではなく、コードで「どう見せるか」を指示します。

  • HTML：ページの構造（骨組み）を作る（見出し・本文・画像の配置など）
  • CSS：装飾をつけたり見た目を整える（色・フォント・余白・レイアウトなど）
  • JavaScript：動きをつける（メニューの開閉・スライダーなど）

llustratorなら色を変えた瞬間に画面が変わりますが、コーディングは「エディタで書く」→「保存」→「ブラウザを更新」というステップが必要です。

最初は“見ながら編集できない”ことに不便さを感じでいましたが、ブラウザの「検証ツール（デベロッパーツール）」の使い方を覚えてから世界が変わりました。

画面上の数値を直接いじってシミュレーションできる体験は、むしろ印刷物よりスピーディーだと気づいたのです。

検証ツール（デベロッパーツール）」は調べたい要素（ボタンやテキストなど）の上で 右クリック →「検証」 をクリックしてください。 （ショートカットは F12 または Ctrl + Shift + I（Macは Cmd + Option + I）です）

画面の右側（または下側）に、コードがびっしり書かれたパネルが表示されます。

ギャップ②：カラーモードの「常識」が覆る

グラフィックデザインはCMYK

印刷物を作るグラフィックデザインでは、カラーモードは「CMYK」が基本です。

CMYKとは、シアン（C）・マゼンタ（M）・イエロー（Y）・キー（K＝ブラック）の4色のインクを混ぜて色を表現する方式です。印刷機はこの4色のインクを使うため、印刷物のデータはCMYKで作るのが基本です。

WebはRGB・HEXコード

一方、Web（画面）ではカラーモードが「RGB」になります。

RGBとは、レッド（R）・グリーン（G）・ブルー（B）の光の三原色で色を表現する方式です。ディスプレイは光で色を表示するため、WebではRGBが使われます。

さらにCSSでは色を「HEXコード」という形式で指定します。例えば真っ赤なら「#FF0000」、白なら「#FFFFFF」のように、6桁の英数字で色を表します。

 CMYKRGB / HEX
使う場面印刷物Web・画面
色の仕組みインクを混ぜる（減法混色）光を混ぜる（加法混色）
Illustratorでの設定ドキュメントのカラーモード：CMYKドキュメントのカラーモード：RGB
CSSでの指定例—#FF0000（赤）/ rgb(255,0,0)

印刷用にCMYKで作っていたロゴやバナーをそのままWebに使おうとしたところ、画面で見ると色がくすんで全然違う印象になってしまいました。

CMYKはRGBより表現できる色の範囲が狭いため、鮮やかな色がくすんで見えることがあります。Web用にはカラーモードをRGBにして画像を作り直す必要があることを、このとき初めて知りました。

💡 Illustratorでは「ファイル → ドキュメントのカラーモード」からCMYKとRGBを切り替えられます。Web用のデータを作るときは必ずRGBに設定しましょう。既存のCMYKデータをRGBに変換すると色味が変わることがあるので、Web用には最初からRGBで作ることをおすすめします。

CMYKをRGBに変換した後に、もう一度CMYKにカラーモードを戻しても、以前の色には戻りません。
CMYK用のファイルのバックアップはきちんと取っておきましょう！

グラフィックでは特色扱いの色も自由に表現できて色彩が好きな方は色選びがとても楽しいと思います。

ギャップ③：サイズの単位が変わる

グラフィックはmm・pt

印刷物のデザインでは、サイズの単位は「mm（ミリメートル）」や「pt（ポイント）」が中心です。A4は210×297mmといったように、物理的なサイズで考えます。

Webはpxとremと・・・

Webでは単位が複数あり、使い分けが必要です。

単位意味使う場面
px（ピクセル）画面上の点1つ分画像サイズ・細かい余白など固定したいとき
%（パーセント）親要素に対する割合画面幅に合わせて伸縮させたいとき
remルート要素のフォントサイズを基準にした倍率フォントサイズや余白など
vw / vh画面の幅・高さに対する割合画面全体を使うレイアウトのとき

特に戸惑ったのは「固定のサイズで考えられない」という点です。

印刷物はA4なら必ずA4のサイズですが、Webはスマートフォン・タブレット・PCで画面サイズがバラバラです。

すべての画面で崩れないレイアウトを作る「レスポンシブデザイン」という考え方が必要になります。

実際に私もすべての要素をpxで固定したところ、PCでは正しく表示されるのにスマートフォンで確認したら完全に崩れていました。
Webは画面サイズが可変なので、固定値だけで作ると対応できないことを学びました。

%やremを使って「柔軟に変化するレイアウト」を意識するようになったのはこの失敗がきっかけです。

💡最初はpxだけで書いてもOKです。ある程度慣れてきてから%やremを取り入れていきましょう。
「難しそう」と感じたら、まず自分の好みのサイトのデベロッパーツールを開いて、どんな単位でどのような設定をしているのか見てみるのがおすすめです。

楽しく慣れていきましょう。

どうやって学んだか

私の学習方法はシンプルで、「ネット検索」と「とにかく手を動かす」の2本立てでした。

  • やりたいことが出てきたら「HTML CSS ◯◯ 方法」で検索する
  • 基礎的な概念はやりながら覚える。

「業務でやらなければいけないこと」が先にあったので、動画コースや体系的なカリキュラム、書籍をゆっくり読む時間もありません。必要なことをその都度調べる、「こうしたい！」と思う参考サイトを見つけて、デベロッパーツールを開いて構造を自分のツールに落とし込む作業をしていました。

書籍を読む時間がある方や、動画コースで勉強している方もとにかく勉強したことを実践してみる！とにかく手を動かしてみる！これが習得する近道だと思います。

グラフィックデザインでの経験・・「余白・フォント・配色」に対する感覚はそのまま使えるので、コードで実装する際に「どう見えるべきか」のイメージは最初からありました。
行動心理学のZの法則（人間が画面や紙面をみる時に左上から右下へと視線が動く現象）などもそのままWebで使えます。

まとめ

グラフィックデザイナーがHTML/CSSを学んで最初に感じた3つのギャップをまとめます。

ギャップグラフィックWeb
①ツールIllustrator / Photoshop / InDesignHTML / CSS/ JavaScript
②カラーCMYK（印刷向け）RGB / HEX（画面向け）
③単位mm・pt（固定サイズ）px・%・rem（可変サイズ）

これまで培ってきたデザインの知識は、Web制作においても決して無駄にはなりません。
コーディングという新しい道具を手にすることで、自分のデザインをデジタルな形へと落とし込んでいく過程を楽しんでください！

▶ 次回予告　おすすめのギャラリーサイトをまとめました。

自分の好きなデザインのサイトを見つけてWeb作成のモチベーションを高めましょう。