デバイス間で最適なビジュアル エクスペリエンスを確保する方法

2022 年 8 月 22 日更新

モバイル、タブレット、デスクトップの 3 つのデバイスで、ウェブサイトで最もコンバージョン率の高いページを開きます。

本当に、やってください。 待ちます。

コンテンツは期待どおりに表示されますか?

多くのマーケティング担当者は、そうではないと感じるでしょう。 ユーザー エクスペリエンスとメッセージングの一貫性が不十分です。 時には、それは実にひどいものです。

どうやって来たの？ 結局のところ、あなたの会社はコンテンツを公開するために多くのリソースを投資しています。 COPE メソッドを採用することで、これらのコンテンツ リソースを最大化することもできます。

そして、それは間違いかもしれません。

がんばれ、仲間のコンテンツ マーケター。 ちょっとした調整を手伝うためにここにいます – COPE-M.

COPE-Mが必要な理由を理解する

従来の COPE 戦略を使用すると、コンテンツのチャンク (定義、画像、説明など) を 1 回アップロードすると、CMS がそのチャンクを (貼り付けではなく) 複数の成果物にプルします。 元のコンテンツを更新すると、更新はリポジトリ全体に波及します。

コンテンツ戦略として、COPE コンテンツはエレガントです。 効率的です。 それは論理的です。 コンテンツの再利用を増やし、オリジナル コンテンツへの投資を償却します。 テキスト、オーディオ、ビデオで動作します。

しかし、COPE はコンテンツ公開の万能薬ではありません。 最新のブラウザーはテキストをリフローしますが、画像はデバイスに合わせて縮小されます。 デスクトップでは見栄えのする画像が、モバイル デバイスでは認識できない場合があります。 (視聴者はそれを好まず、Google も気に入らず、コンテンツのランキングに悪影響を与える可能性があります。)

COPE は優れた出発点ですが、イメージ コントロールへのより多層的なアプローチが必要です。 私はこれを COPE-M と呼んでいます。 COPE-M は、優れたユーザー エクスペリエンスと優れたユーザー エクスペリエンスの間の橋渡しをすることができます。

コンテンツ パブリッシング戦略に COPE-M アプローチを採用すると、ユーザー エクスペリエンスが向上し、一貫性が向上し、更新されたコンテンツで検索エンジン最適化 (SEO) が改善されます。

画像は必ずしも COPE と親友であるとは限りません

Daniel Jacobson がこのコンテンツ再利用戦略の概念と技術的アプローチを概説した 2009 年以降、多くのことが変わりました。 COPE は確固たるコンセプトのままですが、現在、コンテンツは複数のデバイス タイプを通じて配信されています。 視聴者は、より多くの形式でコンテンツを消費します。

複数のブラウザーで表示される単一ソースのテキストは引き続き機能しますが、画像の問題です。 テキストは、その外観から分離できます。 カスケード スタイル シートを使用すると、元のソースを変更せずに、フォント サイズや列幅などのテキストの外観を変更できます。

画像は順応性がありません。 レンダリングされたグラフィック (JPEG、PNG ファイルなど) は、その外観から切り離すことはできません。 単一のソースからの 1 つのサイズが常にすべてに適合するとは限りません。 デスクトップでは見栄えのするインフォグラフィックが、iPhone では判読できない場合があります。 視聴者は、それを見ようとして、つまんだり、ズームしたり、目を細めたり、不平を言ったりします。

マルチソースに画像を選択

コンテンツ管理システムが十分にスマートになり、すべてのデバイスのすべての画像に理想的な視聴体験を自動的に提供できるようになるまでは、画像にいつ対処し、いつ対処しないかを検討する必要があります。

最初のリクエストに戻ります。最もコンバージョン率の高いページを開いて、複数のデバイスでどのように表示されるかを確認してください。 あなたのウェブサイトの他の重要なページと画像でそれを行います. おそらく、分析ソフトウェアですでにそれらにタグを付けています。

ヒント:ページの選択を、モバイル デバイスからのトラフィックが多いページに絞り込みます。

マルチソースする画像を特定するには、選択したページを複数のデバイスでテストします。 デバイスのスタックと、デザイナー、コンテンツ ストラテジスト、または UX 担当者をつかみます。 顧客と同じようにコンテンツをロードします。 画像がつぶれているように見える場合は、画像を複数ソースにするリストに追加します。

ヒント:画像が表示されるかどうかだけを見ないでください。 それがどのように表示されるかをよく見てください。 ユーザーが画像全体を表示するためにピンチしてズームする必要がある場合、COPE は最適な方法ではない可能性があります。

コンテンツ戦略、デザイン、コンテンツ エンジニアリング、ユーザー エクスペリエンスなど、Web サイトの画像がどのように読み込まれるかを知っている必要があるすべてのコンテンツ関連チームと結果を共有します。

マルチスクリーンのデザイン

モバイル デバイスの画面に合わせて画像の高低を妥協した場合、複数の画像をアップロードして、各画像を使用するブレークポイントをシステムに指示することは価値があります。

ブレークポイントは、システムが 1 つの画像のプルを停止し、表示デバイスにより適したバージョンをプルするポイントです。 ユーザーは垂直方向に無限にスクロールできますが、画面を広げることはできないため、ブレークポイントはデバイスの幅によって決まります。

この図は、考えられる 3 つのブレークポイントを示しています。携帯電話の場合は 320 ピクセル、タブレットまたは大型の電話の場合は 720 ピクセル、ラップトップの場合は 1,024 ピクセルです。

この例では、私の 2 人の娘と私たちの犬の元の画像の幅は 800 ピクセルです。 フルサイズでレンダリングされたデスクトップ (画像の左側) では見栄えがします。 タブレット サイズの画面では、元の画像のディテールが失われ、その影響が小さくなります。

この画像がチャートまたはインフォグラフィックである場合、小さい画面では判読できない可能性があります。 そのため、複数の画像を調達することに特別な努力を払う必要があります。 このアプローチは「レスポンシブ アート ディレクション」と呼ばれます。 これは、画像をユーザーに表示する方法をもう少し制御できるブラウザのトリックです。

これが元の例でどのように機能するかです。 今回は横幅800、横400、横200とそれぞれ違う写真を撮りました。 公開されると、それぞれの顔はほぼ同じサイズになります。

800 ピクセルの水平バージョンでは、1 人の娘が犬と一緒に階段に座り、もう 1 人の娘が手すりに沿って立ち、背景にある近所を垣間見ています。 400 ピクセルの垂直バージョンでは、2 人の娘が階段に座っており、どちらかの隣に犬がいて、両方の手すりが見えるようになっています。 200 ピクセルの縦バージョンでは、それぞれの娘と犬にそれぞれのステップがあり、手すりが 1 つしか表示されていません。

このアプローチは COPE ではありません。 COPE-M のほとんどの部分ではありません。 私は自分のために3倍多くの作品を作成しました。 そのため、この時間のかかる作業を、重要な変換コンテンツのみに制限する必要があります。

マルチソース画像がどのようにコーディングされるかを見る

この記事は、この種のコードの書き方についてのチュートリアルではありませんが、コードがどのように見えるかを確認するのに役立つ場合があります。

「picture」タグの間に、画像の幅に基づいて名前が付けられた 3 つのソース画像を指定しました。

• jpg
• jpg
• jpg

これで、ブレークポイントに到達したときに各画像が開始されます。

• スマートフォンの場合は 499 ピクセル (最大)
• タブレットの場合は 799 ピクセル (最大)
• デスクトップの場合は 800 ピクセル (最小)

COPE-M をブランドで機能させる

ほとんどのデジタル資産管理 (DAM) システムは、1 つの画像をさまざまなサイズと比率で複数の出力を作成できます。 写真を再撮影できない場合は、すべての画面サイズで最高の体験が得られるようにトリミングしてください。 大変な作業になる可能性があるため、デザイナーや開発者に Web サイトのすべての画像を再設計するよう依頼しないでください。 インパクト重視。

SEO が最優先事項である場合は、マルチイメージ アプローチを実装する前に、SEO スペシャリストに確認してください。 Google のアルゴリズムは、デスクトップとモバイルでまったく同じエクスペリエンスを提供しない Web ページにペナルティを課す場合があります。 人間により良いエクスペリエンスを提供していても、Google のクローラーはまだこれを認識していない可能性があります。 もちろん、画像のエクスペリエンスが向上したことで、より多くの人があなたのページに時間を割く価値があると感じた場合、Google はそれを気に入るでしょう。

あなたのチームはどうですか？ さまざまな画面サイズに対応するために、重要な画像の複数のバージョンを作成することがありますか? 複数のデバイスでイメージをテストして学んだことは何ですか? コメントで教えてください。

表紙画像 by Joseph Kalinowski/Content Marketing Institute