X-SP Design | SharePoint デザイン拡張サービス

SharePointのデザインを拡張し、
より洗練されたデザインを提供します

X-SP Design とは

SharePointの標準機能に加え、JSONとSharePointFramework(SPFx)を活用することで、訴求力の高いUIを実現します

デザイン革新の本質

私たちは20年来、様々な業種のお客様に対してSharePointの導入やコンサルティングを続けてきました。

SharePointは、標準機能を組み合わせてノーコードで素早く構築できることから、プログラミングの知識がない人でも社内グループウェアを構築・運用することができます。
一方で、この手軽さは「SharePointが提供する標準の範囲に機能が制限されている」ということでもあります。

そこで、Microsoft製品のコンサルティングを通してローコード技術を世の中に浸透させてきた私たちが、
今までのノウハウを活かし、SharePointに必要なデザイン・機能を提供いたします。

私たちのアプローチは単なる見た目の改善ではありません。

皆様の「伝えたい」を具現化するデザインを追求しています。

機能紹介

  • X-SP Design | SharePoint デザイン拡張サービス[SPFx]

    スライドショー

    画像を一定時間ごとに切り替えます。

    X-SP Design | SharePoint デザイン拡張サービス[SPFx]

    タブ

    複数のコンテンツをカテゴリごとに切り替えて表示します。

    X-SP Design | SharePoint デザイン拡張サービス[SPFx]

    余白の調整

    通常のSharePointでは対応できない、余分な空白箇所を調整します。

    X-SP Design | SharePoint デザイン拡張サービス[SPFx]

    変化するコンテンツ

    時間帯や日付によってコンテンツが変化します​

    X-SP Design | SharePoint デザイン拡張サービス[SPFx]

    APIの活用

    SharePointの標準では対応できない機能をAPIを活用して実装します

    X-SP Design | SharePoint デザイン拡張サービス[SPFx]

    簡易的なツリービュー表示​

    ライブラリのツリービュー表示と簡易検索機能の実装

  • X-SP Design | SharePoint デザイン拡張サービス[JSON]

    タイル表示

    各コンテンツをタイル形式で表示します。

    X-SP Design | SharePoint デザイン拡張サービス[JSON]

    ポップアップ

    各クリック時に関連する情報をポップアップで表示します。

    X-SP Design | SharePoint デザイン拡張サービス[JSON]

    画像付きリンク集

    各コンテンツを画像でカテゴリ分けをしたレイアウトです。

    X-SP Design | SharePoint デザイン拡張サービス[JSON]

    カテゴリー別一覧表示

    各コンテンツをカテゴリー別でまとめて表示いたします。

    X-SP Design | SharePoint デザイン拡張サービス[JSON]

    絞り込み

    ボタンで情報の絞り込みを行い、関連する情報を表示します。

    X-SP Design | SharePoint デザイン拡張サービス[JSON]

    アンカーリンク

    ボタンをクリックすると、ページ内の特定の場所に自動的に遷移します。

  • X-SP Design | SharePoint デザイン拡張サービス[スライドショー]

    スライドショー

    画像を一定時間ごとに切り替えます。
    また、画像をクリックするとリンク先に遷移します。
    限られたスペースの中で、複数の重要な情報を表示することが可能です。

    X-SP Design | SharePoint デザイン拡張サービス[タブ]

    タブ

    複数のコンテンツをカテゴリごとに切り替えて表示します。
    カテゴリごとに情報を整理した形で表示することができるため、ユーザービリティの向上に繋がります。

    X-SP Design | SharePoint デザイン拡張サービス[余白の調整]

    余白の調整

    通常のSharePointでは対応できない、余分な空白箇所を調整します。
    例)
    ・画面の左右に存在する余白を無くし、常に全幅表示にする
    ・コンテンツ間に存在する余白を少なくする

    X-SP Design | SharePoint デザイン拡張サービス[余白の調整]

    変化するコンテンツ

    時間帯や日付によってコンテンツが変化します​。
    例：挨拶文・今日はなんの日・背景画像

    X-SP Design | SharePoint デザイン拡張サービス[余白の調整]

    APIの活用

    SharePointの標準では対応できない機能をAPIを活用して実装します。
    例：一覧画面上の「いいね」

    X-SP Design | SharePoint デザイン拡張サービス[余白の調整]

    簡易的なツリービュー表示​及び検索機能

    ドキュメントライブラリをツリービュー形式で表示しています。​
    また、簡易的なファイル名検索機能も実装しています。​​​

  • X-SP Design | SharePoint デザイン拡張サービス[タイル表示]

    タイル表示

    各コンテンツをタイル形式で表示します。
    ビジュル要素を効果的に表示できるため、ユーザーが直感的に内容を把握することが可能となります。

    X-SP Design | SharePoint デザイン拡張サービス[ポップアップ]

    ポップアップ

    各クリック時に関連する情報をポップアップで表示します。
    多くの情報を整理した形式で表示することが可能です。

    X-SP Design | SharePoint デザイン拡張サービス[画像付きリンク集]

    画像付きリンク集

    各コンテンツを画像で区切ることでカテゴリ分けを行った、目的のアイテムを探しやすいレイアウトです。
    大量のリンクをシンプルに整理することで、分かりやすく表示することができます。

    X-SP Design | SharePoint デザイン拡張サービス[カテゴリー別一覧表示]

    カテゴリー別一覧表示

    各コンテンツをカテゴリー別でまとめて表示いたします。
    リンクをシンプルに整理することで、分かりやすく表示することができます。

    X-SP Design | SharePoint デザイン拡張サービス[絞り込み]

    絞り込み

    ボタンで情報の絞り込みを行い、関連する情報を表示します。
    また、簡易的なタブ機能としても用いることができます。

    X-SP Design | SharePoint デザイン拡張サービス[アンカーリンク]

    アンカーリンク

    ボタンをクリックすると、ページ内の特定の場所に自動的に遷移します。
    サイトマップなど、１つの画面に多くの情報を掲載したい場合などに適した表示方法です。

サンプル集

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 パーツ同士の余白を縮小
    X-SP Design | SharePoint デザイン拡張サービスの機能を拡充[SPFx_T-A]

    [SPFx]T-B

    サイトで使用している機能

    • [SPFx]スライドショー
    • [SPFx]タブ
    • [JSON]ドキュメントライブラリの表示方法の改善
    • [SPFx]ページトップボタン
    X-SP Design | SharePoint デザイン拡張サービスの機能を拡充[SPFx_T-B]

    [SPFx]T-C

    サイトで使用している機能

    • [SPFx]時間帯や日付によって変化するコンテンツ
      – 挨拶文
      – 今日はなんの日
      – 背景画像
    • [SPFx]一覧画面上から「いいね」ができる
    • [SPFx]簡易的なツリービュー表示及び検索機能
    • [SPFx]全体的なデザイン
    • [標準]クイックリンク
    • [標準]Viva Engage（旧Yammer）
    X-SP Design | SharePoint デザイン拡張サービスの機能を拡充[SPFx_T-C]

  • [JSON]T-A

    サイトで使用している機能

    • [標準Web パーツ] クイックリンク
    • [JSON] 画像付きリンク集
    • [JSON] ポップアップ
    • [Power Apps ] 個人ブックマーク
    X-SP Design | SharePoint デザイン拡張サービスの機能を拡充[JSON_T-A]

    [JSON]T-B

    サイトで使用している機能

    • [標準Web パーツ] クイックリンク
    • [標準Web パーツ] イベント
    • [JSON] ポップアップ
    • [JSON] リストの表示方法の改善
    • [JSON] タイル表示
    X-SP Design | SharePoint デザイン拡張サービスの機能を拡充[JSON_T-B]

    [JSON]T-C

    サイトで使用している機能

    • [JSON] タイル表示
    • [JSON] カテゴリー別一覧表示
    X-SP Design | SharePoint デザイン拡張サービスの機能を拡充[JSON_T-C]

    [JSON]S-A

    サイトで使用している機能

    • [JSON] アンカーリンク
    X-SP Design | SharePoint デザイン拡張サービスの機能を拡充[JSON_S-A]

    [JSON]S-B

    サイトで使用している機能

    • [JSON] 絞り込み
    • [JSON] リストの表示方法の改善
    X-SP Design | SharePoint デザイン拡張サービスの機能を拡充[JSON_S-B]

ブログ

アーティサンでは、SharePointに関する技術ブログを定期的に配信しています。
ぜひご覧ください。

サービスが生まれた背景
機能の紹介
サンプルの紹介
サンプルの紹介その２

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 教育」の提供を開始

お問い合わせはこちらから

X-SP Design | SharePoint デザイン拡張サービスをご検討中の事業者様に、ご提案資料、お役立ち資料をご覧ください。

「 X-SP Design | SharePoint デザイン拡張サービス」をご検討中の事業者様に、ご提案資料、お役立ち資料をご覧ください。

今すぐお役立ち資料をダウンロード
PageTop
ページトップに戻る