2018年のメインストリームになる?注目のWebデザイントレンド5選
Webデザインの業界では、毎年さまざまなトレンドが出現しています。
その中でも、フラットデザインやマテリアルデザインなど、時を経た現在でも人気を博し続けているトレンドは、数多く存在しています。
2017年にもさまざまなWebデザインのトレンドが登場していますが、その中でも2018年のメインストリームになりそうなトレンドにはどのようなものがあるでしょうか。
今回は、注目の重要Webデザイントレンドをご紹介します。
要注目の重要Webデザイントレンド5選
1. レインボーカラー
フラットデザインやマテリアルデザインでは、単色のUIを作り上げるのがよしとされてきました。
しかし、現在ではその潮流は真逆を行っているかもしれません。
GitHub Universe / スクリーンショット:2017年10月
2016年頃から、デュオトーンやグラデーションがWebデザインのトレンドとしても注目を集めるようになり、2色以上の色の組み合わせをあたかも1色のように扱うようなホームページが増えてきました。
2017年後半から、その流れはますます加速し、とうとう*「レインボーカラー」*を採用するホームページが台頭してきています。
レインボーカラーと聞くと、もしかしたらデザイナーの中には「あまりよくないデザイン」だと思われるかもしれません。
実際、単色をメインカラーにしたホームページは、非常に個性があり、イメージもはっきりします。
しかし、レインボーカラーを活用することで、「万能」で「オールマイティ」なイメージを演出することができます。
Untold / スクリーンショット:2017年10月
昨今登場した「レインボーカラー」の特徴として、ダークな背景を好んで選んでいる傾向も、見逃してはいけません。
レインボーカラーの中には明度の高い色も含まれるので、白背景よりも黒背景のほうがはっきりと映るのです。
また、レインボーカラーは、CSSやJavaScriptを使ったアニメーションとも非常に相性がよく、色を動かすことによって注目を惹きつけることもできます。
ユーザーの注目を集めたいところを中心に、レインボーカラーを活用してみるといいでしょう。
2. 境界線を超えたレイヤーテキスト
Matter Planning and Design / スクリーンショット:2017年10月
間違いなく今後人気になっていくであるトレンドの一つが、境界線を超えてテキストをはみ出すように配置するレイヤーテキスト効果です。
このレイアウトは、ユーザーの視線を引き付けるといった効果があるだけでなく、コーディングが簡単で、あっという間に作れてしまうというメリットもあります。
Ready Set Rocket / スクリーンショット:2017年10月
このトレンドの特徴は、写真とホワイトスペースの両方にテキストを重ねるというだけのものです。
この雑誌のようなレイアウトは、思いついてみれば何のことはないのですが、ブロックを重ねていくように配置するWebデザインレイアウトではこれまで無縁だったのかもしれません。
しかし、ありがたいことに、2017年上半期にブルータルデザインやブロークングリッドレイアウトが登場したことで、*「枠を超える」*という発想にデザイナーの抵抗が少なくなったことで、こうしたトレンドが生まれたのではないでしょうか。
3. オーバーサイズドフォトコンテンツ
Westward Leaning / スクリーンショット:2017年10月
実生活の道具の実際の大きさよりも、限りなく大きく見せるような手法も、注目に値するでしょう。
オーバーサイズでホームページに写真を登場させるということ自体は、取り立てて新しいことではありませんが、ホワイトスペースを大きく活用してショーケース風に見せる手法は、斬新です。
Colour on Code / スクリーンショット:2017年10月
プロダクトを紹介するようなホームページであれば、プロダクトをオーバーサイズに表示して、他のエレメントを小さくし、ホワイトスペースを存分に取ることで、プロダクトの写真に自然と視線を集めることができます。
プロダクトの写真が主役になるからです。
また、プロダクトの写真が大きいと、小さな部分(ディティール)を存分に確認することができます。
そのため、最近ではコマースサイトなどでもできるだけ大きな写真を使っているケースが多くなっています。
4. 極端に太いタイポグラフィ
Sézane / スクリーンショット:2017年10月
タイポグラフィはいつでもデザイナーの注目の的です。
時代やトレンドによって、細くなったり、太くなったりもするようですが、これからしばらくは極端に太いタイポグラフィが流行するかもしれません。
iPhone 8 / スクリーンショット:2017年10月
その先駆となっているのが、Appleのホームページです。
Appleのホームページといえば、これまでは究極的に細いSan Franciscoフォントを活用していましたが、iPhone XやiPhone 8などの新製品のホームページでは、打って変わって極太のタイプフェイスを採用しています。
細いフォントは繊細で華麗ではありますが、弱々しい印象を与えることもあります。
一方で、太くてどっしりしたフォントであれば、堂々としており、大胆で、他に勝るものがないほどの強力なブランドイメージを構築することができます。
5. ホローシェイプ
brüdert / スクリーンショット:2017年10月
2017年は、さまざまなホームページで幾何学的な図形に出会う年だと言っても過言ではないでしょう。
しかし、取り立てて顕著なのは、ホローシェイプと呼ばれる図形が多用されていることです。
*ホロー(Hollow)*とは、空疎で中身のないという意味です。
これは比喩的ではなく、実際に中抜きの、ボーダーだけでかたどられた図形を使ったホームページがたくさん誕生しました。
cwart / スクリーンショット:2017年10月
ホローシェイプはもともと、アイコングラフィックの世界で中を「塗り」にするか、それとも線だけにするかで揉めていたころに誕生したものです。
アイコンで言えば、細い線だけを使って表現するようなリニアアイコンは、以前から存在します。
2017年には、そうしたホローシェイプを太い線を使ってロゴデザインに活用したり、イラストで活用するような例も多く見られました。
ホローシェイプはIllustratorなどを使って簡単に作成することができるので、デザインコストもかからず、デザイナーにとってもお得だと言えるでしょう。
まとめ
2017年にもさまざまな注目トレンドが登場しましたが、視線を掴むようなトレンドはありましたか?
デザイントレンドは大きく分けると「カラー」「レイアウト」「タイポグラフィ」に大別できますが、これらのトレンドを組み合わせて使ってみるのも面白いでしょう。
しかし、デザイントレンドに囚われすぎて、UXを低下させてしまうと、台無しになってしまいます。
適度な範囲で、ユーザー体験を考慮しながら、取り入れていくのがよいでしょう。
- UI
- UIとは、ユーザーインターフェイス(User Interface)の略で、ユーザー(使い手)とデバイスとのインターフェイス(接点)のことを意味します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- CS
- CSとはCustomer Satisfactionの略称で「顧客満足度」を意味します。顧客との関係維持、サービスの発展に関するマーケティング戦略に関わる用語です。
- JavaScript
- JavaScript(ジャバスクリプト)とは、Webサイト上でさまざまなインタラクティブな動きを実現するために用いられる言語
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- テキスト
- テキストとは、純粋に文字のみで構成されるデータのことをいいます。 太字や斜線などの修飾情報や、埋め込まれた画像などの文字以外のデータが表現することはできませんが、テキストのみで構成されたテキストファイルであれば、どのような機種のコンピューターでも共通して利用することができます。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- フォント
- フォントとは、同一の特徴を持った文字の形状を一揃いでデザインしたものです。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- ページ
- 印刷物のカタログやパンフレットは、通常複数のページから成り立っています。インターネットのホームページもまったく同じで、テーマや内容ごとにそれぞれの画面が作られています。この画面のことを、インターネットでも「ページ」と呼んでいます。ホームページは、多くの場合、複数ページから成り立っています。
- レイアウト
- レイアウトとは、もともと「配置」や「配列」を指す語です。ここでは、「ホームページレイアウト(ウェブレイアウト)」と呼ばれる、ホームページにおけるレイアウトについて説明します。
- UX
- UXとは、ユーザーエクスペリエンス(User Experience)の略で、ユーザーが製品・サービスを通じて得られる体験を意味します。似たような言葉に、UI(ユーザーインターフェイス、User Interface)がありますが、こちらはユーザーと製品・サービスの接触面を指した言葉です。
おすすめ記事
おすすめエントリー
同じカテゴリから記事を探す
カテゴリから記事をさがす
●Webマーケティング手法
- SEO(検索エンジン最適化)
- Web広告・広告効果測定
- SNSマーケティング
- 動画マーケティング
- メールマーケティング
- コンテンツマーケティング
- BtoBマーケティング
- リサーチ・市場調査
- 広報・PR
- アフィリエイト広告・ASP
●ステップ
●ツール・素材
- CMS・サイト制作
- フォーム作成
- LP制作・LPO
- ABテスト・EFO・CRO
- Web接客・チャットボット
- 動画・映像制作
- アクセス解析
- マーケティングオートメーション(MA)
- メールマーケティング
- データ分析・BI
- CRM(顧客管理)
- SFA(商談管理)
- Web会議
- 営業支援
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング
- フォント
- 素材サイト
●目的・施策
- Google広告
- Facebook広告
- Twitter広告
- Instagram広告
- LINE運用
- LINE広告
- YouTube運用
- YouTube広告
- TikTok広告
- テレビCM
- サイト制作・サイトリニューアル
- LP制作・LPO
- UI
- UX
- オウンドメディア運営
- 記事制作・ライティング
- コピーライティング
- ホワイトペーパー制作
- デザイン
- セミナー・展示会
- 動画・映像制作
- データ分析・BI
- EC・通販・ネットショップ
- 口コミ分析・ソーシャルリスニング