2016/09/26 by プロストサイト – Update 1
SEO強化画像プロダクト – 画像の効果的な使い回し
多くのWebサイトは、「ヘッダー。コンテンツ、サイドバー、フッター」で構成されます。例えばサイドバー告知目的の画像は、コンテンツの該当ページ等で回せます。本ページでは、SEO強化のための画像使い回しの主な事例を紹介しています。
関連トピックス
| タイトル | |
|---|---|
| 1 | SEO強化のためのアイコン画像パーツPRO |
| 2 | SEO強化のためのアイコン画像パーツPRO – 画像一覧 |
| 3 | SEO強化のためのアイコン画像パーツPRO – テーマフレームを使った画像制作 |
目次
画像パーツの使い回し
画像の効果的な使い回し
画像を効果的に使い回すためのスライダープラグイン
画像パーツの使い回し
画像使い回しの典型は、関連トピックスNo.1のSEO強化のためのアイコン画像パーツPROです。次の5パターンで使い回せます。中でも、アニメーション画像はコンテンツやサイドバーのSEOアイキャッチに効果的です。
| 使い回しパターン | 備考 | |
|---|---|---|
| 1 | コンテンツ画像 | 全画像 |
| 2 | サイドバー画像 | バナー画像等 |
| 3 | CSS組込み画像 | 見出し画像 |
| 4 | Excel画像制作のパーツ | Excelをツールとするユーザー画像制作 |
| 5 | 画像オーダースケッチのパーツ | スケッチへ貼付だけの簡単表現 |
Excelをツールとするユーザー画像制作では、プロ制作と遜色の無いカスタム画像制作を行えます。なお、アニメーション画像は除かれます。関連トピックスNo.3に事例があります。
制作画像の効果的な使い回し
以下では、スライダー系画像の使い回し事例です。バーナー画像やコンテンツ画像も応用例は一緒です。
ページスライダー例の1
ページスライダーをWebサイト幅一杯に表示させた事例です。Canvasスライダーによっています。本ホームページの実例です。上部は、サイズ1060px-400pxのスライダー画像です。右下は、300px-300pxのサイドバー画像です。Huge IT Sliderによっています。なお、全体が約30%へ圧縮表示の状態です。つまり、レスポンシブのモバイル表示に近いものです。
なお、このスライダーとサイドバー共に複数画像の切替表示によっています。アニメ画像の組合せは、更に効果的となります。
ページスライダー例の2
今度は、ページスライダーをコンテンツ幅で表示させた事例です。Huge IT Sliderの併用よっています。左側は、前と同じサイズ1060px-400pxのスラダー画像ですが、コンテンツ幅の表示になっています。大きなスラダイー画像の使い回し事例です。
ところで、大きな画像を小さく表示させることはTinyMCE Advanced操作でも簡単に行えます。しかし、モバイルフレンドリー時代になって不適切となりました。モバイルスピードテストで減点されてしまうからです。そこで、このような使い回しが候補となります。この事例は、ページのトップへ挿入した形ですが、中間でも、どこにも挿入できます。そして縮小指定も任意です。スライダー画像はモバイルフレンドリーのレスポンシブ想定で大きく作ってありますから、縮小使い回しによる思わぬレスポンシブ応用となります。スライダーでも、1枚画像なら動かない固定表示となります。
なお、Huge IT Sliderにつては更に各種トライを行い別途記事で紹介の予定とします。
スライダーによるページヘッダー
この画像の上部は、ページ説明のヘッダーです。サンプルNo.1010-S3の例です。下部は、4カラムレアイアウトの300px-300pxの商品画像です。サンプルNo.1021、1022、1023の3点です。Canvas+WooCommerceによっています。
モバイルフレンドリーのレイアウト
因みに、前例の4カラムレイアウトのモバイル表示では、WooCommerceの機能性によって2カラム+2カラムのスタイルへ変換され、モバイルフレンドリー性が保たれます。なお、一般のホームページでは複数画像を並べると、モバイルでは右側の画像表示が欠落するので注意が必要です。GoogleテストではNGとならないので、モバイルフレンドリーの盲点となっています。結論として、一般のページでは見た目にこだわった複数画像並べは推奨されません。
フッター
このフッター表示は、Huge IT Sliderによるものです。画像は、ページスライダーとの使い回しによっています。
画像を効果的に使い回すためのスライダープラグイン
画像の効果的な使い回しにふれたところで、その動作環境にもふれておきます。当ホームページはWordPress上で動作しており、2スライダーの併用によっています。
| No | 種別 | 名称 | 主な目的 | 表示 |
|---|---|---|---|---|
| 1 | テーマ | Canvas | ページスライダー | ページ単位のヘッダー |
| 2 | プラグイン | Huge IT Slider | ウィジェットスライダー | HP共通のサイドバーとフッター |
動作環境の補足
Canvasはスライダーをサポートしており、商品ページでの使い良さがあります。ただし、ウィジェット機能がありません。そこで使い回しの機能性を求めるとするとすれば、次の7点を満たすウィジェットスライダーが挙げられます。もちろん、使い勝手と機能性が基本です。
| No | 機能要件 | 備考 |
|---|---|---|
| 1 | 画像の使い回しに適している | ウィジェット対応が前提 |
| 2 | GTmetrixスピードテスト | スコアダウンなし |
| 3 | Canvasスライダーと併用可能 | CanvasのFlex Sliderとバッティングしない |
| 4 | 画像のURLパス指定が可能 | メディア挿入と異なり画像の使い回しの面で有利 |
| 5 | 画像へリンク先設定を行える | リンク先が新しい画面で開くことが望ましい |
| 6 | フリー版でも問題なく使える | 基本機能面での制限が少ない |
| 7 | PROバージョンがある | アップデート持続期待と何かのニーズでの機能アップ |
スライダー画像のモバイルフレンドリー検証
スライダー画像は、コンテンツとしでのモバイルフレンドリー効果を期待できます。反面、表示スピードでは不利な要素も想定されます。そこで、CanvasスライダーのGTMetrixスピードテストによるモバイルフレンドリー検証を行ってみました。結果は、OKです。スライダーの遅れ表示機能によって、モバイルフレンドリー面の最適化が行われている証です。Huge IT Sliderも、ウイジェットを試した限りではGTMetrixテストでOKでした。
