SharePoint Online モダンUI/クラシックUI 混在サイト画面設計 8つのコツ

SharePoint Online : 2018.02.14 Wednesday

2017年 夏ごろから、SharePoint Online モダンUIのアップデートが頻繁におこなわれ、半年が経過しました。クラシックUIの終息は 現時点ではアナウンスされていませんが、しばらくの間(恐らく 2018年末ぐらいまで?)は、モダンUIとクラシックUIが混在する状態が続くと思います。

そこで、モダンUI/クラシックUIが混在しているサイト画面設計のコツについてまとめてみました。少しでも SharePointサイト管理者の負担を軽減できれば っと思いまして。


SharePoint Online の現状:モダンUIで色々「なくなった」

まずは 現状(というか制約条件?)。
・モダンUIの Updateは頻繁におこなわれる
・モダンUIと クラシックUIが混在している
・モダンUIは CSS,JavaScriptカスタマイズができない
・モダンUIでは Webパーツが変わり 表示できないリストがある
・モダンUIは サイトのレイアウトが効かない
  :(他にも いろいろあります...。)
  :

サイトの要件:Look & Feel(見た目と操作感)統一

一般的なWebサイト、お仕事で使うアプリケーション画面の基本的な要件「Look & Feel 統一」。

エンド ユーザーの立場で考えると、モダンUIならモダンUI、クラシックUIならクラシックUIに統一した方が 使いやすいのですが、モダンUI→クラシックUI、クラシックUI→モダンUIの切り替えリンクが自動で表示されるのでサイト管理者側では制御不能です...。なので、モダンUIとクラシックUIが混在する前提で、Look & Feel(見た目と操作感)を なるべく近づける方向で 使いやすさを追求する感じで。


モダン/クラシック混在のコツ#1 サイトのレイアウトは「Seattle」にする

モダンUI→クラシックUIに エンドユーザーが戻した場合や、モダンUIに対応していないリスト/ライブラリを表示した場合に、クラシックUIが表示されてしまいます。

サイトのレイアウトを Osloにしていると 「モダンUIの時は左側メニュー」「クラシックUIの時は上側メニュー」となり、どこをクリックすれば 目的のページなどに行けるか ユーザーが混乱してしまいます。

サイトのレイアウトが Seattleであれば「サイドリンクバー(Quick Launch)」などの全体レイアウトが モダンUIに近いので ユーザーの混乱が少なくなります。


Seattle クラシック表示
SharePoint Classic navigation seattle

Seattle モダン表示
SharePoint Modern navigation seattle

Seattle/Osloの切り替えは サイト単位で、[サイトの設定]-[外観の変更]から 変更できます。


(2017/09/22) SharePoint Online モダン表示とクラシック表示の比較 ナビゲーション編
(2017/11/22) SharePointナビゲーションの進化 Seattle から Oslo そして Modern へ

モダン/クラシック混在のコツ#2 「最近使った項目」を使わない

クラシックUIページでは 「サイドリンクバー(Quick Launch)」に「最近使った項目(Recent)」見出しが自動的に表示され、最近使ったリスト/ライブラリへのリンクが自動的に追加されました。

モダンUIでは 「サイドリンクバー(Quick Launch)」に「最近使った項目(Recent)」見出しは表示されません。「最近使った項目(Recent)」に依存したナビゲーションになっていると、クラシックUIでは リンクが表示され、モダンUIではリンクが表示されないので、ユーザーが目的のページなどに辿りつけなくなります。


モダン/クラシック混在のコツ#3 サイトのロゴは 正方形にする

クラシックUIでは、サイトのロゴは 幅 180 x 高さ 64 ピクセル(縦:横=1:3)の横長です。正方形のロゴを設定すると、(サイト名などが 多少 左にずれますが)そのまま正方形で表示されます。

モダンUIでは、サイトのロゴは 幅66 x 高さ 66ピクセル(縦:横=1:1)の正方形です。横長のロゴを設定すると、上下に余白がついて、正方形で表示されます。ピクセル値も 66と 小さいので ロゴ画像に何が表示されているのか識別するのが困難になります。

上記の動作仕様から考えて、モダン/クラシック混在では サイトのロゴは正方形にするのが よろしいかと。


SharePoint Modern Square Site Logo

(2017/09/23) SharePoint Online モダン表示とクラシック表示の比較 サイトのロゴ編

モダン/クラシック混在のコツ#4 フォームはカスタマイズしない

クラシックUIで フォーム(新しいアイテム、アイテム編集、アイテム表示)をカスタマイズすると、モダンUI表示できません。強制的にクラシックUI表示されるので、それで当面は問題ないのかもしれませんが・・・クラシックUIからモダンUIへの移行を考えると、クラシックUIでフォームをカスタマイズしない方が移行がスムースに進むと思います。

クラシックUIの フォームカスタマイズには 以下の方法があります。
・スクリプトエディタ
・コンテンツエディタ
・JSリンク
・SharePoint Designer


モダン/クラシック混在のコツ#5 お知らせリストは カスタムリストに移行

クラシックUIで よく使っていた「お知らせ」ですが、モダンUIでは 現時点で Webパーツ表示できません。ですので、今後の事を考えると「お知らせ」リストから「カスタム」リストに移行しておいた方が無難かと。カスタムリストであれば、モダンUIのリスト Webパーツで表示できます。


(2017/11/28) SharePoint Online モダン Webパーツ「リスト」「ライブラリ」と、従来の「リストビューWebパーツ」との相違点

モダン/クラシック混在のコツ#6 リンクは クイックリンクで作り直し

クラシックUI時代(SharePoint Server 2013)には、注目リンクリスト、リンクリストで 他のサイト、リスト、ファイルなどへのリンクが作れました。

モダンUIでは 注目リンク、リンクを表示するWebパーツはありません。モダンUIのクイックリンクWebパーツで、作り直しが必要です。

SharePoint Modern WebPart QuickLink


(2017/12/13) SharePoint Online モダン Web パーツ クイックリンクで 複数のリンクをカルーセル表示できる

モダン/クラシック混在のコツ#7 画像表示は 画像ギャラリーで作り直し

クラシックUIでは、画像ライブラリのスライドショー表示などがありましたが・・・モダンUIでは無くなりました。 モダンUIの画像ギャラリーWebパーツで作り直しが必要です。

SharePoint Modern WebPart PictureGallery Setting 1


(2017/12/18) SharePoint Online モダン Webパーツ 画像ギャラリーで 画像のタイル表示、カルーセル表示

モダン/クラシック混在のコツ#8 サポートされないリスト,Webパーツは使わない

Microsoft/Office365の戦略(?)として Teamsへの集約があるようで・・・モダンUIでは ニュースフィード(Webパーツ)、ディスカッション掲示板などの コミュニケーション系がサポートされていません。

(既存の)ニュースフィードデータをCSV出力、ディスカッション掲示板データをExcelエクスポートして、過去データは保持するとして・・・「チームのコラボレーションは Teamsにスライドしていく」っのが正しい方向? SharePointは ただのデータ置き場か、ポータルサイトのようなリンク集・お知らせ掲示する場所として 生き残るのでしょうか。


(2017/09/13) SharePoint Online モダン表示とクラシック表示の比較 リスト・ライブラリ編
(2018/02/02) SharePoint Online クラシックUI サイトフィード(ニュースフィード)Webパーツのデータ出力


【最近の投稿記事】



SharePoint Online
Office 365/SharePoint Online事始め
Office 365やるってよ |  Office 365市販本(できる Office 365) |  Office 365市販本(誰でもできる! Office365導入ガイド) |  MSサイトでプランを勉強 |  TechNetでプランを勉強 |  sway, cortana, delve |  E5プラン |  Office Online制限 |  SharePoint 2016 RC |  アーキテクチャ |  Connections, Listings, Invoicing |  ひと目でわかる SharePoint Server 2016 |  Office 365 ビジネス活用28の事例 |  Office 365 サイトカスタマイズ&開発編 |  ひと目でわかる PowerApps | 
SharePoint Online リスト/ライブラリ(クラシック)
標準 リスト/ライブラリ |  アンケート(Survey) |  画像ライブラリ |  ニュースフィード |  日英サイト間でリストデータ移行 |  ライブラリ ドラッグ&ドロップ |  ライブラリ ファイル一覧出力 |  リスト外観変更 |  Explorer URL |  ディスカッション掲示板 |  注目リンク |  OneDrive 通知メール送信 |  OneDrive バージョン履歴 |  アイテムはレコードです |  イベントのエクスポート |  既定ビュー破損 |  バージョン管理の改悪Update | 
SharePoint Online Webパーツ(クラシック)
標準 Webパーツ |  スクリプトエディタ |  RSSビューア |  フィルタWebパーツ |  XsltListViewWebPart |  グラフ表示パーツ |  サイトフィード(ニュースフィード)データ出力 | 
SharePoint Online リスト/ライブラリ/ページ(モダン)
ドキュメントライブラリ(Preview) |  複数ファイルダウンロード |  リスト・ライブラリ切替有無 |  ナビゲーション |  サイトのロゴ |  コマンドバー |  リスト ビュー |  リスト フォーム |  サイト情報 |  ホームページ設定 |  列の書式設定(Column Formatting) |  Seattle から Oslo そして Modernへ |  Webパーツページの管理は使えない |  サイドリンクバーの有効化 |  Webブラウザ幅に応じた表示 |  ページ タイトルと画像 |  ページ コピーとメール送信 |  リストビュー Filter |  ページのコメント |  モダンを強制する方法 |  リンクの取得(制限付きリンク) |  発行用ハイパーリンク列はモダンで動かない |  ビュースタイル |  モダン/クラシック混在設計のコツ |  モダン ナビゲーション設計 |  選択肢の追加不可 |  お知らせ表示の方法 |  SharePointページ |  集計値列の日付表示不正 |  いいね! コメント 表示回数 |  ナビゲーションの要素 |  ビューのカラム間隔 |  フォルダ名の禁則文字 |  連絡先,案件管理,DataSheetView形式カスタム | 
SharePoint Online Webパーツ/テーマ(モダン)
サイトページ作成とWebパーツ一覧 |  リスト、ライブラリ |  埋め込み |  ファイルビューア― |  リンク |  クイックリンク |  画像ギャラリー |  強調表示されたコンテンツ |  ヒーロー(Hero) |  クイック グラフ (Quick chart) |  テキスト(Text) |  画像 (Image) |  外観の変更 テーマ |  イベント(Events) |  クイックリンクの順番入替 |  Webパーツが大幅に減少!? |  外観の変更 | 
SharePoint Online 検索機能
検索の対象 |  検索されたくないファイル |  注目サイト |  検索結果カスタマイズ | 
SharePoint Online Notes移行
Notes情報表示 |  Notesデータ移行 | 
SharePoint Online カスタマイズ
IE11開発者ツール |  Osloとの戦い |  Style動的変更 |  リダイレクトページ |  IEとChrome |  ボタン名の変更 |  フロー Flow |  注目リンク カスタマイズ |  アンケート 列設定 変更 |  アンケート Excelエクスポート項目 変更 |  ダウンロード禁止のアクセス許可レベル | 
SharePiont Online 動作仕様
制限値が気になる |  Webページ破損 |  サイトコレクション削除 |  記憶域とサーバーリソース |  プロファイル画像 |  IsDlg効かず |  プレゼンス表示 |  利用状況レポート |  データ容量管理 |  ごみ箱の日数 |  サイトメールボックス |  標準 サイト |  サイドリンクバー |  外部ユーザー共有 |  おすすめ エラー |  直打ちURL |  外観変更エラー |  サイトコレクション機能 |  ユーザープロファイル |  Access app 廃止 |  アクセス要求の設定 |  ページリンク、クラシック表示を終了 |  外部共有サイト、外部ユーザー |  プロジェクトサイトテンプレート ProjectSummaryWebPartエラー |  外部ユーザー削除 Remove-SPOExternalUser |  お知らせタイルとエクスペリエンスバージョン |  クォータ警告と共有設定を一括取得 |  発行インフラストラクチャー機能 Trouble |  外部ユーザーの定義とライセンス付与の要否 |  SharePoint Online 10 GB/User増量 |  ダウンロード最小化戦略の問題点 |  SharePoint管理センター |  アクセス要求の設定 |  ファイルアップロードの宛先ライブラリ |  サイトテンプレートの運用 |  日時がSeattle時間になる問題 |  共有の設定オプションが増えた |  サイトの訪問者 |  サイト情報のサイト削除リンク | 
Office 365 動作仕様
OneDrive概要 |  OneDrive設定 |  OWAエラー画面 |  新しい Office 365管理センター |  Office 365メッセージ |  OneNote同期/ファイル |  Office 365サイト |  Office 365監査ログ |  Project Web App |  機能更新とエラー画面 |  Outlook Webのメッセージ | 
search this site.
SharePoint概要
SharePointとは?
アーキテクチャ
サイトテンプレート
リストテンプレート
Webパーツ
アクセス権限
SharePoint用語集


SharePoint構築Tips
リスト名(URL)
ライブラリ名(URL)
フィールド名(内部名)
ビュー名(ファイル名)
リストテンプレート
(ワークフロー削除)

大きなリストの問題
アイテム一覧の列幅
機能とWebパーツ
フィールドデータ型
禁則文字
隠しリスト表示
管理パス
サイト内の列
サポート期限
PDFをブラウザで開く
URLエンコード・デコード
日時の絶対値表示
エクスプローラーで開く
パブリック・個人用ビュー
ひと目でわかるOffice 365ビジネス活用28の事例 SharePoint Server 2016対応版 (マイクロソフト関連書)

SharePoint開発Tips
開発の概要
開発者ダッシュボード
MSDN URL
RESTインターフェイス
ページパラメータ IsDlg
ビジュアルアップグレード
機能(Feature)
2010開発者向けの資格
2013開発者向けの資格
ページパラメータ contents
リソースファイル
リスト/ライブラリGUID
テーマ
トレースログ
PowerShell文字コード
SharePoint Framework
ひと目でわかるOffice 365サイトカスタマイズ&開発編 SharePoint Server 2016対応版

SharePoint情報サイト
Tech community(SharePoint)
SharePoint Developer Center
Support Team Blog
SharePoint Developer
SharePoint Technical Note
ILLUMINATE JAPAN Blog
Office365うるのさん奮闘ブログ
AvePoint Japan Community
idea.toString();
SharePoint Issue
Office365/SharePoint
からめもぶろぐ。
Office 365 & PowerX
徒然 Office 365 WebLog
SPeed LAND 365
Art-Break:Tech
ひと目でわかる SharePoint Server 2016



ひと目でわかるPowerAppsノンコーディングでのビジネスアプリ作成入門 (マイクロソフト関連書)


   風水吉凶方位 |  奇門遁甲 |  金運神社 |  金運本 |  水族館 |  仏像 |  論語 |  般若心経 |  庭園 |  二十四節気 |  菜根譚 | 
   SharePoint活用 |  OneNote活用 |  サーバー監視 |  イベントログ |  IT資産管理 |  技術TIPS