メッセージを伝えたり、商品を販売したり、ポートフォリオや企業サイト、ブログやランディングページなど、ウェブページには制作したデザイナーのアイデアがつまっています。まるで思いつかないようなユニークなアイデアが使われていたり、最先端のウェブ技術を駆使したこれまでにない体験をお届けするサイトなど、参考したいポイントがたくさんあります。
この記事では、最近国内外で話題となった最新ウェブデザインをまとめてご紹介します。ますます加速するウェブの世界をのぞいてみてはいかがでしょう。
ウェブの今を体感!参考にしたい最新ウェブデザインまとめ
子どもたちにデザインの楽しさを伝えるワークショップを開催しているサイトで、カラフルでシンプルなシェイプをつかった統一感のあるデザインが素敵。chu
アプリと連動した電動自転車で、鮮やかなピンク色でフレッシュな雰囲気のサイトデザイン。
2018年に行われたリブランド戦略について、わかりやすくまとめたランディングページ。
スクロールに応じて画像や動画などのコンテンツが展開し、思わずページ最後まで見たくなってしまう、ストーリーテリング手法が活用されています。
シンプルで理解しやすいグリッドレイアウトに、参考にしたい美しい配色カラーパレットが採用されています。
政治的なメッセージの多いラッパー Joey Bada$$ のオフィシャルサイト。最初から、トランプ大統領の写ったお札が、スクロールでみるみる燃えてしまいます。
ページスクロールでコンテンツが切り替わるたびに、ユニークでスタイリッシュな動きを加えたミニマルなデザイン。
まるで液体がユラユラと流れているようなアニメーションを随所に利用した、クリエイティブなサイト。各ページへの遷移で使われている、水彩絵の具のようなエフェクトにも注目。
アルファベットをコースにした、パットゴルフを楽しむゲームアプリ用ランディングページ。商品と統一されたカラーリングや書体選びなど、分かりやすく読みやすいデザイン。
美しいパステルカラーの配色に、ふわりと浮かびあがるユニークなスライダーを、コンテンツナビゲーションとして活用しています。
ユーザーのスクロールに応じて、見出しタイトルや画像などをアニメーション展開することで、視線を効果的に集めるテクニック。
イラストで全体のデザインをまとめることで、わかりすく、統一感のあるデザインに。特に手書きイラストは、オリジナル性を演出するのにも最適です。
岡山県にあるぶどう農園のサイトで、美味しそなぶどうについて詳しく知ることができる、わかりやすいデザインが魅力的。
ヘッダー見出しに動画を利用し、活動内容をうまく伝えるたり、斜めに入ったスリットやブランドカラーを使った配色など、デザイン性と使いやすさを実現しています。
各業界の第一線で活躍するクリエイターのために、会計・経営サポート行ってきた株式会社プラスグラフがご提案する新しいサービス・パッケージです。
井上製麺は生麺製造専門職としてお客様と一緒に、本当に満足のいくこだわりの商品(麺)を提案していきます。
日本の人気雑誌 Pen Magazine の海外版サイトで、外国人が注目しそうな日本文化がたくさん紹介されています。
アメリカ、ミネアポリスにあるデザイン事務所で、フォントのみを使ったシンプルなデザインの裏には、多彩なアニメーションが秘められています。
署名サイン風のローディングアニメーションや、ページスクロールに合わせて展開するイラスト、オシャレでスタイリッシュな配色、フォント選びなどどれも参考にしたい要素ばかり。
シンプルなレイアウトですが、オリジナル性たっぷりな配色カラーリングを参考にしたいサイトデザイン。
スクリーンで展開される面白アニメーションや、マウスカーソルをスポットライト状に利用するなど、愉しいたくさんの仕掛けが。
最近ブランドイメージを一新し、賛否両論となっているサイト。独特のアート感で表現されたイラストは、好みが分かれそうなところですが、定評のあるサービスに変わりはありません。
サイト全体を古いMacのようなレトロUIデザインで統一した、面白ポートフォリオサイト。
イラストレーターのポートフォリオサイトで、ナビメニューを上下に操作することで、これまでの制作実績をまとめて確認できます。
ちょっとした動きを加えるだけで、オリジナル性とサイトの使いやすさを向上させたシンプルデザイン。
たべもの、エネルギー、水といった地球に大切なものをインタラクティブに伝える、Google参加のアースプロジェクト。
独特なスケッチ画や、ページを部分的に水彩絵の具で汚すなど、スタイリッシュなレストランの雰囲気ともマッチしたサイトデザイン。
アート本の販売サイトですが、本の良さを十分に伝えるランディングページ。アニメーションや配色など参考にしたい点も多数。
フルスクリーン動画コンテンツを切り替えるたびに、水面エフェクトを採用したスライダーデザイン。今年のトレンドとも言える、アニメーションをうまく利用した参考例。
フルスクリーン動画をヘッダーデザインに利用することで、ユーザーの注目を一気に集めるテクニック。企業サイトやランディングページなどで有効。
山形、鳥取、佐賀、宮崎など日本の美しい田園風景が残る場所に、外国人の観光客に楽しんでもらおうというサービス。オリンピックに向けて、このようなサービスが増えるといいですね。
マウスカーソルに合わせて画像が動きながら、なめらかにスライドしていく、マイクロアニメーションが光るデザイン。
コンテンツが切り替わるたびに、なめらかで美しいアニメーションが文字テキストに採用されています。
フルスクリーンで展開するスライダーは、高級感のあるセリフ書体とライン線を組み合わせた、シンプルで魅力的なレイアウト。
まるで古いWindows 95のようなスクリーン画面を再現したユニークなポートフォリオサイト。
高級腕時計の販売サイトで、エレガントなセリフ書体やなめらかで美しいアニメーションなど、高級感にこだわったデザインが特長。
日本の良さや文化などを伝える英語サイトで、日本の国旗をモチーフにした配色カラーリング、美しいセリフ書体などエレガントな雰囲気を演出しています。
ベルギーにある音楽アプリなどの開発を行うスタジオで、ミュージックを全面で表現したイラストがユニーク。
クリック&ホールドでウェブサイトのストーリーを進めていく、体験型のクリエイティブなアイデア。
メタリックな龍のウロコのような輝きを、背景でアニメーション展開させる美しいデザインが魅力的です。
スクロールに合わせてコンテンツがアニメーション展開し、文字テキストと画像を重ねたレイアウトなど、トレンドデザインも盛り込んでいます。
スライダーが切り替わるたびに、水面が揺れるような繊細なアニメーションエフェクトが実装された、ミニマルなサイトデザイン。
読み込みローディング画面から、ロゴデザインへと変化するなど、文字テキストや画像に利用したアニメーションが美しいサイト。
電気自転車の詳細を、スクロールしながらひとつずつ解説していく、ストーリーテリング手法を採用した販売サイト。
シンプルなグリッドレイアウトですが、コンテンツの遷移のたびに、目を引くアニメーションが多彩に展開します。
NASAのプロジェクトの一環で、火星を走行するローバーを自分で設計できてしまいます。プロジェクトの紹介は、アニメーションを用いたランディングページで詳しくされています。
サムネイル@: Epicurrence 2018