SharePoint : 「 Fluent デザインシステム 」が適用されて少し見た目が変わった

6月20日に Microsoft 365 管理センターのメッセージセンターに以下のメッセージが出ました。

▼SharePoint の流暢なデザインの一貫性の更新

「流暢なデザイン」ってなんだ??という第一印象ですよね。英語のタイトルだと「 Fluent design coherence updates for SharePoint 」でした。うん、よくわからないです。

正直、僕も良くわかってないんだけど、 Microsoft にはこんなページがあります。

Fluent Design System
https://www.microsoft.com/design/fluent/

冒頭の説明文を機械翻訳して読んでみると、つまり「オープンソースのクロスプラットフォームデザインシステム」だそうです(これじゃあまり日本語訳になってないですね(笑))。で、メッセージセンターのメッセージを読み返すと、Microsoft 365 というより、全ての Microsoft 製品が、このデザインシステムに則って一貫性のあるデザインにしていく、と読みました。そして、その波が SharePoint にも来た、という感じでしょうか。詳しい変更点はメッセージ内にも記載されています。

  • フォントの太さ
  • ドロップシャドウの不透明度の増加
  • 正方形グラフィック要素の角(ボタンなど)
  • 使用するテーマに対するわずかな色調整
  • フォントサイズが少し大きい

などのようです。

僕のテナントには1つ前の記事の Office.com ホーム のデザイン変更があったのと同じタイミングで、こちらも変更されたので、ちょっと見てみたいと思います。

▼ Fluent デザインシステム が適用された SharePoint のページ

僕は毎日何回も見てるからすぐにわかりましたけど、どこか変わったのか、新旧見比べないとよくわからないですよね。なので、新旧見比べてみたいと思います。

▼旧

▼新

パッと見はよくわからないと思います。メッセージセンターのメッセージ内でも「小さな変更」とか「変更は微妙なものです」など、地味であるという言い方はされていますね。なので、ここだけ見ると目立たないけど、全体的に一貫性を持ったデザインにするという意味では大きな一歩かと思います。

では、実際に細かく違いを見ていきます。(以下のスクショは全て上が旧で下が新です)

▼サイトタイトル

フォントサイズは小さくなっていますが、太字になっていますね。上述の箇条書きの変更点では「フォントサイズが少し大きい」と書かれていたけど、小さくなっているのは、また別の意味があるんでしょうね。

▼コマンドバーの色が違う

上述の箇条書きの中の「使用するテーマに対するわずかな色調整」の一つでしょうね。

▼Webパーツのタイトル

ここも少しフォントサイズは小さくなったけど太字ですね。Webパーツのタイトルに関しては SharePoint 2007 に比べてバージョンアップするごとに目立たなくなってきていてあまり評判良くなかったです。ミニマルデザインだと言われてもさすがにタイトルはタイトルらしくしたいので、これは良いかも。

▼リスト・ライブラリ

リスト・ライブラリのタイトルもフォントサイズは小さくなって太字ですね。あと地味にうれしいのは列名が少しフォントサイズは大きくなり太字になったところ。ここは太字の方が良いと思います。ただ、個人的にはリスト・ライブラリのタイトルの上下のホワイトスペースはもう少し狭くても良いのかなぁと思いました。

▼ボタン

これはページの発行ボタンですが、ボタンがボタンらしくなってますね。上述の箇条書きの変更点では「正方形グラフィック要素の角(ボタンなど)」とありますが、よく見るとほんの少し角丸になっています。


などなど。すでに書いたとおり、気が付かないほど小さな点ではあるけど、同じデザインシステムで一貫性を持たせるという壮大な計画として見ると大きな変更とも言えるかもしれないです。日々、絶え間なく大小あれど変更点があるのが Microsoft 365 ですね。利用する方も取り残されないようにしないと。