コンテンツをレスポンシブを見越してうまく整列させるWebデザイン – B-Reel
B-Reel
ハイブリッドな制作会社B-ReelのWebデザインをご紹介。レスポンシブを見越してコンテンツをうまく整列させています。
Webデザイン3つの良いとこ : 3 Good Point!
- レスポンシブを見越してコンテンツをうまく整列
- 写真をホバーで目立たせる
- ロゴが好きです。
私はWebデザインのココを見た!
レスポンシブウェブデザインを見越してうまくコンテンツを整列させています。サイト紹介では
B-Reel is a hybrid production company.
との説明書きが。まずはWebサイトから、レスポンシブに対応して、どのデバイスからのアクセスにでも応えられる「ハイブリッド」なイメージを表現しているのかも(?)しれません。
にしても、うまく整列されているのがとても参考になるWebデザインです。
レスポンシブウェブデザインを見比べる
一般のPC画面ではメインの写真たちには左右に余白があります。
タブレット端末に対してはメイン写真の余白が消え、詰まっている感じに。
スマホサイズでは今まで列として配列されていたのが、行として配列されています。
なるほど、スマートフォンに対しては、たしかに列配列では横が入りきらないでしょう。行配列にすることで見やすくなっています。
また、メニューも左上にタップ表示のメニューが設置されています。ユーザビリティがしっかり考慮されていますね!
マウスホバーで写真を目立たせる
写真をホバーすると、その項目以外のものが軽くフェードアウトします。また、コンテンツの名前も少し上に上げることで、よりホバーしている感と目立ち度が増しますね。
小さいところですが、その若干の演出がホバーやクリックを誘惑している気がします。
最後に!、個人的にですが、ロゴが好きです。うまく名前を捉えているロゴだと思いました。
今日参考にさせて頂いたサイト
Twitter/FacebookではWebデザインにまつわることから、Web制作に関することを日々配信しています。ぜひフォローしてください!
@webhoonetさんをフォロー