SharePointのモダンUIの特徴をまとめてみた

そろそろモダンUIにしてみよう、なんて考えている方も増えているのではないでしょうか。でもモダンUIの特徴がいまいちわからんぞと。というわけでモダンUIの特徴、クラシックUIに比べ便利な機能、メリットデメリットをまとめてみました。

※本記事は個人の見解に基づいて記載しておりますことご了承ください

なお、本記事内の画像元となっているSharePointのサイトは SharePoint Online Provisioning Service を使って作成しています。用意されているテンプレートからサイトコレクションを自動で作ってくれて楽しいです。テナント管理者アカウントが必要です。
参考:https://provisioning.sharepointpnp.com/

◆モダンUIの特徴

・レスポンシブデザイン

簡単に言えば「ウィンドウサイズによって見やすいレイアウトに自動で変更してくれる」デザインのことです。モバイル端末からの利用でも使いやすくなっています。

ウィンドウを広く
ウィンドウを狭く

・外部アプリとの連携強化

SharePoint以外のOffice365アプリやGithub、JIRA、Salesforceなど、様々な外部サービスと連携することができます。

コネクタの一覧

・直感的なページ作成

クラッシックUIでは [ページの編集] や [Webパーツの挿入] がリボン領域、[Webパーツの設定] はメイン領域にありました。設定可能な項目も多く、直感的なページ作成は少し難易度が高かったように思います。HTMLなどでのカスタマイズが可能なこともあり我々のような技術屋さんが呼ばれる機会も多かったです。

一方でモダンUI、ページ作成における操作がすべてメイン領域に集約され、設定できる項目も(良し悪しはさておき)限られているので直感的にページ作成ができる印象です。

・速度向上

モダンUIはクライアントで主なビジネスロジックを実行するような作りになっています。一方でクラシックUIはサーバーサイド指向、クラウドサービスには向いていません。「まとも」な端末を使っている場合はモダンUIの方が速度が向上していると言って間違いないでしょう。

参考:https://social.msdn.microsoft.com/Forums/ja-JP/0b9b82cb-9826-4387-942b-954b68602128/sharepoint-online-12391125141248012531?forum=sharepointsupportteamja

◆モダンUIの特徴的な機能

ここでは私個人が便利だと思った機能、好きな機能を紹介します。

<便利機能>

・ニュース

モダンUIの特徴的な機能といっても差し支えないと思います。各サイト毎に [ニュース] を作成し、トップページに自サイト、または指定サイトの [ニュース] を表示するといった運用が想定されます。クラシックでは [お知らせ] が猛威を振るっていましたが、この役割を今後は [ニュース] が担うことになるのでしょう。

[ニュース] 自体は [サイトページ] の一つで、更新情報ごとにページを作っているとそれなりに手間がかかりますが、[ニュースのリンク] を使うことで更新情報を印象的に [ニュース] としてアピールできます。

・フォルダ単位のアップロード

ローカルのフォルダをフォルダ構成そのままにドラッグ&ドロップでドキュメントライブラリにアップロードできます。[エクスプローラーで開く] 派を駆逐するだけのポテンシャルがあります。

・プロパティ情報に応じた強調表示(リスト/ライブラリ)

(簡易版)列の書式設定のことです。

クラシックUIでもJSリンクなどで出来ないわけではないですが、コーディングが必要でエンドユーザーが気軽に利用できるものではありませんでした。モダンUIではステータスや期日、金額による色分けなどExcelライクなことが簡単に出来ます。

簡易版列の書式設定

・ページの作成(複製/テンプレートから)

同じ種別のニュースやページを作成する場合、テキストや画像の挿入位置などレイアウトは統一したいものです。そういった場合に既存のページを複製して新規作成、または予めページのテンプレートを用意しておけばテンプレートを元に新規作成することが出来ます。何気にすごく便利だと思います。

ページの作成

・シームレスなドキュメント選択/表示

クラシックUIではライブラリからファイルを選択すると、例えば画面遷移でExcel Onlineが開いたり、ファイルがダウンロードされたりと、いずれの場合でも一覧と同じページに表示することは出来ません。でも出来るんです、そう、モダンUIならね。

ドキュメントとファイルビューアー

・ハブサイト

まともに運用したことがないので語ることは出来ませんが、これが今後メインストリームになっていくのでしょう。

/サイトコレクションのグループ化/ナビゲーション共有/ニュース共有/デザイン共有/

って感じ?違ってたらごめんなさい。

<ユニークな機能>

・ヒーロー

一言で言ってしまえば「派手なリンク集」なんですが、印象的にカッコ良く(悪く言えばでかくて邪魔)にリンクを強調表示できます。

ヒーロー

・カウントダウンタイマー

すごく便利!というわけではないんですが、何となく貼りたくなる子です。可愛がってやってください。

カウントダウンタイマー

・天気予報

これも見た目重視ですかね。天気マークがあるだけでポップな印象になります。

天気予報

・クイックグラフ

簡単に頭良さそうなページができます。SharePointのリストをインプットに出来ます。

クイックグラフ

・ページ毎のコメント/いいね

場合によってはコメントされる度に対応するのが邪魔くさいだけかもしれませんが、ゆるーーーーく運用するだけで良い社風であればページの印象とかリアクション貰えると嬉しいものです。

◆モダンUIのメリット/デメリット

<メリット>

・Microsoft による継続的な機能強化

モダンUIはリリース当初に比べ格段に使いやすくなっており、現在も継続的に機能が追加されています。 日々追加される機能を眺めているだけでも楽しいものです。クラシックUIはもうMSに見放されており大幅な機能強化は見込めません。「枯れている」という意味ではクラシックUIも悪くないんですが。

・モバイル端末からの操作性向上

レスポンシブの恩恵をみんなで享受しましょう!

<デメリット>

・ウィンドウサイズによってレイアウトが変わる

レスポンシブが悪いよレスポンシブが。どうしても横並びで見せたいレイアウトがあってもウィンドウサイズによっては縦並びになっちゃいます。例えば左にドキュメント一覧、右にファイルビューアを配置してもそれが縦並びになっちゃいます。セクション毎にレスポンシブ有効にするか指定出来ると良いんだけど。まあ仕方ないかな。

・クラシックUIの機能が一部削除されている

予定表のカレンダービューとかね。SharePointの機能だけですべてを表現するのは難しく、Office365の別アプリや外部サービス便りにならざるを得ない場面が増えてくると思います。

・HTML/CSS/javascriptが利用不可

一番のデメリットは間違いなくこれでしょう。個人的には制限ある中で表現の仕方を工夫すべき、運用を変えるべきと思ってますが、SI的な業務ではこれが通らない。その場合はSPFxでなんとかするしかないのかな?

◆モダンUIとクラシックUIの使い分け

では実際どちらのUIを使うべきなのか、これまた個人の見解にはなりますが、用途などに応じてまとめてみました。

・クライアントの性能が「まとも」であるか

上述したようにモダンUIはクライアントでビジネスロジックを実行します。つまり、クライアントの性能が残念な場合、クラシックUIよりも遅く感じる可能性が高いです。標準OSがWin7、標準ブラウザはIE11のみ、なんて場合はクラシックUIの方がいいかもしれません。もし残念端末しか与えられてないのに「モダンUIにしろ」なんて言われた場合は「では、まともな端末を用意してください」と一休さんばりのトンチで切り抜けましょう。

・ゴリゴリのインタフェース改造が必要

クラシックUIではHTMLなどによる見た目の変更が可能でしたがモダンUIではそれが出来ません。SharePoint様で用意していただいている見た目を受け入れるのです。それが無理ならクラシックUIでゴリゴリに改造してください。推奨はされてませんが。

・連携済みの外部アプリを使っている

上述したようにモダンUIでは外部サービスとの連携が可能です。そのパーツでどこまでの操作が可能であるかはサービス毎に異なりますが、とりあえず検討する価値はあると思います。

・ページの情報量

クラシックUI時代には「ページを開いた直後の情報量を可能な限り多くしろ」なんて言われてました。それこそHTML使って余白を消したりヘッダー狭くしたりしたものです。
モダンUIではさらに余白が大きく、かなり余裕のあるクールでスタイリッシュで素敵でおしゃれなレイアウトになっています。ページタイトル領域ですらかなり巨大です。ページ開いた直後の情報量なんて微々たるものです。皆でマウスのホイールを回すのです、PageDownするのです、そういう前提なんです。それを受け入れられないのであればモダンUIは難しいでしょう。

・モバイル端末からもよく使う

やはりレスポンシブ、この場合はモダンUIで作成した方が使いやすくなるでしょう。

・新しい物好き

あなたはモダンUIです。