サイトのデザイン

準備編の一番の山場になるのが、ここ「サイトのデザイン」ですね。情報の整理、収集は誰でもできることですが、Webサイトのデザインとなると得手不得手がはっきりします。

しかい、、、Webサイトの公開を考えた場合にここを避けて通ることはできないため、XHTMLやCSS、時にはグラフィックソフトとにらめっこしながらデザインを完成させいくしかありません。

本来なら、サイトデザインの部分もしっかりと書きたいところですが、それだけで書籍ができるくらいのもの（というか１冊では到底学びきれない）なので、お店紹介サイトなら気にしなくてはいけないポイントについてだけ言及することにします。

Webデザインの基礎知識は文末の書籍を参考にしていただけると助かります。

サイトデザインのポイントは「見やすさ」「読みやすさ」

デザインというと、クリエイターさんが作るような「綺麗で」「凝った」ものを想像してしまいがちです。しかしお店紹介のサイトの場合伝えたい事はお店の情報であり、自らのデザインセンスではありません。

したがって意識しておかないといけないのは、サイトに訪問してきた人が正確にそして素早くお店の情報を確認できるようにすることです。

そのポイントになるのは

・見やすさ
・読みやすさ

になります。

これも難しいように感じるかもしれませんが、少なくてもサイト運営者が見て「見やすい」「読みやすい」サイトを目指せば大きくブレることはないと思います。

あまり多くの色を使わない

数多くの色を使ったほうが見栄えは良くなりますが、逆に色数が多いと気が散ってしまい、読ませたい情報がしっかりと入ってこなくなります。

Webサイト制作ではメインカラーとして目立って使う色数は3～4色が好ましいと言われていますので、あまり多くの色を使わずにデザインしていく意識は必要です。

またどうしても色数を増やしたい場合は「トーンを合わせる」「彩度を変える」など一貫性のある色使いをすることをお勧めします。

余白はしっかりと取る

大きさ（特に横幅）の決まったWebサイトの場合、１ページに多くの情報を入れるために余白を削ってしまうことがよくあります。しかし、テキストを読む場合、余白が少ないととても読みにくく感じてしまいます。

※テキストボックス内の余白も大切ですが、メインコンテンツのボックスとサイドバーとの間隔も大事になってきます。

＜例１＞

ここではテキストボックス同士が並んでいて、間に余白があるので左の文章でも読めなくはないですが、実際にサイトにするとサイドバーとの距離も近くなりますから、ボックス内での余白をとることはとても大切です。

１行の長さ、行間を意識する

文章を読ませやすくするには、１行の長さ、行間がとても重要になります。

１行の長さは１般的には35～40文字程度、行間は1.3～1.5（文字の高さとの比率）がいいとされています。ただ、最近はワイド液晶になっているため１行の文字数はもう少し多くても読むのに支障を感じなくなっているとは思います。

＜参考１＞
今読んでいる、このサイトの場合は１行39文字になっています。

＜参考２＞
CSSを使った行間の調整方法は「line-height」プロバティを使って、次のように指定します。

p {line-height:1.5;}

適応させるタグはXHTMLの記述に合わせてください。

これを先ほどの例に当てはめるとこのようになります。

＜例２＞

幅が狭いため、それほどではありませんが、１行が長くなると行間の違いは大きくなります。

テーブルもCSSでデザイン

デザインにテーブルを使わないというのはWebデザインの基礎の基礎ですが、お店紹介の情報のような「表組みが適しているもの」にはテーブルを使うことは問題はありません。

そして、テーブルもCSSを使うことで綺麗にデザインすることができるので、サンプルを紹介したいと思います。

まずはCSSをまったく適応しない状態のテーブル

罫線をだすためにボーダーを追加するとこうなります

ここに次のようなCSSを適応させます。

table.sample{
	width: 500px;
	border-collapse: collapse;
	}
table.sample th{
	padding:5px;
	line-height:1.3;
	border:1px solid #df9128;
	background-color:#F0F0F0;
	}
table.sample td{
	padding:5px;
	line-height:1.3;
	border:1px solid #df9128;
	}

すると見た目がこのように変化します。

テーブルもこれくらいすっきりとデザインされていれば、使いやすくなると思います。

デザインのところは、どちらかと言うと概念的な部分とCSSに偏ってしまいましたが、とにかく見やすいサイトを目指して作っていくことが大切だと思います。