管理画面レイアウトかくあるべし!有名サービスから管理画面レイアウトを学ぶ

「初めての管理画面制作で、どんな風に作ればいいのかわからない」

「管理画面制作を有名サービスから学びたい」

というような方向けに、ノンプログラミングで管理画面が作成できるPigeonFramework を開発した当事者が、有名サービスを例にとりながら管理画面レイアウトについて解説します。

とりあえずPigeonFrameworkのデモを触ってみたい方はこちら(会員登録不要)

 

有名サービスから管理画面レイアウトを学ぶ

有名サービスの管理画面は、ユーザー数も多く、考えられて洗練された管理画面が多いです。本記事では、そんな有名サービスから、部分ごとのレイアウトを学んでいきましょう。
 

リスト形式レイアウト

こちらは、youtuberなら皆さんご存じのYoutubeStudioの管理画面です。この画面からは、管理画面で最もよく使われる「リスト形式」のレイアウトについて学んでいきましょう。

リスト形式で大切なことは、「その項目が何であるのか、一目でわかる」ようにすることです。YoutubeStudioでは、動画タイトルを太字にすることで強調するほか、動画のサムネを入れることで、「視覚的」になんの動画の項目であるかが一目でわかるようになっています。

さらに、公開状況欄では、目のアイコンを入れることによって、これも視覚的にわかりやすくなっていますね!

このように、リスト項目ではその項目が何であるかパッとわかるようにするのが、良いリストレイアウトであるといえそうです。

もちろん、「適切な余白」であったり、「複数行に跨がないように横スライドできる」のもとても大切です。

 

ダッシュボードレイアウト

おつぎも、youtubestudioから学んでいきましょう。ダッシュボードというのは、管理画面の顔ともいえるページです。顔ともいえるダッシュボードには、ユーザーが最も閲覧するものを配置しておくのが良いです。

youtuberなら、最新のアップロード動画のウケが気になるのは間違いないはずなので、それを最も左に配置しています。そして、チャンネル登録者状況も同様にダッシュボードに配置していますね。チャンネル登録者数というのは、youtuberの知名度を表すもので、とても意識する部分です。どちらもyoutuberが最も気になるデータをダッシュボードに配置していることがわかります。

これは、どのサービスの管理画面にも共通する部分なのですが、「お知らせ」をダッシュボードに配置するのは鉄板です。「お知らせ」というのは、チャンネル登録者数などめちゃくちゃ気になるというようなものではないのですが、ダッシュボードにでも配置しておかないと見られる機会が少ないものです。

しかし、運営者からみて「お知らせ」は見て欲しい情報なのです。このような、「ユーザーが意識的に見る機会は少ないけど、見ておいて欲しいもの」もダッシュボードに入れておくとよいでしょう。

 

スマホ画面に求められるレイアウト

スマホでは、横スライドさせることはやめましょう。リスト形式をとるにしても、PC版より縦方向にスペースを取り、一つ一つのアイテムを縦方向に伸ばすことで対処しましょう。とはいえ、PCほど多くの情報を一つのアイテムに載せることはできません。では、どうすればいいのでしょうか。

実は、優れたサービスほど「必要最小限の情報だけを表示する」ということを徹底しています。

例えば、スマホで管理画面を扱うユーザーが多いメルカリでは、出品物には「写真」と「値段」だけを載せるという手段を取っています。普通であればタイトルまで載せようとするでしょうが、メルカリでは値段と写真のみです。

これは、出品物を判断するのに、タイトルは不要で「写真」と「値段」だけで十分と考えたためでしょう。実際、これのおかげで1画面に多くの出品を表示することができ、使い勝手がとてもよくなっています。優れたレイアウトもあって、メルカリの累計取引数は5億件を超えました。

スマホ向け管理画面を作成する際には、「必要最小限」を意識すると良いでしょう。

  

数値データを扱う画面のレイアウト

売り上げ等の数値データを扱うにあたり、「グラフ表示」は必須と言えます。なぜなら、グラフはぱっと見ではわかりにくい数値データを、視覚的にわからせてくれる強力な武器だからです。

数値データはもれなくグラフ化しておきましょう。さて、グラフ化するうえで大切なことが、適切なグラフ種類を用いるということです。グラフの種類知識に自信がない方は、まずは統計の種類について学習しておきましょう。

次に、グラフは「分析・改善のために用いられる」ということを意識しておきましょう。例えば、有名ASP(広告仲介サービスのこと)の会社であるSeedAppでは、サイト・対応OS・期間など、分析するためにさまざまなフィルターを掛けれるようになっています。

他にも、サイトのアクセス分析サービス「Googleアナリティクス」では、なんと、多様な指標を多様なグラフから選択し、多様なフィルターを掛けるということを、ユーザーが選択できるようになっています。全ては、ユーザーが数値データを分析できるようにするためです。

ここまで手の込んだ管理画面を構築する必要はめったにないと思います。しかし、ユーザーが十分な分析をできるよう、できるだけ多様なグラフ表示を心掛けるのが良い管理画面といえるでしょう。

 

まとめ

管理画面レイアウトに限らず、レイアウトというのはユーザーのためのものです。ユーザーのことを考え続け、ユーザーファーストで管理画面レイアウトを考えましょう。そうすれば、今回紹介できなかった部分のレイアウトも、必然的にどのようなレイアウトが良いのかわかるはずです。

管理画面作成にコストを掛けられない方は、ノンプログラミングで管理画面を構築できる PigeonFramework をよければ検討してみてくださいね。

とりあえずPigeonFrameworkのデモを触ってみたい方はこちら(会員登録不要)