プロ並に仕上がるHPデザインテクニック

ホームページ制作のデザインは、ヘッダバナーやアイコンだけではありません。

レイアウト設計やデザイン設計、ユーザビリティや配色、対照となるコンテンツの基調カラーなどが必要です。

ホームページを一般の人が作成すると、なんとなくバランスが崩れていたり、色使いの対照や統一感がなかったりします。

今回は、一般の方にでもすぐにできる、本当に簡単なホームページデザインのテクニックのご紹介です。

1.グリッドでレイアウト設計

Photoshopなどの編集ソフトには、グリッドといって升目のラインをキャンバスに表示させ、吸着させることで、縦横の統一感を持たせることが可能になります。
もちろん"Gimp"などの無料の編集ソフトもあるので、高価なアプリケーションを購入する必要がない場合は、無料編集ソフトなどを利用するのもよいでしょう。

"グリッドに吸着"設定で、ヘッダバナーやグローバルナビゲーションの位置などの縦横を均等なバランスで配置することで、よりホームページがすっきりとします。
またホームページなどのレイアウトにはそのまま使うことはありませんが、白銀比1:√2や黄金比-近似値1：1.618などのデザイン比率を参考にしてみるのもよいでしょう。

2.配色とコントラスト

配色は、色使いのよいとされるデザイン物を模倣してみましょう。大抵のあらゆる業種のデザイナーが最初を模倣からはじめますので、色使いやコントラストは既存のものの配色や、配色サンプルなどを模倣しながら色調を統一していくとよいでしょう。

コントラストは、主に背景画像や背景色とその上に文字が配置された場合の文字の見えやすさを基準にするとよいでしょう。
まずは配色組み合わせ専門の書籍などを参考にすると比較的よい配色が可能かもしれません。

3.フォントの選定

文字画像のタイプですね。ブラウザの文字もある程度は指定可能ですが、こちらは閲覧環境をユーザーが決定するので、ユーザー側では変更できないサイトタイトルやロゴ、バナー画像などの文字の種類についてです。

ゴシックや明朝などでデフォルトで使用されているフォントよりも、特徴的なフォントや特殊なフォントを配置すると、より一層それらしく見えます。
広告や宣伝に使用される文字は必ずといっていいほど、デフォルトでパソコンやアプリケーションに入っているフォントは使用されていません。商業用の特殊なフォントを使用するケースがほとんどです。

英字フォントは、無料で使用できるかなりのフリーフォントがありますので、そういったフォントを利用するとよいかもしれません。

4.文字やアイコンのカーニングとバランス

文字の隙間と高さをきちんと揃えることで、かなり全体が洗礼された感じに仕上がります。使用するフォントなどによっては、文字間や高さ、フォントサイズの個別の調整などが必要になる場合がありますが、これらグリッドなどを使用してきっちり揃えるだけで、かなり印象がかわります。もちろん、ホームページ全体のひとつ一つのフォントやアイコンをすべてきちんと調整するだけでも、全体のバランス感が大きく向上します。

あえて文字間を狭くしたり、フォントサイズのバランスを崩したりすることもありますが、慣れてくるまでは、まずは等間隔やサイズを意識して調整することが推奨されます。

以上、とてもシンプルな工夫をするだけで、かなりホームページのデザインがプロらしく見えるでしょう。

ただし、それなりに調整する時間もかかってくるので、ある程度制作期間をたくさんとってみると、あわてないで作業でき、よりきれいなホームページデザインができることでしょう。