Creativity Fluid

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

1. 泡だけ残すスクロール
2. 商品がわかりやすいインタラクションデザイン
3. デザイナー紹介ページがブログにもできそうなデザインでGood

私はWebデザインのココを見た！

• Tweet
• 

スクロールで魅せる！ヘッダー部分の泡だけ残すっていうのは考えたなー。ビールっていうものをシンプルにうまくサイトに取り入れているWebデザイン。

泡だけ残すスクロール

トップページからスクロールしていくと泡が良い感じに残って下へスクロールされます。ビジュアルの泡だけうまくスライドされないんですよね、これどうやってるんだろう。

要素を見たら、だいたいこんな感じで実現していました。親要素と子要素のネストで実現できるんですね。

コツは、まず親要素に泡の背景を設定。更にz-indexを-2に設定。親要素自体には実際には以下のように設定されています。

background: #ef4123 url(../../images/img-bubbles-red.png) no-repeat top;
background-size: 385px 465px;
color: #fff;
height: 560px;
overflow: hidden;
position: relative;
z-index: -2;

position:relative;を親要素には適用しないとだめですよ。

そして子要素にグラスの画像と文字、スクロールされて切れていく要素を配置。実際には以下のようになっています。

overflow: hidden;
clear: both;
padding: 70px 0 30px;
position: fixed;
z-index: -1;
width: 100%;

グラスや文字はさらにネストされた子要素に配置されています。んで、こちらの子要素には、position:fixed;とz-index:-1;をかけるのがこの演出を実現させる大事なところ。

泡の箇所のz-indexとposition設定を、通常の切れていくスクロールと変えることで「泡だけ残ってくー」というデザインを実現させているんですね。

商品がわかりやすいインタラクションデザイン

このサイト自体はビールグラスを販売するECサイト。その紹介がシンプルで素敵ですよ。

グリッドでわかりやすく配置されていますが、初期表示はデザインのみが表示されています。それにロールオーバーすることで実際にどのようにデザインされているかが確認出来る形になっています。これなかなか自然で良いロールオーバーだと思いました。

デザイナーの紹介ページが良い

「ABOUT」ではデザイナーが紹介されています。そのレイアウトが良いなーと思いました。はじめは「ブログ？」と思ってしまったデザインなのですが、実際にこのようなシンプルな記事一覧があっても良いんではないでしょうか。グレー背景にボーダーなしの白背景のarticle要素。シンプルにまとまるブログが作れそう・・・。

実際にデザイナー一覧としても写真や社名などがわかりやすく配置されていますよね。

なんだかんだ言ってレスポンシブWebデザインになると映える

このWebデザイン。なんだかんだ言ってもスマホ表示が一番映える気がしました。制限された幅の中ですごくうまくスクロールなどの味が出ていますよ。やっぱりレスポンシブWebデザインということで画像の使用も最低限に抑えています。

こういったちょっとしたところに面白みがあるWebデザイン、良いですねー。勉強になりました。

この素敵なWebデザイン、「いいな」と思いました？
その気持ちをポチッと残しておきましょう！

• ツイート
•