（3）「海の駅」HP

（３）「海の駅」ＨＰ
トップページ画面
１）基本方針
① の解説･･･キャラクター（イルカ）によるカテ
ゴリー内容を説明させる展開を行う。
①
マウスを各カテゴリーの上にマウスロールオーバー
させるとキャラクターが吹き出しの説明を行ってい
②
るテキストを表示させて、カテゴリー先へジャンプさ
④
せる展開を行う。
⑤
下部に中国運輸局のバナーボタンを貼り、リンクさ
⑥
せる。
⑦
《①のキャラクター吹き出し説明時のイメージ図》
③
⑧
※キャラクターは
カテゴリーボタンに反応す
る形で出現し、吹き出し説明
の間、アニメーションで動く
展開を行う
②の解説････海の駅のコンセプトと今後のネットワーク化
②
の説明をテキストと図で表示させ、ゆたか海の駅の施設の
説明を見取図とテキスト・画像で展開し、ゆたか海の駅詳
細情報を画面下部に表示させ、１画面内にて展開を行う。
（別途⑨の解説参照）
③
③の解説････豊町のホームページ内の概要のページにリン
クさせる展開を行い、豊町 HP にゆたか海の駅のバナーを
貼ってもらい、相互リンクさせる。（別ウィンドで展開）
④
④の解説･･･⑯の解説を参照
⑤の解説･･･⑯の解説と同じ展開を行う。
⑤
198
⑥の解説････大長周辺と御手洗周辺以外のスポット詳細
⑥
データへジャンプさせるマップ画面、マップ上の番号か
名称ボタンを押す事によって詳細情報へジャンプして、
さらに詳しくのボタンを押すと小さな別ウィンドに詳細
テキストデータを表示させる。
⑦の解説････豊町への 4 方面のアクセスルートを表示さ
アクセスルート選択画面
せて各ルート選択後、別ウインドウにルートを目で見て
⑦
分かる様に地図とアニメーションにてルートを表示させ
る。
そして、アクセスルート選択画面とルート別ウインドウ
内に時刻表のリンクボタンを置き、詳細時刻表を表示さ
せる。
時刻表を別ウインドウで表示
各方面のルートを別ウインドウで表示
⑧の解説････今後の海の駅のネットワーク化するにあた
っての「海の駅ネットワークリンク集」と「海に関する
⑧
リンク集」の２つのボタンによってそれぞれリンク先画
面にて情報公開する。
●全ページ共通の上部フレーム部分について
ゆたか海の駅ロゴボタンによる what’s ゆたか海
の駅ページへのリンクボタン展開と中国運輸局
ＨＰとマリンレジャー情報のトップページへそ
れぞれのページにジャンプさせるリンクを貼る
展開を行う。
中国運輸局
中国運輸局トップページへ
199
マリンレジャー情報
ﾏﾘﾝﾚｼﾞｬｰ情報トップページへ
●ページ全体のイメージについて
トップページ以外の画面左部分イメージ
・
現在開いているコンテンツの各ページを色の違いに
よる視覚表現を行い、ユーザーの現在地を的確に表示する。
⑨の解説････「海の駅コンセプトと今後のネットワ
⑨
ーク化について」と「ゆたか海の駅の見取図」と「
ゆたか海の駅詳細情報」の３つの項目を１画面内で
展開し、コンセプトとネットワーク化についてはテ
キストデータと図で説明を行い、ゆたか海の駅の施
設については見取図を表示させて、各施設ごとにコ
メントテキストと写真をマウスロールオーバーの状
態の時に表示させる。
そして、
「ゆたか海の駅詳細情報」は同画面下部に
詳細情報をまとめたデータをテキストで表示させる。
マウスロールオーバー時
（ツインの部屋の部分マウスを持ってきた場合）
②の画面下部「ゆたか海の駅詳細情報」画面
200
⑯の解説････④の画面で色分けされた各スポット
⑯
別に名称のボタンにリンクを貼り、スポットボタ
ンをクリックした後に詳細情報画面へジャンプす
るその後、もっと詳しくのボタンを押した後、小
通常時
さな別ウィンド画面でさらに詳細なテキストデー
タを表示させる。
もっと詳しく のボタン
詳細情報画面
もっと詳しく のボタンを押した後
⑱の解説･･･マップ上の番号か名称のリンクによっ
てジャンプしてきたこの画面では､選択した項目の
詳細データを挿入し､もっと詳しくのボタンを押す
と､さらに詳細なテキストデータを小さな別ウィン
ドで出現させて、じゃまにならない様に展開する。
もっと詳しく のボタン
もっと詳しく のボタンを押した後
201
⑱
⑲の解説･･･今後の海の駅の増設とネットワーク
⑲
化していく中で､他の海の駅へのリンク集のペー
ジとして展開する。
⑳の解説･･･全国の運輸局等の海に関するリンク
集のページとして展開する。
202
⑳