グラフィックデザインとWebデザインは、それぞれ異なる特性を持つため、グラフィックデザイン出身のデザイナーがWebデザインを行う際には、いくつかの点に注意する必要があります。しかし、適切な知識と準備があれば、グラフィックデザイナーの強みを活かして魅力的なWebデザインを作成することができます。

本記事では、グラフィックデザイナーがWebデザインを作成する際に役立つ10の秘訣をご紹介します。これらの秘訣を参考に、Webデザインのスキルを磨き、

1.デバイスの多様性を意識する

Webデザインはデスクトップモニターだけでなく、スマートフォンやタブレットなど様々なデバイスで閲覧されます。ですから、様々なデバイスやスクリーンサイズに適応できるデザインが良いです。

特にモバイルファーストのデザインで作るケースが多いです。モバイルファーストのデザインアプローチが重要です。

2.カラーの違い【RGB】

めちゃくちゃ基本になりますが、WebデザインではRGB（Red, Green, Blue）カラーモデルが使用されます。（グラフィックデザインは、CMYKという紙で見える色を使う）

Webデザインでは、RGBカラーモデルを使用して色を指定します。 CSSを使用して、16進数表記（例: #FF0000）やRGB関数（例: rgb(255, 0, 0)）を使って色を指定します。 色の選択には、色相、彩度、明度を考慮し、ブランドイメージや目的に合った色を使用します。 アクセシビリティを考慮し、十分なコントラスト比を確保することも重要です。

3.フォントはpxで指定！

パンフレットやチラシといった紙媒体は、フォントは「pt（ポイント）」で指定すると思います。Webデザインではピクセル（px）がフォントサイズの指定に使われます。

さらにコーディングをする時にはpxだけではなくパーセント（%）、em、remなどの単位が使用されます。

使い分けとしては以下の通り

• 固定的なサイズが必要な場合は、pxを使用します。
• 親要素に対して相対的なサイズ指定が必要な場合は、%やemを使用します。
• ルート要素に対して相対的なサイズ指定が必要な場合は、remを使用します。

デザイナーとしては、これらの単位の特性を理解し、デザインの意図が正確に伝わるようにコーダーに指示できると良いです。

4.画像サイズで630.456pxではなく、630pxに！

これはつまり、pxで画像サイズを指定する時には、小数点を避けるべきということです。

理由はWebの最小単位が1ピクセルであるためです。小数点以下の値を含む画像サイズを指定すると、ブラウザは画像を拡大縮小して表示しようとします。拡大縮小の過程で、画像の品質が低下し、ぼやけたり、ジャギー（乱れ・ノイズ）が生じたりすることがあります。

あと、小数点以下の値を含む画像サイズを指定すると、ブラウザによって解釈が異なる場合があります。 IE9やfirefoxなど、小数点が解釈されるブラウザもあれば、別のブラウザでは切り捨てということが起こり得ます。 その結果、レイアウトがわずかにズレて表示されることがあります。

5.仕上がりの再現性に違いがある

Webデザインとグラフィックデザインの大きな違いの一つに、制作プロセスにおける「仕上がりの再現性」があります。

グラフィックデザインの場合、印刷物の仕上がりは、印刷機やインク、紙質などの条件に左右されます。なのでデザイナーのモニター上での見た目は、あくまでも仕上がりのイメージを確認するための目安に過ぎません。最終的な仕上がりを厳密にコントロールすることは難しく、ある程度の調整が必要となります。

一方でWebデザインの場合、ディスプレイ上で見るものがそのまま仕上がりになります。デザイナーが制作中のモニター上で見ているものが、ユーザーが実際に目にするデザインとなります。したがって、制作段階からモニター上で細部まで厳密に作り込む必要があります。

6.アセット整理で必要なものがすぐに見つかるように

アセット管理とは、様々なファイルを体系的に管理

アセットを適切なフォルダに分類することで、必要なファイルを素早く見つけることができます。あとプロジェクトが複数のメンバーをまたぐとき、誰もが同じ構造でアセットを管理することで、コミュニケーションの齟齬を防ぎ、作業の重複を避けることができます。

具体的にはアセットの種類に応じて、フォルダを作成し、階層構造を作ります。

画像、アイコン、フォントなどのアセットは、適切なフォルダに分類して整理しましょう。例えば、「images」フォルダの中に「icons」、「backgrounds」、「product-photos」などのサブフォルダを作成するなどです。

ファイル名には、アセットの内容が一目でわかるような名前を付けます。 命名規則を設定し、チーム全体で一貫性を保ちます。 例えば、「header-logo.png」、「icon-search.svg」、「font-family-name.woff」などです。

7.命名やグループ分けでレイヤーを整理！

アセット整理の延長線上にあるので、「レイヤーの整理」。グラフィックデザイナーが忘れがちなのは大変重要なポイントです。

Webデザインは、グラフィックデザインよりも複雑な構造を持ち、様々な要素が絡み合います。そのため、レイヤーはとにかく「適切に整理」が肝！具体的には、以下の要素ごとにレイヤーを作成しましょう。

• ページ構成要素: ヘッダー、フッター、メインコンテンツ、サイドバーなど
• 個別の要素: ボタン、アイコン、画像など

レイヤー分けすることで、特定の要素を編集したり、表示/非表示を切り替えたりすることが容易になり、デザインとコーディングの連携がスムーズになります。

あとはレイヤーには、その内容が一目で分かるような名前を付けましょう。例えば、「header-logo」、「main-title」、「btn-primary」などの命名規則を設けると良いでしょう。分かりやすい名前をつけることで、デザインファイルを見ただけでページの構造が理解できるようになり、情報共有が促進されます。

またレイヤーパネルの整理も必須。

レイヤーパネルがごちゃごちゃしていると、必要なレイヤーを探すのが大変になります。そこで、以下の方法でレイヤーパネルをスッキリ整理しましょう。

• グループ化: 関連するレイヤーはグループ化することで、よりわかりやすく整理できます。例えば、ヘッダー内のロゴ、ナビゲーション、検索ボックスなどのレイヤーをグループ化し、「header-group」という名前をつけます。
• ロック機能: 編集が完了したレイヤーや、誤って変更してはいけないレイヤーはロックすることで、不要な編集を防ぐことができます。

8.SVGという神形式を活用できる！

SVG（Scalable Vector Graphics）は、拡張可能なマークアップ言語（XML）をベースにしたウェブページでベクター画像を使用するための標準的なフォーマットです。

ロゴ、アイコンやピクトグラム、インフォグラフィック、背景画像や装飾的な要素をSVG形式で書き出すことが多いです。

SVGの良いところは、ベクター形式なのでどんなサイズでも鮮明に表示できます。つまり拡大縮小しても画質が劣化しないのです。（pngだと拡大すると荒くなってガビガビになります）

そのほかで言うと、他の画像フォーマットと比べてファイルサイズが非常に小さいため、ウェブページの読み込み時間を短縮できます。（SVGはHTMLに直接埋め込むことができるため、追加のHTTPリクエストが不要になり、さらにページ速度を改善できます。）

あとインタラクティブという点ではCSSやJavaScriptを使って動かすこともできます。例えばテキストをアウトライン化してSVGに書き出すことで、手書き風文字のアニメーションにすることもできます。またホバーエフェクトを入れることもできます。

9.基本的に1文字ごとの文字間を調整するのは難しい

Webデザインの場合、letter-spacingというCSSで字間調整が可能です。ですが、一括で文字間を調整する指定することになります。ですから「1文字ごとの文字間を調整したい」というのは原則的に難しいと考えてください。

ただ細かすぎる調整をしたい時や、あえて字間をバラバラにしたい時にはspanで囲んで対応することはあります。でもコーディングの手間がすごくかかります。コーダーからは結構嫌がられます。

だから現状文字をこだわって見せたいという箇所だけ「書き出し」しているケースが多いです。

10.通常の2倍で書き出す

最近は高解像度ディスプレイの普及により、Webデザインにおける画像の扱い方にも変化が必要になっています。特にAppleのRetinaディスプレイは、通常の1ピクセルを2×2の4マスで構成しているため、2倍サイズの画像を用意することで、高解像度ディスプレイでも鮮明な画像を表示できます。つまりピクセル密度が高いため、画像の細部まで鮮明に表示されるわけです。（正直、等倍サイズの画像を表示すると、ほぼぼやけてしまうといっていいです。）

ですから高解像度ディスプレイに対応するには、通常の2倍のサイズで画像を作成し、表示サイズとしては半分にするようにします。

またレスポンシブデザインはデバイスの画面サイズがバラバラです。2倍サイズの画像を用意しておくことで、様々な画面サイズに対応しやすくなります。