おひさしぶりです。
WEBデザイナーの橋本です。

さて、今回は「WEBデザインで気をつけていること8選」ということで、WEBデザインをする上で気を使っているところを書きたいと思います。参考になるかどうかはわかりませんが、是非ご覧下さい。

1. フォントの選択

WEBで使う日本語は「メイリオ」か「ヒラギノ」が多いです。
しかし、どちらを優先するかというのは人によって異なります。そのため、どのパソコンで閲覧しているかを調べて閲覧者毎に振り分けるようにしています。
最近では「游ゴシック」や「游明朝」に置き換えてきていますが、「メイリオ」か「ヒラギノ」か第二候補として選ぶ必要性があります。

 

2. 余白は多めで

私が商業モデルとしてWEBデザインを初めて行ったのが今から5年前ですが、以前よりも余白を多くとっています。
以前は10~30px程度の余白が多かったですが、最近では40〜100pxの余白が多いです。理由としてはディスプレイサイズが大きくなり、余白が少ないとコンテンツのメリハリが解りづらいということにあります。

 

3. テキストベース

WEBデザインでは好き放題フォントを選ぶことができません。そのため「游ゴシック」か「メイリオ」か「ヒラギノ」で文字を入力することが多々あります。
それ以外のフォントを扱う場合、画像として文字を配置することになります。
しかし、画像として扱った場合は修正や改修の際にとても大変な労力がかかります。そのため、一部の例を除いてはテキストベースでデザインを行います。

 

4. 高解像度への対応

レスポンシブデザインを行う場合、iPhoneやiPadなどの高解像度ディスプレイに対応するため、表示サイズの倍で画像を書き出す必要があります。
少し、面倒ですがデザインの段階で「倍のサイズ」を想定し作るよう心がけています。

 

5. 可変させること

私は見る人のモニターによって最適に表示がされるよう気にしています。
そのため、最近ではパーセンテージでのレイアウトが多いです。例えば3カラムであれば、(1カラム：32% * 3) + (余白：2%*2)というような感じです。あらゆる箇所をパーセンテージで組んでおけば大本の幅を可変させてもキレイに表示されることが多いです。

 

6. 比率

黄金比というものを知っていますか？
1:1.618…という比率なのですが、これは最も美しい比率と言われています。そのため画像や写真をトリミングする際にはなるべく「1:1.6」という比率で書き出しています。
ティーエスフォートのサイトでいうと下記にあたる箇所とか黄金比ですね。

 

7. 数字は8の倍数を使う

パソコンなどの機器において8という数字は特別な意味を持つことが多いです。個人的なことですが、8の倍数を指定することが多くなりました。
理由としてディスプレイの解像度や一般的なバナーのサイズ・グリッドシステムの基本サイズ等々を考えると、1.2.4の倍数を除き8の倍数が多く存在します。

 

8. ちょこっとした気遣い

これもまた、個人的なことですがサイト制作では少しでもリッチ感を出すためにいろいろと試行錯誤しています。例えばボタンの上にマウスが乗った際の処理など使った人が、ほんの少しだけ満足するような施策をしています。

 

以上、「WEBデザインで気をつけていること8選」いかがだったでしょうか？
個人的なことが多くをしめますが、少しでも皆さんの参考になればいいと思います。

以上、WEBデザイナーの橋本でした。

投稿日：2015.12.22