2018.07.09

Lightningページレイアウトについて考えてみる

  • このエントリーをはてなブックマークに追加
  • follow us in feedly
はじめまして。テラスカイの佐々木です。
早速ですが、Lightningの画面を作成する時に皆さんはテンプレートは何を選択されていますか?
最近デモを作成することが多く、私はいつもこのページテンプレートに悩まされます。
結局は前回作成したものと同様のテンプレートを使用することが多いのですが、そもそもなぜ12通りも用意されているのかー。「もっと良いレイアウトがあるかも!?」と調べてみました。

結果、特にベストプラクティスが見つかりませんでしたので、私なりに画面解像度や表示できる項目などを踏まえて考えてみました。

さて、Lightningのページレイアウトは以下になります。

Lightningページレイアウト

主にヘッダーがあるものと列数が1列、2列、3列に分かれているものの組み合わせです。
ヘッダーやサブヘッダーについては、コンポーネントやパスを配置するために用意されているのだと理解できますが、列数については何故3つも用意されているのだろうと疑問でした。
(Classicのように1パターンだと迷わないのに)

使用するモニターによって提供するレイアウトを用意しているのでは?と自分なりの仮説を立てて、今回はモニター別にどの列数を採用すると良いのかを考えてみたいと思います。

ところで、現在使用されているモニターのシェアですが、、、

モニター解像度のシェア

みたいです。

驚いたのはXGA(1024×768)やSXGA(1280×1024)のモニターがもうあまり流通していないことです。
つい最近まで使用していた気がするのに、いつのまにかワイド画面が主流でスクエア型の
モニターが少なくなっていることに少し寂しい気持ちもします。

では、モニターのシェア順(1位~3位)に列数別のレイアウトを確認してみたいと思います。

FWXGA(1366×768)の場合

1列表示

2列表示

3列表示

FWXGAでは横幅が狭い分、3列だと少し窮屈な感じがします。
また表示する文字数が多い場合は値が改行されるため、項目が下で見切れてしまい一画面に見える項目数が減ってしまいますね。
3つの中では、2列表示が確認しやすそうです。

Full HD(1920×1080)の場合

1列表示

2列表示

3列表示

FullHDの場合はFWXGA(1366×768)と反対に3列表示が一画面でスッキリ見えて使いやすそうな気がしますが、1列表示だと余白が大きすぎて、横の項目と並べるときに少し確認しづらい気がします。。

WXGA+(1440×900)の場合

1列表示

2列表示

3列表示

1列表示は余白が大きく感じます。
表示する項目数が少ない場合は、3列で表示しても良いと思います。

まとめ

やはり、全体的には初期設定で用意されている2列表示が一番無難な感じがします。
でも、FullHDやWXGAのモニターでしたら3列表示でも良いと感じました。
ということで、皆さんもご使用のモニターによって画面レイアウトを検討してみてはいかがでしょうか。

今後はLightning Experienceで使用しやすい項目の配置等についても調べてご紹介できたらと思っています。
23 件

関連する記事