Oliver Russel

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

1. レスポンシブWebデザイン対応の可憐なメニュー
2. 余白にカラフルな丸が絡め合う
3. スライドショーが面白い

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

• Tweet
• 

こんな明るく映るWebデザインは久々に観ました。余白とカラフルな丸を絡めてシンプルに仕上げたWebデザインをレビュー。

レスポンシブWebデザイン対応の可憐なメニュー

メニューがウィンドウサイズによって、角度が変わります。さり気なさが良いですし、むしろモバイル端末サイズのほうが見栄えが出てくるかのようにデザインされています。上図がPCサイズ。

上図はスマホサイズ時のキャプチャ。ウィンドウサイズによってロゴも文字が回り込んでいます。うまいこと可変の良いところを利用していますね。

レスポンシブWebデザインで、ウィンドウサイズが変更しても色々な事情からロゴが変に変わらずに、うまくまとまっていないことってたまにあります。が、このレスポンシブWebデザインでは、ロゴ文字がイメージに回りこんで、更にロゴのbottomをメニューの高さと合わせることによって、見事にまとまらせています。

トップヘッダーの薄いグレーバーも、そんなカラフルなメニューを”締めて”いて良いですよね

余白にカラフルな丸が絡め合う

ロゴに丸が利用されているように、「丸・円」がこのサイトの一つのコンセプトですね。絶対に利用したいところ。

そんな丸を各所でうまく利用しています。 見出しではシンプルな丸背景に文字が。そして、サイト中段のリストがうまいなーと思いました。 上図のようにリストごとに半円がスタイル化されています。こういったちょっとしたところも合わせることで、サイトにまとまりが出ますよね。

スライドショーが面白い。

サイト下段では、手がけた制作事例を観ることができますが、このスライドショーの魅せ方が面白い。

各制作物ごとにページは用意されておらず、トップページ内で完結して見せていますが、その魅せ方。 スライドショーで制作物が見れますが、そこには文字が多く記載されています。それをすぐに読むのは困難なので、このスライドショーには「再生・一時停止ボタン」がついています。

一時停止している状態では一枚ずつ観ることももちろん可能。このように利用ユースに従ってデザインを施しているところは見習うべきところです・・・。 このスライドショーは、モバイル端末サイズにすると更に面白い演習をしますのでぜひ見て下さいね。

余白とカラフルな丸を絡めて、シンプルに仕上げたレスポンシブWebデザインでした。明るいサイト、の良い例ですね！

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

• ツイート
•