• 0k
  • 0
ウェブデザイン \ 2016年12月8日

2017年、注目のwebデザイントレンド

時代遅れのホームページなんて、誰も見たくありません。素敵なホームページを作成するには、まずWebデザインのトレンドを知りましょう。

これまでもWixは、最先端のWebデザイントレンドに合わせたホームページテンプレートを皆さまにお届けしてきました。無料のテンプレートを使い、内容をカスタマイズすることで、まるでプロが作ったかのようなホームページを完成させることができます。

今回は、そんなテンプレートを作った第一線のデザイナーに、今年のデザイントレンドを聞いてきました。ぜひ参考にしてください!

2017年, Webデザイン

モバイル時代の劇的ビフォーアフター

パソコンの画面をスクロールしたいときに、タッチ機能がないのに思わずスクリーンに指を当て動かそうとした経験はありませんか?

携帯でソーシャルメディアのフィードを見る時や、ニュースを一気に流し読みする時の癖がついつい出てしまう事ありますよね。スマートフォンのタッチ画面に慣れてしまった私たちは、すぐに指先で操作したがる傾向にあります。

実際、ホームページもその傾向に合わせどんどん縦長になっています(詳しくは、縦長スクロールサイトに関するブログ記事をご覧ください)。また小さいモバイルで見ても視覚的インパクトを出るように、サイトの背景画像が画面幅いっぱいに表示されたり、書体もそのようなデザインスタイルに合わせ変化してきています。

ずばりホームページの魅力は、もはや詳細な情報を提供することではなく、いかに素早く印象的にメッセージを伝えられるかに移っています。それは、決してコンテンツが大事ではないということではありません。高いレベルのコンテンツをいかに早く、美しく表示するかという「デザイン力」の勝負に移ってきているのです。

WixがWebデザインのトレンドに合わせアップデートした「コンサルタント テンプレート」を見れば、その変化は一目瞭然です。この2年でのWebデザインの変化をよく表しています。

Webデザイン, 昔と今

GIFアニメーションへの回帰

GIFアニメーションに再び注目が集まっています!皆さんも良くご存知のように、GIFアニメーションの乱用はUX(ユーザーエクスペリエンス)を低下させることにつながります。でも効果的に使用することで、一瞬で心をつかむような素敵なデザインにすることが可能です。

GIFアニメーションをサイトにアップする方法はこちらをご覧ください。アニメーション効果を追加することで、洗練されたデザイン演出を行うことができます。ホームページで一番協調したいポイント、伝えたい事を表現する際、是非GIFを活用してみてください。さらなる視覚演出を狙いたい場合は、スクロールエフェクトを利用してください。

またGIFアニメーションを使った先端的な演出手法として、シネマグラフと呼ばれる画像の一部だけに動きを取り入れた表現方法があります。部分的にさりげなくアニメーションを取り入れることで、はっと人の目を引きつける効果が生まれます。

GIFアニメーション

3D幾何学的なデザイン

ここで少しWebデザインの歴史を振り返ってみましょう。

昔は、スキューモーフィズムがトレンドでした。スキューモーフィズムとは、現実世界にある外観や質感を模倣するアプローチを指します。例えば iPhone4の頃のメモアプリを思い出してみてください。メモアプリは、まさしく実際のメモ帳のような見た目でした。しばらくはそれで良しとされてきましたが、今では時代遅れのものとなってしまいました。

次に、Windows 8が採用したモダンUIによって、フラットデザインが一挙に注目を集めるようになりました。鮮やかな原色を基調にしたカラースキームでミニマルなフラットデザインは、Apple、Google、Facebookなどの影響力を持つ企業が次々に採用しました。

そして現在、Googleはマテリアルデザインを推奨しています。マテリアルデザインは、フラットデザインを持つシンプルを維持しながら、ある程度の影、動き、存在感をデザインに加えたものです。まるで真上から机の上の紙を見ているような印象のデザインです。

なぜWebデザインの歴史を振り返ったかというと、マテリアルデザインは「シンプルなままに、立体性を表現する」スキューモーフィズムとフラットデザインのいいとこ取りのようなデザインだからです。フラットデザインのデメリットである「シンプルすぎるが上に、重要な機能が見た目上分からなくなる」「ボタンの存在感がなくなる」などという点を改善したのがマテリアルデザインです。

Googleが推奨するこのマテリアルデザインは、今後もWebデザインの主流になりそうで、特に今年は、3D的表現を用いた美しい幾何学模様やパターンを利用したサイトを多く見る事になりそうです。

Webデザイン, 3D

不文律を打破するタイポグラフィー

Webデザイナーが、画面を覆うような大きい書体を利用するようになってからしばらく経ちました。昔は書体の決まりごとが大変厳格で、直線上に文字を配置しないなんてことはありえませんでした。

もちろん書体の基礎を学ぶことがこのような芸術性を発揮する前提となります。でも、「プロのようにルールを学べば、芸術家のようにそれを破壊できる」とピカソが言ったように、デザイン手法を徹底的に理解し、一度基礎を身につけることができれば、色を変えたり、空間を広げたり、違ったフォントを混ぜたりと、常識の打破にチャレンジすることが可能です。創造性を駆使して、タイポグラフィーで遊んでみてください。

タイポグラフィ, Webデザイン

ポップアートが最先端

最先端のトレンドをとことん追求したいのであれば、ポップで鮮やかな色が来年のトレンドです。もちろんそれぞれのビジネスには、それぞれイメージがあるため、みんながみんな採用できるトレンドではありません。でもこのデザインが、ファン層に受け入れられると感じれば、是非試してみてください。

なにもポップアートの旗手、アンディ・ウォーホルを目指す必要はありません。Wixユーザーであれば以下のようなキャッチ―な写真がフリー写真素材に揃っているので、自由に使って頂くことができます。

ポップアート, Webデザイン

Googleマップをキュートにカスタマイズ

近頃、会社の所在地などを示すのにGoogleマップを表示しているホームページが多いですが、どれも同じデザインで飽きがきませんか?実はWixなら、ちょっとの工夫で楽しい変化を加えることができます。Googleマップレイアウト機能を利用して、ユニークでファッショナブルなデザインを追求しましょう。

Webデザイン, Googleマップ

最後に、今まで紹介してきたトレンドを取り入れたWix最先端テンプレートをご紹介します!
是非、自由にカスタマイズしてみてくださいね:)

デザインスタジオのテンプレート

Creative Studioテンプレート

アーティスト用テンプレート

Graffiti Artistテンプレート

 

同窓会テンプレート

High School Reunionテンプレート

 

結婚式用テンプレート

 

Save the Dateテンプレート

いかがでしたか?
是非、これらのトレンドをあなたのホームページにも取り入れてみてくださいね!

ホームページ作成ならWix

ライター: Wix Team
Wix

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

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

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

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

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

Wixブログを購読 \ 

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

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

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

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