n2p blog
キャンペーンやSNSの
“ためになる”情報を
執筆しています。
どんな案件でも使える！最近の事例から見つけたウェブデザインの汎用テク５選
更新日:2022.10.18 (公開日:2013/10/22)
こんにちは。
良いウェブデザインは、「コンセプトアイデア」×「汎用テクの引き出しの多さ」
良いウェブデザインは、「コンセプトアイデア」×「汎用テクの引き出しの多さ」で決まると思っています。
コンセプトアイデアは「どんな見た目のサイトか一言で説明できるか」だと思ってます。
例えば、フェリシモの500色の色えんぴつなどは、「ひたすら色えんぴつが並んでる」で説明できるし、どんな商品なのかも分かります。
http://www.felissimo.co.jp/500/
「コンセプトアイデア」がサイトに突破力や勢いをつけるとしたら、使いやすさや安定感を出してくれるのが「汎用テクの引き出しの多さ」です。
汎用としたのは、コンセプトアイデアはその案件でしか使えない１回きりのものなのに対して、細かいテクニックは業種を限らず使えて、どんどん蓄積されていくものだからです。
前置きが長くなりましたが、そんな感じで汎用的に使えそうなテクニックを最近のウェブサイトからピックアップしてみました。
メガメニューに電話番号を大きく載せる
http://www.yamasa.com/
不動産サイトや病院などでは電話番号を大きく掲載してもよいですが、
ブランドサイトでは不釣合いです。一歩引いたメガメニューに掲載は良いバランスだと思います。
ヘッダーメニューでアナウンス
http://www.logos.ne.jp/
最近は、ブランドサイトとECサイトを統合するケースが多いので
シーズンごとの大きな更新などでグローバルメニューで告知するのは効果的ですね。
昔は、ロゴが季節で変わったりグローバルに工夫することが多かったけど、最近は見かけなくなった気もします。
遅延して出現するグローバルメニュー
http://www.mitsu-mame.jp/
縦長サイトでグローバルメニューが追従や切り替わるタイプは増えてきましたが、
ファーストビューから完全に消えたくらいのタイミングから出現する遅延タイプは初めて見ました。
確かに、さっきまで見えていて押さなかったのだから、このくらいのタイミングのほうが適切な気がします。
メインビジュアルを大きく見せられますし。
CSSとJSを使ってニュアンスを出したシンプルデザイン
http://www.ciaopanic-typy.com/styling#cat-ladys
カスタムフィールドでclassを分けてるのかな？
updateの位置が写真ごとに変わったり、ロールオーバーにフェードがついてたり、
HTMLテキストベースで更新性を保ちながらニュアンスが出てます。
ロールオーバーでアニメーション
http://www.okuchiesthe.jp/products/
歯ブラシなど商品が似ていて、一覧ページが単調になる商品も
ロールオーバーでアニメーションさせることで印象的にしています。
まとめ
フラットデザインに代表されるようなシンプルめなデザインが主流なためか
JS+CSSで、ユーザーのアクションに応じて動きを出す工夫が増えてるようです。
フルFLASHが全盛だったころの演出などがブラッシュアップされて復活してきてるようにも感じます。
