top > ホームページの作り方 > 6日目 サイトをデザインする

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

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

  1. レイアウトを考える
  2. 画像を使わない
  3. サイトの「色」を決める

レイアウトを考える

コーディングをする(HTMLやCSSのソースコードを記述する)上で、初心者にとって難しいことは、コンテンツをを思い通りにレイアウト(配置)ことです。

CSS2.1では、段組専用のプロパティがないため、特殊な方法を用いて、表現する必要があります。ここでは、2カラム(左右にコンテンツが横並びになっている状態)の作り方を紹介します。

HTMLソースコードは以下のとおりです。

<div class="contents"><div class="leftCon">
        ここに左側のコンテンツが入ります。
    </div><!-- /.leftCon -->
    <div class="rightCon">
        ここに右側のコンテンツが入ります。
    </div><!-- /.rightCon -->
</div><!-- /.contents -->

CSSソースコードは以下のとおりです。

.contents {
    width:610px;
    overflow:hidden;
}
.leftCon {
    width:300px;
    float:left;
}

.leftCon {
    width:300px;
    float:right;
}

少し説明しますと、「float:left;」あるいは「float:right;」でコンテンツを回り込ませることで、横並びにしています。

また、floatで回り込ませた場合、次に続くコンテンツも回り込んでしまうので、「解除」する必要があります。「.contents」のdiv要素に「overflow:hidden;」を指定することにより回り込みを解除しています。floatを解除する方法はいくつかありますが、この方法が一番簡単です。

その他、2カラムを作る方法はいくつかありますが、以下のブログ記事を参考にしてみてください。

どのようなレイアウトが見やすいのか、どのようなレイアウトがアクセスアップや直帰率の低減に繋がるのか、これは長年のWebサイト運営者のテーマです。Webサイトの内容によって最適なレイアウトというのは違ってくると思いますが、基本的なレイアウトの考え方は身につけておきましょう。以下のサイトが参考になります。

画像を使わない

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

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

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

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

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

サイトの「色」を決める

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

書籍(CD-ROM)で購入する

最近、書店でホームページテンプレートがCD-ROMで売ってあるのを見つけ、試しに購入してみました。本で編集方法を詳細に紹介しているので、初心者にはとても便利な一冊だと思います。値段も2,400円(税別)ですので、とてもお買い得だと思います。

おしゃれなホームページのデザイン テンプレート・コレクション
ユルユラデザイン,奥山 寿史
毎日コミュニケーションズ
発売日:2009-06-27

姉妹品のネットショップ専用のホームページテンプレートです。こちらは購入はしてないですが、書店で見た限り、非常に使いやすそうでした。

おしゃれなネットショップのデザイン テンプレート・コレクション
ユルユラデザイン,奥山 寿史
毎日コミュニケーションズ
発売日:2010-02-13

ページの最終更新日:2015.08.16

※当サイトではWebサイトのことを、一般的な通称の「サイト」、「ホームページ」、「HP」などと表記しておりますが全て同一のことです。