6日目サイトをデザインする

初心者にとって｢デザイン｣はとても難しいですよね。まずは初心者だからこそ｢デザイン｣にこだわらず、読みやすいことを心がけてデザインしていきましょう。

画像を使わない
サイトの｢色｣を決める

画像を使わない

当サイトのようなデザインです。できるだけ画像は使用せず、文字サイズは大きく、画面遷移がわかりやすいものを作っていきます。

見やすいポイントとして以下のようなことが挙げられます。

文字サイズの基準は12px～16pxに。
行間はline-heightで1.4～1.8にする（単位はつけない）。
見出しや段落、リストなどがはっきりと区別できるようなデザインにする。

｢余白｣に気をつけるだけでシンプルな見やすいデザインができます。また、画像の使用を極力控えてかっこいいCSSデザインをやってみよう – Galleryというデザインギャラリーもありますので、参考にしてみてください。ライセンスはクリエイティブ・コモンズ表示 3.0とのことです。

ただし、お花屋さんやケーキ屋さんなど、商品の写真はどんどん使うべきです。

サイトの｢色｣を決める

ふたつめのポイントは｢色｣です。同じレイアウトでも、色によってサイトの印象は大きく変わります。またうまく色を使いこなせば”信頼度”も向上します。

例えば、病院のサイトであれば、白の背景にパステルカラーのアクセントが最適です。企業サイトなら、清楚な白ベースに青などの爽やかな色が似合います。

サイトの色を選ぶとき、店舗やサイトの｢ロゴ｣があるのなら、その色を基調にするのも失敗しない方法です。

また、1日目ホームページを作る目的を明確にする｢ターゲットを絞る｣で決めたターゲットユーザの好みに合わせるのも手です。女性が対象ならピンクやパステルカラーなどのかわいらしい色、男性が対象なら青やグリーンなどの忠実なイメージカラーがよいと思います。

基本的に背景色は｢白｣やうすい色を基調とするのが失敗しません。その場合、文字の色は｢黒ベース｣が最適です。完全な｢白｣と｢黒｣だとコントラストが強いので、黒の指定を｢#000｣ではなく｢#333｣くらいにするのもポイントです。

「色をたくさん使ってしまう」あるいは「色を全く使わない」というように極端なのも問題です。ホームページならば、だいたい3～4色使うのがバランスがよいとされています。例えば1色決めたとします。その他の色はどのようにして決めればよいでしょうか？1つの色を決めると他の色を自動に決めてくれるWebサービスをいくつか紹介します。

色の組み合わせだけ知りたいならこちらも便利です。

こちらの書籍もお勧めです。

その他、配色に関する書籍一覧はこちらから。

色についてもっと学びたいならこちら。

セミプロあるいはプロの作ったデザインテンプレートを使用する

素人っぽいデザインにしたくない！かっこいいデザインにしたい！という方は、Web制作会社に依頼しなくてもネットでしかも無料で、CSSベースのデザインテンプレートを手に入れることができます。

かなりたくさんあるのでここでは、当サイトのCSSデザインテンプレート配布サイトと、素敵なCSSデザインテンプレートを配布しているサイトをまとめた情報案内サイトのふたつを紹介します。

有料のデザインテンプレートであれば、プロの作ったデザインを格安で利用できます。この手のサービスはたくさんあるのですが、その中でもお勧めのデザインテンプレート販売サイトをご紹介します。200点以上のデザインテンプレートから選べ、ゴールドプランでは全てのデザインテンプレートをご利用いただけます。

クラウドテンプレート・ゴールドプラン

ホームページ作成サービスを利用する

ブログサービスのように、ホームページを作れるサービスもあります。すでにホームページの種別に見合ったデザインテンプレートが用意されているので、かなり簡単にホームページを開設することができます。この手のサービスはだいたいが月額制だと思います。最近、Googleがホームページ作成サービスを始めたのでそちらを紹介します。