ナビゲーションのボタン - ブースカに会いたい★創造のススメ

グローバルナビゲーション

AIDMA
注意、関心、欲求、記憶、購入
↓
AISAS
↓
AISCEAS

＊購買層が多く、商品数が多くないと「ロングテール」意味がない
（SEO/SEM対策）

＊メルマガから来る人もまだ居る

＊インターネットは「迷宮」
　「迷路」にしてはいけない。
　グローバルナビゲーションでTOPに戻るetc.
　サブメニューの増やし過ぎは危険
　迷いの分岐をすくなく
　統計的にはトピックスパス（パンクズ）は使われないが、迷いを少なくする為に必要

＊検索エンジンは広く浅く（＊o＊）
　本質はTOP

＊ナビゲーションで人を迷わせるな！！
　ちゃんと戻れるようにしよう

＊バナーと思わせて、画像だったりしちゃだめ
＊「赤／黄色」注意を促す組み合わせの色
＊「押す」と「引く」のバランスが必要
　押し付けがましくないように、読み飛ばしされないように
　ECサイトのやたらめったら「押す」のはいかがなものか
　

＊ユーザがWEBコンテンツに求める要素としての「UEハニカム構造」という7要素
* Useful (役に立つ)
* Usable (利用しやすい)
* Valuable (価値の創出)
* Accessible (アクセシブル)
* Desirable (望ましい)
* Credible (信頼できる)
* Findable (探しやすい)
文法が正しくとも、役に立たないと意味がない

探しやすく、アクセスしやすく、望ましく／利用しやすく/役に立ち、価値の創出／

探しやすい、つまりは上位になる→信頼出来る
それって、誰が見ても望ましい優れたデザイン☆
リピーターが増えるのね。

＊デザイナーはゴーサインだけ
http://marketing.mitsue.co.jp/archives/000108.html

ソース上の順序/音声読み上げを意識すること
ナビが二つあるなら（フロートレフト／ライト）
だが、右なのに上位の情報の場合（フロートライト）

＊media-allというは携帯にpc用の画像を読ませるようにしてしまう
文字情報だけにしてあげよう。
携帯専用にする。

＊キーワードをばらまく！！
　キーワード突出度、出現頻度、近接度などなど

＊グローバルナビの位置

＊メタ情報、サマリーの捉え方

＊短いページ/長いページがいいか、、、購入させる場合は長いページがいいかも
　情報サイトは短い方がいいかな？

＊webの仕事の文言
　アクセシビリティ
　読み上げ対応：全角にするか半角にするか、数字の桁を打つかどうか（1,000）
　わかりやすさを中心に。

＊フォームの入力の場合
　自分の個人情報を打つ場合、頭にフリガナ？氏名？
　姓と名をわけたり、〒番号のハイフンを外に出してみたり
　インプットタイプ、インプットNAMEなど
　最後によくでてくる「送信」/「リセット」でよいのか
　リセット意味ある？etc.
　個人情報を入力させる時にやめさせないことが大切。

＊グローバスナビゲーション：「お問い合わせ」が一番多い検索結果
　人がどういうキーワードでやってくるのか。
　「会社概要」or「会社案内」GoogleとYahoo!の検索結果は違う。

＊キーワードアドバイスツールプラス
http://ov.yahoo.co.jp/index.html?mkt=jp
http://keyplus.blog14.fc2.com/

＊Google　Analyticsをいれる
　入れるとグーグルロボッツが遊びにくる

＊フィード検索
　リスティング広告（クリック）
　フィート検索
　ディクレトリ（有料）
　ロボット検索
　ディクレトリ（無料）

＊グローバルナビゲーション
よこ
ロールおバ＝

＜IMGでいれる＞
（1）JAVASCRIPT（エンベット）画像を入れ込む
（2）ROLLOVER.JS（JSファイル）〃

（3）CSS置換（画像ファイル２つ）背景画像
（4）CSS　SPRICT（画像ファイル１つ）〃
　　　　※たて、よこ

※文字（1）OFF-LEFT(OVERFLOW:HIDDEN)（2）VISIBLITY:HIDDEN
INGに画像

マウスオーバーの練習

<title>グローバルナビゲーションの練習</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}	
ul li {
	list-style: none;
}
globalNavi li {
	float: left;
}
</style>
</head>
<body>
<contents>
<globalNavi>
<ul>
<li><img src="img/home.jpg" alt="ホーム" width="200" height="50" onmouseover="this.src='img/home_o.jpg'" onmouseout="this.src='img/home.jpg'" /></li>
<li><img src="img/new.jpg" alt="新着情報" width="200" height="50" onmouseover="this.src='img/new_o.jpg'" onmouseout="this.src='img/new.jpg'" /></li>
<li><img src="img/q.jpg" alt="お問い合わせ" width="200" height="50" onmouseover="this.src='img/q_o.jpg'" onmouseout="this.src='img/q.jpg'" /></li>
</ul>
</globalNavi>

おつぎは
「Rollovers.js」を使ってのいろいろ
http://www.dnolan.com/code/js/rollover/
class="imgover"を入れるだけ！！

<title>グローバルナビゲーションの練習</title>
<style type="text/css">
* {
	margin: 0;
	padding: 0;
}	
#container {
	width: 600px;
}
ul li {
	list-style: none;
}
#globalNavi li {
	float: left;
}
#globalNavi2 li {
	float: left;
}
</style>
<script src="rollovers.js" type="text/javascript"></script>
</head>
<div id="globalNavi2">
<ul>
<li><img src="img/home.jpg" alt="ホーム" width="200" height="50" class="imgover" /></li>
<li><img src="img/new.jpg" alt="新着情報" width="200" height="50" class="imgover" /></li>
<li><img src="img/q.jpg" alt="お問い合わせ" width="200" height="50" class="imgover" /></li>
</ul>
</div>