グラフィックデザイナーがWebデザインをする時に気をつけたい8つのこと

こんにちは、スタジオ・ウミの森山です。 今日はグラフィックデザイナーがWebデザインをする時に気をつけたいポイントについてご紹介してみたいと思います。
というのも実は私はWebデザイン歴よりもグラフィックデザイン歴の方が長いため、Webデザインを本格的にやり始めた頃はかなりイライラ…（コホン！）いや、色々と戸惑いました！
Webデザインを始めて3年が経ちますが、ようやくその特性やコツを少しつかめてきたかなぁと思いますので、これからグラフィックデザインからWebデザインへ転向しようとお考えの方や、グラフィックとWebのどちらも良いデザイン、スムーズな制作ができるようになりたい！という方のご参考になれば幸いです。
それではいってみましょう。

1. いろんなサイズの端末で表示されることを忘れない

まず最初に戸惑うのは「サイズ」についてではないかと思います。
グラフィックの場合は必ず紙面サイズが最初に決められているというのが大前提としてあります。その決められたスペースの中で、レイアウトや表現を考えながら組み立てていきます。
しかし、Webデザインの場合はユーザーの閲覧環境によって様々なサイズのデバイス上でそのデザインが表示されることとなります。デスクトップ、ノートPC、スマホ、タブレット端末・・・とサイズも違えば解像度も違います。最初はその感覚に慣れるのが難しいかもしれませんが、サイズが変わった場合の想定ができていないと、デザインカンプでの見栄えはとても良かったのに、実際にコーディングをしてみたらイメージと全然違う、なんていう残念な結果にもなりかねません。
デザインを制作する際には、画面サイズが広くなった場合や狭くなった場合、あるいは異なる端末で見た場合など、あらゆるサイズを想定しながらデザインをするようにしましょう。

2. アウトラインを意識する

これはWeb特有で、且つとても重要な部分です。
「アウトライン」というとグラフィックデザイナーの方であれば「あのIllustratorでの文字のアウトライン化のこと？」…となる気がしますが、違います。
ここでいうアウトラインとは「文章の構造」のことです。
グラフィックデザインでは見た目の見やすさを最優先にデザインすればよかったのですが、Webデザインではもう少しいろんな面への配慮が必要になります。というのも、Webの場合は、表示されたコンテンツを読むのは人間だけではないからです。人間は文字のサイズや色、装飾などの視覚的な情報から文章構造を判断することができます。でもコンピュータやクローラーなどはそうはいきません。また、目が見えない視覚障害者の方などはブラウザの音声読み上げ機能などを使ってコンテンツを読むこともあります。そのため、アウトライン化がきちんとできていないと、クローラーが正しい認識をできず検索順位に影響してしまったり、ブラウザが正しく音声を読み上げることができなかったり様々な弊害が出てきてしまうのです。
またh1,h2,h3などタグの持つ意味を理解しながらきちんとデザインができていると、検索エンジンにもコーダーさんにも分かりやすく、CSSの実装もスムーズで無駄のない制作が可能になります。

3. フォントに完璧を求めない

私がWebデザインを始めてから１番イライラしたのはこれですね（笑）
Webの場合、テキストで表示する場合はカーニングができないし、表示されるフォントの種類もユーザーの閲覧環境によって異なります。特にWIndowsではメイリオ意外のフォントではアンチエイリアスがかからないためジャギジャギの文字が表示され・・・全然美しくない〜（泣）ユーザーの閲覧環境によって改行位置が変わるため下手に改行指定することもできないし、段落の両端をビシッと揃えるなんて夢のまた夢・・・
まるで私の愚痴のようになってしまいましたね、すみません・・・（笑）
最近ではWebフォントといって、ユーザーの閲覧環境に左右されずに指定したフォントを表示する技術も普及し始めておりますが、フォントを指定したところでカーニングができなきゃたいして美しくないんですよね。特に日本語だと顕著な気がします。だからといって表示するテキスト全てを画像で書出すのはファイルサイズも重くなるしSEOにもよろしくないです。
というわけで、多くの日本のWebデザイナーさんは、どうしても文字を美しく見せたい目立つ部分のみ画像で書出しているというのがWebデザイン業界の現状かなと思います。
また一方で、フォントの詰めがどうのこうの…という細かい部分ではなく、画面全体としてのレイアウトや色づかいの美しさや大胆さ、あるいはユーザーを惹き付けるような動きのある構成などで魅せるのが近年のWebデザインの傾向という気がします。

4. ユーザーにとっての「分かりやすさ」を考える

Webデザインのもっとも大きな特徴のひとつに「ユーザーが使う」ことが挙げられるのではないでしょうか。
例えばメニューをクリックしたり、テキストリンクがあればクリックしたり、スクロールバーでスクロールしたり、マウスオーバーで表示が変わったり・・・
こういった特定の動きをするものにはWebデザインにおいて一般的に使用されているルールやセオリーが存在します。
例えばテキストリンクでもっとも認知されやすいスタイルは「青字に下線」だそうです。逆にリンクではないところ、例えば強調のためにこのスタイルを使うとユーザーは混乱してしまいます。
ユーザーの誤解を招かない「分かりやすい」デザインを心がけるようにしましょう。

5. いろんな場面を想定する

特にCMSを使用したサイトなどで気をつけたいのが、想定範囲外のことまで想定することです。
どういうことかと言うと、主にCMSサイトなどではクライアントさんが自由に編集することができますので、制作側が想定していなかった長〜〜いページタイトルで記事が作成されたりする場合があります。そうした場合にも予め崩れないようなデザインを考えておく必要があります。ページタイトルに限らず、テーブル内のテキストや画像の縦横が変わったら…、画像点数が多くなったら…などなどいろんな場面を想定する癖をつけましょう。
グラフィックデザインには絶対ありえないことなので、意識的に注意する必要がありますね。

6. 1ピクセルをないがしろにしない

グラフィックデザインではピクセル単位でのデザインをしないので、1ピクセルの重要性になかなか気付かないのではないかと思います。
でもWebデザインにおける1ピクセルはデザインクオリティにかなり影響を与えるので、ないがしろにせず、しっかりと気を配ってほしいと思います。
例えばオブジェクトを動かしているうちにいつのまにか1ピクセルのボケが発生したりすることがあるのですが、こういう一見して気付かない「ぼやけ」の有無が意外とクオリティに影響したりします。
とはいえ、ちょっと前までは1ピクセルの線で光と影を表現した立体感のある線が流行ったりしましたが、最近は見かけることが少なくなりました。
フォントの章でも少しお伝えしたように、細かい表現より画面全体を用いた表現へ移り変わってきたようですね。
そのうち「1ピクセルにこだわるな！」って言い出したらごめんなさい。

7. 世界感を大切に

これは私も最初は気付かずにWebデザインをしていたのですが、これは私の経験上かなり重要なポイントだと思うので「イマイチしっくりくるホームページデザインができないなぁ〜」とお悩みの方は騙されたと思って一度は試していただきたいポイントです。
まず、Webデザインの場合はグラフィックデザインと違って、デザイン全体、上から下まで一度に目に入ることはあまりありません。多くのホームページがスクロールしながら画面を読み進めていくことになります。そんな時に、ヘッダー部分とフッター部分で表現が統一されていないとなんとなくチグハグな印象を与えてしまいます。 それが結果として「しっくり来ない…」という印象を与えてしまうのです。
逆にきちんとページ全体の世界感が統一されていて、どこを切り取っても「同じホームページを見ている」ことが直感的に感じられるデザインになっていると、それだけでぐっとホームページのクオリティが上がります。ぜひお試しください！

8. 動きで魅せる

これは私も積極的に取り組んでいきたいと思っているポイントなのですが、グラフィックデザインにはないWebデザインの最大の魅力でもありますね！
JavaScriptなどの技術を使用することによって「動き」で表現できるところはWebデザインならでは、です。
一夕一朝で身につけられるものではないかもしれませんが、コンセプトに合わせてインタラクティブな表現要素をうまく取り入れることができれば、より魅力的なホームページ制作ができることは間違いありません。
ぜひトライしてみましょう！