流行している2016年のWEBデザインの手法 10選

時が経つのは早いもので、、、もう9月ですね。どうも、ANDSPACE ウェブ担当の後藤です。 最近はもっぱらコーディング業務が多いのですが、 今年に入ってよく見かける手法やトレンドをまとめてみました。

01. マイクロインタラクション

マイクロインタラクションは、大きなアニメーションに比べ、ユーザーがあまり考えることなく操作できる、ほんのわずかな動きが特長。 メリット

• サイトをどのように扱えばよいか、 ユーザーに分かりやすく伝えることができる,
• メインとなるコンテンツの邪魔をせずに、魅力的なデザイン要素を追加できる
• ブランディングの強化 , コンテンツ遷移を予想できる など

02. カード/モジュール・レイアウト

名刺やトランプなどのように、ひとつのトピックに関連する情報を、一か所にまとめて整理する メリット

• 説明をする必要がなく、直感的で理解しやすい
• サイトコンテンツを、検索しやすく分けて整理することができる
• レスポンシブデザインに最適。異なるブレイクポイントに自動でレイアウトが変化する

03. ミニマル・デザイン

デザイン要素をうまく取り除くことでシンプルでミニマルな見た目を作成する。 メリット

• ひと目で、UIの機能やコンテンツ、デザイン要素の配置場所を理解できる
• ビジュアル中心のコンテンツを強調可能
• 文字が読みやすい

04. フラット & マテリアル・デザイン

マテリアル・デザインは、Googleが作成したデザインガイドライン。　フラットデザインと似ているが新しいデザイントレンドです。 メリット

• よりモダンな見た目
• ページ読み込み速度の向上
• 直観的に操作可能

05. リッチなアニメーション

クルクルと回る小さなローディング・アニメーションから、背景全体を動かすような大きなエフェクトまで様々 メリット

• 静止画に比べより魅力的な体験を提供できる
• 動きを加えることで、特定の要素だけに注目を集めることができる

06. 印象的なタイポグラフィー

デバイスの高解像度化、回線の高速化が進みWEBフォントの登場でタイポグラフィーを作成できるようになった メリット

• 高解像度の高いディスプレイでも対応可能
• タイポグラフィーによるブランドイメージの向上
• 文字テキストで作成されたコンテンツを強調できる

07. 鮮やかな配色

以前にくらべより鮮やかなカラーリングをつかったサイトが増えています。淡い繊細なグラデーションが特徴。 メリット

• 異なる色合いとグラデーション
• ビジュアル中心のコンテンツを強調可能
• 文字が読みやすい

08. 1ページレイアウト 縦に長いスクロール

最近ではよくみかける手法で、すでに定番となりつつある。ストーリーをもたせたコンテンツと相性拔群。 メリット

• モバイルにもすぐに対応可能
• 訴求力を高める、ストーリー性のあるコンテンツが作れる
• 文字が読みやすい

09. 動画を使用したデザイン

高速でインターネットを利用出来る環境が整ってきた今なら、動画形式のサイトを取り入れても良いのかもしれません。今後も増え続ける見込みがある手法。 メリット

• サイトの滞在時間をかなり増加させます。
• 訴求力を高める

10. イラストレーション

イラストを利用したテクニックとして、パラパラ漫画のようなコンテンツの人気が高まっています。 メリット

• サイトに個性を持たせる
• デザインにおいて自由な発想を表現可能
• メッセージやコンセプトを明確に表現ができる