Sharepointで作ったモダンUIサイトのロゴをきちんと作る機会があったので記事投稿します。
正直なところ、普段はロゴなんて気にしていません。手を抜けることはすべて手を抜く。
というスタンスなのですが、比較的公開範囲の広いサイトを作る機会があったので今回はそこまで気が回りました。サイズぴったり、画像劣化なし・違和感なくロゴを挿入するのは少しコツが必要です。
自然な形でロゴをサイトに溶け込ませる方法をご紹介します。
Sharepointサイトのロゴ
サイトのロゴは次の場所のものです。
既定では、サイト名の冒頭文字にちなんだロゴが自動生成されます。これをそのまま使ってもよいですが、素人くさくやぼったい印象はぬぐい切れません。
ロゴを設定しておくと何がよいか
使っても使わなくてもよいロゴ。しかし、設定しておくとそのサイトのブランディング力が増します。
このブログにも「アレコレメモ」というロゴをサイト上部に、視認性を意識しながら掲載しています。PCで見てもスマホで見ても最初に必ず目に入るのが当ブログのロゴです。
手を抜いたようなネーミングにはしていますが、記憶には残りやすいよう配慮しています。「アレコレメモ」「あれこれめも」とGoogleで検索すれば、一番上に表示されるように意識もしています。
このようにロゴをうまく使うことによってサイトをブランディングすることができます。
ここの運営者ね、こうやってサイト名を刷り込もうとしているのよ
もう、うちのサイト名覚えましたよね。
ロゴやヘッダー画像が丁寧に作られているサイトであれば、十中八九、そのサイト内のコンテンツもしっかり作られていることでしょう。
また、ロゴを整えておくとサイトをフォローしたときや、Webパーツとしてサイトを埋め込んだ際に綺麗に表示することが可能です。
ロゴの推奨サイズ・推奨事項
モダンUIで使うロゴに関する推奨事項については、マイクロソフトのヘルプページに掲載されています。
| 要素 | 説明 | 推奨事項 |
|---|---|---|
| サイトのロゴ | アップロードされたデザインに応じて、正方形以外で透明な大きなロゴ | 192 x 64 形式: PNG、JPEG、SVG (グループに接続されたサイトでは SVG は許可されません) |
| サイトロゴのサムネイル | サイト ロゴがアップロードされなか、正方形の形式が必要な場所で使用される四角形のロゴのサムネイル（必須の要素） | 64 x 64 形式: PNG、JPEG、SVG (グループに接続されたサイトでは SVG は許可されません) |
| 拡張レイアウトサイトのロゴ | 拡張ヘッダー レイアウトには、サイト ロゴの幅が拡張されています。 | 300 x 64 形式: JPEG、PNG、SVG |
| 拡張レイアウトサイトの背景 | 拡張ヘッダーで利用できる新しい背景画像。 | 2560 x 164 形式: JPEG、PNG |
Sharepointサイトにロゴを作る方法
それでは、本題のロゴを作る方法です。
馴染みやすいロゴ
やはり、マイクロソフトの推奨サイズで作ると綺麗に表示されます。
小さいロゴという特性上、使われるカラーも限定的になるため、JPEGは避けたほうが良いです。JPEGは、フルカラー（約1,677万色）が使えて写真の圧縮には優れていますが、一方で、線のはっきりしている色数の少ないロゴのような画像ではにじみが出てしまうことがあります。
イラストやロゴを作る場面では、GIFかPNGが推奨されます。個人的には、フルカラーも8bitカラーも扱えるPNG形式がオススメです。
マイクロソフトの推奨サイズぴったりに作り、PNG形式で保存すればOKです。
NGパターン（パワーポイント利用）
まずは、作ったロゴがいま一つになりやすいパターン。使い慣れたパワーポイントでそれっぽいロゴは十分に作ることはできます。
しかし、以下のような問題があります。
- 厳密なピクセル指定がやりづらい（パワポはセンチメートル指定）
- マイクロソフト既定サイズより大きめに作ると縮小されるが、若干の画像劣化が見られる。
▲ 図を選んだ状態で「図形の書式設定」からサイズを指定することができますが、ここでの単位はセンチメートルとなっています。
ピクセルからセンチメートルを計算して・・・ということもできなくはないでしょうが、メンドウですよね。
だったら、厳密なサイズ指定はやめて少し大きめに作ろうとしますよね。
▲ 上記は、画像のリサイズによる見た目の違いです。
左のサンプルは、500px正方形からシェアポイントが64px正方形にリサイズ表示しているものです。右のサンプルは、64px正方形のままの画像です。後者のほうがくっきりはっきりしています。
ロゴを作る際には、マイクロソフトの推奨サイズを守ったほうがベターです。しかし、パワーポイントでは厳密なピクセル指定をするのに難儀します。
OKパターン（Canva利用）
簡単に、しかもオシャレにロゴを作るにはそれ専用のツールを使うのが手っ取り早いです。
ロゴを作るなら、オンラインで使える「Canva（キャンバ）
」という画像編集ツールが便利です。
指定のピクセルサイズでぴったりとロゴが作れるし、ロゴテンプレートがあるので簡単スピーディにロゴが作れます。「Canva」は、ロゴ以外にもポスター、チラシ、プレゼンテーション、Youtubeやブログのサムネイル向けのテンプレートを数多く公開しています。
ブロガーやユーチューバーならだれでも知っているレベルの神サービスです。当ブログでも記事のサムネイルに「Canva」を使って製作しています。
- 豊富なロゴテンプレートから簡単におしゃれなロゴを作れる
- プロ並みのデザインが手軽に
- ピクセル単位でサイズが指定できる
- 透過画像が作れる（有料プランのみ）
Canvaで作ってみたロゴの例
以下、Canvaで作れるロゴサンプルです。
作ったというよりは、テンプレートをキャンバスにそのまま置いただけです。背景が白いものは透過画像としても出力することができます。
「Canva」を使うことで、こういったプロっぽいデザインのロゴが簡単に作れます。
Sharepointサイトに作ったロゴを適用する
ロゴを作ったらSharepointのモダンUIサイトへ適用します。今回は標準ヘッダーに画像を適用します。
▲ サイト右上の歯車⚙から「外観の変更」→「ヘッダー」を選びます。使えるレイアウトは次の通りです。ここでは「標準」を選びます。
- ミニマル
- コンパクト
- 標準
- 拡張
「表示」メニューからロゴを入れ替えます。以下、二つのロゴがあります。
- サイトロゴの縮小表示
- 検索、サイトカード、および他の正方形のロゴが必要な場所に表示されるサイトロゴのサムネイルです。
- サイトロゴ
- サイトヘッダーに表示されるロゴ。透過か不透過を選べます。
標準ヘッダーの場合、どちらも64px正方形で作っておけばOKです。透過画像でなければ同じもの、透過画像を使うなら縮小表示は背景入りが良いでしょう。
不透過ロゴの例
まずは簡単な不透過画像の例。アップロードする画像は一つでOKです。
透過ロゴの例
次に、一歩上を行く透過画像の例。アップロードする画像は二つになります。
サイトロゴを透過画像に、縮小表示は不透過画像を使いました。
▲ 透過画像は、背景に溶け込んでいる様子がわかると思います。
▲ 縮小表示では、検索結果やサイトカードで使われます。背景があったほうが表示が安定するので背景付き画像が良いでしょう。
まとめ
Sharepointで作ったサイトに綺麗にロゴを載せる方法について投稿しました。
この記事を書くためにヘッダー周りの設定を詳細に見ていたら、もうちょっと掘り下げた記事を書けそうな気がしてきました。また、機会を見つけて投稿します。
- 豊富なロゴテンプレートから簡単におしゃれなロゴを作れる
- プロ並みのデザインが手軽に
- ピクセル単位でサイズが指定できる
- 透過画像が作れる（有料プランのみ）
