コンテンツをレスポンシブを見越してうまく整列させるWebデザイン – B-Reel

b-reel-Webデザイン_001

B-Reel

ハイブリッドな制作会社B-ReelのWebデザインをご紹介。レスポンシブを見越してコンテンツをうまく整列させています。

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

  1. レスポンシブを見越してコンテンツをうまく整列
  2. 写真をホバーで目立たせる
  3. ロゴが好きです。

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

レスポンシブウェブデザインを見越してうまくコンテンツを整列させています。サイト紹介では

B-Reel is a hybrid production company.

との説明書きが。まずはWebサイトから、レスポンシブに対応して、どのデバイスからのアクセスにでも応えられる「ハイブリッド」なイメージを表現しているのかも(?)しれません。

にしても、うまく整列されているのがとても参考になるWebデザインです。

 

レスポンシブウェブデザインを見比べる

一般のPC画面ではメインの写真たちには左右に余白があります。

b-reel-Webデザイン_001

 

タブレット端末に対してはメイン写真の余白が消え、詰まっている感じに。

b-reel-Webデザイン_002

スマホサイズでは今まで列として配列されていたのが、行として配列されています。

b-reel-Webデザイン_003

 

なるほど、スマートフォンに対しては、たしかに列配列では横が入りきらないでしょう。行配列にすることで見やすくなっています。

また、メニューも左上にタップ表示のメニューが設置されています。ユーザビリティがしっかり考慮されていますね!

 

マウスホバーで写真を目立たせる

b-reel-Webデザイン_004

写真をホバーすると、その項目以外のものが軽くフェードアウトします。また、コンテンツの名前も少し上に上げることで、よりホバーしている感と目立ち度が増しますね。

小さいところですが、その若干の演出がホバーやクリックを誘惑している気がします。

 

最後に!、個人的にですが、ロゴが好きです。うまく名前を捉えているロゴだと思いました。

 

 

 

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

B-Reel

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

  • このエントリーをはてなブックマークに追加

関連するWebデザイン

コメントをどうぞ。

1日1Webデザイン

あなたにとっての素晴らしいWebデザインが見つかりますように。

Webデザインレビュータグクラウド

ホバーしてね