Comments
Description
Transcript
直感的に理解しやすいウェブデザインの基準 : サイトマップの新デザイン
SFC-2005-001
直感的に理解しやすいウェブデザインの基準
サイトマップの新デザイン提案
慶膳義塾大学
環境情報学部 4
年
元木
彩
教員推薦による学生論文のことば
ウェブでは迷子になることがよくあるが、そのような際には、サイトマップが
役に立つと言われてきたが、これまでサイトマット自身のデザインを見直すような
試みはあまりされてこなかった。このような重要ではあるが、比較的目立たない存
在であった、サイトマップに光をあて、その望ましいあり方を論じ、具体的なデザ
イン提案を行なっている点は高く評価できる。
慶磨、義塾大学
環境情報学部教授
安村通晃
卒業制作
2ω5年度(平成 17年度)
直感的に理解しやすしゅェブデザインの基準
ーサイトマップの新デザイン提案甲
慶慮義塾大学環境情報学部
元木彩
卒業制作要旨 2
005年度(平成 1
7年度)
直感的に理解しやすいウェプデザインの基準田サイトマップの新デザイン提案圃
あまり活用されず、最近では検索機能の技術向上によりさらに活用される場がないと感じられるサ
イトマップo この事により、リニューアル時にサイトマップを更新しないという事も時折見かけられるo
現代社会で重要な情報源とされるウェプの中で、サイトマップは必要性があるのか、そしてその必
要性を高める為にはどの様な工夫が必要なのか、という問題についてこの論文で取り組んだ。
今までのサイトマップの定義に含まれていた「サイト構造を理解できるjという事に闘執せず、サイ
トの中に含まれる情報をどの様に分類、整理するかという可能性を考え、新しいサイトマップのデザ
インを検証、実践した。デザインするに当たり、新しい操作法を学ばなくても操作できる直感性を大
事にした。様々な大学のウェブサイトにおける情報分類の手法やサイトマップのデザインを比較、
検証し、そして参考にしながら慶慮義塾大学湘南藤沢キャンパスのウェブサイトを題材としたサイト
マップを作製した。
慶慮義塾大学環境情報学部
元木彩
-11・
2005G
r
a
d
u
a
t
i
o
nTh
e
s
i
sA
b
s
t
r
a
c
t
I
n
t
u
i
t
i
v
eWebDesignStand
釘 '
d-ExtendingSitemapDesign
圃
Sitemapsa
r
en
o
ts
oapa
此 o
ft
h
en
e
c
e
s
s
a
r
yn
a
v
i
g
a
t
i
o
ni
nt
h
ei
n
t
e
r
n
e
t
，抗 s
eems.Is
凶1
v
i
t
a
lpa
此 i
nc
o
n
s
t
r
u
c
t
i
n
gw
e
b
s
i
t
e
s
?Thi
sg
r
a
d
u
a
t
i
o
nt
h
e
s
i
si
sbasedont
h
i
s
s
i
t
e
m
a
ps
q
u
e
s
t
i
o
n
，
andゐcusedoni
ft
h
e
r
ei
sanewwayo
fd
e
s
i
g
n
i
n
gt
op
r
o
d
u
c
es
i
t
e
m
a
p
st
h
a
t紅 e
負ut
ou
s
e
r
st
h
a
ta
r
es
e
a
r
c
h
i
n
gあ
，ri
n
f
o
r
m
a
t
i
o
ni
nt
h
ew
e
b
s
i
t
e
.
h
e
l
p
a
b
l
et
ounderstands
i
t
e∞ns
位u
c
t
i
o
n
"a
s
Notp
l
a
c
i
n
gt
h
ed
i
c
t
i
o
n
a
r
yusageo
fs
i
t
e
m
a
p
s“
，
butp
u
t
t
i
n
ganewf
e
a
t
u
r
eo
fs
i
t
e
m
a
p
so
f“
b
e
i
n
ga
b
l
et
o五nd
t
h
emosti
m
p
o
r
t
a
n
tf
e
a
t
u
r
e
此 i
se
x
e
c
u
t
e
d
. Newwayst
od
i
v
i
d
eandc
a
t
e
g
o
r
i
z
e
i
n
f
o
r
m
a
t
i
o
n
"a
st
h
ec
e
n
t
r
a
lpa
，andmainlyo
:
f
f
i
c
i
a
lu
n
i
v
e
r
s
i
t
yw
e
b
s
i
t
e
sa
r
e
i
n
f
o
r
m
a
t
i
o
ns
t
o
r
e
di
naw
e
b
s
i
t
ei
se
x
p
l
o
r
e
d
r
e
s
e
a
r
c
h
e
di
nt
h
ep
r
o
c
e
s
so
fr
e
d
e
s
i
g
n
i
n
gs
i
t
e
m
a
p
s
.Ast
h
ef
i
n
a
lp
r
o
d
u
c
tωther
e
s
e
a
r
c
h
，
t
h
es
i
t
e
m
a
po
ft
h
eKeioU
n
i
v
e
r
s
i
t
yShonanFu
j
i
s
a
w
aCampusi
sr
e
d
e
s
i
g
n
e
d
，andt
h
r
e
e
t
e
g
o
r
y
s
i
t
e
m
a
p
shavebeend
e
s
i
g
n
e
d
.Usingc
a
t
e
g
o
r
i
e
sa
sg
e
o
g
r
a
p
h
i
ci
n
f
o
r
m
a
t
i
o
nand伺 .
，i
ti
sshownt
h
a
tt
h
e
r
ei
st
h
ep
o
s
s
i
b
i
l
i
t
yo
fnewd
e
s
i
g
nmaking
placementi
n
f
o
r
m
a
t
i
o
n
rn
a
v
i
g
a
t
i
o
nw
i
t
h
i
nt
h
ew
e
b
s
i
t
e
.
s
i
t
e
m
a
p
sav
i
t
a
lt
o
o
lゐ'
K
e
i
oU
n
i
v
e
r
s
i
t
yF
a
c
u
l
t
yo
fEn
討r
onmen
泊1
I
n
f
o
r
m
a
t
i
o
n
AyaMoω恒
-m・
目次
第 1章 序 論
1
1
.
1本研究の背景....................................• .......
................1
1
.
2 本研究の目的......................
....................................1
1
.
3 本論文の構成..........................................................1
第 2章ウェプデザインの要素整理
3
2
.
1ウェプデザインとは.....................................................3
2
.
2 ウェプデザインの要素..................................................3
2
.
2
.
1 内容的な要素...................................................3
2
.
2
.
2 構造的な要素....................................................8
2~3 ニュースサイトにおける調査内容. ...
......................................9
第 3章書籍1:::ウェプ・インターフェイスの融合
1
1
3
.
1インターフェイスの融合とは..............................................1
1
3
.
2 書籍とウェブの融合の作品設計..........................................12
3
.
3 作品の概要........................................................1
3
4
3
.
4評価.............................................................1
16
第 4章サイトマップの実態
6
4
.
1サイトマップの特徴...................................................1
4
.
2サイトマップの定義....................................................16
4
.
3サイトマップの好ましい構造.............................................1
7
4
.
3
.
1参考にした研究...................................................1
7
第 5章サイトマップ設計・実装
1
8
5
.
1 サイトマップ活用度の調査..............................................1
8
5
.
2サイトマップと検索の違い..............................................1
8
5
.
3 サイトマップを活かす為に..............................................19
5
.
4サイトマップ設計・実装............
.....................................1
9
5
.
4
.
1実世界の場所情報を基盤としたサイトマップ..............................2
1
5.
4
.
2 ターゲットユーザーの関心を基盤としたサイトマップ........................22
5
.
4
.
3 2つの特性を合わせたサイトマップ.....................................25
-lV-
第 6章 評 価
26
6
.
1調査..............................................................26
6
.
2 考察...............................................................26
第 7章 結 論
27
7
.
1 まとめ.............................................................27
7
.
2 今後の展望..........................................................27
付 録A
m
付録B
30
付録C
34
付録D
35
付録E
38
-v-
図目次
1
.
1サイトマップと情報の関連性.................................................2
2
.
1 絵画的ーピアズリーの文字デザイン...................
.......................4
2
.
2 実用的ーエリック・ギルの文字デザイン........................................4
2
.
3 絵画的一西夏文「華厳経J木活字版..........................................4
2
.
4 実用的一東京制文堂の明朝活字体..........................................4
2
.
5 サイト構造一直線的、階層、格子状、網状な構造................................8
3
.
1 作品の概要...........................................................1
1
3
.
2 書籍インターフェイスの効果的な事例(アリシア・キーズ公式ウェブサイト)..............1
2
3
.
3I
n
t
e
n
t
i
o
n
a
l
l
i
e
sウェプサイト...............................................1
3
3
.
4a
n
d
r
e
e
s
c
uandg
a
i
v
o
r
o
n
s
k
iウェブサイト.....................................1
3
3
.
5試作したウェブ作品......................................................
1
4
5
3
.
6作品で画像を動かし、解説を読ませるページ..................................1
5
.
1慶慮義塾大学湘南藤沢キャンパスのウェブサイトコンテンツ(学部生用)...............20
5
.
2 実世界の場所情報を基盤としたサイトマップ...................................2
1
5
.
3慶藤義塾大学湖南藤沢キャンパスのウェブ、サイトサイトマップ(学部生用).............22
5
.
4ターゲ、ットユーザーの関心を基盤としたサイトマップ..............................23
5
.
5概念と言葉............................................................24
5
.
62つの特性を合わせたサイトマップ...........................................25
7
.
1新しいサイトマップの一例 (KDDIキャンペーンサイト)............................27
-Vl-
表目次
2
.
1 文化的要因一色に対するイメージ............................................6
2
.
2 文化的要因一引き出されるキーワード........................................7
2
.
3 心理的要因一心理的反応による見え方........................................7
3
.
1 書籍とウェブ、の特性比較..................................................1
2
3
.
2試作で試みる特性の持込と具体的な形......................................1
3
6
4
.
1 書籍とウェブの要素対応付け...............................................1
5
.
1 SFCウェプサイトにおけるサイトマップの活用調査..............................18
5
.
2何を改善したら、サイトマップを利用すると思いますか.............................1
9
6
.
1作品の評価............................................................26
• vll・
卒業制作 2005年度(平成 1
7年度)直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶藤義塾大学環境情報学部元木彩
第 1章 序 論
1
.
1本研究の背景
「誰もが使えるメデ、イアとしてウェプを確立するには ?J品、う問題について考えた事があります
か?重要な情報メデ、イアとしてのインターネットの位置づけは現在、はっきりしているかその道具を
どの様に活用するかは使う側次第。インフラや社会環境という大きな枠組みからこの間題に対して
取り組む事も可能である。しかし、インターネットに関連する技術を学ぶ過程で f
ユーザピリティjと
いう言葉を知った。コンテンツは整っていても、使い勝手が悪くては意味がないと実感した。この
中でも、情報が溢れつつある中で、 f
いい情報Jが存在していても、そこたどり着けないという問題が
ある。色々と探して有用な情報があるサイトにたどり着いても、そのサイトの中でさらに探す作業が
ある。この f
探すjという行為は実社会でも必要な情報やものを見つける際に必要なステップであり、
何もインターネットの世界だけの特異な行為ではない。事例を挙げると、図書館でも情報を探す
時、主にコンピュータで検索して有用な情報の在り処を見つける行為が伴う。また、買い物をする
時にスーパー等ではどこの売り場に行くかという情報を地図から探し出すという行為がある。ウェ
ブの話しに戻ると、もちろん情報源となるウェブ、の設計そのものに問題があっては元も子もないが、
という行為は必然的なものとなる。必然的な行為である以
それが適切であると仮定すると「探すJ
上、その行為で使うツールがいかに有効で、あるか、という点が問題の焦点になるだろうと考えた。
1
.
2 本研究の目的
ある一つのサイト内で探すJ
という行為に限定すると、その延長上に f
サイトマップJとf
検
対象を f
索 jという 2つのキーワードにたどり着いたo 検索機能の技術向上で、まず検索する(例えある一
つのサイトの中でも)という風習は日本語での造語に当たる「ググる J(Go
o
g
l
eS
e
archEngine1で
検索にかける)という言葉の広まりでも感じられる。しかし、検索をする便利さを知った時、サイト
マップの存在意義や位置づ、けが変化しなければ必要性のないものとして扱われるだろうとも感じ
た。一般的にサイトマップの役割とされるサイト構造の視覚化だけではなく、サイトの中で必要な情
必要な情報J
が様々であるように、 f
サイト構造jの見せ方も様々な形で
報はどこにあるのか、その f
表現できるのではないか、という可能性を感じた。広まっている検索というツーノレに対して、サイト
マップはそのツールで見せられない情報の提示が可能だろう。新しいサイトマップのデザインが実
用性、そして操作が分かり易い直感性の両方があるかどうかという事まで、サイトマップの新デ、ザ、イ
ン提案という課題について挑戦した結果を記載する。
G∞g
l
eは
1998年に設立され、「独自の検索エンジンによって世界中の情報を体系化、アクセス可能で有益にす
9
]
0
るjという使命を掲げている [
1G
oo
g
l
eS
e
a
r
c
hEngineはGoog
l
eが提供している検索エンジンサービスのことである。
卒業制作 2ω5年度(平成 1
7年度)直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶慮義塾大学環境情報学部元木彩
てトぃ
サイトマップ
fサイトマッフ j とは?
(1)サイト機造の視覚化。
(2) 各コンテンツへのリンクを含め、重機ページをま忘れられる苛
(
，
情報の分類方法のよっては、
)の fサイト繍造 j の捉え方が篠々ある 4
1
責舗の分類は単一でないはず診
色々な情報の切り取り方に
よって、サイトマップも閉
じ位の繰々な表現方法がある脅
図1
.
1
:サイトマップと情報の関連性
1
.
3本論文の構成
∞
また、研究の流れは以下の通りである。第 2章では、研究会に参加した 2 4年の 1年間でウェ
ブデザインの要素整理をする事に費やした内容を記載する。第 3章では、 2005年春学期に書籍
の要素をウェプデザインに持ち込むという試みを試し、その間は書籍インターフェイスとウェプ・イ
ンターフェイスのクロスポイントを考えながら研究を進め、最終的には書籍でいう索引、ウェブサイ
トでいうサイトマップに着目して研究を進めてきた内容を記載する。第 4章では、最終学期にテー
マとしたサイトマップの新しいデザイン提案の前に調べたサイトマップの概要を示し、その設計を
第 5章で、評価を第 6章で提示する。最後に、第 7章では結論を記載する。
-2・
卒業制作創蹄5年度(平成 1
7年度)直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶藤義塾大学環境情報学部元木彩
第 2章ウェプデザインの要素整理
2
.
1ウェプデザインとは
ウェブ、2とは現在の社会の中で重要な情報源のーっとなっている媒体であり、電通からも 2004
年にはマスコミ 4媒体(新聞、雑誌、テレビ、ラジオ)の中のラジオよりもインターネット広告費が始
めて上回ったと発表されたえこれはメディアに対する接触時間の変化や情報源をどこに求めるか、
というユーザー側の姿勢の変化によるものと考えられている。
ウェブデザイン4での失敗の多くは相応の注目を得ようと画像や音を必要以上に追加する作り
手がユーザ}倶u
に立たず、ユーザピリティを考慮しないからで、あると、ユーザピリティを含めたデ
ザインの分野で影響力を持つドナルド・ノーマン博士は考えている[18
]。ー情報源や仕事場とし
5等の技術でウェプのトップページに目立つ映像、音楽
てウェブを捉えるユーザ}に対し、Fla
sh
を置き、ユーザピリティのなさだけで利用者や顧客を失う可能性もあるからである。もちろん、芸術
型のウェブと問題解決型のウェプ、(情報提供型)とは区別しなければならない、とヤコブ・ニーノレセ
1
6
]
0
ンも指摘している [
デザインをする事は、ユーザー側の要求(
n
e
e
d
s
)や欲求(
w
a
n
t
s
)を汲み取り、形やサービスにす
るというプロセスである。このプロセスの中で、ユニバーサルデ、ザインの概念6を取り入れ、普遍的
に使いやすさを追求するという考え方がウェブ、デザインの中でも一般的になってきている。
2
.
2ウェプデザインの要素
ウェブデザインの要素として、それを構成する物体的、あるいは内容的なものと、それら物体的
なものをどの様に組み立てるかという構造的なものの 2種類に分類されると考える。それらの 2つ
の分類に沿って紹介したいと思う。
2
.
2
.
1 内容的な要素
ウェブ、ページを構成する要素の中で、内容的な要素として存在するのが文字、画像、音、あるい
は以上の混合として映像(Fla
shを含む〉である。特にこの中でもデ、ザインするにあたって重要な
要素と考えられたフォント、色、という要素に注目して研究を行った。
ウェブ=ウェブ、サイトの省略。
がネット広告費がラジオを上回る一電通" [
2
4
]
4 ウェブのユニバーサノレデ、ザイン化の基準をする W
orldWi
deWebCo
nsortiumや W3C内の Web
A
c
c
e
s
s
i
b
i
l
i
t
yl
n
i
t
i
a
t
i
v
e
(
W
A
I
)はウェブ、デ、ザインを知るに大事な出発点となるo ウェブの情報提供を
する銃砲メデ、イアとしての側面を強調して活動している [
2
3
]
0
5“
Mal
田'O
media社が開発した、音声やアニメーションを組み合わせて Webコンテンツを作成するソフ
ト、あるいは作成されたコンテンツ。"[
2
8
]
6 “全ての人のためのデザイン、 1
985年にノースカロライナ州立大学(米)のロナルド・メイス氏によって
明確にされ、 7つの原則が提唱されている"[
5
叫これに関連して、Goo
dDesignAw
釘 dというデザイ
ン賞も存在する。 [
3
7
][
5
ω
2
-3-
卒業制作 2ω5年度{平成 1
7年度)直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶慮義塾大学環境情報学部元木彩
フォント{タイポグラフィ)
技術が進んで、いるとはいえ、情報メディアとしての役割を果たす以上は文字で表現される情報
はインターネット上にあると考えられるo そこで、文字情報を形作るタイポグラフィ7によって印象の
違いが認められるだろう。これも内容にふさわしい使い方があるのは活字印刷の歴史、またさらに
その前にさかのぼる書体から理解できる。特に初期の活字印刷によって使われていたタイポグ、ラ
フィは印刷された審物が貴重なものだったこともあり、また印刷された審物の内容が聖書などの宗
教的だったことにも合わせ、絵画的な要素が多かった(図 2
.
1
)。しかしながら、印刷技術の普及に
対して内容も幅広いものになり、絵画性よりも実用性に重きをおいたフォントの登場が見られるよう
になった(図 2
.
2
)、というのが非常に簡易なタイポグラフィの歴史である。日本も印刷技術の発展
は同様の流れを辿っている(図 2
.
3
，2
.
4
)。
ABCDEFG
HI
JKL門 N
OPQRSTU
VWXYZ
abcdefghij
klmnopqrst
図2
上絵画的ーピアズリーの文字デ、ザイン[
3
8
]図 2
.
2
:
実用的ーエリック・ギルの文字デザイン[
3
8
]
轍
凶
ロ
ゑ222
4U
版
字
活
木
伐採薮蕊綾絞殺綾
鉱然成鍬求義副総弟夏
委抗議総絞殺畿銀一咽
一思議議ぷ緯線北紙袋一的
一紘一草案純一套義一細
がりな民総延議繋紘一日
込浅忍立急患露荻一図
結士能孟世
之以待脊皆
而故士君稀
図2
.
4
:実用的一東京市j文堂の明朝活字体[
3
8
]
フォント8は画面表示と印刷で使い分けをし、英語でもTim
e
sNewRo
manとAri
a
lに当たる
(08の初期搭載フォントの違いにより、使い分けが行われているという事も)。日本語ではゴシック
体と明靭体の 2 大フォントが主に使われているえ情報性をマイクロソフト社のツール10によって、
7
文字と組版システム，組飯規則を組み合わせる技術[
4
9
]
0
8 “活字印刷に用いられる活字のー揃いのこと。…今日的な意味では、コンピュータで利用する書体
データのことを指し、デ、ジタルフォントともいわれますo" [
2
6
]
9 ゴシック体は画面表示と印刷物の見出しに、明朝体は印刷を前提とした文書に使われている
1
0W
indows08で使用できる
[
2
8
]
0
WebEmbeddingF
o
n
t
sT
o
o
lというツールである。フォントの輪郭を
-4
圃
卒業制作 2
005年度(平成 1
7年度)直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶謄義塾大学環境情報学部元木彩
フォント情報を閲覧特にダウンロードして特殊なフォントの使用も可能にするという事もできるが、
まだフォントをウェブデ、ザインで工夫する要素の一つにするにはまだ時闘がかかるものと見られて
いる。しかし、フォントの工夫はまだでも、見出しの大きさ、行問、文字のスタイルや後述する色の
5
5
]
0
使い分けによって文章を読みやすくする工夫は可能で、ある [
色
文化的な要因にはさらに細かくみると、多くの要素が絡んでくる。歴史、宗教、芸術、さらには気
候なども関係してくる。文化的に良い意味を持っている色や特別な意味を持っている色があり、そ
れらは文化によって異なる場合もあるo 一例を挙げると、紫という色は日本では律令制の時に最
高位の臣下や僧侶の衣に使われた色であるから高貴な色とされているのに対し、西洋ではキリス
ト教に関連して「受難のキリスト jに因み、喪のイメージを連想させる臼叫。文化的要因によって色
の好みが異なるのは調査済みで、中でも色彩心理学を専門とする千々岩氏は『人はなぜ色に左
右されるのか』の中で、各国の色の好みについて調査し、文化形成に関連する風景や気候などど
4
0
]
。以下の表 2
.1で文化的要因を誘発させるもの(物理的なもの、言葉
の関連性を主張している [
等)と特に結びついている意味合いを序列した。
データとして使用するブラウザーに送り、フォント情報が手元のコンピュータになくてもそのフォントで
ウェブページを閲覧できる~いうもの。しかし、 Intemet E
x
p
l
o
r
e
rで閲覧時のみ使用できるツールであ
1
4
]
0
る等の理由で、まだ広まるには時間がかかると思う [
-5-
卒業制作 2ω5年度(平成 1
7年度)直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶臆義塾大学環境情報学部元木彩
表2
上文化的要因一色に対するイメージ [
3
倒臼9
]
色
国名
文化的要因を誘発させるもの
=
争
意味合い
赤
日本
学童のランドセノレ、下駄の鼻緒
=
今
女性、かわいい
神社の鳥居
=
今
魔よけ
武士の「勝ち色j
=
争
戦い
中国
祝賀の色
=
今
めでたい
西洋
聖母マリアの色
=
今
慈愛
軍服、スタンダールの f
赤と黒j
=
今
戦闘、戦い
律令制の最下位の色
=
今
低位
青春、青年、青二才
=
今
始め
農民の衣装
=
今
労働、野暮
皇帝の色
=
今
高貴、最高位
キリスト教の象徴色、聖母マリアの色
=
今
キリスト教
大天使ケルピムの羽の色、「ブルーへブ、ンj
=
今
天国
ジーンズ、『ブ、ノレーカラーj
=
今
労働
日本
天皇の衣の色
=
今
高貴
中国
皇帝の衣の色
=
今
良いイメージ
西洋
「卑怯j
=
多
悪いイメージ
日本
律令制の最高位の色
=
今
高貴
西洋
「受難のキリストj
=
今
喪のイメージ
日本
「茶道j、江戸文化の代表の色
=
今
粋な色
西洋
下級階層の衣、税の徴収入の色
=
今
軽蔑
日本
祝賀
コ
争
めでたい
白馬、白狐など白を冠した動物や具象物、神宮の衣
=
今
神聖
武士の白装束
=
今
喪の色
一
一
ト明白司一白血
青
日本
トーー一四回目
一
一
西洋
1-一』一ーーー
黄
紫
茶
自
一
トー一一
死出の旅路
中国
白い衣
=
今
喪の色、不吉
白い玉
=
今
永遠の命
ウェディングドレス、女神ヴィーナスの員
=
今
純潔、純粋
ギリシャの神殿、白衣の修道女
=
今
神聖な色
トー自由一一
西洋
』一一一ー
また、文化的要因から引き出されるキーワードだけを取り上げると、以下のような図表が提示され
る。キーワードだけに着目すると、共通項が多いと考えられるものが多く、文化的要因が一般的に
あまり着目されないということも納得できる。また、国際化が進んで、いく中で各文化固有の色に対
する意味が失われつつあるという事象も感じ取られる。
ー6
-
卒業制作 2ω5年度(平成 1
7年度)直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶慮義塾大学環境情報学部元木彩
表2
念文化的要因一引き出されるキーワード [
6
]位7
]
色
ヲi
き曲されるキーワード
赤
活動的、情熱的、怒り、興奮、心理的な翻争・逃走反応、性的な性質、刺激、危険、火、血
援
赤と黄色の両方の性質を持つ、エネルギッシュ、子供、陽気、健康的
黄
希望、陽気、楽しい、太陽、歓迎、幸福
緑
自然、平和、安全、安らぎ、新鮮、健康
青
冷静、誠実、理想、知的、冷淡、悲しさ、平穏、静寂、空、水、信頼、安定
紫
権力、神秘、不健康、クリエイティブ
茶
大地、泥、豊かさ、健全さ
自
神聖、無垢
黒
一一
堅実、厳粛、死滅、洗練、権力、気品
心理的要因は文化的要因に関係なく、色を見た時の生物学的な反応である。一例を挙げると、
他の色の中に赤や黄色があるとき、この 2色に特に注目するのは誘目性が強いからである。これ
には後天的な文化的な違いからの影響は少なく、どちらかというと人体の科学的な方面からの理
解が大きく、先天的なものであると言われている。以下の表 2
.
3に主要な反応をまとめてみた。
念心理的要因一心理的反応による見え方位9
]白3
]
表2
感覚
詳細
重量感
色の明度が高い色=明るい色からは軽い感じを受け、明度が低い色=暗い色からは
重い感じを受けます。例えば黒からは重量感や威圧感を受けますし、白いからは軽快
なイメージを受けます。白と比べて黄は 1.13
倍、青は 1
.52
倍、赤は1.76
倍、紫は
1
.84
倍の心理的重量感を感じるというデータがあります。
距際感
同じ距離にあるものでも、赤・黄色・オレンジなど暖色系の色は近くに感じ、青・紫など
寒色系の色は遠くに感じます。
大小感
同じ大きさのものでも、色の明度が高い色=明るい色ほど大きく膨張して見え、明度が
低い色=暗い色ほど小さく収縮して見えます。
誘自性
周囲の注意を引きやすい色、目立ちやすい色のことで、赤・オレンジ・黄などは誘目性
が高く、青・青縁・青紫などは低い色です。背景が白なら赤が、背景が黒や灰色なら黄
色がもっとも目立ちます。
視認性
認められやすい色のことで、背景の色との明度の差が大きいほど視認性が高くなりま
す。背景が黒なら、黄がもっとも見やすく、紫や青紫が見にくい色ですが、背景が白な
らば逆に、紫や青紫が見やすく、黄が見にくい色になります。
文化的要因の意味を汲み取りつつも、心理的要因として受ける印象を両方参考にし、色使いに
は場面ごとにふさわしい色がある見解が配色の重要性が着目されている背景である。しかしなが
-7-
卒業制作 2ω5年度(平成 1
7年度)直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶慮義塾大学環境情報学部元木彩
ら、多くの場合は心理的要因に着目していることが多い。その一例としては、ビジネスシーンには
トーンが強く、はっきりとした色使い、カジュアルシーンにはトーンが明るく、カラフルな配色、そし
て高級品や趣味のシーンには色相は同系色、深みのある配色がふさわしいという見解である μ
lJ
o
また、配色パターンを提示するウェブデ、ザインをテーマとしたウェブ、サイトや本、雑誌などでも心理
的要因が中心に取り上げられている。ユーザピリティは広くしながらも、多様なユーザーをター
ゲットとする方向性をとるならば、文化的要因への着目も重要かもしれない。
2
.
2
.
2 構造的な要素
ウェブデ、ザインの中で構造的な要素に含まれるのは先ほどの内容をどの様に構成するかとい
うウェブページの構造、レイアウトやナピゲーションであるo
構造はサイト内で存在するページ同士の関係を表現している。これは特に内容によって用途が
異なるものであり、 4つの分類がある [
2
6
]。書籍の中でも物語的な要素が強く、順を追って閲覧す
る必要性が強い内容は直線的な構造、いくつものトピックの下にさらなる内容がある場合は階層
構造、それぞれのトヒ。ックが同じ具合に連結している場合は格子状構造、そしてその他に規則性
なくつながっている時は網状構造という使い分けが可能で、あるD 以下の図は左上が直線的構造、
右上が階層構造、左下が格子状構造、右下が網状構造を表現している。
f
:
?
ふ
:
:
=
jr'一
，
ιj
日
と
う
ι一
i
i
i
J
L
J
i
L
j
!
i
i
と
!
if
J
Jp
;
j
~'日必
17:ぞマ~，-←1
r~'~~-<'.-"-ì
戸税r'
'
'
1
;デ
ペ
図2
.
5
:サイト構造一直線的、階層、格子状、網状な構造 [
2
6
]
ウェプページのレイアウトはそれぞれの内容要素をどの様に配置するか、という事である。一般
的な画面サイズは縦 768ピクセル、横 1024ピクセルといわれているが、これを考慮した上で、ウェ
ブページのレイアウトは大体縦 600ピクセル、横 800ヒ。クセル以内に収めるのが望ましく、また印
帽
8
岨
卒業制作 2ω5年度(平成 1
7年度)直感的に理解しやすいウェプデ‘ザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶慮義塾大学環境情報学部元木彩
刷を考えると A4サイズの紙に納まる範囲が望ましい [
2
6
]
0望ましいページの大きさはあるが、内
容によってページの長さを調節、あるいは分割して表示する事を採用される事も多い。最近では、
f
印刷用 jとA4サイズ以内で、広告等を省いた印刷の為に別ページを作成する場合も多く見られ
る110
文字、画像やその他の情報をどの様にスペース内に配置するかだけではなく、それらの情報を
どのように分類、整理して必要な情報に行き着きゃすい様にするか、という事もレイアウト次第で
変化してくる 120サイト構造がどの様な形式をとるか、アイコンやパンくずナピゲーション等のナピ
ゲ、ーション手法のいずれを私用するかもこれに関係してくる [
4
6
]。サイト全体っとして、一貫性のあ
るレイアウトデザイン、そしてメンタルモデル13が作りやすいレイアウト、サイト構造が求められる。
2
.
3ニュースサイトにおける調査内容
研究会で「ニュースサイトのデザイン定義J
という内容で提出したレポートでは、ポータルサイト
7つ、新聞ニュースサイト 9つ、テレビニュースサイト 5つ、通信社サイト 7つを取り上げ、デザイン
要素をそれぞれ調査した。定量的データはほとんどない為、データとして記載できないが、この調
査において抽出できたニュースサイトの特性を以下に箇条書きで、記載するo なお、調査したサイト
は付録Aの 2
0サイトとなっているo
以下の特徴により、ウェブデ、ザインの中でもターゲット層が広いニュースサイトに関しては、徹底
的なユニバーサルデ、ザイン化が行われているという結果を得られた。
-ほとんどのサイトがトップページに各種ニュースへのリンクを多く記載している0
.海外の英語圏サイトには効率的なホワイトスペースの活用が見られた。
-逆に、国内サイトで、は要素を多く組み込む傾向が強かったo
-サイトアイコンの横に宣伝ノミナーを設置しているサイトの割合は多かった
0
・また、その他の箇所でパナー広告の設置数が多かった。
・フォントはゴシック体の採用が圧倒的で、あるo
・ほとんどのサイトがテーマ色として青を使っている。
ページレイアウトは情報量を考慮し、縦割りのものが多くみられた。実社会の新聞記事の 1面の
ように、メインのニュースをページの上部中心に置き、その下に他のニュースやニュースカテゴリー、
1
1 ニュースサイトにおける調査で対象としたニュースサイトの中では、ロイター通信社がこの様に印刷
用の別ページを設けている。この印刷用ページは JavaS
c
r
i
p
tで自動的に作成される様になっている
[
5
8
]
0
1
2 レイアウトの一例として、情報量の多さによってメニューパーの配置パターンに変化をつける、という
事も行われている [
5
6
]
0
1
3 概念モデ、ノレとも言われる、ものごとをどの様に使用するかという対応付け白アフォーダンスや制約と
も関連がある [
1
8
]
0
-9
帽
卒業制作鈎05年度(平成 1
7年度)直感的に理解しやすいウェプデザインの基準，サイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶慮義塾大学環境情報学部元木彩
写真やピデ、オ映像へのリンクを貼っている場合が多かった。
ナピゲーションについてはトップページ内のほとんど目立った工夫が見られず、アンカーポイン
トの多用によって問ページ内の移動を簡単にするという考慮にとどまっている。基本的なナピゲー
ションスタイルとしては、ページ左にカテゴリー別のリンクを貼る、あるいは上部のサイトアイコンの
真下に 1、2行で収まる程度にカテゴリー別のページリンクを貼っている。下層ページに進むに
従って、パンくずナピゲーションやタブ式ナピゲ、ーションなどの工夫が見られた。
テーマ色として青を使用していたのは、文化的なキーワードの中で冷静、誠実、知的、信頼、と
]
[
2
9
]
[
5
3
]
0これらは
いうものがあり、また心理的に視認性が高いからであると考えられる削除7
ニュースサイトの誠実、理想、知的、品、うイメージに貢献していると考えられる。もっとも、との点に
ついては標準的なリンク色(見訪問:育、訪問済:紫)を採用しているため、リンクが多いニュース
サイトにおける青の占める割合が必然的に多くなるという現状もある。また、フォントはゴシック体の
採用が多く、画面表示に向いているという特性が活かされている。
特にデザインの差が見られたのは、海外の英語圏のサイトにおけるホワイトスペースの有効活用
である。国内サイトと同じくパナー広告は多くの面積を占めているものの、このホワイトスペースを
取り入れることで標準的画面サイズに合わせ、ユーザピリティを高めると同時にページレイアウトで
すっきりした印象を持たせている 140ただし、会員登録制をとっているサイトも多く、トップページに
は一つのニュース記事の概要と写真などの構成を取るなど、これらのサイトはトップページに記載
内容を多く記載する必要性がないということを考慮しなければし、けない。
1
4 一般的に言論されるホワイトスペースの重要性に対して、ホワイトスペースと閲覧しやすさは相関性
4
1
0
がない、という実験結果もある [
ー1
0-
卒業制作 2ω5年度(平成 1
7年度)直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶磨義塾大学環境情報学部元木彩
第 3章書籍とウェブ、インターフェイスの融合
3
.
1インターフェイスの融合とは
内容がそれぞれ個人のプロモーションであり、自分自身の興味関心を開示する f
個人ウェプサイ
直感jという言葉に注目し、実世界で直感的に理解できる情
トJのサイト構築を対象としている。 f
書籍Jをとりあげ、この情報インターフェイスの特徴をウェプに取り組む
報インターフェイスとして f
事を試みました。ウェプという情報インターフェイスとの違いにより、取り組みに相応しい要素とそう
でないものを振り分け、書籍型ウェブの設計、試作をしました。それぞれの独特の要素を融合させ
て新しい情報インターフェイスとしての新奇性をどの様に出す事が可能であるか、同時に Eんな
ユーザーに対しても「直感性jに基づく判断で情報を理解できるか、という 2点に注意しながらウェ
ブページを試作した(図 3
.
1
)
。
書舗の特性
ウヱブページの特性
、
dシ
面制御e
B
低価i
g
伽
タフによる『直感的』なナピゲーション
i
n
W
e
b加 酬
個人ブックマークによる
『直愚前Jなパーソナル化
な情報量の視貫化
図3
.
1
:作品の概要
-1
1-
卒業制作創)
(
)
5年度(平成 17年度〉直感的に理解しやすいウヱプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶鹿義塾大学葉境情報学部元木彰
3.2書籍とウェプの融合の作品設計
一方の情報インターフェイスの特徴を他方に持ち込むにしても、そのままを再現しても面白みが
なく、同時に持ち込まれたインターフェイスの特徴を無視することになるかもしれない。それぞれ
の特性を列挙し(表 3
.1)、組み合わせる特徴を選択することにした。普段使用しているそれぞれ
の情報インターフェイスの特性を考え、似ている特性を比較する形にし、表で表現した。
表3
.
1
: 書籍とウェブ、の特性比較
書籍
ウェプ
持ち歩ける
持ち歩けない
手に持てる
手に持てない
紙媒体
データとして保存
書籍データは登録される
データは自己保持(サーバ等も)
複製はコピー(全体としては購入)
複製は印刷
直接書き込める
直接書き込めない
違うページは同時には読めない
違うページ(サイト等)を同時に見られる
中身を探すのは大変(索引等の利用)
中身を探すのは簡単(サーチエンジンの利用)
一般販売には出版社を介する
内容公開は一人でも可能
ドックイヤ一、ブックマークの利用
お気に入りの利用
ページをめくる
クリッ夕、スクロール
もちろん、持ち込める特性とそうでない特性が存在する。特に書籍は現実世界に存在する物体
である為、それに関連する特性を 2次元画面の中に持ち込むことができないものもある。これらの
特性の中でも、ページをめくる、クリッ夕、スクロールの特性に注目した。特に試作品を設計するに
あたり、現存する作品を参考にした。特に印象的なのが、以下の図 3
.
2アリシア・キーズという歌手
の公式ウェブ、サイトであり、動画や音楽の再生を可能とし、ウェブ、の特性を十分取り入れつつも、
書籍というインターフェイスの操作性を活かしてしもという作品例である日幻。
拘
.
，
図3
.
2
:書籍インターフェイスの効果的な事例(アリシア・キーズ公式ウェブ、サイト)[
1
2
]
-12
圃
卒 業 制 作 却05年度(平成 1
7年度)直感的に理解しやすいウェプデサeインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶慮義塾大学環境情報学部元木彩
また、その他にも参考にした付婆による情報量の視覚化(図 3
.
3
)や直感的な動作による情報の
可視化(図 3.4)等のウェブ、サイトを参考にし、直感的に操作できる、としづ事について考えさせら
れるインターフェイスが存在する。
;
j
41
割
一副 一
司
B4g い崎 川村 温
9内.
- U場閥、
州
問 削叩樋耐
.
_
~..
“.脳同副晴間判
A
-副制門局副謝
・
、屯
'
守 、
持
ミ
・
・
‘K 縄
，
.
，
・3
.
，
t
:
.
.
: c
仇
ヨ・
23 R
E暗 唱 輔 副 圃 圃 ， 由 晴 圃 圃 輔
組
図3
.
3
:I
n
t
e
n
t
i
o
n
a
l
l
i
e
sウェブサイト [
1
0
] 図 3.
4
:andreescuandg
a
i
v
o
r
o
n
s
k
iウェプサイト [
1
]
書籍インターフェイスで、は直感的な操作としてページをめくる、とし、う動作があるが、これは次の
情報への移動品、う行動をインターフェイスとしては分かり易し、ものであり、これをウェプでのペー
ジナビゲーションに持ち込むことで、直感性に結びつくと考えられる。その他、持ち込むことでメリッ
トが得られる特性と保持する特性を選択し、以下の表 3
.
2で示す特性で試作することを試みた。
表3
.
2
: 試作で試みる特性の持込と具体的な形
特性
具体的な形
1
)
情報聞の移動 (
タプによるナピゲーション
情報開の移動 (
2
)
リンク
異なる情報の同時閲覧
ページ切り取り、同時閲覧
情報量の提示
書籍の厚さによる視覚化
お気に入りの保存
プ、ックマークによる視覚化
3
.
3作品の概要
これを試作する際、 M
acromediaF
l
a
s
h MX2004を使用した。ウェプ、ユーザピリティの中でもアク
セスピリティの分野において、純粋に
HTMLコーデ、イングによる記述を推薦しているが、結果的に
今回は試作に当たってこちらは若干無視する形になった。直感性を追及する形を優先し、操作性
でf
使いやすさ jを中心とした。メンタルモデ、ルを設定しやすいとしづ事で実世界から書籍という情
報インターフェイスをウェブの世界に取り込み、どの様な要素を融合、交換する事が可能であるか
としづ実験をしました。対象をウェブの初心者とし、絵本の様な直感的な操作性を念頭 i
こFla
sh技
.
5
)は以下の URLから閲覧可能です。
術を使ってウェプを作製した。実際試作したウェブ(図 3
-1
3-
卒 業 制 作 却05年度(平成 1
7年度)直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶慮義塾大学環境情報学部元木彩
URL:http://web.sfc.keio.ac.jp/~t02927amlyasumu
r
a
l
r
e
s
e
a
r
c
h
.
h
t
m
l
(
2
0
0
5年度春学期作品)
一
、
_.
1
d院....
~，
、
f
.
.
r
図3
.
5
:試作したウェブ、作品
技術面ではさらに上のものがある中で、この研究の新奇性を見直せざるを得なかった。しかしな
がら、単純なる技術面でのデザイン性の追求ではなく、あくまで新しい情報インターフェイスとして
の模索の一過程の中での作品としてこの試作品を位置づける。
3
.
4評 価
2
)本の厚さによる情報量の
試作品では、(1)タブによる視覚的に分かりゃすいナピ、ゲーション、 (
視覚化、 (
3
)ブックマークによるパーソナル化、 (
4
)ページの切り取りによる情報閲覧を試みた。残
念ながら(
3
)と(
4
)の試みは作製途中の段階で、完成させる事ができなかった。しかしながら、(1)のタ
ブ、に付け加えてページめくりの視覚化でナピゲーションの分かり易さを追求、またウェプの特性を
取り入れ、画像を画面上で動かして下に書かれてしも解説を読むというページ(図 3
.
6
)を作製し、
書籍とウェブのインターフェイスを上手く融合させる試みを行う事がで、きたのではないか、と感じ
た
。
-14-
卒業制作 2
005年度(平成 1
7年度)直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶慮義塾大学環境情報学部元木彩
f 制高~.校入、議
・
・
・
・
-
滋掛1j.':~k':I圃圃E・吋""
厳;w，;;\，~%，\"・K一種倍
』
一
一
一
図3
.
6
:作品で商像を動かし、解説を読ませるページ
-1
5
-
負]
卒業制作 2
0
0
5年度(平成
1
7年度)直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶臆義塾大学環境情報学部元木彩
第 4章サイトマップの実態
4
.
.
1サイトマップの特徴
迷った時に、そしてサイト構造を知りたい時に、そんな時に見るのが f
サイトマップjという名前の
ついたウェプページであるo 以前の研究で書籍の特徴をウェプサイトに持ち込むという研究をした
時、それぞれの持つ要素の対応付けをした。その時に、ウェブ、サイトにおけるサイトマップは書籍
における索引なのではないか、という仮定を立てた(表 4
.1)。書籍で何か情報を探したい時に索引
を利用する場合が多く、ウェブ、サイトでのサイトマップも同じ役割を持っているからだ150しかしなが
ら、サイト内容を理解するにはホームページで十分であり、サイトマップにはそれに付け加えた追
加情報を知る為に閲覧するという目的を理解しながら設計しなければならないという事をニールセ
ンは指摘している[16
]
0
表4
.
1
:書籍とウェブ、の要素対応付け
書籍
ウェプページ
役割
表紙
トップページ
興味を持たせる、内容の概要を見せる
裏表紙
脚注
作成者等の情報を記載
背表紙
タイトル
題名、作成者(著者)を示す
目次
トップページ、サイトマップ
内容とその場所を記載
内容(本編)
内容(内容ページ)
内容を記載
索引
検索機能
言葉やフレーズからその内容を探す
題名
タイトル
それぞれのページ(章等)の内容を示す
ISBN番 号
URL
その内容特有の番号(位置情報)
もちろん、書籍は出版されるとその書籍自体は変更される事はない160逆にウェプサイトは特性
上、いつでも変更が可能であり、その為に最終版という形のウェブ、サイトはない。このウェブにおけ
る流動性という特性を活かす為にもデータとの密接な関係を保つ必要性があるが、サイトマップを
更新時に同時にいちいち更新する事例は少なく、また場合によってはサイトマップのみリニューア
ル対象とされない場合もあるo これは内部改造をした底舗の底舗内地図を新しくしないのと同様
である。もっとも、主要リンクのみ記載している為、構造的に変化しないと b、う意味で更新の必要
性がないものである、と考えればそれまでである。
4
.
2サイトマyプの定義
さて、一般的な定義においてウェプサイト内で以下の役割を持つのがサイトマップである [
5
1
]
0
1
5 “サイトマップは本の目次同様、内容の全体像を表示する。頗序やカテゴリー別に並べられる事が
多い。[15
]
"
1
6 再出版という形で内容が訂正や変更される場合があるが、手元にある書籍は変わらない。
ー1
6
圃
卒業制作 2ω5年度(平成 1
7年度)直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶塵義塾大学環境情報学部元木彩
(
1
)サイト構造の視覚化、そして(
2
)
各コンテンツへのリンクを含め、直接ページを訪れられるという
もの。サイトマップを閲覧する時、それは以上の表で示した情報を入手したい時であると考えられ
る。また、多くの場合はある情報をそのウェプサイト内で、探す時の近道として利用される。 (
1
)の役
割はサイトマップにしか果たせない役割であるが、 (
2
)の役割は最近の検索技術の向上にて、情
報の検索という手法で取って代わられている。
しかし、 (
2
)の役割でf
サイト内の主要なページにリンクを貼る J
という特性を検索エンジン技術に
利用するGoo
g
l
eの試み 17もあり、まだ活用の場があると感じる。これは G∞g
l
eだけでなく、自動
的に検索エンジン対象のウェブを自動的に登録するスパイダーを採用している検索エンジンは、
サイトマップで提供されているリンクとキーワードの連結で、サイト内のページをさらに詳しく登録
する可能性が高いからである包2
]
0特にサーチエンジンや音声リーダー等の使い勝手を考えると、
テキストベース(単純なる HTML文書)で書かれたサイトマップの有用性はまだ高いと考える。
4
.
3サイトマップの好ましい構造
サイトマップはサイト構造の視覚化と同時にユーザーに対して概念モデノレの作成を助ける役割
を持っている。サイトそのものの構造は多様であり、一概にどの様なものが最適であるかは目的別
に異なると思われる。
4
.
3
.
1参考にした研究
既存する研究ではあいうえお煩〈英語での研究なので、 a
l
p
h
a
b
e
t
i
偲 1o
r
d
e
r
)とカテゴリー別の
良し悪しを研究した事例がある。この研究はパナードとチャパロはあいうえお順とカテゴリー別の
サイトマップで複数のタスクを被験者に行ってもらい、使いやすさを評価したものである [
3
]。探し
たい概念がどの様な言葉で表現されているか、という事を考えながら探す必要性がある為あいう
えお頼の評価はカテゴリー別よりも低く、これは他のマクドナルド(
1
9
8
3
)の研究でも支持されてい
る結果であるとバナードとチャパロは言論しているo また、初期表示が全てのリンクとカテゴリー題
名だけの場合と、サイトに対する理解が深い場合はカテゴリー題名のみの方が使いやすいかもし
れない、という指摘も出している。
1
7 これはGoo
g
l
eサイトマップ品、う試みであり、「実験的なウェブクローリングシステムで、サイトマップ
l
eのクローラにサイトの情報や場所を提供することで、クロールの精度と効率を高め、
を使用して G∞g
G∞g
l
eのインデ、ツクスにより多くのページを登録することができます。 jというものである [
8
]
0
ー1
7-
卒業制作 2ω5年度(平成 1
7年度)直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案喝
安村通晃研究プロジェクト
慶慮義塾大学環境情報学部元木彩
第 5章サイトマップ設計・実装
5
.
1サイトマップ活用度の調査
サイトマップの活用状況を見ると、検索技術があるから活用しないという理由のほかに、その存
在を知らないという理由もある、とニールセンは指摘している [
1
6
]
0一般的に、ウェブサイトの半分
以下にしかサイトマップが存在しなかったから、という理由で、閲覧側はサイトマップの存在を期待
FC)のウェブサイトを普段
していなし法指摘している。慶慮義塾大学湘南藤沢キャンパス(以下 S
1名に調査を行いサイトマップの活用状況を調査したが、これでもサイトマップ
利用している学生 1
の存在を知らなかったという理由を選択した学生もいたo このアンケート詳細は付録 Bに含まれて
いる。
.
1
:SFCウェブサイトにおけるサイトマップの活用調査
表5
活用した
活用していない
サイト構造を見たかったから 2回答
検索したから 4回答
欲しい情報が見つからなかった為 2回答
サイトマップの存在を知らなかったから 2回答
その他 2回答
サイト内で迷ってb、る時にナピゲーション補助の役割を持つものを探させるのは泣きつ面に蜂で
1
7
]
0r
サイトマップJとはっきり記述する様にとのニールセン氏
あるともニールセン氏は言っている [
のコメントもあるが、主要大学ウェプサイトではほとんど f
サイトマップjと記述しており、この名前は
定着しているものと考えられる。図 4・2の設問は複数回答ありという事で 12つの回答を得ている
が、調査を受けた 1
1名中 7名がサイトマップを見たことがないという事で、ウェブデザインの中で
サイトマップの定着はあるものの、サイトマップの利用は必然的なものとして考えられていないかも
しれないという現状がある。経験的に何がどこにあるか分かるといコメントもあり、試行錯誤でサイト
構造を理解するという手法が多いと考えられる。
この活用度合いの低さは見つけにくいからという理由があるのだろうかと考え、サイト内で「サイト
マップjというリンクはどこにあるか、大学サイト 1
0つ 18を調査した。ホームページ右上にサイトマッ
プと明記されたリンクがあるサイトは 7つであり、特に見つけにくいというものではなかった。
5
.
2サイトマップと検索の違い
g
l
eに
ホームページ19やナピゲ、ーション等で見たいコンテンツの場所が検討つかない場合、 G∞'
代表される検索によってページ内検索を行うというケースが多いと患われるo これはゲイン氏に書
かれた記事でも記載されている通りだ問。ここではこの現象を"0
∞glisation"という風に呼び、こ
1
8
青山学院大学、関西大学、慶慮義塾大学、神戸大学、早稲田大学、同志社大学、東海大学、東京
大学、一橋大学、立命館大学 [
2
5
][
3
1
][
3
2
][
3
4
][
3
6
][
4
3
][
4
4
1[45]お7][59]0
19 サイト内のサイト構造で最も上に位置するページ。サイトの基盤となるページである。
咽
1
8
岨
卒業制作製附5年度(平成 1
7年度)直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶慮義塾大学環境情報学部元木彩
れは日本の f
ググるjと同じ意味合いを持つ単語で、あるo 検索をまずするという風習の広まりは調
査でも見られ、 11
名中 1
0名が欲しい情報が見つからなかった場合にはサイトマップよりはサイト
内検索を使用する、という結果を出している。
検索は具体的な探したい対象を言語化して探すというツールであるのに対し、サイトマップは言
語化した対象を探しながらも、少し違う言葉で表現されている時も対応できるという利点がある。
ローデ、がサイトに載せているサイトマップの実装結果の記事では、カテゴリーをどの様に表現する
かという事が閤難であるとも表現している [
2
0
1
0その様に概念とそれを表現する言葉や枠組みの
一致、不一致がサイトマップの低い利用にもつながっているのではないか、と考えた。なお、ホー
ムページの設計にも概念と言語化の関係で良し悪しが決まるというのは同様である。また、やはり
構造が視覚化され、サイト構築を頭に入れながらサイト内を移動できるという利点を活かす必要が
あると考える。ただし、これらの利点をどの様に表現するかという問題がある。
5
.
.
3サイトマyプを活かす為に
f
何を改善したら、サイトマップを利用するかJという質問に対し、様々な意見があった(表 5
必。
一番多くの票数を得た f
見た目を楽しくするjという選択肢以外は情報に関するものであったが、
サイトマップの中で使われている情報区分(カテゴリー)の分かりにくさやリンク先が何を示している
か、という名称の分かりにくさを指摘していた。
表5
.
2
:何を改善したら、サイトマップを利用すると思いますか
見た目を楽しくする
5回答
情報の区分を変える
5回答
名称を変える
3回答
情報量を多くする
1回答
情報量を少なくする
1回答
サイトマップ定義の中で、テキストベース(単純なる HTML文書)で書かれたサイトマップの有用
性について記載した。アクセスピリティという観点からも、テキストベースのサイトマップの有用性は
否めない。しかしながら、今回の研究ではアクセスピリティを若干無視し、テキストベースではなく、
F
l
ashを使い、上記の「情報区分を変えるjという事や f
名称を変えるJという事を念頭に置きつつ、
サイトマップの設計を行う。
5
.
.
4サイトマップ設計・実装
情報の区分を変えるという事は素材をどの様に編集し、見つけたい内容を探し易くするか、という
事である。情報を見る切り口は様々であるからだ。今回の素材として選択した SFCのウェプサイト
では、同じ大学情報をとっても対象者で閲覧したいものの順序は異なるという事から入り口が多数
あるが、それだけが切り口ではないだろう。現存するウェプサイトの構造を書き出した(図 5
.
1
)
。
-19-
i j卜
I
S E E U易
自'
E
A
m﹄画帽uuh師
r
a
極白骨
ι
引
骨師通型車@
骨 量 3毒
噌蚤宮阪依
e
e
匂﹃
hNlphdmR
叫
TphhR
M
W
，
somw
LS
SV
跡
的
。
一
刷
協φ
副
ω
F
'z
U
S治@
a
TゐgR芝
齢制官軍用車
l
y
r
A
i
m
h
m
hて
且
邑信冨嶋血相，
E
s
s
e
-ttt品恩情。
快活動・阿世事赴
ARlvhah峨制
LV喰叫偽曲
h舗 動 拭 白 色 ⋮
引 a
m
4
hh
悼憶揃恒輔日
m
m
a軌 科 婦 ， . 器 嵐 輔 綿 一
情物鵠蝋
い
動指恥
K4hlbbELh
eeSX&炉 停 哨
蝦尚子副編
-ERW剖 引 相 酔 駒 叫
hL小同品﹃ピ・制血 E G 4
一
圃咽
a
一
SE
﹄
一
⋮
Sよ ・ 曇 甜gず
w 削寝泊朝俳吋
細
密
書
路一一
理覇Eu
圃
・
EEE--
翻桝岬
骨銅胡制品
4E
曹晶曹世間
雄副園恒邑 F d
品書輝且W14hHよ剖副輯・讃蝋A
T
恥
占
鉱
W
A
叫a昌明川醐副岡弘
健健一也市和信富岡語圏明暗'置書樹園圃'酔副司
君出盆蝿
M
'
a
s
s，.嗣明書官事お
理也府和自認誠J
R
q
a，野健複廊僻・樋動骸耐偶也
﹂T
理治佐官嶋 JRqg世ERLvhR ・舷偏
h 恥千億偏
重品岬隼官客隊s
唱︽怯凸
h
a
，
、
ド局、匹以品企j
副理慣掛値胃
Vか告 U
4vb織幽圃
UEBPHa留SS帽 ︿ .
n
R
U
ド
♂
向霊協︾軍事崎V
H吋
円H
v
h
k
n
eゃ岡
hRHvhhe凶毛嫌回開
vHHvhhamu
ゆ一円
HvhhehF樹園'
ue刷用宮町田
RHvhheA凶晶甑bw幡
lH、 ト 伝 機
骨ムセ咽AaE
将
ぐめ日 Mm薗
2・指
イ興証岨副帽持
h
n
h
n
h
V
4
v
ι
v
宮署幽
z
出e
z
A 純量欄舷催岬・幽明咽
︿
〆ふ帆骨州省園駅
久 ピ 持h
'
M明砂州
lてロ骨ベ、
t'Mh
﹁
W
ι 区機健寒緋 ν
ホ誠端機刷mn岡.崎一凶
hHhUQ代ザヘ入↑ 管
︿陵制緩併)れ入札爪入門ム守!中'
lh
副輔晴叫H
U喝謝。崩
臨
ghvd酌ト、前川相、個・8併u
m峰崎Ra
円
鉱脳同︽魚送出骨M4ah
引 ah桝縛・ul
J
H極 極 醤 槙 郁 ョ l
i
民柚岨︽量語審・ 4aphah制桝慣榔併u
胃 h'J
h
a岬 晶a
ahah一史H
脳強4
M頃劃層高
れA
AhAn樹園咽
盤 調 幡'
Fhv弘司
lp恥hv恥揚陸・︿パ︾“お償制ゾ
ド
一
一
一
ー
し
ムAMV盤毒a
E
F
U
L肱
P
v
E
-一
SSE語・
包容曲帽叫
富聖品物お令一
t
h
Ap
v
円
草書量-
圃園鶴樟
広}一
ぃ幽圃
E
M
a、- r i l
1
1
1
宮署ふ
司副砲嘗
aH酔
・
E
-
鼠富島開轟円困問側側海・雌雄箇寄島岡町田
F
山
圏
hsEE白白白'R'ト1111h
岬息相府
MEnu'a'e組制岬む曲E
︽
E
ggg語
hiEtlvh
制覇話幽醤
併也穏謂 4
m
u
g
L
'
R
vh口
ムl
、n磁場
4恥同¥ゐ事伽品事
M、
4恥 町
ェー名品
咽唖剛型車軍縮幽露
舗網編修梅鰍畦砕同一
ι
f
v
m m
a
'
ロh舷 語 〆
岡
山Z
a引山・ムamHm
s e陸咽aTw 蝋岨空押しhu鶴 田 富 旬
白目標
A4恥刊、、k軍宮跡
l:
、 証 叶 十 PR
甘い傘、
E署 r
〆円て恥、?oa届冨踊
富田富瞳盛田輔
同時畦刊か仰
r
h
幽湿園事情
A
R
枠岡山、
Amw
晶肝{
"動嘗・樹園曹・鍋恥線姫咽剖輔
篠根嘗4ARHM#V
九晦副串・首動‘脚舗網
﹄
hv
軍陵艦w
h司・銀緬
暢溜轟軌騨也拠品 F 4
-EF
gRagi
M曾富説家嵩
&SR
極悪B
4dmHAaS量骨併
f
鱒.指骨-aAV
h
r
i
H
U円む樹繍. .
2ESB扇a B畠・・﹄晶﹄v
同盟繕且﹃V般信繍膏栂且w a栂、l
h
v
L‘一同ivph
'M
関職λvb
ト梅e
hhnLr，{﹄、， b't掛糊eλ ヤ
n
H
h
U
F
立-b'J韓関以宕鵠幅{制母ト阿世 昨
臥r
h小、
M)
制川町出gNMt﹃畢耕時
m 韓緋標準錦瞬静 ν
州
側
特ω
明掛端盤側
hmHh口、い駅海域網年制
ム
宮
U 古川桜
ZS3g
nZHbaAV
F E鍋Z a
智)号以 M
F回世情蜘也曹瞳
i
:
s
:
i
j
i
l
l
j
:
卒業制作 2ω6年度(平成 1
7年度)直感的に理解しやすいウェプデザインの基準，サイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶慮義塾大学環境情報学部元木彩
5
.
4
.
1実世界の場所情報を基盤としたサイトマップ
図 5
.
1から、それぞれのカテゴリーの名称からどの様な内容が含まれているかが分かりにくいと
感じるものや、グループ化してリンクが記載されているものの、それらのグループ化を明記してい
ない等、学生でも分かりにくい情報区分だと感じた。
新しいデザイン提案で既存するカテゴリーと異なる情報区分を考えると、事務的な情報は事務
に、施設に関連する情報はその施設にという風に、大学のキャンパスで学生肉けの情報を集めた
という事で、数多くが場所に結びつく情報であると気づいた。確かに、 f
学生生活jのカテゴリーに
当てはまる情報やサイトそのものに対する情報は場所に依存するものではない。しかし、多くが施
設に関連付ける事が可能であるので、直接場所に関連しない情報葉似た情報と一緒にグループ
として表示する、あるいはサイト情報みたいに場所に関連しない場合は関連付けない、という方法
で表示する事にし、新しい情報区分として「場所Jをキーワードとしたサイトマップを作製したo 製
作にあたって、資料[
3
2
]、[
3
4
]、[
5
4
]を材料にした。
URL:h
t
t
p
:
/
/
w
e
b
.
s
た.
k
e
i
o
.
a
c
.
j
p
/
.
.
.
.
.
t
0
2
9
2
7
am1
y
a
s
u
m
u
r
a
l
r
e
s
e
a
r
c
h
.
h
t
m
l
)
(
2
0
0
5年度卒業制作作品その 1
図5
.
2
:実世界の場所情報を基盤としたサイトマップ
ユーザピリティとしては、それぞれのリンクを表示されるボタンは f
押せるjというインターフェイスと
して捉えられるように、色の組み合わせで心理的反応を利用して距離感の違いでボタンが手前に
飛び出る感覚を持たせた。また、バナードが使い慣れた人に対して部分的表示の方が有効性高
いと示した様に、個々のボタンで対応する情報のメニューが提示できる様にし、左上のボタンでー
圃
2
1・
卒業制作 2ω5年度(平成 1
7年度}直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶慮義塾大学環境情報学部元木彩
斉にメニューを表示し全体の構造が見られる様にもした [
2
]
0そして、付録 B の r(5)SFCウェプで
よく利用するコンテンツ(リンク)は ?Jという設問の回答を参考にし、定期的に更新される NEWS
や連載は青いリンクにし、目立つ様にした。(作品の使い方の説明は付録 Cに記載しています。)
5
.
4
.
2ターゲyトユーザーの関心を基盤としたサイトマップ
異なる入り口 mごとに異なるサイトマップも提示されるが、それぞれのユーザーに対して異なるア
ブローチをとっているという訳ではなく、テキストベースのリンクを構造通りに提示しているというも
のである。これに対して疑問を感じ、それぞれのユーザーのニーズに対して異なる情報区分の手
法があるのでないだろうかと考えた。
.盆会置聖撞掌撞・軍陣量姐謝辞聖書働古トヲずぺ}う
F
塞塑聾
軍主ご二呈
室主主弦念
事 艶z
主主主管E
ι互生息箆主転訟
信
一
一
一
Z'
.
.
.
'
7
.
.
.
.
.一
~ f[~…一一
ゼー皿4~ ，*"，}.ー~::;- .
.
.
.
:
守
吉 施 ご 曹 考 竺TMJ
告書き曹司品 "，~~~.~iItC置すち~IC!
.::~弘主宰畠
孟笠笠企長3 正
互
~-<J.:λ~_.ミー.z.::I
き普通事.!:'2~~
車笠置な主主ニニ.
.
.
;
.
ι
=
E盆語 >
!
z
l
量草辛五~
ZE:主主工泣A
E主
z
.
;
:
a
，
.
彊這宜量
鰻融:ft.
~.:!I3z.t
暢感慨穂車問鵬鱒暢
~Dl唾
聾軍基霊重量ι
壷藍uw!軍強固E
霊ま生温1
呈J.
図5
.
3
:慶藤義塾大学湘南藤沢キャンパスのウェブ、サイトサイトマップ(学部生用)[
3
2
]
例えばユーザーが受験生であれば、どの様なキャンパスであるかという概要、さらに詳しく知る
為の情報、大学院や卒業後の進路、と関心を持つ分野がさらに学部生用ウェプサイトよりもパ
ターンが少なく、まとめやすい。しかし、何度もウェブ、サイトを利用し(他に代用できる情報源がな
いという理由もあり)、どんなサイト構造でも試行錯誤で理解できる所属学生とは異なり、特に受験
生はナビゲーションツールの有効性が高くないとサイト離れをする可能性が高いと考えられるo 検
索やサイトマップで探したい情報をいかに早く見つけられるか、という事が初期ユーザーには特に
大事なことである。
受験生がキャンパスを知るにあたり、「どんなキャンパスであるかj、f
どこにあるキャンパスかj、
「どの様に入学するのか(入学試験)
Jとその関心の流れに沿ってトピック設定、リンクを集結させた。
他大学のサイトでは、入学試験情報のみに焦点を当てて受験生用のページに記載していたが、
却この場合、「企業・研究者の方へJ
、「受験生の方へj、f
在学生の方へj、f
卒業生の方へj、f
教職
員の方へJ
と5つの入り口が設けられている。他の大学サイトでは、これらはカテゴリーとして存在し、そ
れぞれの対象が最も必要とする情報を集めたページへのリンクがホームページに存在する [
3
2
]
0
2
2
圃
卒業制作創附5年度(平成 1
7年度}直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶嬉義塾大学環境情報学部元木彩
SFCのサイトの用に完全に入り口からそれぞれの対象向けのサイトページに行く場合、 SFCに関
する基本情報等、入学試験情報以外の情報も記載が必要であると考えた。
URL:h
t
t
p
:
/
/
w
e
b
.
s
f
c
.
k
e
i
o
.
a
c
.
j
p
/
t
0
2
9
2
7
a
m
.
l
y
a
s
u
m
u
r
a
l
r
e
s
e
a
r
c
h
.
h
t
凶
(
2
0
0
5年 度 卒 業 制 作 作 品 そ の 2
)
SFC~ ・;ß)l:H受句、
eの LU~N
-，
(
;
ー
・ ι
:
'
h
.
よる純計
H'D~Vf'\lt\1f 出
E
竜持守‘「事
、ち、
、'~，♂ヘ‘
l..'"'
.• :
-，:，・..~イ二然保
、、
ポ
コ¥
f
.
.
.，~t
弐も ζ
型f
t
'〆
肉
<
I千
. . ι
.
J
;:1~
.
)~弘、軍
、L 局 主 ベ ー 、 山 内 清 f
九:
，\~，;.，与
日
r
図5
.
4
:ターゲットユーザーの関心を基盤としたサイトマップ
この事例で工夫したのが、ファジー検索の様に探したい概念と表現する言葉の不一致を埋める
為
、 SFCのサイトで使われていない言葉とそれに対応する概念をいくつかのキーワードとしてまと
め、それらのキーワードによって当てはまるページやリンクがある場所へと導くという機能 (Fuzzy
P
o
i
n
旬。である。ファジー検索も他の検索と同様にサイト全体の情報構造が一望できない為、サ
イトマップで予め設定されてはあるものの、サイトの情報構造とキーワードを両方関覧できるのは
非常に有効性があると考えられる。なお、Fu
zzyPo
泊旬rは他大学のウェプを比較し、概念と言葉
の関連度合いを調査して設計した。受験生用の部分に含まれる項目、そして学生生活(あるいは
キャンパスライフ)という言葉に関連する項目を中心に図示化した(図 5
.
5
)。
また、探したい情報へのアクセスを素早くする為、リンクの上にマウスを数秒置くとそのリンク先に
記載されている情報の詳細を表示させる様にした。この事で上記のファジー検索に似た機能に加
えて、言葉と概念の溝を狭くする事を試みている。(作品の使い方の説明は付録 C 記載していま
す。)
2
3-
卒業制作 2ω5年度(平成 1
7年度)直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶藤義塾大学環境情報学部元木彩
入滋滋養
入主主日程
皐話回}
受敏生用=入学センター t
♂
入試データ
ι一
一一一ー
m
i オ}プンキャンパス
入学案内
学寮
学費
奨学金調匝腹
i 草島・アJ~パイト
，
f 学生宿舎・アパート
キャンパスライア{東京大学) ，j
今
、
…
サ}ク，1-.運動部
ヨム
1
良
東京大学
オープンキ?ンパス
をl
持鵠語会
.~1.:イち.:，-t-情報一学郁受馳{立制駄学}
学琢・大学健・量t
会人・揖入学
オーブンキ?ンパス
入学調布{東京大学}
入試俗事E
入学傘・授業料
卒業・進学・滋聾
入試要項
犬学穣・学部・学科
学費
奨学金
手続き
学年.
説場会
学捜議現会
一 、
川
?学厨祭
奨学金・学生寮など
入学をお考えの管後へ{東海大学〉
課外活動
訴訟・進路
キ?ン'/'¥スライフ十、
学生生活
資絡取調書サポート
受験生の方へ〈関西大学}
下宿
v 国農芝涜
ご案内
健康管理
λ説 明 腰
入学案内
入試説明会
:学費量入試
学部・大学欝・栓会人・銭入学
i
入試鯵慮
オ}プンキャンパス
学部入学案内
奨学盆制度
オ}プンキャンパス
大学見学
入学案内
募集要項
L受験生
オ」プンキ?ン1'¥ス
;zr
資絡取鍵
奨学金徹底
学生寮
?
2
得戸大学で学びたい方ヘ
1キャンパスライブ
f
古本芋?字型的方竺(-<<i*苧~)
課外活動
j 大学揖勾
…
f
円
..7.~?~"?舎跡
アクセス方涼
‘蝿麟
J
学生寮・アパ}ト
学内漉設軍司郎
綬業構罷
J
隷外活動
L
裁島情報
1
漢字金
奨学金
;学年態
教怠
壁際交流・留学
A芋重意
渇去の選綾
キャンパスカレンダー
綬薬科
入学選銭要項
L
キャンパスライブ
r
i
学持活 ーすザ些
1謬 外 活 動 繊
三回キャンパス
慶塵義蔓大学
手哲学
i
滋信濃況
局窓会
各種麗・申書審・証明書発行
学舵孝利鶏勾
健康・保健
議歳竜王況
箆設案内
A認 ・ 入 学 納
j学費
綬繋縛摺・定期試験
学穏に入学を精霊の方{脊山学陸大学)
I
奨学傘
: 学生寮
学生生活
J クラブ・サークル
; アドパイザ』グ，1--プ
イベント
取得可能な免許・資棒
留学
図5
.
5
: 概念と言葉
申
24
骨
T4wu、
A、
内叱織糠
3謝油 H官
t呼
e久
s
時茸嵐榔朝滞リ、ロ WMHh可宇
阻棚瀬僻蝉片特締師事描特輯凶枠制鴨
予
門v
S
A円掛掛 4 Vか
M
U
Y 印刷引の.4
V内切
τ 守HU、市占有、﹁い¥S桝 樽
根川柳慧脊民事創刊淘{﹄同協同叫有国州)割問艶BR蝿璃﹁守斗
A
礼申，久?S働問圏、千，.
存
鮎
付
M刊
げ'特設 EFW打酬四樽併叫がペ rdがq'H
4
、
礼
m
・ωuwds本構舟ゆサ時対中久 T4u
・
情
{ωω
︼
ω
{
d出
‘
色
。
(
M
g印有織品開糠聾守脊酢
旬
、
内3ω)
爪 ザ サA
'MM'
函m
0HNtuS事帯創刊
・
礼
内庁中久 74uv
n
v
S
H寄与・存 -W@仲。."のιtSNSFE32BSミgg自のV-V官巳
。
向
τ
3
0 主，雛US脊E n町議瀬搬勝汁まHOS錬獅まけどーや'習ののdg回停滞金n﹁ペ
刊ロリミーや FH
酬白鶴川与が汁嶺滞附S締湯舟蜘 w
持)付帯常斗内V
A
V
H
U刊中久TSC胃﹄品川副四鱒﹁ペ
︿鍵獅U
執務3卦，滋帯創刊弾﹁待。主総U
Fn昇れいS脊hFS脊海内需適﹁付歌劇唱滞榊3 縮問司
昔
、OAOMtuS
d
﹁パμ
HU刊中一久玄凶鮎 向
街
州
問
﹁ 羽燕S執務g
q
a中久 7 4可J14R
命・翠滞腕SAVHU
刊中久プ伊⋮繍号待叫w
V。リ
.•
卒業制作 2ω5年度(平成 1
7年度)直感的に理解しやすいウェプデザインの基準，サイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶慮義塾大学環境情報学部元木彩
第 6章 評 価
6
.
1調 査
使いやすさやサイトマップとしての機能を感じられるか、という 2点に設問を絞り、製作した作品
に対しての調査を行った。それぞれのサイトマップについて同様の設問を立て、比較する形とした。
このアンケート詳細は付録Eに含まれている。
表6
.
1
:作品の評価
情報とマップの関連性
探したいものとの直結性
(平均値)
(平均値)
地図情報基盤
3
.
8
3
.
0
ユーザー関心基盤
4
.
4
4
.
4
平均値でいずれの設問も『ターゲットユーザーの関心を基盤としたサイトマップjがより高い数値
慣 れjから来る使い勝手の良さが影響しているのだろう。ただし、考察でも記載
を示し、これには f
する通り、新しいデザインを活かした使い道はあると感じた。
6
.
2 考察
調査の中では、特にイメージから情報への導きに焦点をあてた「実世界の場所情報を基盤とし
たサイトマップjは今まで存在した一般的なサイトマップ(カテゴリーやあいうえお願等)とは異なる
表現方法で、使いにくいと感じられたり、慣れなかったりという意見が多数であったo しかし、使う
事で実世界での空間理解が深まり、実世界での空間理解がまたサイトの理解につながる、という
利点を見出した。この利点を活かして、施設や地域での情報を示すウェプサイトでのサイトマップ
としての可能性があるだろうと感じた。
また、「ターゲットユーザーの関心を基盤としたサイトマップjは言葉と言葉のつながりを調べ、同
じ概念に対して様々な言葉でも同じ目的とする情報を見つけられるという事に焦点をあてて作製
した。同時にリンク先の内容を抽象的で包括的な言葉から数秒後には詳細の内容をその場で表
示し、目的の情報への移動を効率良くする事が可能である点が評価されている。
いずれも新しいデザインを適所適材で使い方の工夫で、今後のサイトマップに応用できる可能
性を持っている事が証明された。
圃
26-
卒業制作 2ω5年度(平成 1
7年度)直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶慮義塾大学環境情報学部元木彩
第 7章 結 論
7
.
1 まとめ
ウェプデザインの中で、焦点を当てられる事がほとんどなかったサイトマップというツールに関し
て、使いやすさやカテゴリー分類の視点から新しいデザインを考えたり、原点に戻ってその果たす
べき役割とはなにか、という事について考えたりする事で、改めてツールは使いようによって活用
されたりされなかったり、という事を実感した。基盤として存在するウェプデザインを参考にしながら、
新しいものを考える事でそのツールの役割を考え直した時、 f
サイト構造jというものよりは実際に
探したい概念をイメージや言葉から探し易くすることが求められているのではないだろうか。
サイトマップの一例として今回提案した作品が定着するかは分からないが、今までのサイトマッ
プとは異なる形でサイトマップが進化を遂げれば、検索機能とはまた別の視点からの情報を提供
し、得たい情報ヘユーザーを導くツールとして、今後もウェブ、で活用されるだろう。
7
.
2 今後の展望
図7
.
1
:新しいサイトマップの一例 (KDDIキャンペーンサイト) [
1
1
]
図7
.
1の様に、企業キャンペーンサイトではFlashのみを使ったサイトも多く、このサイトマップで
は現在見ているページとサイト全体の構造(ここでは、関連するトヒ。ックとのつながりを表現)が一
望できる形としてサイトマップが作られている。非常に小規模のキャンペーンサイトであるが故の一
sh技術を使ったアイディアが多くあるo 今後としては、それらのア
例となっているが、この様にFla
イディアからさらにアクセスピリティも考慮し、 HTML
等のマークアップ言語でも同様の形でサイト
構造を表現できる様になると、今まで以上に使えるツールとしてのサイトマップの進化が期待でき
るだろう。
-27-
卒業制作創陥5年度(平成 1
7年度)直感的に理解しやすいウェプデザインの基準時サイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶磨義塾大学環境情報学部元木彩
謝辞
この研究論文の執筆にあたり、慶慮義塾大学ヒューマンインターフェイスデザイン研究会の指
導教員である安村通晃教授に大変お世話になりました。研究会での 2年間の指導を受けた結果
として、この卒業制作を完成する事ができたと感じています。また、卒業制作では特に多くのアド
バイスによってテーマの方向性を思い付く事が可能となり、また研究中も方向修正をする事ができ
ました。ここに感謝の気持ちをお伝え致します。本当にありがとうございました。
そして、同研究会のメンバーによる研究の評価によって多くのアイディアを得る事ができ、それ
によってさらに研究内容が充実したものになる事が可能でしたロ同じ場での活動をする事で刺激
も多く受け、大変お世話になった由を記載致しますo
2
0
0
6
.
0
1
.
3
1 元木彩
時
28-
卒業制作 2ω5年度(平成 1
7年度)直感的に理解しやすいウェプデザインの基準
F
サイトマップの新デザイン提案ー
安材通晃研究プロジェクト
慶鹿義塾大学環境情報学部元木彩
付録A
ニュ}スサイト調査の対象ウェプサイト
ポータルサイト
新聞ニュースサイト
e
玄c
i
t
eニュース
h抗p
:
l
l
e
x
c
i
t
e
.
∞.
j
p
lN
ew
s
/
G∞g
l
eニュース日本版
h
t
t
p
:
/
/
n
e
w
s
.
g
∞I
g
l
e
.
∞必/
gooニュース
h
t
t
p
:
/
/
n
e
w
s
.
g
o
o
.
n
e
.
j
p
/
i
n
f
o
s
e
e
kニュース
h
t
t
p
:
/
/
n
e
w
s
.
w
w
w
.
i
n
f
o
s
e
e
k
.
∞.jpl
@niftyNEWS
h
t
t
p
:
/
/
n
e
w
s
f
1
a
s
h
.
n
i
貸
手
.
∞
m
I
Yah
∞!News
h
t
t
p
:
/
/h
e
a
d
l
i
n
e
s
.
y
a
h
∞
.
∞.
j
p
l
h
l
WiredNews<
4
r
∞s
)
h
t
t
p
:
/
/
w
i
r
e
鈍 r
viω.
w
i
:
r
e
d
.
∞mI
a錨 h
i
.
∞m
h
t
t
p
:
/
/
a
s
a
h
i
∞I
m
I
IHTOnline
h
t
t
p
:
/
/
i
h
t
.
∞m
!
全国新聞ニュース網
h
t
t
p
:
/
/
w
w
w
.
j
wn.
n
e
.
j
p
/
1
泊 出c
i
h
m
s
乱
∞.
j
p
l
t
t
p
:
/
/
w
w
w
.
m
MSN:Maini
c
h
iI
n
t
e
r
a
c
t
i
v
e h
テレピニュースサイト
通信社サイト
Th
eNewYorkTim
e
s
h
t
t
p
:
/
/
w
w
w
.
n
y
t
i
m
e
s
.
∞
，
m
!
NIKKEINET
h
t
t
p
:
/
/
w
w
w
.
n
i
k
k
e
i
∞.jpl
東京スポーツ新聞社
h
t
t
p
:
/
/
w
w
w
.
ω
k
y
o
・
s
p
o
:
市.∞却/
SankeiWeb
h
t
t
p
:
/
/www.関n
kei
∞.jpl
YomiuriO
n
l
i
n
e
h
t
t
p
:
/
/
w
w
w
.
y
o
m
i
u
r
i
.
∞.
j
p
l
ANNNEWS
/www.tva錨 hi
∞.jplannlnewslwebl
h
t
t
p
:
/
NI
底ニュース
n
h
k
.
o
r
.
j
p
/
n
e
w
s
/
h
t
t
p
:
/
/
w
w
w
.
NNN24
h抗p
:
/
l
w
w
w
.
n
t
v
.
∞.jp/news/
TBSNewsI
h
t
t
p
:
/
/
n
e
w
s
.
t
b
s
.
∞.jpl
'隠 B包
h
t
t
p
:
/
/
w
w
w
.
t
v
ωkyo.
∞.
j
p
l
b
i
7
J
&News
B
l
l
，
∞mberg.∞m
lI
h
t
t
p
:
/
/www
.
b
l
m
b
e
r
g
.
∞.jpl
∞
J
I
J
1
.
∞m
ht
ゆ:
l
I
www.j
語iω必/
KYODONEWS(En
g
l
i
s
b
)
h
t
t
p
:
/
/h
o
m
e
.
k
y
o
d
o
.
∞.jpl
:
/
l
w
w
w
.
k
y
o
d
o
.
∞，
.
j
p
l
KYODONEWS(
J
a
p
a
n
e
s
e
) hはp
Re
u飴 '
r
s
h
t
t
p
:
/
/
w
w
w
.
r
e
u
t
e
r
s
.
∞m
!
Re
u飴 r
s(
J
a
p
a
n
)
h
t
t
p
:
/
/
w
w
w
.
r
e
u
t
e
r
s
.
∞.jpl
1
:
l
l
w
w
w
.
u
p
i
∞I
mJ
UnitedP
r
e
s
sl
n
t
e
m
a
t
i
o
n
a
l h低p
帽
29
岨
卒業制作 2ω5年度(平成 1
7年度)直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶慮義塾大学環境情報学部元木彩
付録B
∞
∞
実施アンケート集計結果 (
2 5
.
1
1
.
3
0
・
2 5
.
1
2
.
0
7の問実施、回答者 1
1名)
1
ゼミでの研究で、サイトマップについてのアンケートをお願いしたいと患いますo 以下5問の質問
にお答えして、返送をお願い致します。回答される答の前に印(・、・等)を入れる、あるいは記述
をお願いします。
l)SFCウェプサイトで欲しい情報がすぐに見つからない時、どうしますか?(複数回答可)
サイトマップを見る
検索機能を利用する
友人等に情報を開く
諦める
2)SFCウェブサイトのサイトマップを見た事がありますか?
以下が SFCサイトマップ:h
均 :
1
.
肘w
w
.
s
f
c
.
k
e
i
o
.
a
c
.
j
p
/
s
t
u
d
e
n
t
s
_
i
鈎 u
k
a
n
l
s
i
t
e
m
a
p
/
i
n
d
e
x
.
h
t
m
l
I
ま
し
、
いいえ
3
)サイトマップを利用した事がある、あるいはしなかった理由とは?(複数回答可)
・利用した
欲しい情報が見つからなかった
どの様なサイト構造か見たかった
間違えてボタンを押した
その他:記述をお願いします
o
-利用しなかった
欲しい情報を探したことがない
検索したから
見ても役に立たないと思ったから
その他:記述をお願いします
o
4)何を改善したら、サイトマップを利用すると思いますか?(複数回答可)
見た目を楽しくする
情報の区分を変える
情報量を多くする
情報量を少なくする
圃
30-
卒業制作 2ω5年度(平成 1
7年度)直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶慮義塾大学環境情報学部元木彩
名称を変える
何をしても利用しない
5
)
S
F
Cウェブでよく利用するコンテンツ(リンク)は?(複数回答可)
NEWS
おかしら日記
SFC-GC9ンク
S
F
C
S
F
Sりンク
研究の現場
授業関連
SFCガイド
利用しない
-ぉ時間のある方のみ。 2問の回答をお願いします。========
6
)サイトマップから、キャンパスまでの交通アクセスを見つけられますか?
(
1図上から下までスクロールする聞で)
h
t
t
p
:
/
/
w
w
w
.
s
f
c
.
k
e
i
o
.
a
c
.
j
p
/
s
t
u
d
e
n
t
s
_
s
o
u
k
a
n
l
s
i
t
e
m
a
p
/
i
n
d
e
x
.
h
t
m
l
見つかった
見つからなかった
7
)サイトマップから、現学部長が誰かと分かるページ情報を見つけられますか?
(
1回上から下までスクロールする間で)
h
t
t
p
:
/
/
w
w
w
.
s
f
c
.
k
e
i
o
.
a
c
.
j
p
/
s
旬 d
en
旬:
_
s
o
u
k
a
n
l
s
i
t
e
m
a
p
/
i
n
d
e
x
.
h
t
m
l
見つかった
見つからなかった
以上となります。ご協カをどうもありがとうございました。
-31-
卒業制作 2ω5年度(平成 1
7年度)直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶磨義塾大学環境情報学部元木彩
∞5.12.07の問実施、回答者 11名)
実施アンケート集計結果 (
2
0
0
5
.
1
1
.
3
0
・
2
l)SFCウェプサイトで欲しい情報がすぐに見つからない時、どうしますか?(複数回答可)
1
1回 答
検索機能を利用する :
サイトマップを見る :
1回答
友人等に情報を聞く :
1回 答
2)SFCウェプサイトのサイトマップを見た事がありますか?
いいえ :
7名
4名
はい :
3
)サイトマップを利用した事がある、あるいはしなかった理由とは?(複数回答可)
・利用した
欲しい情報が見つからなかった :
2回答
どの様なサイト構造か見たかった :
2回答
-利用しなかった
検索したから :
4回答
2回答
欲しい情報を探したことがない :
FCのページのトップから限られたものしか集めないため :
1回 答
その他必要な情報は S
存在を知らなかった :
1回答
4)何を改善したら、サイトマップを利用すると思いますか?(複数回答可)
見た目を楽しくする :
5回 答
情報の区分を変える :
5回 答
名称を変える :
3回答
情報量を多くする :
1回答
情報量を少なくする :
1回答
5)SFCウェプでよく利用するコンテンツ(リンク)は?(複数回答可)
1
0回答
授業関連 :
NEWS:4回答
研究の現場 :
2回答
SFC-GCリンク :
1回答
SFC-SFSリンク :
1回答
SFCガイド :
1回 答
3
2
-
卒業制作 2ω5年度(平成 1
7年度)直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶慮義塾大学環境情報学部元木彩
6
)サイトマップから、キャンパスまでの交通アクセスを見つけられますか?
1
1名
見つかった :
7
)サイトマップから、現学部長が誰かと分かるべ}ジ情報を見つけられますか?
見つかった :
7名
見つからなかった :
4名
-33-
卒業制作 2ω5年度(平成 1
7年度)直感的に理解しやすしゅェプデザインの基準 ーサイトマップの新デザイン提案ー
安村通晃研究プロジェク
ト
慶謄義塾大学環境情報学部 元木 彩
付 録C
i
ご
.
:
.，主的に 7
二 三 しや すー い ウ ム ヌ テ サ イ ン の L
L三
千
サ イ ト マ ッ 7 のまFナ サ イ ン 長 ，.
t
.
-
:
テーマ概要
i
作
; サイトマップは一般的!こ fサ
j
ィト檎造を理解できる j、そして
1r
サイト肉の主要なリンクが含
!まれている J
というこつの役割
jを持つページとしてウヱブデザ s
l
ィンの中で定魯されている。
I
岡じ情報を f鐸す jという行為 i
jで使われるツールで、検索と !
:いうものがあるが、犠禽ではa
j念とそれを表現する雷叢の纏
jれに完全に対応する事ができ
!ない(ファジー、あいまいな敏
j案というものも存在するが )0
品 紹
介 SFCウェフサイトを 尉 !こ
実包界の場所情報を基鍵に
t
l
H
耳健作それぞれの泊所に問通ずる情唱が 含まれ
るページへのリンク~~..角してい ます.
クリックすると.示 、i
I
j
び
タ'
)ヮク す ると格
鋤されます .
!
i
i
j 関じ"を嫌々な言震やイメ
jージから固い込み、渡したい
'
.
f
一括 像作 それ ぞれの絡所 から辿 れ るリンクを
一 括で 量承 ・不曇象にできます.
!
i
;情報に辿りつける健皐を高 <1
!
ターゲット ユー ザーの関心を基盤に
リ ンク ~ の肉 軍事表示 マウスをリンク の よ l こ叡砂富〈
と、鈴<*示された・Jンタ a永
から '
Jンク灸の 肉 g聾 明 が
永されます.
i
するというイメージで、斬しい
a
;サイトマツプのデザインをしま 1
1し
た
j 震予の.，.
.
l
I
i
e?
i
縄
;
m，
-m
j
f
J
，/'
./"
ヌアジ
-a念ガイド
似た揖~.念を異怒る雪量か
ら遺書ミし、その肉蒋がどこの
リンク先に含まれているかを
表示する .マウスを虫てはま
る概念のよに置〈と見られま
園・念
す.
ヒューマンインターフェイスデザイン研究会{安材遺晃敏鐙}
環-~元木.
-34-
卒業制作 2ω6年度(平成 17年度}直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶鹿義塾大学環境情報学部元木彩
付録D
研究室担当教員名、研究室、研究室ウェプサイトURL
教授
部屋
URL
会問一雄
κ309
加知c//Wf'J回fc.k
e
ぬ，
.
a
c
，
p chamer
同1
1
1尚 之
1
C4
0
9
h民事//w
曲
.
s
f
c
J
c
.
e
i
o
.
a
c
，
p
r
l
噌割附
有薄麓
。
ω7
。融隣//w
曲
，
.
s
f
c
.
k
e
i
o
.
a
c
，
p
I
<
副
曲
飯盛量寵
ε406
融恥ノf
隠噌困M 拙 悦 脇 島 /
石川幹子
0403
加恥/
I
h
o
w
a
r
d
.
s
f
凶eio..範Jp/
石崎健
，
3
1
1
1
陣 取J川 崎s罰 .
k
e
i
o
.
a
c
，
p お耐n嗣 /
伊麗揖ー
ε4
倒
加匹//WeJ.回fc.keio..ac必
稲影正彦
4$11
加 広//www
:
m
叫
s
f
c
.
k
e
i
o
.
.
a
c
J
p
/
弁庭崇
1
C2
0
3
加p://i晶b
.
s
f
拙eio..齢Jp/
岩竹司監
05
備
枇 恥//www.
田 p
.
s
f
c
.
k
e
i
o
.
鵬
J
p
/
大岩元
，
3
0
6
肱栴ノノWWW.crew
.
s
f
c
.
k
働 u羽 /
文江守之
4s208
枇恥//
o
e
I
a
b
.
s
f
c
.
k
e
i
o
.
.
a
c
.
P
/
仰木格闘
o袋路
加広//w曲.sfc.k自~〆d噸/
大海書志
0303
h伎俳//w曲~ro.輔wa/
玄関遺也
λ404
同航/"伽必副L点陥ぬ畠Jp/
大前零
，
2
0
3
加が川崎，.sfc剥o.acJpÎ<制帽e/witåI側面回~
岡部光明
1
C310
加 広//w
曲.sfc.陶悶叩f晶 血
奥田教
，
206
h町 /
/
1
闇
f
i
C
I
I
a
.
S
f
C
.
悩a齢Jp/
奥出車人
。
デザイン c
r
G
r
i
r
i
加筑M5/
/
c
o
u
r
s
e
r
.
由 d削
同 航//www.
瓜 d忌.keio齢#
小篇英二
川崎
M恥//web..sfc.keio.a唱，r
oprra/l匂制也叫
小意志郎
K505
畑 区//w
欄 S儲
c..sfc.keぬ踊i
T
"
四割晴也bI
香川敏幸
εS
崎
陥匹/川崎.sfc.k
e
i
o
.
a事/、aw/
蝿秀樹
ε5
倒
融 恥//w
曲.sfe..keio.a噌，fUjJ
片岡正昭
ε306
同 事/
/
1
町向t.sfc.keio.齢島/
加藤貴昭
0201
'雌惇//w
曲
.
s
f
c
.
k
e
品
I
>
>
.
a
c
唱
〆
舗g
e
r
/
加藤文俊
t輔 7
情 単//www
1
l
也
I
b
.
n
e
t
/
金子部容
κ5
舵
陥 伽//w
附
'
.
v
c
o
m
.
o
r
Jp/
金安岩男
04
価
加
恥
ノ
'
/
W
f
/
J
.
凶
f
c
.
k
e
i
o
.
.
a
c
事
/
、
沼港健
0304
崩事ノノWeI:時fc.keio.acJp/kawaz踊/
・
r
.
由民愉叫
岨
35-
卒業制作創蹄5年度{平成 1
7年度}直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶鹿義塾大学環境情報学部元木彩
教観
部屋
UR
l
.
.
菊湯量一
03
C
淘
h
町 //w
欄 k
削 恥d凶悦晶Jp/
溝木車
As1D
2
随 恥//WWW
.
J
f
l
晶
l
.
s
f
c
.
k
e
i
o
.
a
c
.
.
除
/
草野厚
As20
1
枇恥//1食品r
.
s
f
u
.
k
e
i
o
.aゆ/
植本博之
An
2
10
協 が'
/
w
w
w
.
!
>
f
c
.
閣
也
.
a
d
J
p
/
蹟披孝弘
λ306
同事/
/
f
r
e
n
c
h
.
.
s
f
u
.
k
e
i
.
a
c
J
p
1
態堰賢次
0404
枇t
p
:
/
/
w
曲
.
s
f
u
.
k
e
i
o
.
.
a
c
j
)
/
'
k
e
n
I
桑原震夫
ε4
凶
枇 恥/
/w
棚
'
.
J
w
I
a
b
.
s
f
c
.
.
k
e
i
o
.
a
c
渇p
lhome.hbn
l
厳罰梓
ε502
h枇広//1倒~s.s罰c.keio..ac，P1
古石露子
λ308
h
肢 が / 糊w
.
s
f
c
:
羽島誠司j
p
l
薗領二郎
0310
h肢P://'曹糊w~ぬE抑..com/
小暮厚之
1
C5
06
枇肱/
/weh.sfc.keio.ac，j)/'~吋師事:/pn:場制s/pn:場ecthtml
小島朋之
ε嶋 7
肱句:
/
/
a
頃a.
s
f
c
.
k
e
i
o
.
a
吋p/
小梓博人
ε2
儲
悔
，:
I/www
.Jun侃倒n/
h
4
崎山賢二
デザイン B
h
段p
:
/
/
w
w
w
.
w
蜘.sfc.k駒'.aCJP/
勘弁正晶
ε3
価
h
t
相
二I
/
w
e
t
.
同fc.
k
e
i
o
.
a
c
.
.
，
/
、
償
問
語
/
小宮山宏之
ε却 7
出p:
//w
曲.sfu.k
e
i
o
.
a
c
.
.
，
/
k
斎本尚子
1
C410
h
怯p:/
/n
創
訓k
o
s
.
s
f
c
.
k
e
i
o
.
a
c
J
p
/
斉藤信男
L5
06
祉肱I/
www
.
s
凶
.
s
f
c
.
k
e
i
o.ac.F
1
佐々木三男
02
師
枕句d/w
曲 S事C.
k
e
i
O
.
a
c
，
j
)
/
'
1
悶
佐蕗覆彦
As1伺
摘がI/
w曲 s帥，e
i
O
.
a
c
.
F
/
'
n
臨 捌ω/
重松埠
λ訴)2
肱t
p
:
/
/
s
h
i
斜め.ぬ.keio.鵬jp/
清水語
ε409
h
t
t
p
:
/
/
w
w
w
.
e
l
i
i
ca.com/
霜崎実
λ204
h
枇p
:
/
川崎，.sfu.k
t
語
O
.
.
a
C
，
P
ハi
q
.
.
m
m
l
t
s
p
/
自弁早由里
1
C3
0
5
肱切:/
Iwww
.fJIJW.陪合o
.
n
e
.
.
jp/'
s
s
h
i
r
討/
神保語
L4
伺
柚恥I/
w曲，.sfu.k
e
i
o
.
.
a
c
，
P
1、叫/
鈴木佑治
λ忽)2
h
均二I/
w附 島 問l
i
le.品加IO
.
.
a
c
，
P
/
曽植泰教
κ503
陥恥I/
ww
町民sfc.k.
e
i
o
.
.
a
c
，
i
p
/
:
製m
e-lab
l
高橋良子
λ305
h肢 が/w
也 .
s
f
c
.
k
e
i
o
，劇場I
/
'
y
c
対品。/
武蔵佳恭
L304
/www
.
n
e
u
r
o
.
.
s
f
c
.
.
k
e
i
o
.
a
c
.
F
/
枇恥/
田島英一
λ504
h民P".I/~cr市同wo.sfu.keio..齢冒険/
千代倉弘明
05
邸
陥tp:/
I
c
:
h
i
y
o
.
s
f
凶:
e
i
o
.
a
c
j
p
/
土屋大洋
ε304
融恥//w曲'~.ac.F/i匂lIiyo/d踊sfØ1dex.同p
唐慮
λ却 2
h
t
t
p
:
/
/
，副naIab.仇.keio.凪Jp/
o
m
ν
hI
-36
膚
卒業制作創蹄5年度(平成 1
7年度)直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶慮義塾大学環境情報学部元木彩
教捜
都墨
URl
値目藁奉
As
2
0
9
h
t
t
p
:
/
/
w
w
w
.
h
t
.
s
f
c
.
k
e
i
o
.
.
a
c
j
p
/
富田爵
L310
f
蜘 /
/w
欄 '
b
i
o
i
仇sfu.k_民j
p
/
中村修
An
2
0
2
www'"
咽品調伊/
h
t
t
p
:
ノ
'
I
西山朗
λ303
加杭//.紘....sfc.加除鵬.i>>/'m晶~1.柚叫
野村亨
λ503
馳肱//WeJ.凶fu.k
e
i
o
.
a
c
.
i
>
>
Tnon制 問 /
義野達也
"207
加恥ノノww
明d:
om
.
s
f
怠
.
k
e
i
o
.
民jp/
車種隆志
"
2
f
.
段
陥 単I
/www;
加n.sfc.keio・齢Jp/
花田光世
デザイン0
同相p
:
/
/
l
m
s
.
h
r
d
c
.
s
f
忌
.
k
e
i
o.
a
c
.
j
p
/
漬回廊子
t輔 4
枇恥/川崎，.sfc.k
e
i
o
.
a
c
.
i
>
>
i
'
i
が
閣
官
醐
お
/
*上正
λ日)5
加算//1政a
m
i
.
s
f
c
.
k
e
i
o
.
a
ゆ
/
平高史也
λ406
h町//伽.d:柑¥.sfc.keio純jp/
漂谷昌弘
"403
/
i
m
i
.
s
f
u
.
k
e
i
o
.
.
a
c
，
j
p
/
I
耐/耐叫eX.J淀川
肱 恥/
福井弘通
ε509
加広ノ'
/
w
岨b
.
s
f
c
.
k
e
i
o
.
.
a
c
，
j
p
/
可
前
点
同/
'
m
d
e
民htmI
福田亮子
，，204
web
.
s
f
c
.
k
e
i
o
.
凪
.
i
>
>
T
r
y
曲
。
，/
p
r
o
j
舵 肱h
t
m
l
加が'I
福岡忠彦
"206
肱旬:
/
1
負
点
凶
a
t
.
s
f
c
.
k
t
由
，
.
a
c
.
j
p
古川康一
L3(
路
械がIbruch.sfc.keio.ac..
jp/
古谷知之
t割程
h仕p:l.川崎，.sfu.keio
.
a
c
.
i
>
>
Tm創 立 /
竃麓樹
L5
0
3
h
性俳/川崎，.sfu.k
e
i
o
.
.
a
c
，
j
p
Tcu391hori/
訟原弘典
03
回
h
t
恥/
/
1
制国必ara-七必。.sfc.keio..acJ
p
l
b
l
句島/
向井国昭
L309
批単//web.sfc.keio.ac，P
Ts
1
I
ホl1U
村井緯
An
2
0
9
同 事/
/www
.
s
f
u
.
順
d
e
.
a
d
j
p
/
轟平東一郎
"303
h町 /
/
r
n
o
r
i
倣 as
fc.keio.齢お/
安材遍晃
L410
h
t
歯
P
:
/
/www
.
h
i
.
s
f
u
.
k
e
i
o
.
a
c
唱
，
/
相町功
λ402
枇旬://，嶋崎融制..ac，jpr-I)W噂/
議J
I
I隆:.tt
An
20
1
枕旬二//www
...
働側a.cq/
山本純一
λ403
h
t
恥 //w
糊.回加cio.sfc.恥臨脇島/
y
a
問 削 沼 崎h由民加叫
15
倒
加p://'HI.品:.keio.脇島/
叢辺吉舘
λ田 1
h町 d/w
曲.sfu.k
e
i
o
.
a
c
.
i
>
>
1
k
i
開
.
"
...
曲 e
/
震辺調夫
04
郎
同 事/
/w
曲.
s
f
c
J
叩
遭遇額麓
ε310
祉 肱/
/
y
o
r
i
z
u
m
i
.
s
f
c
.
.
k
e
i
o
.
.
a
c
，
j
p
/
藁谷郁藁
λ408
崩 事/
/w
曲，.sfu.keio..ac，iViunV路幅冒/
￨臨回蒲
a噌 ，
TwatM曲 e/
一 一 一 一 一 一 一
岨
37-
卒業制作 2ω5年度(平成 1
7年度}直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶藤義塾大学環境情報学部元木彩
付録B
∞
∞
実施アンケート (
2 6
.
0
1
.
1
5
2 6
.
0
1
.
3
0の問実施、回答者 5名)
ゼミでの研究で、サイトマップについてのアンケートをお願いしたいと患います。以下 7聞の質問
にお答えして、返送をお願い致します。回答される答の前に印(・、・等)を入れる、あるいは記述
をお願いします。
-まず、以下のサイトマップを使ってみて下さい。
①実世界の場所情報を基盤に。
その他特徴:左上の 2つのボタンで一括操作可能。
それぞれの赤い点でもメニューが閲覧可能。
h
t
t
p
:
/
/w
e
b
.
s
i
c
.
k
e
i
o
.
a
c
.
j
p
/
t
02927a
凶y
asumuralmap_Ol.ht
m1
1
)①のサイトマップは学部生サイトを基盤に作りました。
場所と記載された情報の関連性を感じましたか。
以下の 5段階評価で評価して下さい。
1(
全く感じられない)
2{
少し感じられる)
3{まあまあ感じられる)
4{
かなり感じられる)
5{非常に感じられる)
2
)このサイトマップは探したい情報に導く機能を果たしていますか。
普段活用するページをイメージして、そこに導くと想定するメニューを開いてみて下さい。
e
x
.授業関連、おかしら日記、交通アクセス、その他思いつくもの。
1(
全くしていない)
2{少ししている)
3{まあまあしている)
4{
かなりしている)
5{非常にしている〉
3
)
:このサイトマップでよい点、惑い点があればお願いします。
良い点:
悪い点:
-38-
卒業制作 2ω5年度(平成 1
7年度}直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶慮義塾大学環境情報学部元木彩
-次に、以下のサイトマップを使ってみて下さい。
②ターゲットユーザーの関心を基盤に。
SFCの受験生用のページを題材にしている。
その他特徴:リンク先にマウスを数秒置くと、詳しいリンク先の説明表示する。
h
t
t
p
:
/
/
w
e
b
.
s
f
c
.
k
e
i
o
.
a
c
.
j
p
/
t
0
2
9
2
7
a
m
l
y
a
s
u
m
u
r
a
l
m
a
p
_
0
2
.
h
t
m
l
4)②のサイトマップは受験生用サイトを基盤に作りましたo
それぞれのまとまりの題名と含まれるリンクの関連性を感じましたか。
あるいは、それぞれのまとまりの設定を適切と感じましたか。
以下の 5段階評価で評価して下さい。
1(
全く感じられない)
2{少し感じられる)
3(
まあまあ感じられる)
4(かなり感じられる)
5(
非常に感じられる)
5
)このサイトマップは探したい情報に導く機能を果たしていますか。
受験生が活用するページをイメージして、そこに導くと想定するメニューを開いてみて下さい。
e
x
.どの様にキャンパスに行くか、どんな学部があるか、その他思いつくもの。
1(
全くしていない)
2(
少ししている)
3{まあまあしている)
4(
かなりしている)
5(非常にしている)
6)このサイトマップでよい点、悪い点があればお願いします。
良い点:
惑い点:
7
)新しいサイトマップのデザインで、活用したい、あるいは普及すると便利と
思うものはありましたか。活用したいマップの番号をお願いしますo (複数可)
①
②
以上となります。ご協力をどうもありがとうございました。
-39-
卒業制作 2ω5年度(平成 1
7年度}直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶慮義塾大学環境情報学部元木彩
実施アンケート集計結果 (
2
0
0
6
.
0
1
.
1
5
・
2ω6.01.30の問実施、回答者 5名)
1
)①のサイトマップは学部生サイトを基盤に作りました。
場所と記載された情報の関連性を感じましたか。
以下の 5段階評価で評価して下さい。
2(
少し感じられる):1名
3(まあまあ感じられる):1名
4(かなり感じられる):1名
5(非常に感じられる):
2名
2
)このサイトマップは探したい情報に導く機能を果たしていますか。
普段活用するページをイメージして、そこに導くと想定するメニューを開いてみて下さい。
低.授業関連、おかしら日記、交通アクセス、その他思いつくもの。
2(少ししている):
1名
3(
まあまあしている):
3名
4(
かなりしている):
1名
3
)
:このサイトマップでよい点、悪い点があればお願いします。
良い点:外部の人向けの案内にはいし吃思う。
.SFC生なら大体の情報がどこにあるか予測がつくこと
0
・わかりやすい、便利、活用したいと怒った。
・地図とリンクしていて、新入生やSFC
に初めて来る人にとって、非常に有益0
・メニューを全部開くボタンがあるので便利。
悪い点:場所をクリックすると、そこの情報が見られるっていう、使い方の情報を載せた方がいい。
-既存の WEBに慣れてしまっているので、一瞬戸惑う。
4)②のサイトマップは受験生用サイトを基盤に作りましたo
それぞれのまとまりの題名と含まれるリンクの関連性を感じましたか。
あるいは、それぞれのまとまりの設定を適切と感じましたか。
以下の 5段階評価で評価して下さい。
4(
かなり感じられる):
3名
5
(非常に感じられる):
2名
四
40・
卒業制作 2
0
0
5年度(平成
1
7年度)直感的に理解しやすいウェブデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶慮義塾大学環境情報学部元木彩
5
)このサイトマップは探したい情報に導く機能を果たしていますか。
受験生が活用するページをイメージして、そこに導くと想定するメニューを開いてみて下さいo
e
x
.どの様にキャンパスに行くか、どんな学部があるか、その他思いつくもの。
4(かなりしている ):3名
5
(非常にしている):
2名
6
)このサイトマップでよい点、悪い点があればお願いします。
良い点:見たい情報が文字情報で分かりゃすく表現されている。
・シンプルで見やすb
。
、
・パッと見とても見やすい。
-受験生にとって、役に立ちそう。
惑い点:特にないけど、あえて言うなら、絵がないから、見た自に寂しい0
・入学するには、の位霞が少々惑い。
(-WEBの内容をそのまま使うのではなく、独自の取材などによって、面白い内容だとさら
に良かったと，思う。
SFC
を受験した先輩遠からのアドバイスとか。)
7
)新しいサイトマップのデザインで、活用したい、あるいは普及すると便利と
思うものはありましたか。活用したいマップの番号をお願いしますo (複数可)
①:
3回答
・デファクトスタンダードというか、慣れればなんでも使えるのが人間なのかなと少々思った。ウェブ
のデザインが変わるとどんなに使いやすい方向への変更でも多少戸惑う。デザインがかわいらし
し
、
。
-病院に活用すると便利だと思う。複雑な構造でどこに何の科がある、というのが予め知る事がで
きると良いと思う。観光地などで活用してみると面白いと思う。周囲にある食事ができる場所と提携
してリンクを貼ったり、お土産屋の場所を把握するのにも活用できそう。
-これから SFC
のHP
で使えそう。
②:
3回答
・受験生が一番気になるのは受験情報なのかな?と思う。
・質問 F
AQの字のサイズは他といっしょでもいいかなと思う0
・独自にSFC
受験生を応援するサイトとして立ち上げられそう。
・リンクをクリックしなくてもページ内容がよく分かるから、抽象的なトヒ。ックを取り上げるサイトに使
えそう。
輔
4
1
岨
卒業制作 2ω5年度(平成 1
7年度)直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶塵義塾大学環境情報学部元木彩
参考文献
[
1
]a
n
d
r
e
e
s
c
u組 dg
a
i
v
o
r
o
n
s
k
i
， 2006
“
，andreescuand伊 i
v
o
r
o
n
s
k
i
"
(
h
t
t
p
:
/
/
a
g
.
r
a
i
s
e
m
e
d
i
a
.
∞m，
2
0
0
6
.
0
1
.
1
0
)
.
凶 Bemard
，
Mi
c
h
e
a
l
， 1999
“
，8itemapD
e
s
i
g
n
:Al
p
h
a
b
e
t
i
c
a
lo
rC
a
t
e
g
o
r
i
c
a
l
?
"
(
h
t
t
p
:
/
/
p
s
y
c
h
o
l
o
g
y
.
w
i
c
h
i
t
a
.
e
d
u
l
s
u
r
l
1
u
s
a
b
i
l
i
t
y
n
e
w
s
l
1
s
l
s
i
t
e
m
a
p
.
h
t
m
，2
0
0
5
.
1
2
.
1
3
)
.
[
3
]Bemard
，
Mi
c
h
e
a
l
，
andChap
紅 r
o
，
B訂 b釘 '
a8.2000
“
，Se
訂 '
c
h
i
n
gw
i
t
h
i
nW
e
b
s
i
t
e
s
:A
Comparisono
fThre
e匂 peso
fSitemapMenuS
t
r
u
c
t
u
r
e
s
"
(
h
t
t
p
:
/
/
p
s
y
c
h
o
l
o
g
y
.
w
i
c
h
i
t
a
.
e
d
u
l
h
c
i
l
p
均e
c
t
s
l
s
i
t
e
m
a
p
.
pd
f
，2
0
0
5
.
1
2
.
1
2
)
.
[
4
]一一， 2001，
“
F
i
n
d
i
n
gI
n
f
o
r
m
a
t
i
o
nont
h
eWeb:Doest
h
eamounto
f
w
h
i
t
e
s
p
a
c
er
e
a
l
l
y
m
a
t
t
e
r
?
" (
h
t
t
p
:
/
/
p
s
y
c
h
o
l
o
g
y
.
w
i
c
h
t
i
t
a
.
e
d
u
l
h
c
i
l
p
r
o
j
e
c
t
s
l
U
P
A
w
h
i
t
e
s
p
a
ω
!
p
a
p
e
r
.
p
d
f
，
2
0
0
5
.
1
2
.
1
2
).
[
5
]一一， 2004
，
"P
r
e
]
j
m
j
n
a
r
yF
i
n
d
i
n
g
sont
h
eUseo
fS
i
t
e
m
a
p
s
"
(
h
t
句:l/
p
s
y
c
h
o
l
o
g
y
.
w
i
c
h
i
t
a
.
e
d
u
l
s
u
r
1
1
8
i
t
e
m
a
p
.
h
t
m
l
，2
0
0
5
.
1
2
.
2
4
)
.
[
6
]B
o
l
y
e，
C
a
l
l
i
n
，2001，α，
J
orHarmonyf
o
rt
h
eWeb
，
Ma
ssachu
附句:Rockp
o
此
Pub
1
i
s
h
e
r
s
.
∞
[
7
]G
aine，F
r
a
n
k
， 2 5，官108:Th
eQu
a
1
i
t
yTe
chG凶 d
e
"
(
h
t
ゅ:/1www
.
b
i
o
s
.
m
a
伊 z
i
n
e
.
∞.ukI
o
p
.
p
h
p
?
i
d
=
2
2
5
，
2
0
0
6
.
0
1
.
1
2
)
.
∞
[
8
]G
，
∞gle，2 5“
，G∞g
l
eサイトマップ (
B
e
ぬ)ヘルア
(
h
t
ゆ:!J肘w
w
.
g
o
o
g
l
e
.
∞m1w
e
b
m
a
s
t
e
r
s
l
s
i
t
e
m
a
p
s
l
d
ωs
1
j
a
/
a
b
o
u
t
.
h
t
m
l
，
2
o
o
5
.
1
2
.
1
4
)
.
，
∞
[
9
]一一， 2 6，
“
:
G
o
o
g
l
e会社情報"(
h
t
t
p
:
/
/
w
w
w
伊 o
g
l
e
.
∞却linWjal∞Irporate/inde玄.
h
t
m
l
，
2
0
0
6
.
0
1
.
1
2
)
.
[
1
0
]I
n
t
e
n
t
i
o
n
a
l
l
i
e
s
，
2005
“
，ITL"(
h
t
t
p
:
/
/
w
w
w
.
i
n
飴n
t
i
o
n
a
l
l
i
e
s
.
ω
m
，
2
0
0
6
.
0
1
.
1
ω
.
∞
[
1
1
]KDDI，
2
' 6
“
，auLISTENMOBILE8ERVICE"(
h
t
t
p
:
/
/www
.
k
d
d
i
.
∞mIlismo/，
2
0
0
6
.
0
1
.
3
0
)
.
-42-
卒業制作 2
006年度(平成 17年度)直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案
a
安村通晃研究プロジェクト
慶磨義塾大学環境情報学部元木彩
[
1
2
]Keys
，
A
l
i
c
i
a
，2005
“
，O鐙 c
i
a
lWebo
f
A
l
i
c
i
aKe
y
s
"(
h
t
t
p
:
/
/
w
w
w
.
a
l
i
c
i
a
k
e
y
s
.
∞m，
2
0
0
5
.
0
7
.
1
2
)
.
[
1
3
]L
i
d
w
e
l
l
，
W
i
l
l
i
a
m
，2003
，D
esignRuJ
eInde
，
xM
a
s
s
a
c
h
u
s
e
t
t
s
:Ro
c
k
p
o
r
tP
u
b
l
i
s
h
e
r
s
.
r
(
=
2
0
0
4
，小竹由加里他， デザイン、新・ 100の法則』株式会社ピー・エヌ・エヌ新社.)
[
1
4
]M i 倒 的f
t
，2
003
， 加.
croωftWEFT3"
(
h
t
旬:/Iwww
.
m
i
c
r
o
ω
1
f
t
.
∞m均 pography/web/embedding/weft3/default.htm，
2
0
0
6
.
0
1
.
1
0
)
.
[
15
]MotiveLtd
，2
006
，句も.
eMotiveIntemetGlo
鉛ary"
(
h
t
旬:/Iwww
.
m
o
t
i
v
e
.
∞.nzJ
g
l
o
s
s
a
r
y
/
i
n
d
e
x
.
p
h
p，2
0
0
6
.
0
1
.
1
2
)
.
[
1
6
]Nie
1
s
e
n，
Jakob
，2000
，De~訟úng~忌bUsab必ïy， I
n
d
i
a
n
a
p
o
1
i
s
:NewR
i
d
e
r
s
P
u
b
l
i
s
h
i
n
g
.
[
17
]一
一
'
， 2002
“
，S
i
t
eMapU
s
a
b
i
l
i
t
y仏l
e
r
t
b
o
x
}
"
(
h
批p
:
l
肘w
w
.
u
s
e
i
t
.
∞mlale此boxl20020106.html，2005.12.12).
[
1
8
]Norman
，
Donald，
A 1988
，TheP
s
y
c
h
o
l
o
g
yof
Ev
erydayT
h
i
n
g
，
sNewY
o
r
k
:B
a
s
i
c
B∞I
k
s
.
[
19
]一
一，2004，Emo的 !DalDesign:whywelove(orhate，ノ everyday 必血~NewYork:
B
a
s
i
cBo
o
k
s
.
[
2
0
]Rhodes
，
JohnS
.2000
，
"U阻b
巡t
yRe
p
o
r
t
:AS
i
飴 mapo
nEv
e
r
yPage"
(
h
枕p
:
I
/
www.webword.
∞mlrepo:此s1sitemap.htm
l
，2
0
0
5
.
1
2
.
1
3
)
.
∞
[
2
1
]
τも.
eIntemetArc
h
i
v
e
，
2
1 6，
"
I
ntemetArc
h
i
v
e
:WaybackMa
c
h
i
n
e
"
(
h
t
t
p
:
/
/
w
w
w
.
a
r
c
h
i
v
e
.
o
r
g
l
w
e
b
l
w
e
b
.
p
h
p
，
2
0
0
6
.
0
1
.
1
ω
.
包2
]Th
om
錨 o
n
，
L
a
r
i
鈍
"2002，
"U
s
a
b
i
l
i
t
y百p
:G
i
v
eV1Si
ωrsAMa
p
"
，
∞
(
h
t
t
p
:
/
/
w
w
w
.
n
e
t
m
e
c
h
a
n
i
c
.
∞ 凶'
n
e
w
s
/
v
o
1
5
/
u
錨 .
b
i
l
i
t
y
_
n
o
2
0
.
h
凶 "2 6
.
0
1
.
1
2
)
.
[
2
3
]WorldWideWebCo
nsortium
，2006
“
，WorldWi
deWebC
o
n
s
o
r
t
i
u
m
"
(
h
t
t
p
:
/
/
w
w
w
.
w
3
c
.
o
r
g
，2
0
0
6
.
0
1
.
1
5
)
.
-43-
卒業制作 2
005年度{平成 17年度〉直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案，
安村通晃研究プロジェクト
慶塵義塾大学環境情報学部元木彩
[
2
4
]アイティメディア株式会社， 2006
，"
l
TmediaNews"(
h
t
t
p
:
/
/
w
w
w
.
i
t
m
e
d
i
a
.
∞.jp/news，
2
0
0
6
.
0
1
.
1
0
)
.
[
2
5
]青山学院大学， 2006
，“青山学院大学:" (
h
t
t
p
:
/
/
w
w
w
.
a
o
y
a
m
a
.
a
c
.
j
p
/
.2
0
0
6
.
0
1
.
1
5
)
.
r
[
2
6
]有賀妙子・由良泰人・渡部隆志， 2002
， デジタノレ@デザイン』株式会社秀和システム.
[
2
7
]五十嵐博子， 2002
，f
色の配色・イメージ BOOKJJ株式会社西東社.
包8
]インセプト株式会社， 2005
，"
l
T用語辞典 e
W
o
r
d
s
"他
(
ht
抗t
旬
p
が
:
1
.
偽
/
ゐ
e.w
[
2
9
]桶村久美子 2004“久美子一色彩の雑学'
(
h
t
句
:
l
I
o
s
a
k
a
.
y
o
m
i
u
r
i
.
∞却/
s
h
i
k
i
s
釘l
i
n
d
e
x
.
h
t
m
，
2
0
0
5
.
0
2
.
0
1
)
.
r
9
9
7、 色 jの文化誌』株式会社工業調査会.
[
3
0
]風見明、 1
[
3
1
] 関西大学， 2006
，"関西大学"(
h
抗p
:
/
l
w
w
w
.
k
a
n
s
泊.
u
.
a
c
却
，2
0
0
6
.
0
1
.
1
5
)
.
[
3
2
]慶慮義塾大学， 2006
，“慶慮義塾大学， (
h
t
p
p
:
l
l
w
w
w
.
k
e
i
o
.
a
c
.
j
p
.2
0
0
6
.
0
1
.
1
5
)
.
[
3
3
] 慶態義塾大学， 2005
，f
教員プロフィール‘05
J1慶慮義塾大学.
[
3
4
]慶慮義塾大学湘南藤沢事務室， 2005，fKEIOSFCGillDE2005
J1慶慮義塾大学.
[
3
5
]神戸大学， 2006
，“神戸大学:"(
h
t
ゆ
:
l
I
w
w
w
.
k
o
b
e
u
.
a
c
.
j
p
.2
0
0
6
.
0
1
.
1
5
)
.
∞
∞
[
3
6
]国立法人一橋大学， 2 6，“国立法人一橋大学， (
h
t
ゆ
:
l
I
w
w
w
.
h
i
t
u
.
a
c
.
j
p
.2 6
.
0
1
.
1
5
)
.
∞
[
3
η 財団法人日本産業デザイン振興会， 2 6“
，G∞dD
esignAward"
(
h
批判'/www.g-m町 k
.
o
r
g
，
2
0
0
6
.
0
1
.
1
5
)
.
[
3
8
] 白石和也、 1
9
9
1、『文字の歴史とデザイン(改訂版)
J
I財団法人九州大学出版会.
[
3
9
]城一夫・徳井淑子・山田欣吾・池上公平・上坂信男・柏木希介、 1
9
9
6、『色彩の歴史と文化』
株式会社明現金仁
岨
44-
卒業制作 2
005年度(平成 17年度)直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶慮義塾大学環境情報学部元木彩
[
4
0
]千々岩英彰、 1
9
9
7、『人はなぜ色に左右されるのか』株式会社河出書房新社
[
4
1
]早坂優子， 2004
，r
配色バイブルーコンパクト版』株式会社視覚デザイン研究所.
[
4
2]土岩史幸， 2003
，r
標準 Webデザイン講座 DreamweaverMXJ株式会社朔泳社.
[
4
3
]同志社大学， 2006
，“同志社大学:"(
h
均 :
I
I
w
w
w
.
d
o
s
h
i
s
h
a
.
a
c
.
j
p
/
j
a
p
a
n
e
s
e
/
.2
0
0
6
.
0
1
.
1
5
)
.
[
4
4
]東海大学， 2006
，“東海大学， (
h
t
ゅ:
1
1
鴨 川w
.
u
.
t
o
u
k
a
i
.
a
c
却
，2
0
0
6
.
0
1
.
1
5
)
.
[
4
5
]東京大学， 2006
，“東京大学'
(
h
t
ゆ:/Iwww
.
u
.
ω
I
k
y
o
.
a
c
.
j
p，2
0
0
6
.
0
1
.
1
5
)
.
[
4
6
] 中川信行， 2006
，rWebD
esigning2
0
0
6
/
2
J
J株式会社毎日コミュニケーションズ.
[
4
7
]南雲治嘉， 2003
，r
常用デザインシリーズチラシデザイン』株式会社グラブイック社.
[
4
8
]保坂庸介， 2003
，r
標準 Webデザイン講座Fla
shMXJI株式会社朔泳社.
[
4
9
]前回年昭.
1
9
9
6，“書評・府川充男著『組版原論タイポグラフィと活字・写植・ D
T
P
J
“(
h
t
旬:/Iwww
.
l
i
n
e
l
a
b
o
.
，
∞mlkumihange町'On.htm，1996，
07
，
0
1
)
.
∞
[
5
0
]三重県健康福祉部地域福祉室ユニバーサルデザイングループ， 2 5，“ユニバーサルデザ
インとは?" (
h
均 :
l
加w
w
.
p
r
e
f
.
m
i
e
.
j
p
尺I
D
/h
p/homelknow/univer
，2
0
0
6
.
0
1
.
0
4
)
.
[
5
1
]ミツエーリンクス， 2006
，“ユーザピリティ用語集 IWeb制作用語集"
(
h
t
ゅ:IIwww.mitsue.∞.jp/ca鈍 Ides沼 山 虫 色x.htm
l
，2
0
0
5
.
1
2
.
2
4
)
.
，r目次のデザイン』ピエ・ブックス.
[
5
2
]三富仁・鍬間美穂， 2005
[
5
3
]メニコン， 1995，“サエラ 16"(h
抗p
:
l
l
w
w
w
.
m
e
n
i
∞n.co.jp/alwayslcaet
1
a
l
s
a
e
r
a
1
6
.
h
t
m
1
，
2
0
0
5
.
0
2
.
0
1
)
.
，
“SFCCampusMa
p
"
[
5
4
]安村通晃， 2006
枕p
:
/
l
w
e
b
.
s
f
c
.
k
e
i
o
.
a
c
.
j
p
/
-y
asumur
a
/
l
伺m
pusmap.html
，2
0
0
6
.
0
1
.
1
ω
.
(
h
[
5
副矢野りん， 2
001，W
ウェプデザインの教科書』日経 B
P社.
-45-
卒業制作創蹄5年度(平成 1
7年度)直感的に理解しやすいウェプデザインの基準ーサイトマップの新デザイン提案ー
安村通晃研究プロジェクト
慶慮義塾大学環境情報学部元木彩
[
5
6
]山口康夫， 2
0
0
3
，r
I
webc
r
e
a
ωr
sN
o
.
刈株式会社エムディエヌコーポレーション.
，
[
5
7
]立命館大学， 2
0
0
6
，“立命館大学'
(
h
t
ゆ
:
l
I
www.
r
I
旬u
m
e
i
.
a
c
.
j
p，2
0
0
6
.
0
1
.
1
扮.
∞
[
5
8
]ロイター通信， 2
0
0
6
，“ロイター" (
h
均 :
1
1
旬d
a
y
.
r
e
u
飴'
r
s
.
∞お， 2 6
.
0
1
.
1
0
)
.
[
5
9
]早稲田大学， 2
0
0
6
，“早稲田大学'
(
h
均:lI
w
w
w
.
w
a
s
e
d
a
.
j
p
.2
0
0
6
.
0
1
.
1
5
)
.
-46
圃
直感的に理解しやすしミウェプデザインの基準
サイトマップの新デザイン提案
2
0
0
6
年3
月2
0日
初版発行
著者元木彩
監修安村通晃
発行慶慮義塾大学湘南藤沢学会
〒2
5
2
・
0
8
1
6 神奈川県藤沢市遠藤5
3
2
2
T
E
L
:
0
4
6
6
4
9
3
4
3
7
P
r
i
n
t
e
di
n]
a
p
a
n
印刷・製本
SFC
・
2
0
0
5
0
0
1
ワキプリントピア