Webデザインデータの作成注意点まとめ


Webデザイン作成時の注意点を思いつくまま記しました。

当たり前に思いますが、
Webデザインを作成する前に復習しておくのもいいかもれません。

基本的な設定

カラーモードはRGBで設定しましょう。
RGBとは光の三原色のレッド、グリーン、ブルーの頭文字です。
webなどのディスプレイで表示されるものは光の三元色で表現されているのでカラーモードをRGBに設定するのは絶対に必要です。

たまにですが、ある商品のPRサイトを作るのに素材で印刷物のデータを渡され、それがCMYKで作られたものだとしたら、色が崩れる可能性があるので注意が必要です。




解像度は72ppiにしましょう。

これは厳密には72dpiにしている必要はありません。
あくまで、webを表示するデバイスのディスプレイ解像度に依存するので、こちらで何をしようがあまり関係がないからです。

例にうちの猫の画像をあげます。

350dpi
72dpi

二つの画像はそれぞれ解像度が違います。
ですが、デバイス上からでは特に違いはありませんよね?
これは映しているディスプレイに解像度を依存しているからなのです。
なので、こちらでいかに高解像度のものを用意したところで、表示には影響ないというわけです。
こういった仕組みを絶対解像度と言います。

そういうわけで、高解像度の画像を用意しても、データ容量が大きくなって、読み込みが遅くなるだけなので、最低限の72dpiで画像を使う。

というのが慣習化しているわけです。


フォントについて

デバイスフォントと画像化するフォントを意識する

テキスト表示は、Webを閲覧する環境によって
書体・字間・余白などが若干異なってくるため、
改行位置も変わってしまうことがあります。

従って、書体は標準でOSに入っている
デバイスフォント(ヒラギノ角ゴシックメイリオMSゴシック)で、
字詰めはせず、文字ボックスに流し込む形でデザインデータを作成します。

タイトルなど、デザイン的に装飾するために特殊なフォントを使用する場合は、
環境によって見え方が変わることを防ぐため画像化して表示します。


例えば、僕がよく記事のキャッチにしているこのフォントもデバイスごとに表示が変わってしまわないようにするために画像として使っています。

Webフォントの使用について

Webページでは、通常、デバイスフォントを用いて
文字を表示させる方法が一般的です。

これに対して、予めサーバ上に置かれたフォントを呼び出して表示する
「Webフォント」を使用する方法も徐々に広まってきています。

Webフォントのメリットは、どのデバイスから見ても
同じフォントで表示されるため、
制作サイドが意図したフォントで表示することが可能です。

一方デメリットは、サーバから文字データを呼び出すため、
特に文字数の多い日本語でWebフォントを使用すると、
ページの表示時間が長くなる傾向があると言われています。

従ってWebフォントは、文字数が少ない文章で使うのが良いかと思います。

デザインデータを納品する際は指示書で
どの箇所でWebフォントを使用するか指示するようにしてあげると良いでしょう。

描画モード(ブレンドモード)の使用は避ける

Photoshopにあるレイヤーの描画モードの「乗算」「スクリーン」を使用した効果は、
透過PNGで書き出す場合は反映されないため、
Webデザインでは使用しないのが一般的です。

背景画像の一部として使用する分には問題ありませんが、
背景画像の上に乗るパーツとして扱われそうな箇所には使用してもこちらの意図した感じには仕上がりません。

影を表現する際には、「レイヤー効果」を使用するか、影のみを別レイヤーで画像として用意する必要があります。

尚、透過PNGで書き出す場合、「不透明度」の設定は反映されます。

※バナーなどの画像で納品するものについては、この限りではありません。

余白は揃える

例えばセクションタイトルの上は100px空けるなど、余白を統一します。

そうすることによって整ったデザインになりますし、
余白(margin)が統一されていた方がコーディングもやり易くなります。

レイヤーはシンプルな名前、色付けで状態を表示

すべてのレイヤーに他人が見ても分かるようにシンプルな名前を付け、
色付け等で区分してどの状態で使用するものか判るように表示しましょう。

たとえばボタン素材などは、
ホバー(マウスオーバー)、アクティブ(選択)の状態によって、
デザインを変える場合があります。
そのようなときは分かりやすい「青ボタン」などでグループ分けし
「通常時」「ホバー時」などを一緒に記載しておくと分かりやすくなります。

背景デザインについて

モニター解像度が広くなったことで、
コンテンツ以外の部分である背景デザインも考慮しておく必要があります。

背景にテクスチャを利用する場合、Webデザインでは表示時間短縮のため
小さなテクスチャ素材を継ぎ目なくリピートして表示する手法を良く使用します。
背景にテクスチャ素材を利用している場合は、
しっかりとシームレス(つなぎ目のない)ものになっているようにしましょう。

ざっくりとwebデザインの制作注意点をまとめてみました。
この他にも細かなことを注意しなくてはいけないのがWebデザインの難しいところですね。
そんな感じで、今回はここまでにしようと思います。

ブログランキング・にほんブログ村へ

にほんブログ村

最新情報をチェックしよう!