テーマとは=着せ替え

テーマとはウェブサイトの装飾やレイアウトを担当する機能です。
いわば「服」のことを、一般的に、デザインテンプレートと呼びます。

サービスやシステムによって「テンプレート」と呼ばれることもあり、
他にも、テーマデザインテーマデザインテンプレートテンプレートといった名称の違いがありますが、
HAIKおよび本サイトでは、テーマという名称を使います。

テーマは、切り替えることができ、
ウェブサイトの文章や写真(中身)はそのままに、
服を着せ変えるような感覚で、
サイト全体のデザインを変更することができます。

例えば、下記のように、同じ文章でデザインテンプレートを切り替えることで、
印象の異なってきます。

HAIKデザインサンプル1 HAIKデザインサンプル2

業種や掲載したい情報によって適切なテーマがあるため、
自身のビジネスや発信したい情報によって、
どんなテーマを選べば良いのか、以下の説明を読んで考えてみましょう。

テーマの選択・ウェブデザインの大まかな流れは、

  1. 事前にレイアウトを決めて、
  2. その後、テーマのカラーを決めて、
  3. コンテンツ(文章・写真・画像)を作っていく

という流れが汎用的かと。

(1) レイアウト

レイアウトの種類は、カラムといわれる縦方向の区切り方によって
表示する情報の分け方があります。

1カラムデザイン

1カラムは、上から下の縦方向に情報を配置するもので、
比較的モダンなデザインのサイトで使われています。
情報をストーリー的に見せたい場合や、
大きな写真・画像を使って表現する場合、
主要なページが5〜6ページ以下といった
ページ数が少ないサイトに適しています。
カフェやレストランなどによく見られるレイアウトです。

1カラムデザイン


2カラムデザイン

2カラムは、メインのコンテンツの横に、メニュー(サイドメニュー)を表示する比較的オーソドックスな配置方法です。
情報量が中程度(10〜30ページ*)のサイトに最適な表示方法です。
サイドメニューには、基本的にはどのページも同じ情報を表示し、「サイト内にどのようなページがあり、どんな構成のサイトなのか」をユーザーに伝えます。
ユーザーを安心させ、混乱しないように配慮します。
ブログや企業などのサイトに多く見られます。

*2カラムは30ページを超えるウェブサイト、ブログでもよく見られるデザインです。ページ数が多いウェブサイトの場合は、情報カテゴリ毎にサイドメニューの内容を変更したり、折りたたんだり。要点としては、事前に情報へのアクセシビリティを設計して、ユーザーにとって見やすく分かりやすいウェブサイトにします。

2カラムデザイン


3カラムデザイン

主に、コンテンツの両サイドにサイドメニューがあり、
50〜100ページを超えるような情報サイトに見られるレイアウトです。
代表的なサイトにYahoo!のトップページがあります。
ページのカテゴリや別サイトへのリンク、ユーザーのログインなどを表示し、1ページ(主にトップページ)で様々な情報を、わかりやすく配置します。
「ユーザーが自分で必要な情報を見つけてアクセスする」ことを目指すデザインレイアウトなので、1カラム、2カラムよりも高度なデザイン・レイアウト力が必要となります。
なお、HAIKでも3カラムデザインが可能ですが、HAIKは複雑なコンテンツ管理は得意ではないため、おすすめしません。

3カラムデザイン


ランディングページ・レイアウト

いわゆる1カラムデザインで、広告的なページをランディングページといいます。
厳密なルールはありませんが、基本的なランディングページとしては

  • グローバルメニューや他ページへのリンクを排除する
  • 1ページで、1商品・サービスの情報を掲載する
  • 閲覧者に何らかの行動を取ってもらうことを目的とする
  • 目的は、1つに設定してコンテンツを作成する
    (お問い合わせ、資料請求、メルマガ登録、商品購入などのいずれか1つを目的にする)

ランディングページデザイン


(2) テーマカラー

色によってユーザーに与える印象が異なります。
どのような印象を伝えたいか考えながら、テーマカラーを選択しましょう。
なお、業種ごとに定番色があるので、競合サイトなどを調べるのが手っ取り早いですね。

例えば

といった感じですね。
詳しくは、こちらも参考にしてください。

公益社団法人 色彩検定協会

Google検索「色による違い」