2021.10.28
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に関して、お困りの際はどうぞソフィアまでご相談ください。幅広いノウハウと実績をベースに、お客さまのさまざまなニーズにお応えしてまいります。
お問い合わせはこちら
よくある質問
- SharePointOnlineとは何ですか？
SharePoint Onlineは、クラウド上のSharePointです。Microsoft 365ライセンスのパッケージ製品や機能など、さまざまな製品との連携ができます。
- Web知識なくても使えますか？
SharePointのコミュニケーション機能には既に多くのテンプレートが用意されており、複数のカテゴリから使いやすいものを選ぶことができます。
これらのテンプレートを使用すれば、専門の知識がなくても、ガイドラインに沿ってテキストや画像などのパーツを差し込んでいくだけで、みやすいサイトを作ることが出来ます。
- SharePointオンラインでサイトを作成するには？
1. SharePointスタートページにアクセスし、「+サイトの作成」をクリックします。
2. サイトタイプとして、「チームサイト」または「コミュニケーションサイト」を選択します。
3. サイト名、説明、グループメールアドレスまたはサイトアドレスなどの必要な情報を入力します。
4. グループをパブリックまたはプライベートにするかどうかを選択することができます。
5. 最後に、「作成」をクリックして新しいサイトを作成します。
株式会社ソフィア
デザインコンサルタント
竹内 昌弘
Web系のページデザイン/レイアウトや紙系のデザイン/レイアウト、動画の制作編集、音声/音楽の制作編集、グッズの制作等、ツクルことが天命です。
株式会社ソフィア
デザインコンサルタント
竹内 昌弘
Web系のページデザイン/レイアウトや紙系のデザイン/レイアウト、動画の制作編集、音声/音楽の制作編集、グッズの制作等、ツクルことが天命です。
