デザイナー必見!2018年のWebデザイン最新トレンドまとめデザイナー必見!2018年のWebデザイン最新トレンドまとめWebデザインは1年単位で流行が変わるため、常に最新のトレンドにキャッチアップし続けなければなりません。デザインの流行は技術やデバイスの進化や環境の変化が影響することも多く、ユーザビリティやUI/UXの観点からも最新のデザインを取り入れることはとても大切なことです。今回は、2018年に流行するであろうWebデザインについて参考になるサイトと合わせてご紹介していきたいと思います。2019年のWebデザイントレンドに関する記事を公開しました。最新情報を知りたい方はこちらをご覧ください。2019年に流行するWebデザインの最新トレンド18個まとめそろそろ2018年も終わりを迎え、2019年がやって来ようとしています。ブロークングリッドレイアウトブロークングリッドレイアウトは、綺麗に整えられたグリッドレイアウトをあえて崩すことによってオリジナリティを高めたデザイン手法です。要素が綺麗に並べられたデザインは見た目も美しく、綺麗なデザインに仕上げることができますが、どこか単調で、オリジナリティを出しづらかったりします。ブロークングリッドレイアウトでは、要素を重ねたり、ずらしたり、既存の枠からはみ出すことによって躍動感の溢れるデザインのWebサイトを作ることができます。Layout)を取り入れたデザインのWebサイトが増えてきました。Multiplyhttps://lifeworthpursuing.com/ブロークングリッドレイアウトのテクニックを使って画像や四角いブロックを重ねたり、ずらすことによってデザインのオリジナリティが高められているWebサイトです。ブロークングリッドレイアウトの特徴でもある躍動感が上手く演出されていて、楽しさや活発さが感じられるデザインになっていますね。Seagullsページ全体のレイアウトを自由に組み、オリジナリティが全面に押し出されたデザインです。無秩序に配置されていますが、全体でバランスが取れているため美しさが感じられますね。写真を整列せずに配置することによって、1つ1つに注目を集めることができます。要素をうまく重ねたり、ずらして配置することがポイントですね。フラットデザイン2.0フラットデザイン2.0は、フラットデザインの良さを活かしつつも、ユーザビリティを考慮してより分かりやすく、使いやすいデザインに仕上げる手法です。セミフラットデザインと呼ばれたりもします。フラットデザインは見た目がとても美しく、レスポンシブデザインとの相性もいいことから多くのサイトで使われていますが、どこがクリックできるのか分かりづらかったり、ユーザビリティの面で課題もあります。そこで提唱されたのがフラットデザイン2.0という考え方で、マテリアルデザインのような影や装飾を施すことによって、フラットデザインの特徴はそのままに、ユーザビリティも高いデザインに仕上げることができます。フラットデザインとマテリアルデザインのいいとこ取りしたデザイン手法ですね。関連記事フラットデザイン2.0は2018年のトレンドとなるかフラットデザインはミニマリズムを追求したシンプルなデザインに仕上げるデザイン手法ですが、一方でユーザビリティの面での課題などがありました。AppStoreフラットデザイン2.0の考え方は、すでにAppleのデザインにも取り入れられています。カードUIにはうっすらとシャドーがかかっており、背景レイヤーと分離されていることが明確になっている他、「タップできる」ということをユーザーによりしっかりと伝えられるように工夫してありますね。Kolodohttps://www.kolodo.com/こちらのサイトでは、シャドーやグラデーション、マイクロインタラクションをフラットデザインに取り入れることによって、使いやすく、分かりやすいWebサイトに仕上げられています。フラットデザインの特徴である、シンプルで洗練されたイメージを保ちながらユーザビリティも向上させることができている所がポイントです。鮮やかなグラデーションInstagramのアイコンのように、鮮やかな配色で作られたグラデーションを用いるデザインが増えてきています。グラデーションを前面に押し出すデザインは一昔前に流行し、一度は廃れたデザイン手法ではあるのですが、デザインのトレンドが一周し、最近では改めてグラデーションを取り入れたデザインのWebサイトが増えてきています。グラデーションはWebサイト全体の印象を大きく変える影響力を持っているため、使い所には気をつけないといけませんが、上手く取り入れることで魅力的なWebサイトを作ることができます。関連記事おすすめのCSSグラデーションジェネレーター13個まとめグラデーションはWebデザインにとって欠かせない要素の1つであり、様々なWebサイトに取り入れられています。trends成安造形大学http://www.illustration.seian.ac.jp/パララックスのアニメーションとともに表示されるコンテンツは、全体を通してグラデーションを取り入れたデザインとなっています。グラデーションを取り入れることによってサイトが魅力的な雰囲気に包まれています。ファーストビューのコンテンツにグラデーションを用いたデザインは多く見かけられますが、コンテンツ部分にグラデーションを取り入れている点が特徴的です。Spotifyhttps://www.spotify.com/jp/音楽ストリーミングサービスのSpotifyの公式サイトにも鮮やかな配色のグラデーションが使われています。新しい音楽を聴く時のワクワクする気持ちが表現されたようなデザインで、SpotifyのサービスイメージとぴったりのWebサイトとなっています。Globekithttp://globekit.co/データを可視化するGlobekitというツールのウェブサイトです。固定された背景部分には紫色が印象的なグラデーションの上に地球をモチーフにしたアニメーションが表示されています。グラデーションを取り入れることによって、高級感や特別感が際立ったWebサイトになっていますね。more」という言葉に象徴されるように、余計なデザインを加えないことによって洗練されたイメージに仕上げるデザイン手法です。ここ数年ミニマルデザインが流行していますが、2018年もその流れはむしろ強くなるでしょう。引続き多く取り入れられているフラットデザインと相性がいいという点もミニマルデザインが人気の理由の1つです。関連記事とにかくおしゃれ!ミニマルデザインの特徴と参考になるサイトまとめミニマルデザインは、ページを構成する要素を最小限に絞ったシンプルなページを作るためのデザイン手法です。trendsMakrhttps://makr.com/商品の画像と説明文が並べるだけというとてもシンプルなデザインですが、上品さや高級感が上手く演出されており、洗練されたデザインのWebサイトです。ミニマルデザインのWebサイトを作る場合、画像選びも重要な要素となります。落ち着いた雰囲気に合わせて背景画像を白くしたり、できるだけ余分な要素が写り込まないようにすると、全体のデザインに合った写真を撮ることができます。KIDORIhttps://ki-do-ri.jp/こちらはECサイトにミニマルデザインが使われている例です。ECサイトというとたくさん情報を表示する必要があるため、ミニマルデザインが合わないと思う方もいるかもしれませんが、商品の高級感や贅沢感を演出するのにミニマルデザインはとても役立ちます。Webサイトのファーストビュー部分では、あえて中央からずらして画像を表示し、空いている余白にテキストを表示することで、全体的なバランスが取られています。コンテンツ部分も余白が大きく取られており、全体的に優雅なデザインのページに仕上げられていますね。余白を活かしたデザインミニマルデザインのようなシンプルなWebサイトを中心に、余白を効果的に活用することによって、ホワイトスペースをデザインの一部に取り入れるようなWebサイトが増えてきています。余白を大きく取ることで全体のデザインに余裕が生まれ、Webサイトに優雅で高級な雰囲気が生まれます。Webサイトのブランディングを効果的に行いたい場合は、余白を意識してデザインを行うと優れたデザインを作ることができるかもしれません。CANLIShttps://canlis.com/画像やテキストなどの要素の区切りを、見出しや線、色などを用いて表現するのではなく、適切な空白を設けることによって表しています。余白を大きく取ったデザインは優雅さや上品さのあるWebデザインとすることができ、ブランディングに効果的です。SHOOTSというブランドのWebサイトです。全体的にページに対して余白が占める割合が大きく取られており、それぞれのアイテムの画像が引き立つようなデザインになっています。余白を大きく取る場合は、テキストサイズを小さめに設定することでバランスが取れたデザインになりますね。ページ移動時に新しいページに飛ぶのではなく、今表示されているページを変化させて次のページを表示するようなテクニックのことです。アニメーションとともに画面遷移が作られています。ページ間の移動にアニメーションを用いることで、ページ同士の繋がりがより強く感じられるため、ユーザーエクスペリエンスの向上が期待できます。Dという企業のコーポレートサイトです。ページの切り替えが非同期遷移で行われるため、ページとページの繋がりが切れず、ユーザー体験を遮ること無くWebサイト全体を表示することを実現しています。ISChttps://isc-club.ch/こちらは海外のクラブハウスのWebサイトです。全体のデザインもとてもよくできているサイトですが、こちらもページの読み込みに非同期遷移が使われています。ページの表示時に読み込むファイルを減らすことができるので、読み込み速度を短くすることができるというメリットもありますね。スプリットスクリーンレイアウトスプリットスクリーンレイアウトは、画面を大胆に分割してレイアウトするデザイン手法です。画面を大きく分けてしまうことによってコンテンツの区切りを明確にしたり、アイデア次第で様々な使い方ができます。スプリットスクリーンはPC用ページでは横に並べている要素を、画面幅が狭いスマホ用ページでは縦に並べることができるなど、レスポンシブデザインとの相性も優れています。見ていて楽しい!スプリットスクリーンレイアウトの特徴と参考になるサイトまとめスプリットスクリーンレイアウトは画面を大きく分割するレイアウトで、使い方次第では非常に効果を発揮するデザイン手法です。分割スクリーンレイアウトや、分割式レイアウトなどとも呼ばれたりします。Feebleshttp://www.thefeebles.com/画面を大きく2つに分け、左側にメニューを表示し、右側に画像を表示するようなデザインとなっています。スプリットスクリーンを使う場合は、どちらか片方にメニューを固定表示しておき、もう片方にコンテンツを表示してスクロールさせるようなデザインにすると、使いやすくてデザインも優れたページに仕上げることができますね。Stationhttps://getstation.com/Stationという様々なツールを1つにまとめて管理することができるツールのプロダクトサイトです。ページの左側がコンテンツ部分となっていてスクロールすることができ、ページの右側はコンテンツ部分に合わせて画像が変化するような作りになっています。シンプルな作りですがプロダクトについて分かりやすく説明されており、優れたプロダクトサイトの1つです。大胆な配色ミニマルデザインのようなシンプルなデザインも人気がありますが、一方で主張の強い配色を行うことでユーザーにインパクトを与えるようなデザインも人気を集めています。初心者が大胆な配色を行うとチープな印象になってしまう可能性がありますが、全体のバランスやデザイン、他の色との組み合わせを工夫することによって独創的で個性的なWebサイトを作ることができます。配色で作り上げる魅力的なイメージのWebデザイン配色はWebデザインのイメージを大きく左右する要素の1つです。同じデザインのページでも配色を変えるだけでWebサイトのイメージが大きく変化します。trendsDesignBetter.Cohttps://www.designbetter.co/ページのスクロールに合わせて、背景色が色々と変わるようなデザインです。1つのページに様々な色を取り入れるのは難しいと言われていますが、背景色をガラッと変えることによってそれぞれのコンテンツを目立たせることができていますね。OMAHAhttp://bigomaha.co/全体的に赤色でメインカラーが統一されているデザインのWebページです。赤という色は印象的な色なのでデザインに使われる機会は多いですが、赤と白の組み合わせで作られているページは多くても黒色と組み合わせて作られているWebページはあまり多くないのではないでしょうか。白背景に黒文字というこれまでの一般的なWebサイトとは違い、主張の強い色をあえて多めに使うことによってWebサイトの個性が引き立ち、他のデザインとの差別化を図ることができます。タイポグラフィタイポグラフィとは、テキストのデザインのことです。デザイン性の高いテキストに仕上げる「文字を見せるタイポグラフィ」とテキストを読みやすくするための「文字を読ませるタイポグラフィ」の2つに分けられます。テキストのデザイン性を高めることにより、インパクトを強めたり印象的なイメージを与えるようなタイポグラフィが、近年改めて注目されています。関連記事タイポグラフィの特徴とデザインの参考になるWebサイトタイポグラフィは「文字のデザイン」のことです。Webサイトに使われている様々なテキストのそれぞれに適切なデザインを施すことにより、ユーザーに興味を持ってもらえたり、テキストが読みやすくなったりします。Burnhttp://pleasuretoburn.com/こちらのサイトのように、ヒーローヘッダーの背景画像の上に半透明でタイポグラフィを表示するようなデザインが増えています。単純にテキストを表示する場合と比べてデザインに一体感がうまれ、まとまった印象に仕上げることができますね。funplexhttps://funplex.co.jp/こちらのサイトもタイポグラフィと背景画像が組み合わせたデザインとなっています。表示する要素はテキストと画像でとてもシンプルですが、それらを効果的に組み合わえてアニメーションを追加することにより、リッチなデザインのページとなっています。左右に配置されたナビゲーションメニューナビゲーションメニューは一般的にページの最上部に表示されていますが、最近では画面の左右にナビゲーションメニューを配置するWebサイトが増えてきました。画面の左右にナビゲーションを配置することで、スクロールしても固定したまま表示しておくことができたり、余白となる部分を活用することができるなどのメリットがあります。inc.http://tiara-inc.jp/日本のアパレルブランドのWebサイトです。画面の左側にサイドバーのような形でナビゲーションメニューを表示することにより、コンテンツの表示を縦方向に広く使うことができています。固定された位置にメニューが表示されていることによって、今表示しているページが分かりやすいというメリットもあります。VANGUARDhttp://vanguardprague.cz/こちらは海外のWebサイトですが、先ほどのサイトと同様にサイドバーにメニューが設置されています。一般的にWebサイトは縦方向にスクロールするため、コンテンツ部分とナビゲーション部分の区切りがはっきりとしているため、UI/UXの観点で使いやすさが魅力のレイアウトですね。美しいローディングアニメーションページサイズの大きなWebサイトは読み込みに時間がかかってしまいますが、読み込み中に美しいローディングアニメーションが増えています。読み込み時間が長くなるほどユーザーの離脱率は高まってしまいますが、アニメーションを上手く活用することによって離脱率を抑える効果が期待できます。具体的には読み込みの進み具合をグラフィカルに表示することにより、ただローディングアニメーションをループさせる場合よりも離脱率が低くなるというデータが出ています。アニメーションに楽しさや面白さを加えることでさらに効果は高まるでしょう。関連記事コピペで簡単!ローディングアニメーションの参考になるサイトまとめ読み込みに時間がかかってしまうページはローディングアニメーションを取り入れることによってユーザーの離脱率を抑えることができます。Ltd.http://star-ale.com/読み込み完了時に画面左部のサイドバーとなる部分が、ローディングのゲージとして使われているデザインです。読込状況をゲージという形で把握できるのはもちろん、ただ表示するだけではなくそれをサイドバーとして利用するという所がとてもおしゃれです。HOUSEhttp://www.thehousetokyo.com/読み込み時のローディングアニメーションが、実はブランドのロゴだったという楽しさを取り入れたWebサイトです。コップにドリンクを注ぐ様子を再現した様なローディングアニメーション自体も面白いアイデアですね。モバイルファーストデザインモバイルファーストデザインというのは、PC用デザインをメインにしてモバイル用デザインを作るのではなく、モバイル用デザインをメインに考え、それに合わせてPC用デザインを作成するという考え方です。しても後回しに考えてしまいがちなモバイル用デザインですが、スマホからのアクセスは年々増え続けています。アクセス解析ツールなどでユーザーが使用しているデバイスの割合を確認し、モバイル端末でのアクセスが多いようであればモバイルファーストデザインを用いてデザインを作成した方がいいかもしれません。2018年はこれまで以上にモバイル(スマホ)表示した時のデザインが優れたWebサイトが増えるでしょう。inc.http://www.ranadesign.com/recruit/changethework/東京にあるデザイン会社の採用ページです。採用に関する情報をチャット形式で説明されていて、スマホでの表示を意識したデザインとなっています。退屈になってしまいがちな採用ページに遊びが取り入れられていて、楽しげな社風が伝わってきますね。チャットのようにして極端にモバイルにデザインを寄せるのが正解というわけではありませんが、スマホ用デザインをベースにしてPCサイズのデザインも作るという流れが主流になってくるかもしれません。マイクロインタラクションと高いユーザビリティマイクロインタラクションとは、ユーザーのアクションを促したり、アクションへのフィードバックを表現する「動き」のことを言います。ボタンを押した時にボタンの表示が変わったり、リンクにマウスを合わせると色が変化したりすることで、ユーザーが直感的に使えるようになります。スマホは指で直接タップするためよりマイクロインタラクションが重要になるなど、2018年はユーザビリティの高いWebデザインが求められてくるでしょう。小さな動きで大きな効果!マイクロインタラクションを使って優れたUXを実現する優れたサービスは、「機能」と「細部のデザイン」の2つが優れています。trendsすすメトロ!スクロールに合わせて表示される要素にアニメーションが適用されていたり、マウスオーバーした時のマイクロインタラクションがとても良くデザインできているWebサイトです。ここまで作り込まれていると、Webサイトの世界に入り込んでしまいますね。http://www.tokyometro.jp/susumetro/UIデザインツールのトレンド最新のUIデザインツールに関する記事を公開しました。Studioなども公開されましたが、それぞれの魅力や特徴などをご紹介しています。UIデザインツール選びに悩んでいる方はぜひ参考にしてみてください。日々新たなデザインに関するニュースが飛び交っていますが、それはUIデザインツールに関しても同様です。trendsまとめ2017年から続いている流れですが、シンプルなサイトはよりシンプルに、そして難しいテクニックや技術が使われているWebサイトはより工夫を凝らしたWebサイトという形で、それぞれ異なる方向へ発展が進んでいるような印象を受けます。アニメーションやパララックスも流行のテクニックですが、最適な形で取り入れないとページの読み込み速度が低下したり、スクロールがカクついてしまったりするなど、ユーザービリティの低下を招いてしまいますね。Webデザインを行う際はページのコンセプトや目的、ターゲットなどを明確にし、デザインを行っていくことが重要です。主要なデザイン手法やトレンドについては、下記のページでもご紹介しているので気になる方はぜひご覧になってください。milo2018年のWebデザインのトレンド記事に関する記事も様々なものが登場していますが、今回ご紹介するのはBehanceで話題となっている2018年のデザイントレンドに関する記事です。trends全部知ってる?主要なWebデザイン手法のまとめWebサイトのデザイン手法には様々なものがありますが、しっかりとした知識はお持ちですか?それぞれのデザイン手法をきちんと知っておくことで、より優れたデザインを作成できるようになります。trends2018年に知っておくべき18個の最新デザイントレンドデザインは周りの変化に合わせて常に変わり続けていくものです。デザインを表示するデバイスの変化、テクノロジーの発展、デザインにおけるトレンドの推移など、あらゆるものに影響されます。Trends(ウェブデザイントレンド)は、Webに関わる全ての人のためのメディアです。ウェブサイトの制作やデザインに役立つ情報、最新トレンド、チェックすべきサービスなどを配信しています。