最近はグラフィックデザイナーもWebデザインをする機会が増えてきたように感じます。でも、紙媒体のデザインのノウハウをそのままWebに使うと、「なんだか紙っぽい」デザインになりがちです。
そんなわけで、もともとグラフィックデザイン畑にいた人間が、Webデザインをする上で感じた紙媒体との違いなんぞを書いていきます。これからWebデザインを始める人の参考にもなるかも。
グラフィックデザインとWebデザインの違い 目次
Webデザインは作業中の見た目がそのまま仕上がりになる
紙等のデザインは、印刷機やインク、その他諸々の状況で仕上がりが変わってくるため、作業中のモニター上の見た目はあくまで目安でしかありません。ですがWebサイトのデザインはディスプレイで見るものなので、作業中の見た目がそのまま仕上がりになります。
つまりモニター上で厳密に作業をする必要があります。
例えば最小単位。紙のデザインであれば、デザイン制作の作業中に最小単位を厳密に意識することはあまりない（印刷が可能な表現をおおまかに意識する程度）ですが、Webデザインの最小単位は1ピクセルです。
線幅も最小1ピクセル。イラストも最小1ピクセル。細かいニュアンスを出したい場合は、中間色でドット絵を描くように調整したりします。
中間色で微妙なニュアンスをだす
立体感を出したり線をくっきりさせるために、明度差のある線を足したりする
文字にあまりこだわることができない
「デザインを活かすも殺すも文字次第」というほど、デザインにおいて文字は重要ですが、ことWebデザインにおいては、文字にこだわることができない場面が結構あります。
フォントこだわることができない
Webサイトのテキストを何のフォントで表示させるか。の指定をすること自体はcssで設定可能ですが、指定したフォントが閲覧者のパソコンに入っていないと表示されません。
その場合はデフォルトのダサいフォント（特にwindows）が表示されることになります。なので、フォントが変わっても問題のないデザインを心がけます。
cssでのフォント指定のセオリーは、ほとんどのパソコンにデフォルトで入っているフォントから、なるべくきれいなもの（Macはヒラギノ、windowsはメイリオ）を指定するというものです。なので、最低限この二つの見た目は要チェックです。
参考サイト：
CSSのfont-family指定はこれで決まり！（2013春）
実はすごく簡単！Webフォントの使い方＆日本語対応Webフォントまとめ
文字サイズにこだわることができない
Webデザインの最小単位は1ピクセルであることを書きましたが、これはテキストにもいえることです。
IE9やfirefoxなど、小数点が解釈されるブラウザもありますが、シェア率が圧倒的というわけではないです。
例えば「18.5px」と指定したときに、Aさんが使っているブラウザだと収まっていたところが、Bさんが使っているブラウザだとはみでる。ということが起きる可能性があります。
参考サイト：
IE9用のCSSハック？Webページのフォントサイズ指定で今後注意する事
文字組にこだわることができない
形や大きさの他に、文字組にも注意が必要です。
組方向
基本的に縦書きはできません（2014年3月現在）。CSS3の「writing-mode」という要素の並びを決めるプロパティがありますが、草案段階で対応していないブラウザもあったりと、まだ実用的ではないです。
「竹取JS」等のjQueryプラグインで縦書きを実現させることも可能ですが、極力プラグイン等を使わず実現したいところです。アクセントとして縦書きの部分があるサイトでも、画像化した文字で対応しているものが一般的なようです。
CSS3の「writing-mode」プロパティがだんだん実用的になってきているようなので、近い将来、縦書きが普通に使えるようになるかもしれません。
参考サイト：
CSS3で遊ぼう！縦書きにルビを振ってみたり〜！
カーニングやトラッキング
文章全体であれば、指定された範囲の文字間を調整する「letter-spacing」というcssプロパティがあります。ですが、1文字ごとの文字間を調整するのは難しいです。つまり、「カーニングの数値入力」のみ可能で、トラッキングや細かい文字詰めはできない。ということです。
どうしてもキレイに見せたい場合は画像で
画像の中の文字はこの制約を受けないので、大事な見出し等、どうしても文字面にこだわりたい箇所は、その箇所用に画像を作って対応します。
alt属性を忘れずに
柔軟性のあるデザインを
Webサイトは、出来上がって公開してから始まりなので、「ここに入る文字は何文字以内」、「写真の比率は何対何」等の制約の多くすると、スムーズに更新できない、内容にまで制限のあるサイトができてしまいます。
例えば、下の様なレイアウトでデザインを組んだとします。
ブログ記事のタイトル・サムネイル・概要（キャプション）がタイル状に並んでいくイメージです。
タイトル一つとっても、いつも一行に収まるタイトルとは限らないし、写真の比率もバラバラかもしれません。
このような時は、例えばタイトルが長くなった時などのことを想定して、対処の仕方も考えておくと、その後の制作がスムーズに進みます。
いろんなディスプレイサイズで見られる
制作サイズはディスプレイの大きさ（横幅）を意識する必要があります。パソコンサイトの場合、横幅960ピクセル位を目安に制作されることが多いです。これは、ノートパソコン等の小さいディスプレイで見たとき、ディスプレイの最小横幅を1024pxとして想定していることや、960はいろいろな数字で割り切れるためグリッドシステムを使用したレイアウトと相性がいいことと関係しています。
参考サイト：
レイアウト作りを簡単にしてくれるCSSグリッドシステム
Webサイトの横幅はどんどん広がっている
ですがディスプレイのサイズは年々大きくなってきています。2012年4月12日の記事の時点で、もっとも良く使われるディスプレイ解像度は、横1366×縦768ピクセルとのこと。それに伴ってWebサイトの横幅もだんだん広くなって行くと思われます。現に数年前までWebサイトの横幅は800px位が主流だったようです。
近年はスマートフォンやタブレットでもWebサイトを見る機会が増えたため、どんなウインドウサイズでもきれいに見ることのできるレスポンシブデザインが注目されたりしました。
参考サイト：
Webサイトの最適な横幅って何px？（2013年）
スマホ対応をどうするか
スマートフォンに対応したWebサイトを作る場合は、スマホ用のデザインも考える必要があります。
スマホサイトデザインの注意点を書くと、それだけで一つのエントリーになってしまうので割愛しますが、パソコンとは使用感が違うので、ちゃんと対応させるとなると結構しんどい作業になります。
Webサイトの特性を理解し、ユーザビリティを考えよう
最後に、Webの特性を理解した上でユーザー（サイトを利用する人）の目線にたって、どうすればサイトを利用する人にとって快適なサイトになるのか考えます。
Webサイトにはリンクがある。
リンク部分クリックすると違うページに行ける。というのがWebの大きな特徴です。サイトの回遊性を高めるためには、どの部分がリンクなのかをわかりやすく提示するのが効果的です。
文章内のリンクにはセオリーがある
下線付きの青色が最も一般的です。パソコンが普及した頃からのセオリーであり、多くの人の頭の奥で認識されているようです。
参考サイト：
クリック率の高いテキストリンクの色は？【2013年版】
バナーやボタンには「押せる感」を
バナー広告等で、バナー全体がクリック可能であるにもかかわらず、「詳しくはこちら」等のボタンのようなものが配置されているのを見たことがあると思います。全体が押せるのに、なぜボタンのような装飾をするのかというと、その方が「押せる」ということをユーザーに認識してもらいやすくなるからです。
あくまで例ですよ…。ボタンがあった方がクリックされそう
ボタンも同様に、ただのテキストよりも立体感や影等を使ってボタンらしくした方がクリックできると認識しやすいです。
また、ボタン等の中の言葉は、クリックした時にどうなるかをできるだけわかりやすくすることが大事です。デザイン的に英語表記にしたい場合もあるかも知れませんが、多少ユーザビリティが下がる場合があることをわかった上で、デザインと使いやすさのバランスを考えて決めるといいと思います。
サイトの第一印象。ファーストビューを考えよう
ファーストビューとは、サイトを開いた時にディスプレイに表示される領域のことです。紙媒体と違い、Webサイトはファーストビューで全体を見ることができるとは限りません。
Webページを開いた時に大量の広告が表示されて、うんざりしてページを閉じたことのある人は多いと思います。せっかく有益なコンテンツが大量の広告の下にあっても、見てもらう前に離脱されては意味がないのです。第一印象でどれだけ興味をもってもらえるか、何のサイトなのかわかってもらえるかは、とても重要なことなのです。
ファーストビューに広告ばかりだと嫌んなっちゃいます。
動きを考えよう
UX（ユーザーエクスペリエンス＝ユーザー体験）という言葉があります。Webサイトでいうと、サイトを利用してユーザーが感じる（快適な）体験のことです。
もちろん、サイト内の情報や構造、見た目なども、UXを向上させる上で不可欠なものです。ですが、「マウスカーソルをあわせるとアイコンが回転する」、「画像は全てフワッと表示される」など、サイトの価値とは直接関係の無いような所にこだわることで、Webサイトを使うこと自体によい感情を持ってもらえる＝UXを向上させることができるのです。
これらの動きは主にjQueryやFlashで再現されるので、最終的にはデザイナーの作業ではない場合もあるかもしれませんが、見た目のデザインを作る時に頭の中で動きも考えておくと、よりステキなサイトができると思います。
参考サイト：
5分で分かるユーザーエクスペリエンス（UX）
まだまだ気をつけるべきポイントがあるかもしれませんが、以上が個人的に感じたグラフィックデザインとの違いです。あとは実際に手を動かして作ってみるといろいろ見えてくると思います！では、よいWebデザインライフを。
