フォローする

Spark Page の画像

Adobe Spark Page には、切り抜き写真とそうでない写真の 2 種類があります。塗りつぶしの画面とウィンドウの画像タイプは、写真と閲覧者の画面サイズに応じて切り抜き写真になる場合があります。インラインおよび全幅の写真タイプでは切り抜き写真になることはありません。

imageTypes.png

ここで理解しておくべき点は、一部の画像タイプ (全画面、ウィンドウなど) は切り抜きなしでは表示不可能であるということです。さらに混乱しやすいのは、こうした画像がどのように切り抜かれるかわからないことです。これは、Spark Page があらゆる画面サイズのあらゆるデバイスで表示可能なためです。つまり、この画像は数千種類の方法で同時に切り抜かれることを意味します。

なぜそうなるのか理解できなくても、ご心配には及びません。ここでは、例を見ていきましょう。このようなビーチを歩いている 5 人の画像を考えます。

sample.png

クレジット : スプラッシュなし

Spark Page を見ている 2 人の顧客にとって、この画像がどのように見えるかを考えてみましょう。そのうちの1人は携帯電話を使用し、もう1人はデスクトップを使用しています。以下に示すように、閲覧者は Spark Page でこの画像を 2 とおりの方法で体験します。

 

オプション A - 切り抜きを許可

閲覧者からの視点 :

compare1_r3_c1.png

トレードオフ

閲覧者は、画像の切り抜きを犠牲にして、非常に大きな没入型の経験を得ます。

一部の画面では、ビーチに現れるのは 5 人未満です。表示される人数は、顧客のブラウザーウィンドウのサイズによって異なります。

Spark Page で使用する画像タイプ

  • タイトル画像
  • 全画面画像
  • ウィンドウ画像
  • Glideshow
  • レイアウトを分割

 

オプション B - 切り抜きを許可しない

閲覧者からの視点 :

compare1_r1_c1.png

トレードオフ

画像は切り抜きされませんが、経験はそれほど没入的ではありません。

5 人全員がすべての顧客に対して常に表示されます。


Spark Page で使用する画像タイプ

  • インライン画像
  • 全幅画像

 

オプション A の説明- 切り抜きを許可

どのようなデバイスで閲覧していても、写真は常に全画面に表示されます。デバイスを回転させると、画面のサイズが変わり (縦から横、またはその逆)、依然として写真が全画面に表示されます。写真の側面に白い隙間が見えない。

この効果により、閲覧者が表示している任意のサイズのデバイスで、真に没入的に写真が見えるようにします。ブラウザーウィンドウのサイズを変更したり、デバイスを回転させたりしても、写真は常に全画面に表示されます。

この没入的効果には代償があり、その実現のために写真を切り抜く必要があります。これは、写真の縦横比は 1 つですが、縦横比の異なるスクリーンで表示されるためです。この写真はデスクトップにぴったりと適合していも、電話にはまったく収まりません。

つまり、画像全体を表示にするため写真を縮小して両側に白いバーを残すか、画像の一部を常に画面全体に表示するように画像を拡大して切り抜くかを選択できます。「全画面」の写真タイプを選択すると、写真全体を画面いっぱいに表示することがより重要であるために、切り抜きについて犠牲を払ってもかまわないことを Spark Page に指示します。

 

オプション B の説明 - 切り抜きを許可しない

写真の切り抜きを行わない場合は、代わりに「インライン」または「全幅」の写真タイプを選択できます。どちらのタイプも画像の切り抜きは行われません。画像全体を表示するためにスクロールが必要になるかもしれませんが、画像全体がそこで表示されます。

この画像タイプは、全画面写真による没入感を得るために切り抜きについて犠牲を払うことができない場合に役立ちます。これは、一方の写真タイプが他方の写真タイプより優れているわけではありません。いずれの写真も、写真が何であるか、およびドキュメント内での写真の文脈に応じて、非常に効果的に使用できます。たとえばロゴは画面全体に広げたくないため、ロゴにはインラインが非常に適しています。

 

「タイトル」、「ウィンドウ」、「グライドショー」、および「レイアウトの分割」に関する注記

タイトル/ウィンドウ/Glideshow/分割レイアウトの写真の種類については、切り抜き動作に関する限り、上記の「全画面」の写真と基本的に同じように表示されるということを除いて、詳しく説明しません。

 

ヒント

上記の説明を完全に理解しない場合でも、次のヒントに留意してください。

  • 全画面の写真は、画面に没入的なエクスペリエンスを作成しますが、一部が切り抜かれても問題のない写真を使用してください。
  • 全画面の画像の切り抜きはデバイスや画面のサイズによって異なるため、さまざまな状況で表示が問題ないことを確認してください。ブラウザーウィンドウのサイズを変更してさまざまな縦横比について調べることで、デスクトップでこの点についてすばやく確認できます。
  • 各全画面の写真には、必ず「焦点」を設定してください。これによって、写真の最も重要な部分についてのヒントを提供して、Spark Page が切り抜き時にその部分を画面上になるべく維持することができます。
  • 写真のフレーミングが重要な場合、または切り抜きすべきではない詳細が端にある場合は、インラインまたは全幅の画像を使用します。



写真家のためのヒント - 全画面でうまく表示される写真を撮るにはどうすれば良いですか?

フレーム構成、つまり被写体を写真内にどのように配置するかは、おそらく素晴らしい写真を撮るために最も重要です。世界で最もすばらしい写真を撮っても、その切り抜きがわずかに異なれば、写真の品位が大幅に低下する可能性があります。同様に、平均的な写真を撮っても、わずかに異なる切り抜きを行うことで、品位を上げることができます。写真家は多くの構成テクニックを使っています。そのいくつかは、こちらでご確認いただけます。

たとえば、この記事に記載されているこうした規則をいくつか取り上げてみましょう。

  • 三分割法
  • フレーム内のフレーム
  • ゴールデントライアングル
  • 黄金比

これらはすべて、切り抜きについて非常に敏感な規則です。こうした規則を使用する写真では、Spark Pageの全画面の画像はデバイスで切り抜きが発生するために適していません。

しかし、写真家が Spark Page で没入的な画像を使用したい場合は、上記の事実を理解したうえで使用することで最も良い結果が得られます。つまり、Spark Page の焦点機能を上手く利用し、写真内に 1 つの被写体を配置して、切り抜きに敏感な規則を回避します。

もう 1 つの選択肢は、上記の切り抜きに敏感な規則を避け、先の記事に記載されているその他の写真の規則に焦点を合わせることで、実際に全画面の写真を輝かせることができます。

  • 中央への構成と対称性
  • 先頭ライン
  • パターンとテクスチャ
  • シンプルさとミニマリズム

こうした写真の制限を理解したうえで作業することが、閲覧者にとって最も見栄えの良い Spark Pages を真に実現するための鍵になります。

 

この記事は役に立ちましたか?
3人中2人がこの記事が役に立ったと言っています
他にご質問がございましたら、リクエストを送信してください