Denise Chandler

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

1. メニューがメニューじゃないように和んでる
2. マウスホバーで訪問者の興味を惹く
3. 細部で魅せるWebデザイン

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

• Tweet
• 

トップページのメニューがひっじょーに特徴的なWebデザイン。タイポグラフィ次第でここまでサイト全体と和むものなんですね。ポータルサイトとして参考になるWebデザインです。

初めメニューがメニューだと気づかなかった

サイト初見時、私は宙に漂うこのメニューをメニューだと認識してませんでしたｗ

それはいつもと「違う」からですよね。通常であればメニューとはこういったもの、という既存概念が私の中にはあって、それに従うとこのデザインは私の中でメニューではなかったわけです。

これって、ポートフォリオサイトとかだったり、デザインを魅せたり遊び心を発揮するサイトでは凄く良い試みだと思います。これが不特定多数のデザインより機能性を重視すべきサイトだったりした場合はあまりよいデザインだとは言えませんが、ポートフォリオにとってみれば刺激的で素晴らしいWebデザインだと思います。

みなさんこれ初めにすぐ認識できました？

そして目立たせるメニュー｜マウスホバーで魅せる！

ではそのわかりにくい存在をどう強調するか？マウスホバーです。

上の２つのキャプチャはマウスホバー時のもの。どちらも特徴的で面白いデザインになっていますよね。「O」だけ白で繰り抜いたデザインだったり、縞模様が入るデザインだったり、なんとメニューそれぞれのマウスホバー時のデザインが異なっています。

これはすごい。今まで同列メニューのホバー時の演出は一つだって勝手に思い込んでいた自分がいたと思います。全て大きく、そして違う演出をするからこそこのメニューは映えるんですねー。参考になります。

特徴をしっかり伝えるレスポンシブWebデザイン

レスポンシブWebデザインでマルチデバイスに対応しています。当然モバイル端末になった時も特徴的であるメニューはそのままのスタイル。これは「覚えてもらいやすいな」と思いました。

レスポンシブWebデザインで陥りやすい問題は、ウィンドウサイズが変わると毎回UIが変わって、同じサイトだと認識しずらいものになってしまう場合があることだと思います。尚更のことですが、このサイトはポートフォリオサイト。自分のブランディングがものをいいます。

そのようなサイトで、デザインが毎回変わっていたならば訪問者は戸惑ってしまいますし、自らのブランドを認知させづらいですよね。その点も、この大きなメニューと水色の配色がトップにドドンとデザインされているこのWebデザインは解決させています。

細部で魅せる！ほんと小さいことだけど。

デザインは細部に宿る。いやー、作りこまれてるなーと思う仕様がありますね。

矢印にマウスホバーした際に縞模様を活かすデザインや、

この太陽。スクロールでなんと沈むというパララックス仕様！なんとサイトでパララックス利用されてるのここだけ！すげー細かい！

こういった些細なようなデザインが、サイト全体を特徴付けていますし、それは自らの力をアピールする重要な指標となっているのでしょう。

非常に参考になるポートフォリオサイトのWebデザインでした！

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

• ツイート
•