2016年08月05日

事例:mixi-メニュー


初めての方はこちらを「はじめに

前回の「仕様とはルール」で「ウインドウの閉じるボタン等はウインドウ毎に右になったり左になったりはしない」と言いましたが、これがメニューになるとそうでも無かったりします。以前に気になった事があったmixiの仕様を調べてみました。

スマホ版


以下はスマホ版のmixiのサイトで、ホーム画面のメニュー部分になります。
53N017_001.jpg

メニューの配置についての話しなので内容は関係ありませんが簡単に説明しておきます。
タイムライン:ツイッターの様に自分や友達のつぶやき等が時系列の一覧になって表示されています。ホーム画面にデフォルトで表示さる内容です。
コミュ:同好会、サークル活動の様に特定のジャンル、テーマに対するコミュニティです。
イベント:コミュの中のイベントを催す類のものでコミュの一部と考えればいいでしょう。
ニュース:一般のニュースが配信されています。
ゲーム:オンラインゲームが行えます。
その他右上のアイコン達からは色々な機能に行く事が出来ます。それらの機能に行って画面が切り替わった場合には全て左上の「mixi」のロゴをタップすればホームに戻るようになっています。
53N017_005.jpg

そして実際に各メニューへ進んでみた結果が以下の画面です。(イベントはコミュの子供なので除きました)
コミュ
53N017_002.jpg

ニュース
53N017_003.jpg

ゲーム
53N017_004.jpg

全て自分自身のトップを表すメニューがロゴの形で左に配置されてホームはアイコンの形で右に配置されています。ある意味統一されているとも言えるのかもしれません。

内部的な方針等は勿論分かりませんからあくまで外部から見ての意見に過ぎませんが、これはホームとコミュとニュースとゲームが全て対等の位置づけに見えます。つまりルールとしては「それぞれのトップを左端に配置する」というルールです。しかしそのおかげで「ホーム」は左端のロゴだったり右端のアイコンだったりバラバラになっています。やはり普通に考えればホームとの関係は以下の様な階層構造なのではないでしょうか。
    ホーム
    ・各種機能
    ・コミュ
    ・ニュース
    ・ゲーム
だとすればホームは唯一の親でありいつでも戻る場所ですから子供達の中で仕様は変わるべきではないと思われます。つまりどの画面においても統一的に「左端のロゴ」が「ホーム」というルールにすべきに思われます。

PC版


PC版がどうなっているのかも調べてみました。これがホームのメニューです。

ゲーム

ニュース

コミュ

ゲーム以外は統一的に左端にホームがあるようです。もしかしたらゲームは後からできたのでしょうか?だとするとスマホ版も後からできたのでしょうから途中で方針が変わったという事なのかもしれません。

もう一つ気が付いた事があります。
メニューの並びです。
スマホ版では、コミュ、ニュース、ゲームでしたが、PC版では、ゲーム、ニュース、コミュですね。やはりスマホ版の開発時に方針が変わったのかもしれません。しかしメニューの並びがPCとスマホという端末の違いに関係があるでしょうか?画面サイズの違いを考慮してメニューの数を絞り込むという事はあるのかもしれません。しかし同じメニューで並びを変えなければならないという要因はあまり思い浮かびません。これはメニューの並びというルールが考えられていた訳では無く、そもそも全体が「PCの仕様」、「スマホの仕様」と分けて考えられた為か、もしくは統一しようとしたもののPC版の仕様を変更する事を躊躇ったかのどちらかではないかと推察します。

用語


メニューの話しではありませんが今回の画面だけで分かる事なのでついでに挙げておくと用語も統一されていないようです。
「mixiゲーム」なのか「ゲーム」なのか。「コミュ」に至っては「mixiコミュ」以外に更にPC版の画面では「コミュニティ」という表記も見られます。
これは流石に使い分けているとは考えにくいですね。もし使い分けているのだとしたら根本的に一貫性に対する考え方が私とは違う原理に基づいていそうです。

あとがき


UIにおける仕様の一貫性は操作感に直結します。
しかし皮肉な事に操作感側から仕様を決めているといつの間にか整合性が取れなくなっているという事は良くあります。
大事な事は操作感の良いルールを策定するという事だと思います。

一覧


メニュー

関連


事例:Twitter-メニュー


記事を広める



posted by 善 at 18:11 | Comment(0) | TrackBack(0) | 事例 | このブログの読者になる | 更新情報をチェックする
スポンサーリンク
この記事へのコメント
コメントを書く
お名前:

メールアドレス:

ホームページアドレス:

コメント:

※ブログオーナーが承認したコメントのみ表示されます。

この記事へのトラックバック