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

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やるってよ |  MSサイトでプランを勉強 |  TechNetでプランを勉強 |  E5プラン | 
Office 365/SharePoint Online関連の書籍
できる Office 365 |  誰でもできる! Office365導入ガイド |  ひと目でわかる SharePoint Server 2016 |  Office 365 ビジネス活用28の事例 |  Office 365 サイトカスタマイズ&開発編 |  ひと目でわかる PowerApps |  ひと目でわかる Azure Information Protection | 
Office 365製品、サービス
sway, cortana, delve |  Office Online制限 |  SharePoint 2016 RC |  アーキテクチャ |  Connections, Listings, Invoicing |  Microsoft 365 Roadmap |  Bookings | 
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形式カスタム |  あとで読むために保存(Save for later) |  UPLOADメッセージ |  ビューの書式設定 |  リストアイテムの印刷 |  2回目のニュース投稿 |  タイトルの領域 |  ビューの列幅指定 |  ダウンロードを禁止する |  サイトページ列追加 |  ページ セクション背景 |  ニュースを投稿するボタン |  コマンドバー PowerApps / Flow | 
SharePoint Online Webパーツ/テーマ(モダン)
サイトページ作成とWebパーツ一覧 |  リスト、ライブラリ |  埋め込み |  ファイルビューア― |  リンク |  クイックリンク |  画像ギャラリー |  強調表示されたコンテンツ |  ヒーロー(Hero) |  クイック グラフ (Quick chart) |  テキスト(Text) |  画像 (Image) |  外観の変更 テーマ |  イベント(Events) |  クイックリンクの順番入替 |  Webパーツが大幅に減少!? |  外観の変更 |  リストWebパーツ不具合 |  クイックリンクのアイコン |  クイックリンクのレイアウト |  画像ギャラリーのレイアウト |  ドキュメントのチェックアウト表示 |  コードスニペット(Code snippet) |  カレンダー表示 |  マークダウン |  PowerApps |  カウントダウンタイマー | 
SharePoint Online サイト(モダン)
サイトメールボックス |  標準 サイト |  サイトコレクション機能 |  サイト情報 |  サイトテンプレートの運用 |  サイトの訪問者 |  サイト情報のサイト削除リンク |  チームサイトテンプレート |  コミュニケーションサイト テンプレート |  ハブサイト |  モダンUIスキャナー |  サイト・リスト構成 |  サイトデザイン |  サイト設定・機能の差異 |  新しいサイトロゴ | 
SharePoint Online 検索機能
検索の対象 |  検索されたくないファイル |  注目サイト |  検索結果カスタマイズ | 
SharePoint Online 外部共有
外部ユーザー共有 |  外部共有サイト、外部ユーザー |  外部ユーザー削除 Remove-SPOExternalUser |  外部ユーザーの定義とライセンス付与の要否 |  共有の設定オプションが増えた |  サイトコレクション共有設定 | 
SharePoint Online 移行
Notes情報表示 |  Notesデータ移行 |  Sharegateインストール |  Sharegateファイル移行 | 
SharePoint Online カスタマイズ
IE11開発者ツール |  Osloとの戦い |  Style動的変更 |  リダイレクトページ |  IEとChrome |  ボタン名の変更 |  フロー Flow |  注目リンク カスタマイズ |  アンケート 列設定 変更 |  アンケート Excelエクスポート項目 変更 |  ダウンロード禁止のアクセス許可レベル | 
SharePiont PnP PowerShell
PnPの概要 |  テナントバージョン取得 | 
SharePiont + PowerApps
PowerAppsリンク集 | 
SharePiont Online 動作仕様
制限値が気になる |  記憶域とサーバーリソース |  プロファイル画像 |  IsDlg効かず |  プレゼンス表示 |  利用状況レポート |  データ容量管理 |  ごみ箱の日数 |  サイドリンクバー |  直打ちURL |  ユーザープロファイル |  Access app 廃止 |  アクセス要求の設定 |  ページリンク、クラシック表示を終了 |  お知らせタイルとエクスペリエンスバージョン |  クォータ警告と共有設定を一括取得 |  SharePoint Online 10 GB/User増量 |  SharePoint管理センター |  アクセス要求の設定 |  ファイルアップロードの宛先ライブラリ |  SharePoint管理センター Preview |  データ移行ツール |  サイトページ機能 |  SharePointホームページ |  管理者の業務範囲 |  記憶域の管理 |  クォータの増量要求 |  クラシックモード制限の無効化 | 
SharePiont Online 不具合
Webページ破損 |  サイトコレクション削除 |  おすすめ エラー |  外観変更エラー |  プロジェクトサイトテンプレート ProjectSummaryWebPartエラー |  発行インフラストラクチャー機能 Trouble |  ダウンロード最小化戦略の問題点 |  日時がSeattle時間になる問題 |  サイトコレクション削除後の保存期間 |  Webパーツコマンドバー文字が重なる |  日本語対応がひどい | 
Office 365 動作仕様
OneDrive概要 |  OneDrive設定 |  OWAエラー画面 |  新しい Office 365管理センターUI |  Office 365メッセージ |  OneNote同期/ファイル |  Office 365サイト |  Office 365監査ログ |  Project Web App |  機能更新とエラー画面 |  Outlook Webのメッセージ |  Office 365 ホーム |  OneDrive削除アクティビティメール |  Projectホームページ |  Teamsチームサイトのアクセス権限 |  O365管理センター メニュー |  ASPX,HTMLファイル表示差異 |  Teamsデスクトップクライアント設定 |  Office Online自動保存と自動編集 |  Microsoft Search |  OneDriveページパラメータ |  SharePoint+Teams+O365グループ |  Officeアプリアイコン | 

SharePoint全般
SharePoint概要
SharePointとは? |  アーキテクチャ |  サイトテンプレート |  リストテンプレート |  Webパーツ |  アクセス権限 |  SharePoint用語集 | 
SharePoint構築 Tips
リスト名(URL) |  ライブラリ名(URL) |  フィールド名(内部名) |  ビュー名(ファイル名) |  リストテンプレート(ワークフロー削除) |  大きなリストの問題 |  アイテム一覧の列幅 |  機能とWebパーツ |  フィールドデータ型 |  禁則文字 |  隠しリスト表示 |  管理パス |  サイト内の列 |  サポート期限 |  PDFをブラウザで開く |  URLエンコード・デコード |  日時の絶対値表示 |  エクスプローラーで開く |  パブリック・個人用ビュー | 
SharePoint開発 Tips
開発の概要 |  開発者ダッシュボード |  MSDN URL |  RESTインターフェイス |  ページパラメータ IsDlg |  ビジュアルアップグレード |  機能(Feature) |  2010開発者向けの資格 |  2013開発者向けの資格 |  ページパラメータ contents |  リソースファイル |  リスト/ライブラリGUID |  テーマ |  トレースログ |  PowerShell文字コード |  SharePoint Framework | 
search this site.
SharePoint Online書籍
できる Office 365 |  誰でもできる! Office365導入ガイド |  ひと目でわかる SharePoint Server 2016 |  Office 365 ビジネス活用28の事例 |  Office 365 サイトカスタマイズ&開発編 |  ひと目でわかる PowerApps |  ひと目でわかる Azure Information Protection | 


SharePointモダン リスト
ドキュメントライブラリ(Preview) |  複数ファイルダウンロード |  リスト・ライブラリ切替有無 |  ナビゲーション |  サイトのロゴ |  コマンドバー |  リスト ビュー |  リスト フォーム |  ホームページ設定 |  列の書式設定(Column Formatting) |  Seattle から Oslo そして Modernへ |  Webパーツページの管理は使えない |  サイドリンクバーの有効化 |  Webブラウザ幅に応じた表示 |  ページ タイトルと画像 |  ページ コピーとメール送信 |  リストビュー Filter |  ページのコメント |  モダンを強制する方法 |  リンクの取得(制限付きリンク) |  発行用ハイパーリンク列はモダンで動かない |  ビュースタイル |  モダン/クラシック混在設計のコツ |  モダン ナビゲーション設計 |  選択肢の追加不可 |  お知らせ表示の方法 |  SharePointページ |  集計値列の日付表示不正 |  いいね! コメント 表示回数 |  ナビゲーションの要素 |  ビューのカラム間隔 |  フォルダ名の禁則文字 |  連絡先,案件管理,DataSheetView形式カスタム |  あとで読むために保存(Save for later) |  UPLOADメッセージ |  ビューの書式設定 |  リストアイテムの印刷 |  2回目のニュース投稿 |  タイトルの領域 |  ビューの列幅指定 |  ダウンロードを禁止する |  サイトページ列追加 |  ページ セクション背景 |  ニュースを投稿するボタン |  コマンドバー PowerApps / Flow | 
ひと目でわかるOffice 365ビジネス活用28の事例 SharePoint Server 2016対応版 (マイクロソフト関連書)

SharePointモダン Webパーツ
サイトページ作成とWebパーツ一覧 |  リスト、ライブラリ |  埋め込み |  ファイルビューア― |  リンク |  クイックリンク |  画像ギャラリー |  強調表示されたコンテンツ |  ヒーロー(Hero) |  クイック グラフ (Quick chart) |  テキスト(Text) |  画像 (Image) |  外観の変更 テーマ |  イベント(Events) |  クイックリンクの順番入替 |  Webパーツが大幅に減少!? |  外観の変更 |  リストWebパーツ不具合 |  クイックリンクのアイコン |  クイックリンクのレイアウト |  画像ギャラリーのレイアウト |  ドキュメントのチェックアウト表示 |  コードスニペット(Code snippet) |  カレンダー表示 |  マークダウン |  PowerApps |  カウントダウンタイマー | 
ひと目でわかるOffice 365サイトカスタマイズ&開発編 SharePoint Server 2016対応版

SharePointモダン サイト
サイトメールボックス |  標準 サイト |  サイトコレクション機能 |  サイト情報 |  サイトテンプレートの運用 |  サイトの訪問者 |  サイト情報のサイト削除リンク |  チームサイトテンプレート |  コミュニケーションサイト テンプレート |  ハブサイト |  モダンUIスキャナー |  サイト・リスト構成 |  サイトデザイン |  サイト設定・機能の差異 | 
ひと目でわかる SharePoint Server 2016


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

SharePoint情報サイト
Tech community(SharePoint)
Tech community(OneDrive)
SharePoint Developer blog
SharePoint Developer Center
Support Team Blog
SharePoint Technical Note
ILLUMINATE JAPAN Blog
AvePoint Japan Community
idea.toString();
からめもぶろぐ。
Office 365 & PowerX
SPeed LAND 365
Art-Break:Tech


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