第18回 外観デザイン -画面上部-
まず最初に見ていただくのは、画面上部の外観デザインです。画面上部というのは、ブラウザーで道院のサイトを開いたときに一番最初に表示される項目で、多くのサイトがこの部分に様々なメニューを配置しています。
また最も目立つ部分でもあるので、外観デザインを考える上では非常に重要な箇所になります。
■大阪高槻道院の外観デザイン -画面上部-■
まず、薄いピンクで覆われている部分がコンテンツを配置している場所で、それぞれに名前がついています。上から順番に書き上げていくと、
・サイトヘッダー
・サイトタイトル
・トップ画像とグローバルメニュー
・バナー画像
・ウェルカムメッセージ
と呼ばれる部分で、場所によって目的や役割が異なってきます。
■サイトヘッダー■
サイトヘッダーとは、そのサイトの一番上に表示されている項目で、通常はこの部分はサイト内のどのページを見に行っても常に表示されている項目となります。
大阪高槻道院では、「財団法人少林寺拳法連盟 大阪高槻道院のウェブサイト」というように、このサイトを直接表現する文章を表示しています。
どのページにも表示されるため、検索サイトのクローラーはこのサイトの重要キーワードとして判断します。つまり、お作りになられる道院のサイトが地名や団体名で検索されたときに、上位に表示されたい場合は、ここに記載しておくことでより順位が上に来るようになります。
この部分には、サイトを表現するキャッチコピーを入れる時もありますので、必ずしも大阪高槻道院のように「団体名 所属名」を入れる必要はないと思います。
■サイトタイトル■
文字通りサイトの「タイトル」を表示する部分になります。ここには、正式な団体名や所属名を記載するのが好ましいです。多くのユーザーはこの部分を見て、これが何のサイトなのか判断します。
今日の時点では大阪高槻道院のサイトタイトルは文字で書いているだけですが、今グラフィックスでデザインした物に差し替えてもらえるようユニバードさんに依頼してあるので、近いうちに見栄えのいいサイトタイトルに変わると思います(^。^)
サイトタイトルは、サイトの「看板」です。
看板は内容が読めればよい物なので、グラフィックスで飾る必要は特にありませんが、見栄え良くしたいときは、デザインされた「看板」はカッコ良くは見えると思います(･･)(｡｡)
■トップ画像とグローバルメニュー■
サイトの中で見栄えに関する最重要ポイントがこの「トップ画像」と「グローバルメニュー」です。
トップ画像とは、文字通り最初に表示される最も大きな画像のことで、大阪高槻道院はFlashムービーを使って最初にソーエンのロゴを表示し、各メニューにジャンプするためのイメージ画像を順番に表示してから、グローバルメニューに収まるようなデザインをしています。
トップ画像につけられるメニューを「グローバルメニュー」といい、ここはユーザーが一番クリックするメニューだと思ってください。
「グローバル」という名称がついているのは、コンテンツに「直接飛ぶ」ために設置されているメニューボタンなので、このような呼び方をします。
通常は、サイト構造のお話しに出てきた、第一階層部分にジャンプするのが一般的な使い方だと思います。
大阪高槻道院のグローバルメニューは、
1.少林寺拳法紹介
2.道院案内
3.修練内容
4.見学・入門案内
5.よくある質問
となっており、この内容はサイト構造の第一階層目と一致しています。
グローバルメニューに何を置くかによって、そのサイトの「使いやすさ」が決まります。
すべてのユーザーは「グローバルメニュー」からみて、第二階層目までに情報があることを望んでいます。つまり、グローバルメニューをクリックした後、もう一回クリックするのは嫌がりませんが、さらに追加でもう一度クリックしなくてはいけないような作りは、とても嫌がります。
なので、グローバルメニューから飛ぶ先は、出来ればそこで完結してください。何度もクリックをしないと情報にたどり着けない作りは、ユーザー離れの主な要因となります。
■バナー画像■
バナーとは「広告」の事だと思っていただいて間違いはありません。
通常はよその企業の案内だったり、商品の広告だったりしますが、道院のサイトの中に設置する場合は、「特に強調したいコンテンツへの入り口」という扱いでいいと思います。
大阪高槻道院のバナー画像は、
・修練カレンダー
・会員募集中
・お問い合わせ
の三つのバナー画像が上部に設置され、画面一番下には、「少林寺拳法教室」のバナー画像が設置されています。
道院内部でのバナーの役割にも書きましたように、「特に強調したいコンテンツ」に直接リンクされている画像が、このバナー画像になります。
バナー画像は文字のメニューとは異なり、大変目にとまります。注目されます。
それだけクリックされる可能性が高い！というわけです。
なので、大阪高槻道院では「会員募集中」と「お問い合わせ」をもっともわかりやすい位置に置きたいと考えたため、バナー画像にして画面上部に配置しました。
バナー画像は「広告」の役割ももっているため、当然「何かの案内」を特別に出すことも可能です。本部のサイトであれば、「はじめよう！少林寺拳法」や総裁の書籍を宣伝しています。
よく見かけるパターンでは、懇意にしているサイトさんのバナーを貼って相互リンクしている場合もあります。
バナー画像の役割は、色々考えられると思いますので、是非効果的な宣伝にお役立てください(=ﾟωﾟ)ﾉ
■ウェルカムメッセージ■
ウェルカムメッセージとは、文字通り「ウェルカム」を伝える「メッセージ」になります。つまり、「サイトをご覧いただきまして、ありがとうございます！」みたいな事を書いたりする場所が、この「ウェルカムメッセージ」の部分になります。
バナー画像とは違い、通常はウェルカムメッセージはトップページにのみ表示されます。また、トップページの比較的目立つ位置に置かれるため、ユーザーの目にもとまりやすくなっています。
ユニバードさんが最初に大阪高槻道院のウェルカムメッセージを作ったときは、「自分に強さを。他人に優しさを。大阪高槻道院のサイトへようこそ！」みたいな画像が貼ってあったと思うんですが、全体のバランスから考えて、そこだけ浮いていたんですよ(￣▽￣;)
それで、ウェルカムメッセージを削除しようかどうかすごく悩んだんですが、ユニバードさんから「あったほうが、サイトが引き締まる」と強くすすめられたので、ちょっと考えて、「じゃあ、少林寺拳法を知らない人が見たときに、興味持つようなPOPにしよう」と思い、今のウェルカムメッセージを作成しました。
お気づきの先生もいらっしゃると思いますが、大阪高槻道院のウェルカムメッセージは四種類のメッセージがアクセスするたびにランダムで表示されるようになっています。
 |
 |
 |
 |
まぁ、ウェルカムメッセージは「装飾」の部分なので、あってもなくても大丈夫です(=ﾟωﾟ)ﾉ
あと、大阪高槻道院のウェルカムメッセージには「少林寺拳法のPoint」と書いてありますが、最初のバージョンは「大阪高槻道院のPoint」になっていました。
道院のポイントを強調しているときは道院のPointでも良かったんですが、内容が「少林寺拳法」全般に関するポイントだったので、今の形に作り替えしてもらいました。
次回は、第19回 外観デザイン -画面中部-です!
前回は、第17回 外観デザインとはです!
