Imageどんな案件でも使える!最近の事例から見つけたウェブデザインの汎用テク5選こんにちは。良いウェブデザインは、「コンセプトアイデア」×「汎用テクの引き出しの多さ」で決まると思っています。コンセプトアイデアは「どんな見た目のサイトか一言で説明できるか」だと思ってます。フェリシモの500色の色えんぴつなどは、「ひたすら色えんぴつが並んでる」で説明できるし、どんな商品なのかも分かります。http://www.felissimo.co.jp/500/「コンセプトアイデア」がサイトに突破力や勢いをつけるとしたら、使いやすさや安定感を出してくれるのが「汎用テクの引き出しの多さ」です。汎用としたのは、コンセプトアイデアはその案件でしか使えない1回きりのものなのに対して、細かいテクニックは業種を限らず使えて、どんどん蓄積されていくものだからです。前置きが長くなりましたが、そんな感じで汎用的に使えそうなテクニックを最近のウェブサイトからピックアップしてみました。メガメニューに電話番号を大きく載せる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が全盛だったころの演出などがブラッシュアップされて復活してきてるようにも感じます。Commentsレイアウトの決まりごと。SNSキャンペーン方法論と実践」を開催しました。