シンプルミニマルなポートフォリオサイトのレスポンシブWebデザイン

northbounddesign-simple-minimal-レスポンシブ-Webデザイン_005

Northbound Design

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

  1. レスポンシブを活かしたグリッド配置
  2. シンプルミニマルWebデザイン
  3. 細部で魅せるインタラクション

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

シンプルなミニマルWebデザインがGoodな、制作会社のポートフォリオサイトのWebデザインをレビュー。レスポンシブWebデザインに対応したグリッドレイアウトが良い味出してます。

制作物一覧をグリッド配置

northbounddesign-simple-minimal-レスポンシブ-Webデザイン_003

サイト中段に構える制作物一覧。グリッド並びで制作物の写真が表示されているのでわかりやすいですね。

写真には枠が表示ないので等間隔で並べられているので、綺麗なギャラリーを見ているような気になります。ホバーすると真っ赤になるのも、刺激的で良いですねー。

ここで注目なのが、レスポンシブWebデザインとの兼ね合い。画面が小さくなると、画像も一緒に小さくなります。

こういった写真を並べるWebデザインでは、スマホサイズになると画像が1段下がってページが長くなるっていうパターンが多いと思うんですが(pinterestとか)、ウィンドウを小さくしても、最高二枚まで1段に表示されます。そしてスマホサイズになると正方形の形が生きてきて、すごいわかりやすい配置になってる!

沢山のコンテンツが並んで煩雑とした感じを与えてしまいがちなグリッド配置ですが、これだけすっきりとしていると良いですねー。

スクロールで切れるページ

northbounddesign-simple-minimal-レスポンシブ-Webデザイン_002

スクロールすることで、サイト説明がされているヘッダー部が切れていきます。この演出を用いたWebデザインは以前にもありました(白を基調とした鋭いスクロールで切れ味を表現Webデザイン)。今回はそれに加えて軽いfadeOutの効果もプラスしています。アピールせずに切れていくスクロール効果は、自然に映りますね。

このページが切れる効果こそが、このサイトにおいてミニマルな雰囲気を出す大きな一因になっている気がする。

スマホを見越したインタラクションデザイン

northbounddesign-simple-minimal-レスポンシブ-Webデザイン_004

トップヘッダーの右サイド、クリック(タップ)することによってメニューが表示されます。

northbounddesign-simple-minimal-レスポンシブ-Webデザイン_001

フッターのセンターに配置されているトップへ戻るボタン。

どちらもミニマルなデザインがされていますが、双方ともにレスポンシブWebデザインによったスマホを見越したデザインがされていますよね。

スマホやタブレットがこれからの主役といわれる中でレスポンシブWebデザインの注目が高まり、サイトも実際に増えてきています。しかしこういった細部のインタラクションを、初めからデバイス端末を見越してデザインしている点がこのサイトの良いところですね。

シンプルミニマルなポートフォリオのWebデザイン、勉強になりました!

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

Northbound Design

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

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

関連するWebデザイン

コメントをどうぞ。

1日1Webデザイン

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

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

ホバーしてね