SharePoint Online（以下SharePoint）モダンUIでは、ヒーローWebパーツやニュースのサムネイル、リンク画像など、写真を使ったWebパーツが多くなり、写真を活用する場面が増えています。
「どんな写真を設定すればいいのか迷う」「素敵な写真だけど統一感がない」といった悩みを感じたことはありませんか？
本記事は写真選定のポイントをBerfore / After の具体例を交えて解説し、統一感のある見映えの良いSharePointサイトを作るためのヒントをご紹介します。
サイトのテーマカラーに合った写真を選ぶ
写真選定において最も重要なポイントは、サイトのテーマカラーに合った写真を選ぶことです。
テーマカラーに合わせた写真を使うことで、サイト全体に統一感が生まれ、視認性や印象が大きく向上します。
Berfore 例（改善前の状態）
以下は、テーマカラーを青とした場合の改善前の例です。
- 色数が多く、青が他の色に埋もれてしまい、全体の印象が少し散漫になっている配色
- イラスト調と実写の画像が混在しており、ビジュアルの雰囲気にばらつきが見られる
このような画像は、テーマカラーとの調和を意識したデザインに仕上げるために、選定の工夫が求められます。
After 例（改善後の状態）
以下は、テーマカラーに合った写真選定の例です。
- 青みがかった写真
- 背景が青1色で、全体の色数が少ない写真
- 無彩色（白・グレー）をベースに、青がキーカラーとして使われている写真
このような写真は、テーマカラーが際立ち、他の色に干渉されず統一感を演出できます。
また、白やグレーといった無彩色がベースで、青がアクセントカラーとして使われている画像を選ぶことで、メリハリのあるデザインに仕上がります。
ストック画像から写真を選ぶ
SharePointサイトに統一感を持たせるには、テーマカラーに沿った写真選びがポイントです
では、実際にどのようにテーマカラーに合った写真を探せばよいのでしょうか？
ここでは、ストック画像の活用方法として、写真の探し方と設定手順をご紹介します。
写真の探し方
SharePointでは、あらかじめ用意された「ストック画像」から写真を選ぶことができます。
「ストック画像」とは、SharePointにあらかじめ用意された画像素材集で、豊富な種類の写真が揃っています。
選択肢が多いため、目的に合った画像を見つけるのが難しいこともありますが、「色の名前」で検索できる機能を活用すると効率的です。
テーマカラーに合わせて色名（例：「青」「赤」「緑」など）で検索することで、統一感のある画像をスムーズにピックアップできます。
ヒーローWebパーツでストック画像を使用する手順
以下は、ヒーローWebパーツでストック画像を設定する手順です。
- 変更したいタイルの編集アイコンをクリックします
- 背景画像の「ユーザー設定の画像」→「変更」をクリックします
- 「ストック画像」を選択します
- 検索したい色を入力します
※2025年9月時点では、日本語での検索には対応していないため、英語で入力してください。（例：「blue」「red」「green」など）
検索結果には、指定した色がベースになっている画像や、アクセントカラーとして使われている画像が表示されます。
テーマカラーとの調和を意識した画像選定により、サイト全体の印象をより統一されたものに仕上げることができます。
まとめ
ストック画像機能を活用すれば、テーマカラーに合った写真を簡単に探すことができます。
色で検索することで、統一感のあるデザインを実現し、見やすく魅力的なサイト作成に役立てることができます。
写真選定の際にはテーマカラーを意識して、SharePointサイトの完成度向上にお役立てください。
鈴木 亜有子（日本ビジネスシステムズ株式会社）
CS部WSIグループの鈴木です。主にSharePoint案件に携わっており、ユーザーにとって使いやすい、直感的に使えるユーザビリティの高い画面デザインを実施しております。趣味はよさこいと子供たちのサッカー観戦です。
担当記事一覧