X-SP Design とは
SharePointの標準機能に加え、JSONとSharePointFramework(SPFx)を活用することで、訴求力の高いUIを実現します
デザイン革新の本質
私たちは20年来、様々な業種のお客様に対してSharePointの導入やコンサルティングを続けてきました。
SharePointは、標準機能を組み合わせてノーコードで素早く構築できることから、プログラミングの知識がない人でも社内グループウェアを構築・運用することができます。
一方で、この手軽さは「SharePointが提供する標準の範囲に機能が制限されている」ということでもあります。
そこで、Microsoft製品のコンサルティングを通してローコード技術を世の中に浸透させてきた私たちが、
今までのノウハウを活かし、SharePointに必要なデザイン・機能を提供いたします。
私たちのアプローチは単なる見た目の改善ではありません。
皆様の「伝えたい」を具現化するデザインを追求しています。
機能紹介
-
スライドショー
画像を一定時間ごとに切り替えます。
タブ
複数のコンテンツをカテゴリごとに切り替えて表示します。
余白の調整
通常のSharePointでは対応できない、余分な空白箇所を調整します。
変化するコンテンツ
時間帯や日付によってコンテンツが変化します
APIの活用
SharePointの標準では対応できない機能をAPIを活用して実装します
簡易的なツリービュー表示
ライブラリのツリービュー表示と簡易検索機能の実装
-
タイル表示
各コンテンツをタイル形式で表示します。
ポップアップ
各クリック時に関連する情報をポップアップで表示します。
画像付きリンク集
各コンテンツを画像でカテゴリ分けをしたレイアウトです。
カテゴリー別一覧表示
各コンテンツをカテゴリー別でまとめて表示いたします。
絞り込み
ボタンで情報の絞り込みを行い、関連する情報を表示します。
アンカーリンク
ボタンをクリックすると、ページ内の特定の場所に自動的に遷移します。
-
-
スライドショー
画像を一定時間ごとに切り替えます。
また、画像をクリックするとリンク先に遷移します。
限られたスペースの中で、複数の重要な情報を表示することが可能です。
-
タブ
複数のコンテンツをカテゴリごとに切り替えて表示します。
カテゴリごとに情報を整理した形で表示することができるため、ユーザービリティの向上に繋がります。
-
余白の調整
通常のSharePointでは対応できない、余分な空白箇所を調整します。
例)
・画面の左右に存在する余白を無くし、常に全幅表示にする
・コンテンツ間に存在する余白を少なくする
-
変化するコンテンツ
時間帯や日付によってコンテンツが変化します。
例:挨拶文・今日はなんの日・背景画像
-
APIの活用
SharePointの標準では対応できない機能をAPIを活用して実装します。
例:一覧画面上の「いいね」
-
簡易的なツリービュー表示及び検索機能
ドキュメントライブラリをツリービュー形式で表示しています。
また、簡易的なファイル名検索機能も実装しています。
-
-
タイル表示
各コンテンツをタイル形式で表示します。
ビジュル要素を効果的に表示できるため、ユーザーが直感的に内容を把握することが可能となります。
-
ポップアップ
各クリック時に関連する情報をポップアップで表示します。
多くの情報を整理した形式で表示することが可能です。
-
画像付きリンク集
各コンテンツを画像で区切ることでカテゴリ分けを行った、目的のアイテムを探しやすいレイアウトです。
大量のリンクをシンプルに整理することで、分かりやすく表示することができます。
-
カテゴリー別一覧表示
各コンテンツをカテゴリー別でまとめて表示いたします。
リンクをシンプルに整理することで、分かりやすく表示することができます。
-
絞り込み
ボタンで情報の絞り込みを行い、関連する情報を表示します。
また、簡易的なタブ機能としても用いることができます。
-
アンカーリンク
ボタンをクリックすると、ページ内の特定の場所に自動的に遷移します。
サイトマップなど、1つの画面に多くの情報を掲載したい場合などに適した表示方法です。
サンプル集
JSON やSharePointFramework(SPFx)を活用して、サンプルを作成しました。
本サンプルをもとに、貴社の最適なデザインを提案します。
-
[SPFx]T-A[SPFx]T-B[SPFx]T-C
-
[JSON]T-A[JSON]T-B[JSON]T-C[JSON]S-A[JSON]S-B
-
[SPFx]T-A
サイトで使用している機能
- [SPFx] 画面の左右に存在する余白を削除し、全幅表示
- [SPFx]Web パーツ同士の余白を縮小
[SPFx]T-B
サイトで使用している機能
- [SPFx]スライドショー
- [SPFx]タブ
- [JSON]ドキュメントライブラリの表示方法の改善
- [SPFx]ページトップボタン
[SPFx]T-C
サイトで使用している機能
-
[SPFx]時間帯や日付によって変化するコンテンツ
– 挨拶文
– 今日はなんの日
– 背景画像 - [SPFx]一覧画面上から「いいね」ができる
- [SPFx]簡易的なツリービュー表示及び検索機能
- [SPFx]全体的なデザイン
- [標準]クイックリンク
- [標準]Viva Engage(旧Yammer)
-
[JSON]T-A
サイトで使用している機能
- [標準Web パーツ] クイックリンク
- [JSON] 画像付きリンク集
- [JSON] ポップアップ
- [Power Apps ] 個人ブックマーク
[JSON]T-B
サイトで使用している機能
- [標準Web パーツ] クイックリンク
- [標準Web パーツ] イベント
- [JSON] ポップアップ
- [JSON] リストの表示方法の改善
- [JSON] タイル表示
[JSON]T-C
サイトで使用している機能
- [JSON] タイル表示
- [JSON] カテゴリー別一覧表示
[JSON]S-A
サイトで使用している機能
- [JSON] アンカーリンク
[JSON]S-B
サイトで使用している機能
- [JSON] 絞り込み
- [JSON] リストの表示方法の改善
X-SP Design | SharePoint デザイン拡張サービスの関連ニュース
- 2023.09.14
- X-SP | SharePoint デザイン・機能拡張サービスを提供開始
- 2024.05.27
- 地方自治体ローコード導入・運用支援サービス(Power Apps・Power Automate) サービスを提供開始
- 2023.04.24
- 内製化支援サービス | PowerPlatform(Power Apps・Power Automate)サービスを提供開始
- 2022.04.15
- Power Apps/Power Automate アプリ作成支援サービスに保守プランを提供開始
- 2022.01.12
- 「DX人材育成プログラム | Power Apps・Power Automate 教育」の提供を開始