apple.comリニューアル

apple.comがリニューアル。

動的UIもFlashではなくJavaScript活用で、フルCSSサイトのお手本みたいになっている。


おもしろいと思ったのは、

Apple – Mac

apple.com - mac

一昔前なら、フレーム切りで作っていたUI。

フレームを使うとhtmlファイルが物理的に分離されてしまうためにいろいろ不都合があり廃れてしまったが、純粋にUIとして考えると、

  • 選択肢はリストとして一覧したい
  • 本文エリアは固定したい

というものなので、理にかなっている。

この手のものがhtmlで作れるとなると、標準的に使い勝手はけっこう向上させられると思われる。
が、それに伴って、UI設計と実装の技術(CSS/HTML設計)もかなり難易度があがるだろう。

もう一点、パンくずナビ(Breadcrumb Naviation)が画面下端にきている。

Apple – Sfari 3 Public Beta – Download

apple.com - download Safari

パンくず+サイトマップ表示の例

location navigation system of apple.com

パンくずナビは、Keith Instone氏の2002年IAサミットでの定義を引用させてもらうと、

  1. 通った道筋の表現
  2. サイト構造を表現
  3. サイト内での分類を表現

の3パターンがある。

通常サイトでは、2.が標準で、amazon.comなどのファセット分類をベースにしているサイトでは3.が適用されている。
ヘンゼルとグレーテルに由来する1.のパターンはほとんどみられない。強いていえばamazon.comの最近チェックした項目が近い。

もともと静的に分類を作って、情報を「配置」していた時代だと2.で十分だった。
が、最近では、画面内にグローバルナビゲーション(=サイト第一階層のナビゲーション)とローカルナビゲーション(=サイト第二階層のナビゲーション)が標準的に用意されている状況では、実はパンくずナビはなくても同じ効果は与えらている。

むしろ最近では、SEO対策としてのみパンくずナビを用意しているサイトも多い。

ということを反映しての判断なのかどうかはわからないが、このapple.comの画面下部に、

  • パンくずナビ
  • サイトマップ的なコンテンツ配置

をサイト内での位置表示システム(location navigation system)としてまとめて置く方法は、合理的な判断として今後普及していく可能性がある。

070815追記

日本サイトも新機種リリースに伴いリニューアル。

それにしても相変わらずWebObjectsで作られているのはえらい。

apple.comリニューアル」への7件のフィードバック

  1. noriyo

    パンくずを上に置くか下に置くか、というのは、そのパンくずが上記の3パターンのどれに該当するかにも影響されていそうですね。

    これら3つのパターンは、

    1. 「あしあと」としてのパンくず
    2. 「標識」としてのパンくず
    3. 「ナビゲーション装置」としてのパンくず

    と言い換えることもできそうに思いますが、今回のappleのような 3.のパンくずであれば、下に置くのが自然ですよね。
    それに対して、昔から多用されていた 2.のパンくず(Yahooディレクトリに代表されるような)は、標識による構造と現在地の表示という役割上、上の方に置く意義が大きかったのだと思います。

    1.のパターンは、確かにあまり見かけませんね。
    MSのWallopというSNSで実装されていましたが、いまひとつ使い勝手が悪いです。
    情報探索には、回り道や堂々巡りや気まぐれな寄り道がつきものなので、それをパンくずという形で逐一視覚化しても、無駄が多すぎて再利用性が低いからかなーと思います。

  2. ピンバック: blog in a fog

  3. ah 投稿作成者

    > noriyoさん、

    下に配置した時点で、そこにナビゲーションがあることに気づかない、という自体が発生するので意味が薄くなってしまうと思うんですが、どうですかね。

    でもって、SEOという意味であれば、そのために、SEO情報としては不完全なパンくずを、どっかに置くっていう消極的な方法ではなく、

    ・メタデータにサイト構成情報を持たせる
    ・表現系のパンくず情報は、なんとかしてブラウザに渡してブラウザでやってもらう

    といったような対処が必要かと思っております。

  4. ueno

    ちなみにですが、Apple サイトでは以前からパンくずは下にありましたです。

  5. ah 投稿作成者

    > uenoさん、

    確かに!
    いま、apple.com/jpみたら、下にありました。

    例:アップル – iPod + iTunes(http://www.apple.com/jp/itunes/)
    ホーム > iPod + iTunes

    これってどういう意図って解釈すればいいんですかね?

  6. ueno

    グローバルナビゲーションもパンくずも、目的はサイトの構造概要と現在位置を示すことですが、表現が違うので、近くにあると意味的に干渉していまいますよね。UIとして前から気になっていたことです。

    見た目としてもあまり美しくなくて、例えば、画面の一番上にグローバルナビがあって、その下にパンくずがあって、その下にページタイトルが表示されていたりすると、現在見ているページのタイトルが3つも近くに見えることになったりします。

    グローバルナビゲーションが、サイト構造を空間的(広がり)に表現するのに対して、パンくずは時間的(奥行き)な表現と言えると思います。

    パンくずを下の方に置くのは、ページを見終わったユーザーが、次の行動として、上の階層に戻る(奥行きを戻る)ということをしやすくする意図があるのではと思います。

  7. ah 投稿作成者

    > uenoさん、

    確かに、H1タイトル(ひょっとしたらカテゴリ名も)、パンくず、グローバル(+ローカル)ナビとが機能も見た目もかぶるのは美しくないですし、第一場所をとりすぎです。

    > グローバルナビゲーションが、サイト構造を空間的(広がり)に表現するのに対
    > して、パンくずは時間的(奥行き)な表現と言えると思います。

    これはパンくずの用法として、ヒストリを表示する場合(1の場合)ですよね?
    階層を表示しているのであれば、もろにグロナビとかぶると思います。

    > パンくずを下の方に置くのは、ページを見終わったユーザーが、次の
    > 行動として、上の階層に戻る(奥行きを戻る)ということをしやすく
    > する意図があるのではと思います。

    なるほど。階層を降りていって、というケースではそれで戻る、ってのが有効ですね。

    常々思うのは、そこに同じ階層の次のメニューがあって欲しいなーと。
    特にニュースサイトを見ているときに感じます。

    設計時には、「次にどこに連れて行きたいか」を狙ってリンク作りますがね。

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください