グラフィックデザイナーがWebデザインをする時に最低限守ってほしいこと
グラフィックデザインとWebデザインは似ているようで、前提がまったく違います。
本記事では、細かいテクニックではなく「これだけは守ってほしい」という最低限のポイントに絞って解説します。
正直、Webに関わるなら当たり前の内容ですが、ここを外すと実装時に大きなロスが出ます。実装で工数がかかると、追加費用が発生するケースもあります。
① デザインツールはWeb前提のものを使う
IllustratorでWebデザインをしない
IllustratorはWebデザイン用のツールではありません。
- アイコンなど部分的な制作 → OK
- ページ全体のデザイン → NG
理由はシンプルで、コーディングしづらいからです。
※実務的な話をするとIllustratorデータでも対応は可能ですが、その分工数が増えます。（弊社では約10%の追加費用をいただいています）
Figma / XDを使えばOK
現在の主流は以下です。
- Figma
- Adobe XD
どちらでも問題ありません。ちなみに、これから学習するならFigmaがおすすめです。
PhotoshopもOK（ただし条件あり）
PhotoshopでのWebデザインも可能です。ただし、Web前提の設定が必須です。
- 単位はピクセル（px）で統一
- 解像度は72dpi（Webでは大きな影響はありませんが一応）
② フォントは「見る人の環境」を前提にする
グラフィックと大きな違いです。Webは「見る人の環境」でフォントが変わります。
ローカルフォントは基本NG
以下はそのまま使うと危険です。
- ヒラギノ（Mac専用）
- 小塚ゴシック・明朝（Adobe依存）
- モリサワなど（個人環境依存）
これらはユーザーの環境によって別のフォントに置き換わります
游ゴシック・游明朝も注意
- MacとWindowsで太さが違う
- スマホでは別フォントに置き換わる
使ってもOKですが、差異は理解しておきましょう。
結論：Webフォントを使う
一番安全なのはこれです。
- Google Fonts → 基本これでOK
- Adobe Fonts → ライセンス注意
Adobe Fontsはクライアントサイトで使う場合、契約条件に注意が必要です。
Adobe Fontsのライセンスの記載です。
https://helpx.adobe.com/jp/fonts/using/webfont-licensing.html
Web フォントを顧客の web サイトに使用することはできますか？
いいえ。 利用条件ではこれは許可されていません。 フォントライセンスや web フォントホスティングが中断されないようにするには、顧客の web サイトは、独自の Creative Cloud サブスクリプションを通じて Adobe Fonts を読み込む必要があります。
③ 画面サイズはバラバラである
Webは「キャンバス固定」ではありません。
- 大画面モニター
- ノートPC
- スマートフォン
すべて表示サイズが違います。
デザインは崩れる前提で考える
Webは環境ごとに見え方が変わるため、完全に同じ見た目にはなりません。 重要なのは「破綻しないこと」です。
PC版とスマホ版はセットで作る
基本ルールです。
- PC版 → 横レイアウト
- スマホ版 → 縦レイアウト
ただし注意点
- コンテンツの構造は同じ
- 見た目だけを調整する
ここがズレると、実装コストが一気に上がります。
スマホデザインは400px前後でOK
- 横幅：400px前後
- 2倍サイズ（Retina前提）は不要
よく「2倍で作るべき」という情報がありますが、実務ではむしろ扱いづらくなることが多いです。
まとめ
かなり基本的な話ですが、重要なポイントはこの3つです。
- IllustratorでWebデザインをしない
- フォントは環境依存を理解する
- 画面サイズは固定ではない
特に、グラフィックデザインを中心にされている方は、この3点を意識するだけでも大きく変わります。
補足（正直な話）
ここまで読むと厳しく感じるかもしれませんが、逆に言うとこのレベルを押さえていれば十分です。細かい部分は後からいくらでも調整できます。
まずは「Webの前提を理解すること」。それだけでデザインの質は大きく変わります。
