Restaurant Banner

レストランバナーとWEBビジュアル考察

An
Ultimate
Breakfast

究極の朝食

カリカリにトーストしたバケットに、
スライスしたゴーダチーズとドライトマトと、
新鮮なバジルの葉をのせて、、、
オリーブの甘くて酸っぱいピクルスを添えて、
オレガノの入ったオリーブオイルにバケットをつけて食べる・・・
そんな朝食が私の究極・・・

雑誌のようなデザインが可能なCSS

縦長の背景を画面いっぱいに敷き詰めて、
右寄せでテキストを配置し、日本語の見出しの幅を小さくして、
縦書きにした雑誌の見出しページのようなバナーです。
バナーと呼ぶにはあまりにも大きくて、トップページのスライド広告に近いのですが・・・

スマホでの見え方は、
縦長の画像がちょうどスマホのディスプレイと同じくらいなので、
縦が100%で見えるはずです。
ブレイクポイントは425pxで、
最もアクセスが多い画面サイズである
iPhone6/7/8の幅375pxを基準にしたスタイルなので、
iPhone SE/5sではスタイルが崩れるでしょう・・・

huhuhu

チーズのある食卓

春が訪れた日のブレイクタイム・・・
自家製のカマンベールチーズと、ゴーダチーズと、
朝オーブンで焼いたバケットをバスケットに入れて、
子供たちと近所の森の公園に散歩。
公園のテーブルに広げた食卓を囲んで、
近所の子供たちとママ達にもおすそ分け・・・

写真の上にテキスト乗せるスタイル

Left Bottom

背景に食材や植物を使って、コピーの見出しとテキストを乗せたバナーです。5行ほどの文章または説明文があるとバランスよく配置されます。写真のセンターから左側下部に空白、または黒い背景があるときにテキストを配置できるスタイルを施しています。

Right Center

背景に食材や植物を使って、コピーの見出しとテキストを乗せたバナーです。5行ほどの文章または説明文があるとバランスよく配置されます。写真のセンターから右側中央に空白、または黒い背景があるときにテキストを配置できるスタイルを施しています。

スマホでは縦バナーを表示、デスクトップでは横バナーを表示、表示バナーを切り替える

横長の写真では、スマホ表示の時に全てを見せると縦が狭くなり、効果的なバナーになりません。そして縦幅を大きくしてしまうと、見せたい部分の写真が画面からはみ出たり、うまくレスポンシブにならないと思います。そんな時は、正方形に近いスマホ用のバナー背景に切り替えると良いでしょう。下のビールのバナーは、スマホでは別の背景に切り替わるようになっています。

Golden Liquid

黄金の液体

ビジネスマンにとって、仕事の後のドラフトビールはかけがえないのない、至福のひと時を与えてくれる黄金の液体なのです。

Golden Liquid

黄金の液体

ビジネスマンにとって、仕事の後のドラフトビールはかけがえないのない、至福のひと時を与えてくれる黄金の液体なのです。