プロジェクト報告書 Project Report
提出日 (Date) 2011/01/19
函館観光情報サイト“はこぶら” ネクストステージ
Next Stage of Hakodate Tourism Website ”Hakobura”
1008038 福岡 大輔 Daisuke Fukuoka
1 背景
グループ B
観光地の写真で検索できるサービス
函館観光情報サイト“はこぶら”とは，2008 年 12 月
グループ C
にオープンした函館市の公式観光情報サイトである．
行きたい観光地をナビゲーションしながら，観光計
Plone とよばれるオープンソースの CMS を利用してお
画を立てられるサービス
り，Google Maps 上で観光地を検索できる「地図から
探す」
，観光の目的（食べる，見る・遊ぶ，…）別に観光
グループ A は，函館観光に関する雑誌や Web サイトな
地を検索できる「カテゴリから探す」などの多彩なサー
どを調査した．その結果を基にペルソナを立て，観光客
ビスが提供されている．サイトの企画・編集・運営は函
になりきって観光プランを練り，実際に観光を行った．
館市から受託された地元企業が担当し，サイト構築は本
観光を行って気がついたことを意見交換した結果，上記
学が担当している．
の提案に至った．グループ B は，観光プランを立て，実
本プロジェクトのテーマは，函館観光情報サイト“は
際に観光を行った．観光を行って気がついたことを意見
こぶら”を観光客にとってより良いサイトに改善するこ
交換したところ，観光する時には「観光地の印象」で行
とを通して，Web サイト構築に関わる技術および情報デ
きたい観光地を決めていることを発見した．よって上記
ザインを学習するというものである．“はこぶら”の改
の提案に至った．グループ C は，観光を「楽しむ」こと
善に関する取り組みは，本学の実践的 IT 人材育成講座
に焦点を絞り，観光プランを立てる時に楽しめるサイト
エンタープライズコース観光ポータルサイト構築グルー
を考えた．この考えを基に，実際に観光を行った結果，
プでも行っている．こちらは函館市からの改善要求に対
上記の提案に至った．
して，改善案を考えて構築することに取り組んでおり，
本プロジェクトに対して技術的な支援を行っている．
2 前期の活動
2.1
課題の設定と到達目標
しかしながら，各グループの提案は「誰に，どのような
目的で」利用してほしいサービスなのかが明確化されて
いなかった．そこで，一時的にグループを解散し，メン
バー全員でもう一度，“はこぶら”の現状をシステム面，
デザイン面，コンテンツ面の 3 種類に分けて調査・分析
まず，メンバー 13 人を 3 つのグループ（A，B，C）
し直すことで，新たな提案を生み出そうとした．しかし
に分け，
“はこぶら”の現状と観光サイトの意義を調査・
調査・分析を行ったものの，誰に利用してほしいサービ
分析した．その結果，各グループ共通していた見解とし
スなのかが不透明なままであった．そのため実際に観光
て，「利用者の視点に立ったサービスが構築できていな
地に行き，観光客が困っていることをインタビュー形式
いので構築するべき」，「他の観光サイトでもやっている
で調査した．だがこの調査も，調査対象を明確化するこ
ようなことの真似事が多い」などが挙がった．そこで，
となく実行してしまったために，必要な結果を得ること
これらの見解を軸に，各グループで“はこぶら”への提
ができなかった．
案を具体化する作業に移った．各グループの提案は以下
の通りである．
グループ A
観光の思い出を振り返る動画を作成できるサービス
このように，実行する内容を事前に明確化できていな
かったことから，提案を決定する作業は難航した．そこ
でこの状況を打開すべく，解散前のグループごとに厳選
した提案を 10 個考える作業を行った．各グループが考
えてきた提案（計 30 個）で似たような提案はまとめる
などの分類化を行った結果，3 つの提案に収束した．さ
ビスである．
グループ C - 出会いの可視化
らに，これら 3 つの提案は共通して「可視化（見える
グループ C では，観光客が観光スポット間を移動
化）」の必要性を指し示していることに気がついた．そ
している点に着目した．「函館山」から「五稜郭タ
こで，新たにグループを編成し直して取り組んでいくこ
ワー」まで向かう道中にはさまざまな店舗，史跡が
ととした．各グループの提案は以下の通りである．
存在しているが，現在の“はこぶら”では道中に存
在する情報など関係なく，自分で情報を探さなくて
グループ A - 魅力の可視化
写真から選ぶ
グループ B - 時間の可視化
情報共有＋ Timeline ＋“はこぶら”
グループ C - 出会いの可視化
はならない．そこで，
「ぶらり”ミチ”発見」という
サービスを提案した．これは Google Street View
API を活用して，自分中心の視点で店舗や観光地を
表示し，指定した目的地までの道中から新たな観光
スポットとの出会いを提案するサービスである．
ぶらり“ミチ”体験
2.3 今後の課題
これら 3 つの可視化を課題として，本プロジェクトの目
これら 3 つの可視化を A，B，C の 3 グループで提案
的である「“はこぶら”を観光客にとってより良いサイ
したが，どの提案もユーザーを意識しておらず，グルー
トにする」を達成する．
プ B とグループ C の提案に至っては API に頼りすぎた
2.2
課題解決のプロセスとその結果
各グループ共に，簡易プロトタイプを制作し，提案を
具体化する作業を行った．具体化の最終形を以下に述
べる．
グループ A - 魅力の可視化
グループ A では観光雑誌を見たときに「写真」が
一番目立つことに着目した．一番目立つ要素を見る
と，それに対するイメージが深まることから，「写
真」が観光地探しの重要なきっかけになると考え
た．そこで「写真から探す」というサービスを提案
した．これは縦に 4 枚，横に 5 枚，計 20 枚の観光
地の写真がタイル状に並んだ画面から，気に入った
写真を選択してフォルダに入れると，選んだ写真の
観光地の位置が地図上に表示されるというサービス
である．
グループ B - 時間の可視化
グループ B では，自分の予定に合うイベントを把
握しづらいことに着目した．従来のイベント表記
提案となっている．制作規模も 3 つの提案を並行して取
り組むとなると莫大なものになってしまう．現状のまま
継続して活動に取り組むべきか，それとも 1 グループに
まとまって新たな可能性を模索するべきか．どちらの方
向性を選択するかを決定することが今後の課題である．
3 後期の活動
初めに，2.3 節で述べた課題をメンバー全員で議論し
た．議論の結果，2.3 節に挙げた懸念事項が心配された
ため，1 グループにまとまって新たな可能性を模索する
方向性を選んだ．また，後期の活動では「人間中心設
計」の枠組みに則って，プロジェクトを進めていくこと
にした．
3.1 課題の設定と到達目標
まず，リチャード・S・ワーマンが提唱する LATCH
（Location，Alphabet，Time，Category，Hierarchy）[1]
という情報整理の観点から，もう一度，現在の“はこ
ぶら”の現状分析を行った．分析結果は以下の通りで
ある．
では「文字による時間表現」が主体的であったため
に，自分の予定に合うイベントが把握しづらいと考
えた．そこで，「パットミ！」というサービスを提
案した．これは@nifty Timeline API を活用して，
時間軸に沿う形でイベントを表示することで，利用
者の予定に合致するイベントを探しやすくするサー
Location（場所）
「地図から探す」がある．
Alphabet（文字）
検索ボックスで文字情報が利用されている．
Time（時間）
「今月の特集」，季節ごとに移り変わる TOP ページ
した．
の画像などがある．
Category（カテゴリ）
「カテゴリから探す」がある．
Hierarchy（階層）
函館市の公式観光情報サイトであるだけに，掲載さ
れている情報が均一で平坦である．
情報選択のメリハリ
観光雑誌のキャッチフレーズに着目した．紙面上だ
けではなく Web 上でも効果的な要素であるかどう
かを調査するために，現在の“はこぶら”にキャッチ
フレーズを加えたページを作成．そのページをユー
ザーに見ていただいた．結果として，「店舗の特徴
以上の分析結果から，現在の“はこぶら”には Hierarchy
がわかりやすい」という声が挙がったので，Web 上
（階層）が不足していることがわかった．Hierarchy（階
でもキャッチフレーズが有効な要素であることを確
層）とは情報の「大小の差」のことを指す．そのため，
Hierarchy（階層）を「メリハリ」という言葉で定義した．
さらに観光客に対して，現在の“はこぶら”に掲載さ
認した．
表現方法のメリハリ
Web 上で用いられている表現方法の分析を行った．
れている情報を見せて，どのように感じたか，率直な意
独自に 6 種類の表現を定義し，それぞれの表現につ
見を聞く調査を行った．調査の結果，「情報が押し出さ
いて思いつく限りのアイデアを出した．出したアイ
れているように感じない」，「おすすめがわからない」，
デアを分類した結果，図 1 の結果が得られた．ここ
「見どころを教えてほしい」などの声が挙がった．これ
で先の，情報の表現に関する意見のところで，観光
らの声から「現在の“はこぶら”では観光地の特徴が捉
客から「写真，文章が大きくて見やすい」という声
えづらいということがわかった．つまり，現在の“はこ
が挙がったことに着目．6 種類の中から「大小」を
ぶら”にはメリハリが不足しているのである．
選択した．
そこで後期の活動では，観光地の特徴を捉えやすくす
ることで，現在の“はこぶら”を「行きたい場所に出会
えるサイト」に提案・構築することを課題とした．
3.2
課題解決のプロセスとその結果
「行きたい場所に出会えるサイト」に提案・構築する
という課題を解決するために，「メリハリ」をさらに突
き詰めて分析していくことにした．
図 1 Web の表現方法
まず観光客に対して，観光雑誌をパッと広げて見せ
て，紙面のどこに注目しているか調査を行った．調査の
結果，大きく分けて 2 種類の傾向に分かれることがわ
かった．1 つ目は，掲載されている情報の内容に関する
意見で，
「食べ物がおいしそう」や「海で遊びたい」など
の声である．これを，掲載されている情報の内容で惹き
つける「情報選択のメリハリ」と定義した．2 つ目は掲
載されている情報の表現に関する意見で，「写真，文章
が大きくて見やすい」，「色によって印象が変わる」など
の声である．こちらは，掲載されている情報の表現で惹
きつける「表現方法のメリハリ」と定義した．
次に，定義した 2 つのメリハリ（情報選択のメリハ
リ，表現方法のメリハリ）には具体的にどのような要素
があり，どの要素を用いれば一番効果的であるかを調査
以上の調査から，情報選択のメリハリでは「キャッチ
フレーズ」．表現方法のメリハリでは「大小」を用いる
こととした．そして，これら 2 つのメリハリを“はこ
ぶら”上のどの部分に反映させるべきか検討を行った結
果，「カテゴリから探す」（図 2）に 2 つのメリハリを反
映させることとなった．理由は，アクセス数が多いにも
関わらず，1 つ 1 つの掲載情報の特徴が際立っていない
ためである．以上の結果から，今年度の成果物を決定し
た（図 3）
．本成果物には，システム面とレイアウト面で
多彩な工夫を施した．
• キャッチフレーズの文字サイズを大きくする．
• キャッチフレーズを左上に配置する．
• 線を使って情報を整理する．
• 均一な要素の中に不均一な要素を取り込む．[2]
最後に，
「情報選択のメリハリ」および「表現方法のメリ
ハリ」が有効であったかどうかを評価するために，ユー
図2
現在の「カテゴリから探す」
ザー評価を実施した．評価方法は，被験者に「カテゴリ
から探す」（「食べる」カテゴリに限定する）から行きた
いと思う店舗を選んでいただくというものである．現在
の「カテゴリから探す」と，今回提案する「カテゴリか
ら探す」の 2 種類について評価を行った．店舗を選ぶ際
には，条件としていくつかの教示を与え，店舗を選ぶま
でにかかった時間に応じて，質問内容を変えた．
評価の結果，「情報選択のメリハリ」では，「キャッチ
フレーズの内容に惹かれた」，「何を売りにしているかわ
かる」などの意見をいただいた．一方「表現方法のメリ
図3
新しい「カテゴリから探す」
ハリ」では，「キャッチフレーズが店舗情報の一番上に
表示されていたので目に付いた」，「一文字目が大きく
強調されていたので目に付いた」などの意見をいただい
システム面 - キャッチフレーズの抽出
「カテゴリから探す」に掲載されている 1 つ 1 つの
スポット情報には「詳細情報」へのリンクが張られ
ている．リンクをクリックすると，市民記者が執筆
た．このことから，2 つのメリハリは有効であることが
わかった．そのため「行きたい場所に出会えるサイト」
に提案・構築するという課題を達成できたといえる．
3.3 今後の課題
した紹介記事と共に駐車場などの詳細情報が掲載さ
1 月末，函館市に今年度の成果物を提案した後，2 月
れたページに遷移する．システム面では，この詳細
10 日に東京で開催される課外発表会での提案を予定し
情報ページに掲載されている紹介記事に着目した．
ている．
1 つ 1 つのスポットの詳細情報ページに掲載されて
いる紹介記事に目を通し，記事の傾向分析を行った
ところ，記事を段落ごとに分割した際の文末に筆者
の主張したい言葉が集中していることを発見した．
この分析結果に基づいて，紹介記事の文末から言葉
を抽出するプログラムを作成したところ，キャッチ
フレーズらしき言葉を高い確率で取得することがで
きていた．
レイアウト面 - 観光雑誌のデザインを活用
雑誌には，右開きと左開きの 2 種類がある．それぞ
れのレイアウトにおいて，要素（タイトル，キャッ
チフレーズ，写真など）がどの部分に配置されてい
るかを分析し，どのようなレイアウトにするべきか
を検討した．最終的に，以下の要素をレイアウトに
反映させることとした．
参考文献
[1] リチャード・S・ワーマン．情報選択の時代，日本実
業出版社，1990．
[2] 矢野りん． デザインする技術∼よりよいデザインの
ための基礎知識，MdN，2006．