ワイヤーフレームの公開 - マイページ
前回に続き、今度はFirstBuzzのサイトリニューアル後の管理画面（マイページ）のトップページの設計をしました。
管理画面って設計の機会が少ないので、微妙かもしれないです。
Amebaとかライブドア等、他社のブログ管理画面も調べたのですが、各社、結構攻めてますね。超学習型UIというか。リテラシーが超高め設定です。
あんなんで普通の専業主婦がブログの更新やら設定やらできるんですね。
スゴい。
僕は以前、Amebaにチャレンジしたのですが、UIが難しすぎてクジけた経験があります。僕にはMTのようなシンプルな管理画面じゃないとムリです。
というわけで、シンプル目な学習型マイページとしました。
↑クリックで拡大
設計の手順としては、下記のような感じです。
1. どんな価値を提供するUIなのか？
2. 拡張性の確保
3. ワイヤーフレーム設計
前回も書いた通り、
ブログパーツはネット上全体で見ると素敵なものが多くあります。
そんな中、FirstBuzz発行のブログパーツをわざわざ貼る動機としては、
「とにかく賞品が当てたい」
「本来、ブログパーツは貼りたくないけど、景品欲しいから貼っておく」
「貼っても嫌じゃないブログパーツがある」
あたりになってくると想定されます。
なので、ユーザーの「儲けたい」視点、つまり、
・今いくら儲かっているのか？
・どうすればさらに儲かる可能性があるのか？示唆する
・お得情報にいち早くアクセスできる
を軸としたマイページのUI設計にしました。
管理画面は裏側のシステムですので、プログラムやDBが結構絡んできます。かつ、リリースの予定が現段階では見えない、新機能のリリースなんかもあります。都度、表も裏も変更するのはリスクと運用コストの問題が発生します。
そのため、ホーム > マイページという階層構造をとり、表（ブログパーツを探す表示用画面）と裏（貼っているブログパーツの管理画面）とは完全に切り分けています。このかたちはGoogleアドセンスやAmazon、楽天と一緒ですね。
一方で、表側と裏側がブロックレベルで連携しているのは、派遣系サイトなどです。
ユーザーログイン後は学習型UIの採用がセオリーです。
表側は「自発的に探さなくても、見つかる・探したくなるUI」なのですが、管理側はマージンを少なめに設定し、情報同士のコントラストを抑えて「探すとすぐ見つかるUI」としました。
で、完成！
というわけで、今頃、ビジネス開発部のデザイナーさんがビジュアルデザインをしているはずです。
乞うご期待！！
画面設計の実践的アプローチ
海文堂出版
売り上げランキング: 130998
岡田誠一
まで。
