SharePoint Onlineで目を惹くサイトを作るには?機能を理解し、デザイン性を引き出す3つのポイントを押さえよう

 

社内向けサイトを作る際、WordPressなどのCMSを利用したり、HTMLで1からコーディングしたりといったいくつかの方法がありますが、もし既にMicrosoft 365を導入されているならば「SharePoint Online」を利用することで手軽に、かつ便利にサイト構築を行うことができます。
ただ、SharePoint Onlineはもともとファイル共有やバージョン管理など「文書管理」を目的とするツールから進化してきたので、WordPressのようなサイト構築に特化したCMSとは設計思想が異なるということを理解しておかねばなりません。特にデザイン面でできることの制約が多いのですが、使い方のコツをつかむことで、目を惹く見栄えのするサイトを制作することが可能です。
この記事では、そうしたコツを3つのポイントとして解説してまいります。
SharePoint Onlineの基礎から知りたい方は、下記の記事から読むことをおすすめします。



SharePoint Onlineにおけるデザインで「できること」「できないこと」を把握しよう

SharePoint Onlineの持つポテンシャルを最大活用してデザイン性のあるサイトを作る場合には、まずSharePoint Onlineというツールをよく理解することが大切です。
SharePoint Onlineは、あらかじめ用意されたテンプレートや Web パーツを活用してサイト制作ができる便利なツールですが、デザインの拡張性などの面では制限もあります。
できること・できないことを見極め、場合によっては他のツールを補助的に用いるなど目的に合わせてうまく活用しましょう。

SharePoint Onlineの機能でできること

以前、SharePoint OnlineのUIには、HTMLやCSSでレイアウトのカスタマイズが可能な「クラシック」が存在しましたが、現在は「モダン」のみとなっています。モダンはデザインの拡張性はあまりありませんが、Web制作の知識がなくともOfficeアプリを扱うときのように、直感的に操作することが可能です。また、デフォルトでレスポンシブデザインに対応しているので、特別な配慮をしなくてもスマホやタブレットといったデバイスに応じて表示が最適化されます。時間や開発費用などのコストがかからないので、更新が多く定期的に運用する場合や、複数部署で制作・活用する社内向けの運用に向いています。

SharePoint Onlineの機能ではできないこと

SharePoint Onlineは一般的なCMSや通常のWebサイト構築サービスと比較するとインターフェースの自由度が低く、作成できるデザインは限られます。また詳細なアクセス解析はできず、匿名でコメントや「いいね」を付けることもできません。
もし、ビジュアルイメージを重視してカッコいいデザインや凝ったコンテンツを実現する目的が最優先であれば、他のツールを検討する方が良い場合もあります
しかし、「それでは、SharePoint Onlineでは決まり切った硬直的なデザインしかできないのか?」というとそうではありません。SharePoint Onlineで実現可能なことを理解し、自分たちが作ろうとしているサイトで何をしようとしているのか、という目的をはっきりさせておきさえすれば、制約条件の中でポイントを押さえて理想的なサイトを作成することが可能です。

SharePoint Onlineでサイトをデザインするときに重要な3つのポイント

では、押さえておくべきポイントとは何でしょうか。具体的には、以下の3つです。

  • 1. レイアウトはモダンUIの仕様に沿って考える
  • 2. 写真・画像にこだわる
  • 3. 「トーン&マナー」を事前に共有する

これらのポイントを意識するだけで、SharePoint Onlineを使ったサイト制作の質が格段に上がります。

1. レイアウトはモダンUIの仕様に沿って考える

サイトの構成を考える際は、まずモダンUIの仕様をベースに考えましょう。シンプルで扱いやすいモダンUIを使って何ができて、その範囲内でどんな外観やセクション、Webパーツの組み合わせが考えられるかをしっかり構想してください。
元々あったサイトをSharePoint Onlineに移行する場合や、すでにサイトの企画や構成が先に用意されている場合も、既存のものにこだわらずSharePoint Onlineの仕様の中で実現可能なものを検討していきましょう。実際に「編集」モードでレイアウトの作業をすすめていき、公開を伴う「発行」ではなく「下書きとして保存」のレベルで一旦とどめて、コンテンツの検討・試行・検証を行います。目的に合ったものとなっているか、プロジェクト内でプロトタイプを作成して進めましょう。

2. 写真・画像にこだわる

サイトではビジュアルの要素が大きく影響するため、レイアウトの自由が利かない分、写真や画像の使い方次第でイメージが左右されます。同じ画像でも、縦横の比率やトリミング、水平線と垂直線の取り方の違いなど、ちょっとしたことでセンスの良し悪しに差が生じます。
さらに、画像中の文字の入れ方、フォントの大きさや色、エフェクトについても注意してください。特に大きく表示される画像ほど注目を集めることになりますので、サイト制作の目的とアウトプットに相違がないか、納得するまでとことんこだわりを持ちましょう。
また、このあとでも説明しますが、全体としての統一感を意識することが大切です。つい忘れて部分最適に走ってしまいがちですが、コーポレートカラーやブランドカラーとリンクさせたり、カテゴリー別にサブカラーを設定してトーンを合わせたりすると、引き締まった印象になります。コーポレートカラーなどのこだわりたい色に合わせて、テーマを追加することも可能です。
まずは自身のデザインの幅を広げるといった意味でも、多くのサイトを見比べて「いいな」と思うビジュアルを参考にしていくことから始めるという方法がおすすめです。

3. 「トーン&マナー」を事前に共有しよう

サイトができ上がってから「こんなはずじゃなかった」「イメージとちがう」とならないように、色や画像を含むデザインの世界観について、メンバーや各方面と事前に綿密なすり合わせを行っておきましょう。広告の世界では、統一された世界観のことを「トーン&マナー」と呼びます。企業としてのデザインマニュアル、ガイドラインをベースにしたり、イメージ集(ブランドイメージに合った画像を集めた資料)を活用したり、サイトのプロトタイプを作成して意見を出し合いながら、トーン&マナーを調整してその場で修正していくと相違を減らしていくことができます。

【上級編】SharePoint OnlineモダンUIにおける画像選びに大切な視点

モダンUIにおける下記の要素は、決して難しくはないですが大切な視点と言えます。ビジュアルデザインの基本でもあるので、サイトの制作時には忘れず意識し、心がけながら取り組むようにしましょう。

デバイスによって表示される写真のトリミングが変わる

Webサイトの表示は、スマホやタブレット、PCの違いだけでなく、MacやWindowsなどのOSの違い、Google ChromeやMicrosoft Edgeなどの表示ブラウザの違いによっても異なる場合があります。

たとえば、大きく表示されるように設定した写真が切れてしまったり、並べてレイアウトしたつもりが上下に分かれて表示されたり、配置した文字が読めなかったり、といった問題が起こり得ます。また、写真のサイズにしても、PCとスマホでは画面サイズに対して画像が占める割合が変わるなど、印象が違って見える可能性があるということも覚えておきましょう。
その意味では、たとえば人の顔が大きく映る写真などは避けた方が無難ですが、もし使用する場合にはさまざまなデバイスで表示確認を行うなど、トライアンドエラーを繰り返すことが大切です。背景との関連で見やすさや読みやすさも大きく影響しますので実際の制作過程を通して、モダンUIの勘所を感覚的に掴んでいってください

コツをつかむには、体験(エクスペリエンス)の蓄積が欠かせません。体験を重ねれば重ねるほど、全体の構成も無駄のないエレガントなものになっていき、社内に説明・浸透させていく際にも役立つようになるでしょう。

控えめなトーンの画像の方がマッチする

色合いに関していうと、SharePoint Onlineの元のデザインは白が基調のため、あまり強いコントラストの画像を選ぶよりも、どちらかと言えば控えめなトーンの画像の方がマッチします。全体にシックで落ち着いた雰囲気を心がける方が、ユーザーの視覚的な疲労も小さく抑えられ視認性の向上が見込めます。
そのうえで「ここは」と目立たせたい画像やコンテンツをプッシュする際には、あえてコントラストの強いものを選ぶこともまた効果的です。全体のトーン&マナーを合わせつつ、メリハリを意識すると見やすくセンスの良いサイトデザインになります。

まとめ

SharePoint Onlineでサイトを作成する際に大切なのは「目的に沿った使いやすいユーザビリティ」です。SharePoint Onlineはデザインの拡張性に乏しい、というのはよく耳にする声ですが、コーディングを駆使して苦労して見栄えを整えても、必ずしもユーザーの使用頻度や利便性が高まるわけではありません。モダンUIがそもそもシンプルな構成になっているのも、使いやすさや分かりやすさを重視しているためではないでしょうか。
ただ、Microsoft 365およびSharePoint Onlineの普及拡大に伴い、今後Microsoftのサイトテンプレート供給状況も変化が予想されます。今よりもっと使いやすく、より選択肢が増加することも十分考えられますので、リリースの動向をチェックしながら今後のサイト作成にお役立てください。

Microsoft 365およびSharePoint Onlineに関して、お困りの際はどうぞソフィアまでご相談ください。幅広いノウハウと実績をベースに、お客さまのさまざまなニーズにお応えしてまいります。
お問い合わせはこちら

株式会社ソフィア

デザインコンサルタント

竹内 昌弘

Web系のページデザイン/レイアウトや紙系のデザイン/レイアウト、動画の制作編集、音声/音楽の制作編集、グッズの制作等、ツクルことが天命です。

株式会社ソフィア

デザインコンサルタント

竹内 昌弘

Web系のページデザイン/レイアウトや紙系のデザイン/レイアウト、動画の制作編集、音声/音楽の制作編集、グッズの制作等、ツクルことが天命です。

検索

  • カテゴリ
  • 部門
  • ランキング
  • タグ

検索

BLOG

おすすめの記事

インターナルコミュニケーション

インターナルコミュニケーションに役立つ仕組みやツールをご紹介

2022.12.21

#イントラポータル#インナーブランディング#コミュニケーション#メディア&コンテンツ#働き方#動画活用#社内イベント#社内報

インターナルコミュニケーション

企業の成長を担うインナーブランディングに効果的な施策・ツール

2022.12.21

#WEB社内報#イントラポータル#インナーブランディング#コミュニケーション#ビジョン浸透#研修・ワークショップ#社内報

コーポレートメディア

情シス業務を効率化!Share Point Onlineでポータルサイト構築をしよう

2022.12.14

#業務プロセス改善#ICTシステム活用支援#イントラポータル#メディア&コンテンツ

人材育成

人材育成は社内コミュニケーションがカギ!人事部サイト作成の事例を紹介

2022.12.14

#ICTシステム活用支援#イントラポータル#ビジョン浸透

サステナブル・SDGs

CSR意識向上と活動促進に向けたポータルサイト構築のすすめ【事例あり】

2022.12.14

#サステナブル#SDGs#イントラポータル#ビジョン浸透

人材育成

オンライン研修とは?従来の集合研修との違いや導入のポイントを解説

2022.11.08

#Eラーニング#ICTシステム活用支援#ラーニングデザイン#研修・ワークショップ

人材育成

リモート研修とは?目的や普及状況、今後の展望から導入の必要性を押さえよう

2022.11.08

#Eラーニング#ICTシステム活用支援#ラーニングデザイン#研修・ワークショップ

人材育成

オンライン研修のやり方は?効果の高い研修のポイントについて解説

2022.11.08

#Eラーニング#ICTシステム活用支援#ラーニングデザイン

人材育成

リモート研修を行う具体的な方法やポイントを解説

2022.11.08

#Eラーニング#ICTシステム活用支援#ラーニングデザイン#研修・ワークショップ

インターナルコミュニケーション

リモート研修のメリット・デメリットとは? リモート研修を成功させるためのポイントも解説

2022.11.08

#Eラーニング#ICTシステム活用支援#ラーニングデザイン#研修・ワークショップ

人材育成

オンライン研修のメリット・デメリットとは?運営側・受講側の視点から徹底解説

2022.11.08

#Eラーニング#ICTシステム活用支援#ラーニングデザイン#研修・ワークショップ

コーポレートメディア

Power Automate 活用事例集!使い方とできること、導入方法を紹介

2022.11.08

#業務プロセス改善#ICTシステム活用支援#ビジネススキル

インターナルコミュニケーション

インターナルコミュニケーションに役立つ仕組みやツールをご紹介

2022.12.21

#イントラポータル#インナーブランディング#コミュニケーション#メディア&コンテンツ#働き方#動画活用#社内イベント#社内報

インターナルコミュニケーション

企業の成長を担うインナーブランディングに効果的な施策・ツール

2022.12.21

#WEB社内報#イントラポータル#インナーブランディング#コミュニケーション#ビジョン浸透#研修・ワークショップ#社内報

コーポレートメディア

情シス業務を効率化!Share Point Onlineでポータルサイト構築をしよう

2022.12.14

#業務プロセス改善#ICTシステム活用支援#イントラポータル#メディア&コンテンツ

人材育成

人材育成は社内コミュニケーションがカギ!人事部サイト作成の事例を紹介

2022.12.14

#ICTシステム活用支援#イントラポータル#ビジョン浸透

サステナブル・SDGs

CSR意識向上と活動促進に向けたポータルサイト構築のすすめ【事例あり】

2022.12.14

#サステナブル#SDGs#イントラポータル#ビジョン浸透

人材育成

オンライン研修とは?従来の集合研修との違いや導入のポイントを解説

2022.11.08

#Eラーニング#ICTシステム活用支援#ラーニングデザイン#研修・ワークショップ

人材育成

リモート研修とは?目的や普及状況、今後の展望から導入の必要性を押さえよう

2022.11.08

#Eラーニング#ICTシステム活用支援#ラーニングデザイン#研修・ワークショップ

人材育成

オンライン研修のやり方は?効果の高い研修のポイントについて解説

2022.11.08

#Eラーニング#ICTシステム活用支援#ラーニングデザイン

人材育成

リモート研修を行う具体的な方法やポイントを解説

2022.11.08

#Eラーニング#ICTシステム活用支援#ラーニングデザイン#研修・ワークショップ

インターナルコミュニケーション

リモート研修のメリット・デメリットとは? リモート研修を成功させるためのポイントも解説

2022.11.08

#Eラーニング#ICTシステム活用支援#ラーニングデザイン#研修・ワークショップ

人材育成

オンライン研修のメリット・デメリットとは?運営側・受講側の視点から徹底解説

2022.11.08

#Eラーニング#ICTシステム活用支援#ラーニングデザイン#研修・ワークショップ

コーポレートメディア

Power Automate 活用事例集!使い方とできること、導入方法を紹介

2022.11.08

#業務プロセス改善#ICTシステム活用支援#ビジネススキル