スライダーキャプションと行動を促すフレーズのボックスが画像に添付されていることを示す最良の方法は？
私はクライアントのサイトにスライダーを置いており、次のように、「フローティング」ボックスにキャプションと行動を促すフレーズをサイドに配置します。
彼らは、この形式で適切な画像を見つけるのに問題があることを懸念していました（画像の左2/3に焦点を合わせる必要があり、アスペクト比が広すぎる可能性がある）。スライダーのアスペクト比を大きくしたくないので、次の形式を使用します。
彼らはこのオプションのアスペクト比を気に入っていますが、問題は、キャプション領域が画像にまったく関連していないように見えることです（特に、スライダーの上下にある他のコンテンツと）。それらが関連していることを示す最良の方法は何ですか？私は単純な三角形/矢印を検討しましたが、それについてより良い方法があるはずです。
したがって、ブロック間の共通性を感じたいと思います。それは明確なビジュアルデザインタスクです。 ゲシュタルトの原則 を試して解決してください。いくつかのオプションは次のとおりです。
また、オプションを組み合わせて最適なソリューションを見つけることもできます。
このコンテキストでの最良の方法の1つは、全体的な配色の色を使用してこのメッセージを目立たせることです。そのため、ページが大部分が青で、黄色がかった色である場合は、キャプション領域を青で黄色の文字で書いてください（おそらくすべてではない）。
さらに、画像とテキストがある程度明白な方法でリンクされていることを確認することは常に役立ちますが、完全に明らかであることは創造性に欠け、陳腐な印象を与える可能性があります。
デザインをわずかに変更できる場合は、キャプションボックスを透明でオーバーレイして、画像がコンテナーの大部分を占めるようにすることができます。これにより、キャプションが画像に添付され、背景がわずかに透けて見えるようになります。
これの進行中の例を見ることができます here。
個々のスライドメッセージを思いどおりに目立たせることはできていませんが、現在取り組んでいます。
矢印インジケーターでうまくいくはずです。矢印をボックス内に配置したくない場合は、矢印をボックスの端に付けて同じ結果を得ることができます。
download bmml source – Balsamiq Mockups で作成されたワイヤーフレーム
