ホームスチールは技術と勇気

事業会社のWebディレクター。思考の整理用、殴り書きブログ。

マイページのUI

いろいろなサービスのマイページを調査して、 TOPページに関して気づいたことを整理しておきます。

ECサイトの場合、マイページTOPが重要ではない

ZOZO TOWNには、マイページTOPが存在しません。また、Amazonでは、アカウントサービスがマイページTOPに当たりますが リンクのINDEXに過ぎません。ECサイトには不要だから、無いんですね。

f:id:takazoom:20151122093202j:plain:w250

ちなみに・・・ 楽天は、myRakutenとして、閲覧履歴やブックマークやレコメンドが表示されています。 その他に、楽天トラベルやkobo、キャンペーンバナーのリンクもあり、てんこ盛りで楽天的、といえます。

ソーシャル機能がある場合、マイページTOPでは更新性を演出

他人からアクセスされた場合を考慮して、更新性がある見せ方になっています。

例えば、食べログでは「新着クチコミ」、cookpadの場合は「最近の投稿(レシピ、つくれぽ、ブログ)」を表示しています。

また、食べログのPC版には「おすすめレストラン」があったり、cookpadは表示をMasonryにするなど、工夫されています。

ぜひ真似して、一歩でも近づきたいところです。

f:id:takazoom:20151122092852p:plain:w250

スマホサイトの場合、マイページTOPにINDEX的な機能は不要

スマホではマイページアイコンをタップでスライドメニューが表示され、ダイレクトに各機能のページにアクセスできるので、TOPページにはINDEX的な機能は不要です。

食べログの「行きたい」お店や、cookpadの「Myフォルダ」「特売情報」は、TOPページには無くて、スライドメニューにあります。

f:id:takazoom:20151122092952p:plain:w250

PCのマイページの構成は2種類

1つは、コンテンツレイアウト型。もう1つは、ストリーム型。

前者は、マイページ内の重要なコンテンツをレイアウトしたタイプ。食べログcookpadもこれに当てはまります。サンプルキャプチャとしてはHOT PEPPAR Beautyを上げておきます。 f:id:takazoom:20151123183734p:plain:w400

後者は、twitter(やFacebook)のように、コンテンツをストリームで表示させるタイプ。 YelpやRettyがこれにあたります。