NTTドコモ様_dカーシェア
NTTドコモ様_dカーシェア
2015.06.02

先取り感満載!最近よく見るWebデザインの「あしらい」やUIまとめ10選

藤田

こんにちは。デザイナーの藤田です。
今回のブログでは、最近よく見かけるようになった、デザインの「あしらい」やUIを取り上げたいと思います。
まだまだ国内ではスタンダードなデザインではないですが、案件によっては取り入れられるのではと考え、備忘録的な意味合いでまとめました。

皆様のアイディアソースとして少しでも活用していただければ幸いです。

左右の端、もしくは上下左右に配置したナビゲーション

名称未設定-2
http://www.danielspatzek.com/

その他の参考サイト

国内サイトではなかなか見かけないレイアウトですが、ミニマムなデザインとの親和性が高く、とてもクールな印象を受けます。
「ユーザーによってはリンクを見つけられない」というリスクを負ってでも見栄えの優先度を高めたい!という案件でないと採用するのは厳しそうですが、個人的にはとても好きなデザイン手法です。流行してほしいという願いもこめてご紹介しました。

また、こちらの手法の派生だと思うのですが、「Visual Soldier」「Bruce Gillingham Pollard」などに見られるように、コピーライトやテキストを左右に配置する手法の方がデザインには取り入れやすそうな印象を受けました。
(ただし、ナビゲーションを左右に配置するデザインがスタンダードになった際、非クリッカブル要素を同位置に配置するのはとてもリスキーだと思いますが。。。)

ハンバーガーメニューアイコンのオリジナルデザイン

名称未設定-12
https://www.apple.com/

その他の参考サイト

私は何も違和感なくこれらのアイコンがハンバーガーメニューのアクティブボタンと認識できましたが、皆様はいかがでしょうか。
リンクを表すアローアイコンが多様化してきたのと同様に、ハンバーガーメニューアイコンのオリジナルデザインも増えてきました。
ハンバーガーメニューに慣れている層をターゲットとし、デザインに対するプライオリティが高い場合は、デザインの世界観を作り上げるために積極的に取り入れたい手法かと感じました。

また、以下3サイトのようにハンバーガーメニューが開いた際、フルスクリーンにて表示するナビゲーションも最近よく見かけるデザインかと思います。

円形のタブメニュー(またはナビゲーション)

名称未設定-4
http://kurokawawonderland.jp/

その他の参考サイト

私が初めて円形のタブメニューを見たのは、ファレルの「ハッピー」のプロモーションサイトで、時間の遷移を視覚的に表現するために用いられていました。最近は時間の移動に関わらず、よく見られる表現ではないでしょうか。

使いどころにはよりますが、こちらの手法を採用することにより「ボタンを押したから、画面が変わった」というインタラクションがよりダイレクトに感じられるのではと考えております。