ナビゲーション
WEBサイトのアクセスルートを実現させる為に重要。
通常は設計初期(情報の分類・組織化)の段階でどの形式で制作するのか決まってくる。
デザインを優先してメニュー形式から制作する場合、サイトクオリティが低下する恐れがあり注意が必要。
メニューの形式
上部メニュー型
2014年現在、最も多くのサイトが採用している形式。Appleが先駆けて1990年代から採用しており、この形式のサイトの完成度はAppleが群を抜いている。
メリット
- 内容部分が広く使え、自由度が高い
- メニューが目付きやすい
デメリット
- メニューの増減が難しい。
- コンテンツ数を増やしにくい。
左・右カラム型
コンテンツの多いサイトやコンテンツを継続的に追加していく目的のサイトの多くが採用している形式。Blogが代表的。
メリット
- 項目数の増減が簡単に出来る。
- スタート視点(左上)を活用しやすい。
- メニューが目に付く
- ユーザビリティが良い
デメリット
- 内容の幅が狭い。
- 階層の深いサイトには向かない
逆L字型
最もユーザビリティが良いとされる形式で、コンテンツが多く分類が複雑なサイトに最適。官公庁等の少し地味な印象のサイトに多く採用されている。
メリット
- 深い階層にアクセスしやすい。
- 機能的なサイトを構築できる。
デメリット
- 内容の表示域が狭い。
- サイト設計が複雑になる。
ナビゲーションパーツ
ユーザーが使用するWEBサイトのページ部品。サイトのカテゴリ・コンテンツページへのリンクを指す。
グローバルナビゲーション
TOPページから最深度のページまで全ページ(共通メニュー)変化しないナビゲーションをグローバルナビゲーションという。
ローカルナビゲーション
特定のセクションに配置されており、セクションに分類されたコンテンツ間をユーザーが移動する為のカテゴリー内共通ナビゲーション。
直接ナビゲーション
階層構造には関係なく、ページ内容に関連性のある別のページへ直接アクセスするためのリンク。主に関連記事・新着情報等に使用される。
人間の視点の動き
通常人間は左から右に、上から下に視点が移動するので、多くのサイトでは左上にロゴを配置する。
アクセスルート(ユーザー導線)
アクセスルートとは、設計者から見たユーザーの動き。
アクセスルートを設計する際に、ユーザーが目的のページ(情報)にストレス無く最短で移動できるよう考慮し、ルートを構築していくのが望ましい。
アクセスルート構造の種類
- シーケンシャルアクセス
- ランダムアクセス
- ダイレクトアクセス
シーケンシャルアクセス
ユーザーが順番を追って、目的のページに進めるように導線が引かれた形式。目的が漠然としているユーザーにとって、使い勝手が良い。
ランダムアクセス
内容の中に別カテゴリーページへのリンクを用意し、ユーザーが興味を感じたページにアクセスできるよう導線が引かれた形式。
ダイレクトアクセス
ユーザーがTOPページからダイレクト(直接)に目的のページに移動できるよう導線が引かれた形式。
情報の構造化
内容(コンテンツ)をユーザー目線で構造を設計する。
基本的な構造の形
- ハイブリット構造
- ツリー構造
- リニア構造
- ハイパーテキスト構造
- データベース構造
ハイブリット構造型
複数の構造を組み合わせた構造型で、サイトの目的・コンテンツによって必要な構造を組み合わせて制作される。もっとも一般的ともいえる構造型。
ツリー構造型
webサイトの基本構造、カテゴリベースで作るのが一般的。大抵の場合、情報の分類化が完成した次点でツリー構造が出来上がっている。
リニア構造型
リニア構造型は単一方向構造で作られており、一方向型とループ構造型があります。主に『手順』『順番』『本』『ストーリー』『プレゼン』等を制作する際に利用する。
利用例
- ショッピングカート
- 登録ページ等
ハイパーテキスト構造型
意味・内容で各ページをつながっている形の構造。引用(ワード)と内容(記事元)とのリンクで構成され『文中リンク』『関連記事一覧』などを利用する。
利用例
データベース構造型
検索窓等を利用してユーザーが検索したキーワードの一覧やページを表示する構造。
利用例
- ショッピングサイト
- ダウンロードサイト
XAMPP
XAMPPとは、WEBサーバの環境をローカルPCに構築できるフリーウェアです。
サーバ環境に必要なソフトウェアをまとめてインストール・設定でき、各ソフトウェアを『XAMPP』パネルで一括管理することができるので、ローカルでのテスト環境に最適です。
主な用途
公開サーバでテストを行うリスク避け、ローカルの環境でテストを行う目的で利用。
ざっくり言うとこんなソフト
ちょっと格好良いHPを作りたいけど、PHPとかJavascriptとかDBとかわかんねぇ!プログラム言語の勉強がしたいけど、レンタルサーバでプログラムが暴走したら困る。
しか~~し、自分のPCの中でなら暴走してもPCごと抹殺すれば安心!(o´∀`o)
つまり、XAMPPは自分のPCにサーバ環境を簡単に作れるソフトウェアです。
パッケージ内容
次回はダウンロードからインストール作業を行います!
情報の分類
無作為に集められた情報を分類する事でコンテンツになり、情報量が多いほどコンテンツも充実してきます。
【情報分類の概念】
- カテゴリ(分野)
- 位置分類
- 連続性(量や大きさ)
- 50音順(A~Z)
- 時間(年・月・日)
カテゴリ(分野)
ジャンル毎に情報をまとめる方法、パソコンを例にあげると、『ノート』『デスクトップ』『タブレット』のように分類できる。
位置分類
概念的または物理的な位置による分類、地図・人物相関図が代表的。
連続性(量や大きさ)
連続した量として比較できるデータを基に分類する方法、ランキング(順位表)が代表的。
50音順(A~Z)
50音順・アルファベット順でデータを分類する方法。
時間(年月)
スケジュール・記録・年表など時間軸に沿った分類方法、年齢別が代表的。
タギング
情報にタグ付け(タギング)する事で雑多の情報の管理が容易になる。
【例:フレークコートキャラメルコーン-ストロベリー味】
タグ:イチゴ味・ピンク色・フレークコート・チョココーティング
AIDMA理論
1920年代にサミュエル・ローランド・ホール(アメリカ合衆国)が提唱した宣伝広告に対する消費者の心理プロセス。
商品購買におけるユーザー行動理論の一つであり、顧客が商品(製品・サービス等)を認知してから購入するまでの心理プロセスを5つのステップごとにセグメントした理論。
【AIDMA理論】-アイドマ理論
- A (注意) Attention
- I (興味) Interest
- D (欲求) Desure
- M (記憶) Memory
- A (行動) Action
Attention
各種宣伝広告をはじめ、友人知人の口コミ等により商品・サービスの存在を認知する。
Interest
広告掲載記事・テレビCM、友人・知人からの情報から商品・サービスに関心を持つ。
Desire
店舗に訪れ商品に接したり、より詳しくサービスを理解し購買意欲を抱く。
Memory
商品・サービスの必要性・具体的な利用イメージを抱き、購買検討を行う。
Action
商品・サービスを購入する。