こちらの画像は、レスポンシブデザイン※サイトの中の、いわゆるバナー広告のようなものです。わざわざ、デバイス(PC、タブレット、スマホなど)ごとの表示の違いを意識してご覧になる方はいないかもしれませんが、どのデバイスでも写真の位置などが最適に表示されます。
思った通りに再現できて満足(笑)事例は大切なので、目を引くために写真の重なりをWEBでも表現したかったのです。
単なる見た目の問題だけでなく画像とテキストを分けてhtmlをつくりこむことは、上位表示対策的にも大切で効果があるといわれています。
また、PCレイアウトからレスポンシブデザインにリニューアルした場合(モバイル対応した場合)の効果(アクセスアップ効果)は大きく、少なくても経験上2~3割は増えることが多いです。
※レスポンシブデザイン
閲覧者の画面サイズに応じて、ウェブページが最適に表示されることを目指したウェブデザインの手法。いわゆるモバイル対応の際、使われることが多い。