• 0k
  • 0
デザイン インスピレーション \ 2013年9月11日

お試しあれ!この秋注目のWebデザイン・トレンド

2013年の夏も終わり、再び仕事に燃えている人も多いかと思います。先日掲載した記事の中でも、ビジネスを次のシーズンに備えるヒントをいくつかご紹介しましたが、その一つに「ホームページに新しい情報またはデザインを更新すること」を挙げました。

そこで、せっかくホームページのリニューアルや修正を検討しているなら、まずは最新のWebデザイン・トレンドを知ることから始めてみてはいかがでしょう。以下では、ウェブサイト管理者が知っておくべき今ホットなWebデザインのトレンドをまとめてみました。Wixサイトをカスタマイズする際の参考になれば幸いです!

最新のデザイントレンドを学ぼう

スキューモーフィズムを捨てフラットを採用

スキューモ?フラット??と思った方、以下で詳しく説明しますのでご安心を。スキューモーフィズムとは、実物に似た質感のデザインを指します。例えば、iPhoneのNewsstandアプリを開くと、実際に街角で見かけるようなニューススタンドの木の質感や影、そしてまるで写真ような雑誌を真似たデザインを見ることができます。

iPhoneのNewsstandデザイン

iOS6の「Newsstand」アプリはスキューモーフィズム・デザインの良い例です

ここ何年かAppleのiOSの爆発的な人気に後押しされたこともあり、スキューモーフィズムはWebデザインにおいて大流行していました。しかしMicrosoftが発表した「Metro」と呼ばれる「シンプルで、クリーン、そしてモダン」なユーザーインターフェースの登場により、フラットデザインの人気が爆発的なものになります。フラットデザインとは、シンプルさ、明確さ、ユーザビリティ(使いやすさ)をモットーとしたデザインを指し、具体的には、3Dエフェクトやドロップシャドウを取り払い、必要最小限のパーツのみを使用してデザインします。

このフラットデザインの人気はいまや見過ごすことができません。Appleが採用し9月18日から提供が開始されるiOS7の、よりシンプルでミニマリスティックな新しいデザインからも分かるように、フラットデザインの人気はこれからも低迷することはないようです。

フラットデザインを採用したMicrosoftのWindows 8

MicrosoftのWindows 8がフラットデザインの人気に火をつけました

 iOS6 の旧デザインと iOS7 の新デザインの違い

この画像では iOS6 の旧デザインと iOS7 の新デザインの違いが良く分かります

色使いとフラットアイコン

このクリエイティブイベントをテーマにしたWixのホームページテンプレートでは、サイトの各セクションを効果的に区別するために対照的な色がフラットアイコンに使用されています。余白スペースを多めにとることも、すっきりとエレガントに各アイコンを区別するための有効な手段です。

クリエイティブイベントをテーマにしたWixのホームページテンプレート

画像、テキスト、余白すべてを大きく

今注目されているもう一つのトレンドは、画像とタイポグラフィーを大胆に配置することです。例えば、以下のダンス・スタジオ用ホームページテンプレートは、印象的なダンサーの画像2点と、大きなテキスト、そしてシンプルな図形をバランスよく配置して、ダンサーが今にも動き出しそうなダイナミックな雰囲気を実現しています。レイアウトに余白を多くとり、必要最小限なパーツのみを残すことで、サイトで最も伝えたいメッセージに効果的に焦点を当てることができます。

モダンなダンス・スタジオ用のホームページテンプレート

ダイナミックなグリッドレイアウト

前述したMicrosoftの「Metro」ユーザーインターフェースが、グリッドデザインの人気に影響を与えたことは否めません。今後もさまざまなサイズの正方形・長方形を使用して、コンテンツを配置したウサイトが増加すると思われます。EtchAppsのサイトにも見られるダイナミックなグリッドレイアウトは、洗練されたトレンディーな印象のデザインを実現している良い例でしょう。

グリッドデザインを取り入れたEtchのウェブデザイン

Wixのアフタースクールをテーマにしたテンプレートも、このトレンドを取り入れたウェブデザインの一例といえます。

WixのHTML5ホームページテンプレート

美しい写真をフルスクリーンで背景に

そして何と言っても、美しく大きい写真をフルスクリーンでサイト背景に使用するウェブデザインの人気が、まだまだ衰える様子がありません。このデザインは、デザイン会社や写真家、アーティスト、ファッションまたは個人のポートフォリオサイトなど、さまざまな業種のサイトに最適です。訪問者が最初に目にするランディングページにハイクオリティで美しい写真を使うことで、訪問者が思わず魅入ってしまうサイトを実現し、ブランドメッセージを瞬時に伝える効果があります。以下のかわいいWixテンプレートを参考に、このウェブデザインが与える効果を体験してみてください。

サイト背景に写真をフルスクリーンで使用したHTML5ホームページテンプレート


今すぐ Wixブログ を
無料購読しよう!

Wixブログを購読しよう 役立つ情報をいち早くゲット!

正しいメールアドレスを
入力して下さい

Wixブログを購読 \ 

WebデザインやWix新機能についての
最新情報を無料でお届けします!

正しいメールアドレスを
入力して下さい