SharePoint モダンサイト タブパーツのご紹介
2021.11.26

はじめまして、MS開発部の山本です。
今回は、WebサイトやNotes(ノーツ)などの他社製品からの移行時に必ず話題に出るタブメニューを切り替えて、 コンテンツの内容を変更するモダンサイト上で動作するWebパーツのご紹介です。
また、移行プロジェクトの中で必ず聞かれる移行元、例えばNotesならば簡単に出来たのに!などSharePointの標準機能で搭載されているWebパーツにはタブ機能を持たせてくれるものはない為、グループ化をしたい場合などに歯がゆさを感じたことがあると思います。
タブ機能は多くのWebサイトでも利用されているもので、サイト内の効率化はもちろんですが、デザイン性も高いので、SharePointでも是非実装したいと思っている方は多いと思います。
ないなら作ってしまおうということで、製品化しました!
例えば、下記の画像のようなリストWebパーツもクイックリンクWebパーツもまとめて一つのWebパーツとして配置したい!となった時にスマートにまとめてくれるのが、タブ機能Webパーツです。
どうでしょうか?
3つのWebパーツをタブ化することにより、情報が見やすくなりました。
多くのWebパーツが乱雑に配置されているときは、目的外の情報にも目がいきがちで情報を探すのに必要な時間がかかり、効率が落ちてしまいます。
タブ機能Webパーツを使うことで可読性が上がり、利用者、管理者ともに業務効率の向上に繋がります。
…タブの数は最小で2個、最大で10個まで配置可能です。
・レイアウト
…タブの数が多くなり、画面に入りきらない場合に折り返しで表示するか、 一行で入りきらないタブをメニューバーとして表示するかを選択可能です。
PC表示だと折り返しのほうが選びやすいですが、モバイル表示だと画面サイズが大きくなるので使い分けにより、レイアウトデザインの向上を実現できます。
・タブ名
…タブ名は変更可能です。
最大で50文字まで入力可能なので、格納されているものをわかりやすく表示することができます。
・アイコン
…アイコンは2186種類から選択可能です。(2021年11月25日時点)
「リスト」「ライブラリ」「リンク」等、多くのアイコンが選択可能なので、管理者が利用者にどういったものが格納されているかをアイコンから推測させることが可能です。
・カラー
…タブの色はサイトのテーマカラーと同じものが適用されるので、サイト内の統一感を崩すことなく配置可能です。
いかがでしたでしょうか。
今回はSharePoint モダンサイトで利用するタブパーツをご紹介させて頂きました。
また、弊社SharePoint プロダクトも下記に記載させて頂きますので、
ご興味がある方はぜひご一読頂ければと思います!
SharePointスケジュールタイムラインアプリ – 株式会社ディープコム (deepcom.co.jp)
未既読 SPFxパーツ のご紹介 – 株式会社ディープコム (deepcom.co.jp)
SharePointOnlineアクセス権限取得ツール – 株式会社ディープコム (deepcom.co.jp)
SharePointOnline 閲覧数/いいね数 – 株式会社ディープコム (deepcom.co.jp)
SharePoint タブ化 – 株式会社ディープコム (deepcom.co.jp)
その他モダンUIでのオリジナル拡張機能やWebパーツの作成相談など、
弊社の業務内容などにご興味のある方は、下記よりお気軽にお問い合わせください。
今回は、WebサイトやNotes(ノーツ)などの他社製品からの移行時に必ず話題に出るタブメニューを切り替えて、 コンテンツの内容を変更するモダンサイト上で動作するWebパーツのご紹介です。
タブパーツの概要
SharePointを利用し始めたが、リストやライブラリを閲覧する際に、ページで見るには画面サイズが大きくなったり、乱雑にWebパーツが配置されていたりして、見づらいと感じたことはないでしょうか?また、移行プロジェクトの中で必ず聞かれる移行元、例えばNotesならば簡単に出来たのに!などSharePointの標準機能で搭載されているWebパーツにはタブ機能を持たせてくれるものはない為、グループ化をしたい場合などに歯がゆさを感じたことがあると思います。
タブ機能は多くのWebサイトでも利用されているもので、サイト内の効率化はもちろんですが、デザイン性も高いので、SharePointでも是非実装したいと思っている方は多いと思います。
ないなら作ってしまおうということで、製品化しました!
例えば、下記の画像のようなリストWebパーツもクイックリンクWebパーツもまとめて一つのWebパーツとして配置したい!となった時にスマートにまとめてくれるのが、タブ機能Webパーツです。

どうでしょうか?
3つのWebパーツをタブ化することにより、情報が見やすくなりました。
多くのWebパーツが乱雑に配置されているときは、目的外の情報にも目がいきがちで情報を探すのに必要な時間がかかり、効率が落ちてしまいます。
タブ機能Webパーツを使うことで可読性が上がり、利用者、管理者ともに業務効率の向上に繋がります。
タブパーツの詳細
・タブの数…タブの数は最小で2個、最大で10個まで配置可能です。
・レイアウト
…タブの数が多くなり、画面に入りきらない場合に折り返しで表示するか、 一行で入りきらないタブをメニューバーとして表示するかを選択可能です。
PC表示だと折り返しのほうが選びやすいですが、モバイル表示だと画面サイズが大きくなるので使い分けにより、レイアウトデザインの向上を実現できます。
・タブ名
…タブ名は変更可能です。
最大で50文字まで入力可能なので、格納されているものをわかりやすく表示することができます。
・アイコン
…アイコンは2186種類から選択可能です。(2021年11月25日時点)
「リスト」「ライブラリ」「リンク」等、多くのアイコンが選択可能なので、管理者が利用者にどういったものが格納されているかをアイコンから推測させることが可能です。
・カラー
…タブの色はサイトのテーマカラーと同じものが適用されるので、サイト内の統一感を崩すことなく配置可能です。

いかがでしたでしょうか。
今回はSharePoint モダンサイトで利用するタブパーツをご紹介させて頂きました。
下記より資料ダウンロードも可能です。
SharePoint タブ機能Webパーツ
また、弊社SharePoint プロダクトも下記に記載させて頂きますので、
ご興味がある方はぜひご一読頂ければと思います!
SharePointスケジュールタイムラインアプリ – 株式会社ディープコム (deepcom.co.jp)
未既読 SPFxパーツ のご紹介 – 株式会社ディープコム (deepcom.co.jp)
SharePointOnlineアクセス権限取得ツール – 株式会社ディープコム (deepcom.co.jp)
SharePointOnline 閲覧数/いいね数 – 株式会社ディープコム (deepcom.co.jp)
SharePoint タブ化 – 株式会社ディープコム (deepcom.co.jp)
その他モダンUIでのオリジナル拡張機能やWebパーツの作成相談など、
弊社の業務内容などにご興味のある方は、下記よりお気軽にお問い合わせください。
以上、最後までご愛読いただき
ありがとうございました。
お問い合わせは、
以下のフォームへご連絡ください。