2012年３月に「2012年の流行注意、Webデザイン的トレンド10個まとめ」というエントリーを書いたのですが、それから半年以上が経過し、現在もよく利用されているデザイントレンドをサイドまとめてみました。
海外デザインブログWeavora.comで、デザイン面においてWebサイトでよく見かける８つのトレンドをまとめたエントリー「Web Design Trends We Love」が公開されたいので、今回はご紹介です。
Webデザインの進化は早く、登場してから時間の経つ技法、テクニックもありますが、これらをうまく自分のテイスト、アイデアと組み合わせることでオリジナル性の高いWebサイトを作成できそうです。
詳細は以下から。
確認しておきたい、ウェブデザイントレンドまとめ 2012年後半
1. 単一ページで、充実したコンテンツ作成
これまでは読みづらいということで敬遠されがちだった、シングルページで作成されたサイト、コンテンツをよく見かけるようになりました。スマートフォンなどの普及により、より多くの人が縦スクロールに慣れたことで、ページごとに情報を分けずにまとめて閲覧できるというメリットもあります。
iPad miniの発売開始で話題となっているAppleも、このシングルページを使って商品の機能紹介をしています。
サンプルサイトまとめ
[list type=”star”] [li]Apple – iPhone 5 : おなじみの有名サイトで、シングルページのより効果的な使い方の参考に。[/li]
[li]Fitbit : 体重管理アプリの紹介ページとなっています。[/li]
[li]Cage : 自社サービスをシングルページで紹介しています。[/li]
[li]Squarespace 6 : サイト用テンプレート販売に関する詳細を公開しています。[/li][/list]
参考エントリー記事
[list type=”hot”] [li]縦や横に長いサイト「高級ペライチ」1度は見ておきたいスクロール演出のまとめ32個！ – KAYAC DESIGNER’S BLOG[/li]
[li]オシャレな色使いが魅力、シングルページのウェブサイト60選 – PhotoshopVIP[/li]
[li]シングルページのポートフォリオ向けレスポンシブWebデザイン対応のWordPressテーマ・OnePager – かちびと.net[/li][/list]
2. あらゆるデバイスに対応、レスポンシブWebデザイン
スマートフォンやタブレットによるブラウジングが増えていることで、より幅広い閲覧環境に対応する、レスポンシブWebデザインを導入しているサイトが増えています。
利用しているデバイスに応じて、ウィンドウ幅をフィットさせることで、ユーザーはシームレスにWebサイトを閲覧することができます。
無料フレームワークなども公開されているので、ベースHTMLとして利用してみも良いかもしれません。
サンプルサイトまとめ
[list type=”star”] [li]Nealite: ウィンドウ幅に応じてアニメーション変化する、ナビゲーションメニューが素敵。[/li]
[li]Fork: 幅に応じてグリッド数を変化させる、ユニークなメディアクエリが設定されています。[/li]
[li]Florida Hospital: フロリダにある病院の公式サイトですが、まるでメディアサイトです、。[/li]
[li]Bootstrap: Twitter社謹製、レスポンシブ対応のHTMLテンプレートキット[/li]
[li]Foundation 3.2: 個人的に利用しているHTMLフレームワークで、最近アップデートされ、iPad Mini表示にも対応しています。[/li][/list]
参考エントリー記事
[list type=”hot”] [li]ゼロから始めるレスポンシブWebデザイン入門 – ASCII.jp[/li]
[li]約36時間でレスポンシブデザインを作る！効率最優先で作るため必要だったリソースや情報色々 – バンクーバーのウェブ屋[/li]
[li]1年間、レスポンシブWebデザインのウェブサイト案件を制作してみて思ったこと – YumeiroDesign.jp[/li]
[li]レスポンシブWebデザイン対応、シンプル系WordPressテーマ素材20個まとめ – PhotoshopVIP[/li]
[li]キーワード「レスポンシブデザイン」 – PhotoshopVIP[/li][/list]
3. イメージ写真のフルスクリーン背景デザイン
もともとファッションブランドや写真家などのポートフォリオで利用されていた技法のひとつで、ビジュアル面で勝負したいコンテンツやブランドにてきしたWebサイトデザインを得意とします。
フルスクリーン表示を可能にする無料プラグインなども数多く公開されており、実装も比較的簡単な点もポイントです。
サンプルサイトまとめ
[list type=”star”] [li]Alexarts : 画面いっぱいに散らばったパーツがすべてメニューとなっています。[/li]
[li]Davidia Int : 奥行きのあるインテリア写真を利用したサンプル例。[/li]
[li]SaltSurf : NY発のサーフブランドで、商品を画面いっぱいに表示した、写真集のようなサイト構成が魅力的。[/li][/list]
参考エントリー記事
[list type=”hot”] [li]イメージ写真を使った、印象的なフルスクリーンWebサイトデザイン30個まとめ – PhotoshopVIP[/li]
[li]フルスクリーン写真を利用した、印象的なWebサイトデザイン50個まとめ – PhotoshopVIP[/li]
[li]キーワード「フルスクリーン」- PhotoshopVIP[/li][/list]
4. アニメーション豊かな、パララックスエフェクト
パララックスとは、「同方向に移動する2つの物体が、異なる速度で移動する事象」となっており、ありふれたWebサイトデザインにスパイスを加えてくれる、視覚的にたのしむデザインエフェクトです。主要ブラウザでのサポートがされて以来、徐々に数が増えており、現在は多くのユニークサイトが公開されています。
サンプルサイトまとめ
[list type=”star”] [li]Ben the Bodyguard: ゲーム画面の様なストーリー仕立てで、アプリ紹介を行うサイト。[/li]
[li]TokioLab: するすると巨大タイポグラフィーが落ちてくるエフェクトが仕掛けられたサイト。[/li]
[li]Inzeit: コンテンツごとにアニメーションの異なるパララックスエフェクトを使ったサイト。[/li]
[li]Q music: スクロールすると潜水艦が深海へと潜っていきます。[/li][/list]
参考エントリー記事
[list type=”hot”] [li]ダイナミックなエフェクトが魅力、パララックスWebデザインまとめ(+無料プラグイン9個) – PhotoshopVIP[/li]
[li]パララックスサイトの作り方の初歩 – WEB Drawer[/li]
[li][JS]スクロールを楽しくするパララックスを簡単に実装できる超軽量スクリプト -skrollr – collis.com[/li]
[li]テキストや画像でパララックス効果のあるコンテンツを実装するjQueryコード – かちびと.net[/li][/list]
5. Modern UIタイプ、レンガ状ボックスレイアウト
レンガ造りの壁をイメージするレイアウトで、サムネイルや見出しタイトルなどをボックス枠で整列された、ユニークなレイアウトです。Windows 8のModern UIなどにも取り入れられており、そのシンプルなデザインがユーザーにも、分かりやすく情報を伝えます。
レスポンシブWebデザインに対応した、アニメーションを組み合わせたMansoryプラグインなども公開されています。
サンプルサイトまとめ
[list type=”star”] [li]Dynamlt: サムネイルの他に、カラフルなテキストボックスが印象的。[/li]
[li]Lithhum: ヘッダー部分にバナーとスライダーを組み合わせた、ダイナミックなビジュアル。[/li]
[li]Pepsi: Modern UIをそのまま再現した様な縦型レイアウト。[/li][/list]
参考エントリー記事
[list type=”hot”] [li]アイテムをタイル状に並べる新しいjQueryプラグイン「Freetile」 – phpspot開発日誌[/li]
[li]Automatic Image Montage with jQuery – Codrop[/li]
[li]グリッド＆レスポンシブデザインの組合わせ、ユニークなWordPressテーマ素材30個まとめ – PhotoshopVIP[/li][/list]
6. オーバーサイズな、巨大デザインイメージの利用
Mac OS Xで使われている、ディテールにこだわったアイコンデザインが、もともとトレンドの始まりではないでしょうか。Mac用アプリケーションなどの紹介、販売ページなどでよく見かけます。このトレンドは、確実にiphoneアプリのデザイン制作現場にも流れ込んできているようです。
サンプルサイトまとめ
[list type=”star”] [li]Zennaware: 立体的なロゴ型アイコンをでかでかとレイアウト。[/li]
[li]Panic: 並べられた巨大アイコンにホバーすると、機能紹介をツールチップで表示します。[/li]
[li]Pilctu <3: iPhone本体をそのまま大きくヘッダーに表示したインパクトデザイン。[/list]
参考エントリー記事
[list type=”hot”] [li]クオリティー抜群、素敵iOSアプリ用デザインアイコン45個まとめ – PhotoshopVIP[/li]
[li]キーワード「リアルアイコン」 – PhotoshopVIP[/li]
[li]グリッド＆レスポンシブデザインの組合わせ、ユニークなWordPressテーマ素材30個まとめ – PhotoshopVIP[/li][/list]
7. シンプル、シンプル、シンプル
2012年に入って特に見かけるようになった、余計な物を一切省いたシンプルなミニマルデザイン。ユーザーが迷うことなく操作できるメリットもあり、通常巨大なタイポグラフィーやワンポイント程度のデザインがレイアウトされています。
サンプルサイトまとめ
[list type=”star”] [li]Basecamp: 簡単な詳細と登録フォームのみで構成されたレイアウト。[/li]
[li]Dropbox: おなじみのシンプルすぎるログイン画面です。[/li]
[li]HTC: 商品にフォーカスし、分かりやすさを追求したレイアウト。バナー位置にも注目です。[/li][/list]
参考エントリー記事
[list type=”hot”] [li]効果的なミニマルデザインと退屈なデザインの境界線 – Webクリエイターボックス[/li]
[li]シンプルさが美しいミニマルデザインのウェブサイト35選 – SEO Japan[/li]
[li]ミニマルデザインを極める、WordPressテーマ素材30個まとめ – PhotoshopVIP[/li]
[li]シンプルで万能、ピクトグラムのミニマル系無料アイコン素材25個まとめ – PhotoshopVIP[/li]
[li]「シンプル・イズ・ベスト」、ミニマルデザインの無料WordPressテーマ素材20個まとめ – PhotoshopVIP[/li][/list]
8. Webフォントの充実
デザイナーが限られたフォントスタイルから選択していた時代は終わったようです。Google WebフォントやAdobe監修のTypeKitの普及により、星の数ほどあるコレクションから、デザインに沿ったフォントを選ぶことができるようになりました。それにより多くのWebサイトが、タイポグラフィーにこだわりを魅せています。
Typographicaなど、タイポグラフィーデザインを全面に押し出したサイトなどもあり、デザイン性にも優れています。
サンプルサイトまとめ
[list type=”star”] [li]NiceHair.org: ヘッダー見出し文など至るところにWebフォントを利用しています。[/li]
[li]Bitfoundry: レトロデザインにぴったりな縦長スタイルのWebフォントを利用したWebサイト。[/li]
[li]Just My Type: Typekitフォントの素敵な組み合わせを紹介しているブログサイト。[/li][/list]
参考エントリー記事
[list type=”hot”] [li]Webデザイナー（私）によるタイポグラフィーレイアウトの注意書き – ウェブデザインレシピ[/li]
[li]タイポグラフィーを効果的に使った、オシャレなWebサイトデザイン21個まとめ – PhotoshopVIP[/li][/list]
