レトロにレスポンシブ！ハンバーガーショップのランディングページWebデザイン

Webデザイン３つの良いとこ : 3 Good Point!

レトロでちょっぴりワイルドな風合いが良いですねー。レスポンシブWebデザインを採用しているので、雰囲気はそのままにモバイルにも対応している点もGood。

トップページのみのランディングページなので、今はやりのフラットWebデザインで構成されています。

ボトムに行けば行くほど、ベタ塗りが強くなります。

最下部はこんな感じ。更にレトロに仕上げるために、周りとあわせGoogle Mapsをモノクロに表示させています。これとっても合ってて良い感じ。

モノクロにグーグルマップして表示させる方法ってどうやるの！って思ったんですが、

にて詳解されていました。なるほどねー

position:fixed;を用いて、ページが切れていく演出を行なっています。これ最近よく使われていますが面白いですよね。今度やり方をまとめてみよう。

ちなみに以前紹介した、

この２つのサイトはかなりうまくこの演出を利用しています。

ページローディングがイカしてます。特にスマホで観た際には、ミニマルに表示されてていいですねー！

最近はローディングをCSSやjQueryなどで表現してしまうサイトが多いですが、こちらは昔ながらのgif画像を用いています。

こんな感じ。

こうやって、サイト/ショップイメージに合わせた演出を、小さいところでしっかりと行なっていくのって、Webデザインとっても大事ですよね。かなり印象に残りましたもん。

また、ミニマルにレトロに仕上がっているレスポンシブWebデザインとして、非常に良く仕上がっていると感じました。

今日参考にさせて頂いたサイト

Twitter/FacebookではWebデザインにまつわることから、Web制作に関することを日々配信しています。ぜひフォローしてください！