タイルの背景画像を設定する

はじめに

アイコン付きの単色のタイルは明快でコンパクトですが、写真を使ったタイルは人を惹きつけます。Smart Tiles では、どのタイルにも単色の代わりに背景画像を設定できます。たとえば、Visit us にはオフィスの画像、新製品の紹介ページには製品写真、部門サイトにはチームの写真を使用できます。この記事では、画像の設定方法、画像の表示のされ方、そしてタイルの視認性を保つ方法について説明します。

画像を設定する

1. ページを編集モードで開き、タイルの … ボタンをクリックします。
2. Background Color（背景色）をポイントし、サブメニューの最初の項目である Background image（背景画像）を選択します。
3. Image（画像）ダイアログで、Image URL（画像の URL）フィールドに画像のアドレスを入力または貼り付けるか、サイトのライブラリを参照して画像をクリックします。
4. Apply（適用）をクリックします。

Image ダイアログは、カスタム アイコン画像で使用するものと同じです。Image URL フィールドには、https:// で始まるアドレス、または / で始まるパスを入力できます。その下の一覧では、現在のサイトのドキュメント ライブラリをフォルダーごとに参照でき、画像がサムネイルで表示されます。このダイアログの詳細については、KB10244. カスタム画像をタイルのアイコンとして使用するを参照してください。

画像の表示方法

画像はタイル全体に表示されます。タイルを完全に覆うように拡大縮小されて中央に配置され、収まらない部分は端で切り取られます。タイルの縦横比は維持されます。幅はタイルの Size（サイズ）で、高さはコンテンツと Internal Indent（内部インデント）で決まるため、同じ画像でも、Small（小）のタイルと Full Width（全幅）のタイルでは切り取られ方が異なります。

アイコン、タイトル、説明は、タイルの Font Color（フォントの色）で画像の上に描画されます。

下に敷かれる色

画像を設定しても、タイルの背景色はなくなりません。背景色は画像の下に描画され、画像の読み込み中、PNG の透明な領域、そして画像をまったく読み込めない場合に透けて見えます。読み込み中のタイルが別の色で点滅しないように、画像全体のトーンに近い色を選択してください。

文字の視認性を保つ

写真の上の文字は、写真との間のコントラストの分だけ読みやすくなります。次のような工夫が役立ちます。

• タイトルを配置する場所に、空、壁、水面などの落ち着いた領域がある画像を選ぶか、そのような領域が中央に来るように画像をトリミングします。
• 暗い画像には白い文字、明るい画像には黒い文字を使用し、それに応じて Font Color を設定します。
• Web パーツの設定で Shadow（影）を有効にします。アイコンの下のドロップ シャドウにより、複雑な背景からアイコンが際立ちます。
• 画像だけで内容が伝わる画像タイルでは、タイトルを非表示にし、代わりに名前を Description（説明）に入力することを検討してください。名前はツールヒントに引き続き表示されます。

YouTube のサムネイル

タイルのリンクが YouTube の動画を指している場合、Background Color メニューの Background image の上に、もう 1 つ Thumbnail（サムネイル）という項目が追加されます。この項目を選択すると、タイルに画像のアドレスを保存せずに、動画のプレビュー画像が背景として使用されます。公開されたページでは、サムネイルのタイルには再生ボタンだけが表示され、タイトルと説明はツールヒントに残ります。

画像の要件

• アドレスは https:// を使用するか、現在のテナント内のパスである必要があります。訪問者には画像に対する読み取りアクセス許可が必要です。
• ファイル サイズは適度に小さく保ってください。長辺が 1200 ピクセルで、JPEG または WebP 形式で保存された写真であれば Full Width のタイルには十分で、パネルを使用するすべてのページで高速に読み込まれます。
• 背景が透明な画像では、透明な領域からタイルの色が透けて見えるため、透かしのようなデザインに利用できます。

画像を削除する

Background Color メニューで色を選択するか、もう一度 Background image を開き、ダイアログで Remove image（画像を削除）をクリックします。タイルは背景色に戻ります。