シンプルミニマルなポートフォリオサイトのレスポンシブWebデザイン
Northbound Design
Webデザイン3つの良いとこ : 3 Good Point!
- レスポンシブを活かしたグリッド配置
- シンプルミニマルWebデザイン
- 細部で魅せるインタラクション
私はWebデザインのココを見た!
シンプルなミニマルWebデザインがGoodな、制作会社のポートフォリオサイトのWebデザインをレビュー。レスポンシブWebデザインに対応したグリッドレイアウトが良い味出してます。
制作物一覧をグリッド配置
サイト中段に構える制作物一覧。グリッド並びで制作物の写真が表示されているのでわかりやすいですね。
写真には枠が表示ないので等間隔で並べられているので、綺麗なギャラリーを見ているような気になります。ホバーすると真っ赤になるのも、刺激的で良いですねー。
ここで注目なのが、レスポンシブWebデザインとの兼ね合い。画面が小さくなると、画像も一緒に小さくなります。
こういった写真を並べるWebデザインでは、スマホサイズになると画像が1段下がってページが長くなるっていうパターンが多いと思うんですが(pinterestとか)、ウィンドウを小さくしても、最高二枚まで1段に表示されます。そしてスマホサイズになると正方形の形が生きてきて、すごいわかりやすい配置になってる!
沢山のコンテンツが並んで煩雑とした感じを与えてしまいがちなグリッド配置ですが、これだけすっきりとしていると良いですねー。
スクロールで切れるページ
スクロールすることで、サイト説明がされているヘッダー部が切れていきます。この演出を用いたWebデザインは以前にもありました(白を基調とした鋭いスクロールで切れ味を表現Webデザイン)。今回はそれに加えて軽いfadeOutの効果もプラスしています。アピールせずに切れていくスクロール効果は、自然に映りますね。
このページが切れる効果こそが、このサイトにおいてミニマルな雰囲気を出す大きな一因になっている気がする。
スマホを見越したインタラクションデザイン
トップヘッダーの右サイド、クリック(タップ)することによってメニューが表示されます。
フッターのセンターに配置されているトップへ戻るボタン。
どちらもミニマルなデザインがされていますが、双方ともにレスポンシブWebデザインによったスマホを見越したデザインがされていますよね。
スマホやタブレットがこれからの主役といわれる中でレスポンシブWebデザインの注目が高まり、サイトも実際に増えてきています。しかしこういった細部のインタラクションを、初めからデバイス端末を見越してデザインしている点がこのサイトの良いところですね。
シンプルミニマルなポートフォリオのWebデザイン、勉強になりました!
今日参考にさせて頂いたサイト
Twitter/FacebookではWebデザインにまつわることから、Web制作に関することを日々配信しています。ぜひフォローしてください!
@webhoonetさんをフォロー