Web画像に対処しない場合[ビデオ]

Webベースのビジュアルコンテンツについて戦略的に考えるには、使用する画像を選択するだけでは不十分です。 また、これらの画像が大小の画面で機能することを確認する必要があります。

画像がすべての画面サイズで機能する場合は、すばらしいです。 1つのファイル（画像のシングルソース）をアップロードすれば、準備は完了です。

すべての画像があなたの人生をそれほど楽にするわけではありません。 場合によっては、画像の複数のバージョンを提供して、任意のデバイスの画像から必要なものを人々に提供することが価値がある場合があります。

The MedicinesCompanyのコンテンツ戦略担当シニアディレクターであるBuddyScaleraはそう言います。 バディは、インテリジェントコンテンツカンファレンスの講演「拡張可能なビジュアルコンテンツ戦略の作成と実行」で、そうでない場合を除いて、すべてシングルソーシングに向いていると語りました。 彼は、特に画像に関して、彼や他の人が「主にCOPE」（COPE-M）と呼ぶものを提唱しています。

COPEは、「一度作成して、どこにでも公開する」の略です。 COPEコンテンツは、単一ソースのコンテンツです。 多くの点で、COPEコンテンツは理想的です。 コンテンツのチャンク（製品の説明、仕様、定義、画像）を一度作成すると、システムはそのチャンクを複数の成果物にプル（貼り付けではなく）できます。 ソースを更新すると、更新はリポジトリ全体に波及します。 COPEコンテンツはエレガントです。 効率的です。 それは論理的です。 これにより、企業は翻訳コストを数百万ドル節約できます。 それは彼らが恥ずかしい、狂った、訴訟を起こす矛盾を避けるのを助けます。 COPEは、テキスト、オーディオ、およびビデオ（YouTubeを使用している場合）でうまく機能します。

それでも、COPEが間違った方法である場合があります。 最新のブラウザはテキストをリフローしますが、画像はデバイスに合わせて縮小されます。 デスクトップで見栄えのする画像は、スマートフォンでは認識できなくなる可能性があります。 （こんにちは、ピンチアンドズーム。）

そこで、COPE-MのMが登場します。「マルチチャネルで再利用できるようにコンテンツを準備することは良い目標ですが、すべてのコンテンツがCOPEモデルで効果的にスケーリングされるわけではありません」とBuddy氏は言います。

この記事では、バディのICCトークからのアドバイスを要約します。 この投稿のすべての画像は彼のスライドからのものであり、特に明記されていない限り、すべての引用は彼の話とその後の彼との会話からのものです。

一部の画像で対処するのが難しい理由

バディは彼が画像について「真実の爆弾」と呼ぶものを落とします：それらはテキストと同じではありません。

テキストはその外観から分離できるため、テキストはシングルソーシングに適しています。 カスケードスタイルシートを使用すると、基になるテキストソースを変更せずに、インスタンスごとにテキストの外観を変えることができます。 「テキストは、デジタルの世界でうまく機能する、素晴らしく、柔軟性があり、フロー可能で、再利用可能で、チャネルにとらわれない資産です」と彼は言います。

画像ではそうではありません。 それらはそれらの外観から分離することはできません。 画像の場合、1つのサイズですべてに対応できるとは限りません。

Justyn Hornorが数年前に述べたように、レスポンシブWebデザインの「部屋の中の象」は「画像の処理方法」です。 小さな画像は、携帯電話では鮮明に見え、高解像度モニターでは途方もなく小さく見える場合があります。 大きな画像は、小さな画像で十分な小さなデバイスでレンダリングするのに長い時間がかかる場合があります。

マルチソーシング画像の考え方

ハイエンドとローエンドで妥協して単一の画像がすべてのデバイスで機能することを期待するのではなく、少なくとも時折、複数の画像をアップロードして、各画像を使用するブレークポイントをシステムに指示する価値があると感じるかもしれません。

ブレークポイントは、システムが1つの画像のプルを停止し、代わりに別のイメージをプルするポイントです。デバイスの解像度に応じて、大きい画像または小さい画像になります。 この図は、3つの可能なブレークポイントを示しています。携帯電話の場合は320ピクセル、タブレットまたは大型電話の場合は720ピクセル、ラップトップの場合は1,024ピクセルです。

ブレークポイントは、デバイスの幅に応じて定義されます。これは、垂直方向のスクロール可能性は無限ですが、幅が制限されているためです。

バディは、彼の会社のコンテンツチームの1つが、特定の製品に関する医師の質問に答えるグラフを含むパンフレットを印刷したときのことを説明しています。

グラフは印刷物で素晴らしく見えました。 そして、彼らはそれをウェブサイトに載せました、そしてそれは小さくなりました。 スマートフォンで見たとき、チャートは読めませんでした。 病院でスマートフォンで何かを探している人は、緊急性があります。 彼らは答えを必要としています。 ピンチやズームをする必要はありません。

多くの場合、1つの大きな画像をWebサイトにアップロードして（つまり、画像を単一ソースにするために）、ブラウザーに画像を拡大縮小させることができます。 また、小さなウィンドウや画面に押し込むと、画像がほとんど判読できなくなる場合もあります。 この点を説明するために、バディは、ブラウザが娘の800ピクセル幅の写真を拡大縮小したときに何が起こるかを示しています。

これはCOPEの例です。 残念ながら、ブラウザがこの画像を狭いウィンドウや画面に拡大縮小すると、女の子の顔が見えにくくなります。 この画像がグラフやインフォグラフィックの場合、小さい画面のテキストが判読できなくなる可能性があります。

ブランドの説明に不可欠な視覚的要素については、複数の画像を使用するために特別な努力を払うことをお勧めします。 バディが「レスポンシブアートディレクション」と呼ぶこのアプローチにより、人々はどの画面でも重要な詳細を理解できる可能性が高くなります。

バディが画像の幅を800から400、200ピクセルに変更すると、画像の構成も変更されます。これはCOPEではありません。 これがイメージプランニングです。 幅800ピクセルの写真は、女の子と犬を並べて、彼が3幅の水平ショットと呼んでいるものを示しています。 400ピクセル幅の写真は、女の子を引き締め、犬を前に押し込んで2幅の垂直ショットを撮影します。 200ピクセル幅のショットは、3つの図すべてをトーテムポールの配置に絞り込みます。

バディのサンプルページをブラウザで表示していて、ウィンドウを拡大および縮小した場合、HTMLコードで指定されたブレークポイントの1つに到達するたびに、画像が変化します。 ユーザーエクスペリエンスを理解するには、次の6秒間のビデオを再生してください。

自分のブラウザでこの動作を体験するには、ウィンドウ幅を変更できるデバイスでBuddyのサンプルページにアクセスしてください。

この投稿は、この種のコードの記述方法に関するチュートリアルではありませんが、このコードがどのように見えるかを確認すると役立つ場合があります。

注意すべき主な点（「picture」タグの間を見てください）は、Buddyが3つのソース画像を指定していることです。

• GirlsDog_200w.jpg
• GirlsDog_400w.jpg
• GirlsDog_800w.jpg

各JPGファイルはブレークポイントに割り当てられます。

• 最大幅：499px
• 最大幅：799px
• 最小幅：800px

ブレークポイントをいくつ作成する必要がありますか？ それらの最大幅と最小幅をどのように決定しますか？ ルールはありません。 バディが指摘する優れた記事の中で、ジェイソン・グリグスビーは、「画像のブレークポイントを選択することは誰もが直面することであり、率直に言って、私はあなたに良い答えがありません」と述べています。

Webサイトのすべての画像に対して複数の画像を作成することはおそらくないでしょう。 どの画像が顧客にとって本当に重要かを判断します。 画像（グラフ、チャート、製品写真など）がユーザーにとって本当に重要であることがわかっている場合は、その画像をレンダリングする方法を決定するためにWebブラウザーに任せないでください。 仕切る。

一部のデジタル資産管理（DAM）システムは、異なるサイズと比率で単一の画像の複数の出力を作成できることに注意してください。 バディが別々の写真で行ったことを再現することはできませんが、ソフトウェアシステムが提供するものを調べる必要があります。

私が提案できる唯一のルールは、他のコンテンツに関する戦略的決定を行うのと同じ方法で、画像に関する戦略的決定を行うことです。視聴者が何を必要とし、その理由を自問してください。 さまざまな画像とブレークポイントを試してください。 繰り返す。

ビジュアルコンテンツのスケーラブルな戦略の作成と実行についてバディが言わなければならないことの詳細については、彼の注釈付きICCプレゼンテーションを参照してください。

画像をマルチソース化するタイミング

画像ごとに複数のソースファイルを作成する手間をかけたくない場合は、コンバージョンページのメイン画像など、最も影響力のある画像をマルチソーシングすることを検討してください。 バディが言うように：

あなたのウェブサイトに費やされたすべてのお金について考えてください。 すべての画像の処理方法をマシンに決定させ、人々が重要な画像を見ることができない場合は、機会を逃しています。

あなたはあなたのウェブサイトの重要なページと画像を知っています。 おそらく、分析ソフトウェアですでにタグ付けされています。 「デザイナーがコンテンツを作成するために使用したゴージャスなワイドスクリーンモニターだけでなく」、モバイルデバイスでこれらのページをテストすることは特に重要です」とバディ氏は言います。

また、ほとんどの人が小さなデバイスで表示する他のページのマルチソーシング画像も検討してください。 「スマートフォンデバイスからのトラフィック量を確認してください。 それが私たちのようなら、65％、それはあなたの聴衆です。 あなたは彼らに応える必要があります」とバディは言います。 スマートフォンユーザーがピンチしてズームしないと画像を読み取れない場合は、小さな画面用に画像をカスタマイズすることをお勧めします。

マルチソースする画像を知る最良の方法は、複数のデバイスでWebページをテストすることです。 コンテンツ戦略、デザイン、コンテンツエンジニアリング、ユーザーエクスペリエンスの同僚を含むすべてのコンテンツチームは、ウェブサイトの画像がスマートフォンにどのように読み込まれるかを知る必要があります。 デバイスのスタックと、デザイナー、コンテンツストラテジスト、またはUX担当者をつかみます。 顧客と同じようにコンテンツをロードします。 「あなたが愛情を込めてあなたのウェブサイトにロードした画像が少し押しつぶされているように見える場合は、ブラウザがあなたの画像アセットをスケーリングする方法を検討してください」とバディは言い、それに応じて計画します。

結論

私たちのコンテンツシステムが、あらゆるデバイス上の各画像の理想的な体験を人々に自動的に提供するのに十分スマートになるまで、いつCOPEするか、いつCOPEしないかを検討してください。 余分な労力を費やして特定の画像をマルチソース化することにはお金がかかる場合があります。

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

これがバディの話からの抜粋です：

マーケター向けの毎週のコンテンツ戦略の電子ニュースレターにサインアップしてください。このニュースレターには、CMIのチーフコンテンツアドバイザーであるロバートローズからの独占的なストーリーと洞察が掲載されています。 私たちが出会う他の多くのマーケターと同じように、毎週土曜日に彼の考えを読むのを楽しみにしています。

Joseph Kalinowski / Content MarketingInstituteによる表紙画像