株式会社LIG (リグ) - 台東区上野にあるWeb制作会社

「先生、怒らないからやった人は名乗り出てください」 室伏広治が手を上げたので、本当に怒らない先生。

  2. LIGブログ
  3. Web制作
  4. 先取り感満載！最近よく見るWebデザイン...
Web制作

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

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

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

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

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

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

その他の参考サイト

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

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

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

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

その他の参考サイト

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

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

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

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

その他の参考サイト

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

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

斜めに入った境界線

名称未設定-5
http://www.spicebox.co.jp/fresh/

その他の参考サイト

CSSのみで表現できるデザインが増えたことにより、生まれた手法かと思います。
アシンメトリーにすることでデザインにアクセントがつき、境界線を斜線にすることによりユーザーの視線をコントロールできるメリットがあるかと感じております。
こちらはぜひ取り入れていきたい手法です。

実装をお考えの方はこちらの記事が参考になるかと思います。

「CSSのみで背景を全体的に斜めにして傾斜をつける方法」
http://theorthodoxworks.com/web-design/slanting-background-css/

スワイプできるタブメニュー

名称未設定-6
http://www.yahoo.co.jp/

その他の参考サイト

キュレーションメディアのアプリでは前からよく見られていた手法ですが、スワイプしないとメニューの内容が見られない、そもそもスワイプに気づかないというデメリットがあることから、スワイプメニューの実装をためらっていた方は多いのではないのでしょうか。

私は上記の経験から、Yahoo!のモバイルサイトがリニューアルでスワイプメニューを採用したことには少なからず驚かされました。
これでこちらのUIがよりスタンダードなものになると、デザイナー泣かせの「スマホサイトの複数タブメニュー」のデザインも少し気が楽になりますね。

マージンを持たない異なるサイズのブロック要素を並べるレイアウト

名称未設定-7
http://www.aquest.it/en

その他の参考サイト

タイトルが分かりづらくて申し訳ございませんが、タブレットビューを想定し、クリッカブル領域を広げるために生まれた「Big UI」から派生したレイアウトかと思います。

こちらのレイアウトは要素が全てクリッカブル領域に見えてしまう懸念がありますが、非クリッカブル領域とのデザインの対比を上手く表現できれば、とても洗練された印象のデザインに仕上がるかと思います。

ヘッダー下に配置するローカルナビゲーション

名称未設定-8
https://www.yanmar.com/jp/technology/

その他の参考サイト

国内サイトにて多く見かける手法ですが、こちらもタブレットビューを想定し、中ページでもコンテンツ領域を広く表示したい際に理にかなったレイアウトかと思います。
また、サイトの世界観を保持するためにパンくずを配置しないサイトが増えておりますが、こちらの手法を採用することにより、パンくずを配置しなくても、閲覧しているページの階層を把握できるメリットもあります。

ペンキで書いたようなフォントを使用したメインコピー

名称未設定-9 - コピー
http://www.hochburg.net/de

その他の参考サイト

グランジスタイルのデザインにハンドライティングのタイポグラフィーを使用するスタイルは以前から見受けられましたが、洗練された印象のデザインにアクセントとしてハンドライティングのタイポを用いることで、インパクトの強いデザインになります。

「アクセントの足し引き」には絶妙なバランス感覚が要されるとは思いますが、パーソナルブランディングサイトやアーティストのポートフォリオサイトなどの自由度が高く、他者と差をつけたい場合には効果が絶大な手法ではないでしょうか。

以下、手書きフォントがまとめられているおすすめ記事です（利用する際はライセンスをしっかり確かめてください）。

「これだけあればOK！手書きフォントのまとめ」
http://kobotake.com/handwritingfont

中心線を強く意識させるグリットを採用したレイアウト

名称未設定-10 - コピー

その他の参考サイト

ターゲットユーザーが男女の場合や、対比できるものを訴求したい際に有効な表現ではないでしょうか。
以前より見かける表現でしたが、よりリッチなアニメーション表現を行うサイトを最近よく見かけるようになった気がするのでご紹介させていただきました。

グリットを若干崩したレイアウト

名称未設定-11 - コピー

その他の参考サイト

紙面のデザインにはよく見かけられた手法ですが、Webにもこのような表現が多く見かけられるようになりました。
グリットを崩すことにより視線の流れを誘導でき、アクセントを作れる利点がある反面、表現として尖ったデザインに寄りすぎるところがあり、実案件では使いづらいと考えている方も多いのではないでしょうか。

上記の懸念を上手く解消したこちらのサイト「新生活に。NHK」はアニメーションも含め、とても素晴らしいなと感じております。

まとめ

いかがでしたでしょうか？
まだまだ、実案件で使用するには障壁の高そうなものもありますが、良いと思うものに関しては、なぜ良いのかという点と、そのデザイン手法がターゲットとなるユーザーにもたらすメリットをしっかりと説明し、スタンダードな手法になる前に積極的に取り入れていきたいと思います。
皆様もぜひ挑戦してみてください。

また、「こんなデザインが最近気になる」といったコメントもお待ちしております。

 

【デザイナー藤田のイケてるデザインまとめ】

※ 【2015年度版】イケてるデザインの国内コーポレートサイトまとめ

※ Buzz施策だけでなくデザインも参考になるキャンペーンサイト15選

※ 魅力を再発見！スプラッシュページを設けたWebサイト15選

※ デザインの参考にしたい素敵な日本語のロゴ20選

※ スペースを活用！メガメニューを使用した国内参考サイトまとめ