当サイトでは、定期的に新しく公開された最新Webサイトデザインをまとめていますが、今回はいつもとは異なり、2019年のベストWebデザイン50個を厳選、ピックアップしご紹介します。
2019年は特に選ぶのが難しいほど、素敵なWebサイトが数多く公開されたのですが、以下は特にお気に入りのベスト50となります。型にはまらない独自のアプローチを採用し、2019年のデザイントレンドも積極的に取り入れているサイトを集めています。
フルスクリーン動画や個性のあるイラスト、ミニマルスタイル、多彩なアニメーションなど2020年に引き続き人気となりそうなトレンド多め。昨年のベストWebデザインと比較してみても良いでしょう。
【総まとめ】2019年印象に残った世界のベストWebデザイン厳選50個
ヘッダーの魅力的なアニメーションや配色が目を引くデザインが特長で、遊びゴコロあふれるイラストアニメーションが素敵なサイト。配色はもちろん、フォント選び、余白スペースのとり方なども参考に。
キーボードの矢印キーで車を運転しながら、制作実績などのコンテンツを巡るユニークすぎるポートフォリオサイト。
世界各国で規制を緩和する動きが活発になっている大麻について、インタラクティブなアニメーションを使い、わかりやすく解説しているサイト。
水面がゆらゆらと揺れるようなアニメーションエフェクトが、背景やサムネイル画像などに採用した、鹿児島県南九州市の銘茶「知覧茶」の販売を行うウェブサイト。
スクロールの強弱に応じて、3Dモーフィングアニメーション付きでスライダーがヌルヌルと動く、WebGPLの技術を見事に利用したポートフォリオサイト。ページ遷移の滑らかさが、世界でも話題となっています。
お子様の成長を願うママの気持ちでつくった、安心で栄養もちゃんとあるスナックです。砂糖も塩も使わず、お米とおやさいだけでつくりました。
島根県美郷町の魅力をかわいいイラストのストーリーテリングによって伝えるウェブサイト。スクロールでコンテンツが次々に進んでいきます。
「体温をとどける」ストーリーづくりを手掛ける企業で、想いに共感したくなるフレーズがふわりとアニメーション表示されるなど、落ち着いた配色も好印象。
フレンドリーで親しみやすい配色やかわいいイラストが分かりやすい、神奈川県にある矯正専門歯科の公式サイト。
ダーク系背景にセリフ書体、黄金カラーパレットなど高級感を演出したサイトで、マウススクロールに合わせた心地よいアニメーションが随所に活用されています。
アムステルダムの街に扇形で張り巡らされた運河の歴史を紹介したサイト。スクロールでコンテンツが水平移動し、まるで雑誌をめくっているような感覚に。
ハワイの魅力を存分に伝える観光向けツアーガイド的サイトで、ハワイの島々の良さをそれぞれインタラクティブに伝えます。
オーストラリアの南にあるタスマニア島の魅力を伝えるランディングページで、配色やグラフィック、フォント選びなどレトロ・ビンテージデザインを検討しているときに。
古い絵画から飛び出した登場人物たちがに動きを加えたユニークなヒーローイメージ。
LGBTQ問題の歴史について、インタラクティブなストーリーで伝える未来を感じる体験型サイト。ぜひ一度ページを開いてみてほしいサイトのひとつ。
チャットやメールでのやり取りを実際に体験しながら、パワハラやモラハラになっていないか確認できるサイト。
2030年前に直面するかもしれない地球の危機を伝えるウェブサイト。プラスチックゴミによる環境破壊や温暖化などチャプターごとに、地球の深刻な状況をまとめています。
クジラの保護を訴えるプロジェクトで、スクロールに応じて縦横無尽に画像が切り替わるユニークなスライダー機能を実装。
マウスの動きに合わせて画面が立体的に動き出し、ボタンを押し続けるとサメがチーターに変身するなど、触って楽しむコンテンツが満載のイギリスBBCの地球環境向けサイト。
暖炉の販売を行うサイトで、薪が燃えている様子を、背景全体に動画を使うことで、効果的に表現したデザイン。
さまざまなワインを販売しているウェブサイトで、ボトル全体を配置し、まるで手に取るように細かく説明を加えています。
北極圏から約61km南にある、北緯66度をテーマにした旅行を提供しているユニークなウェブサイト。背景の山と雲、文字テキストをつかった、ページ後半のパララックスエフェクトが素敵。
英語ナレーション付きで進んでいく、ステーリーテリングの手法を取り入れた、触れて楽しむインタラクティブなウェブサイト。マウスドラッグすることで、きれいな花を野原に咲かせることができます。
アメリカ、コロラド州にてスキーやスノーボードを楽しみながら、2日間のグループディスカッションなどを行うカンファレンス用ランディングページ。
インタラクティブで引き込まれるような没入感を演出した体験型ウェブサイト。表示されるシーンから隠れている3つの曲を探しましょう。
Spaceキーでジャンプしながら、表示される香水を重ねて月を目指す新感覚のゲーム。香水をきれいに重ねると、高得点につながります。
オリジナルイラストとアニメーションを見事に活用したランディングページで、思わずページをスクロールしたくなるストーリー性や仕掛けは参考として。
ヒーローイメージにも描かれていた動くミニチュア人形たち、実はページの至るところに隠れています、見つけてみましょう。
飛行機の期待をそれぞれ立体的に比較、閲覧することができる、飛行機好きにはたまらない仕掛けがたくさん。
心地よいなめらかなアニメーションをふんだんに利用したウェブサイトで、思わずコンテンツをスクロールしたくなるページ遷移やマイクロインタラクションは制作の参考にも。
ウェブデザインにも力を入れている高級ブランドGucciのプロモーション用ページ。ブランドの世界観を見事に表現した、ストーリーテリング手法で商品を紹介しています。
高級ブランドのバッグをまるで絵画を3D鑑賞しているかのようなエフェクトで楽しむことができ、実際に気に入ったバッグを購入することができてしまいます。
表示されているテキストメニューにマウスを合わせると、突如イラストが立体的に飛び出しコンテンツが遷移する、ユニークさとエレガントさを両立したデザイン。
ページ全体を使って縦横無尽にレイアウトがコンテンツに応じて変化し、パステルカラーを使ったエレガントな印象など、ブランドイメージにも合わせたパステルカラーが素敵。
各コンテンツごとにさまざまな仕掛けやテクニックが披露されており、思わずページ下までスクロールしたくなってしまいます。
クリエイティブな映像作品を全面に利用し、サンセリフとセリフ書体の組み合わせ方など細かい部分にもセンスが光るデザイン事務所の公式ページ。
画像がゆらゆらと歪みながら切り替わる写真スライダーや、オシャレで高級感のあるセリフ書体とアニメーションの組み合わせも参考に。
美しい表情のセリフ書体にスッキリとしたグリッドレイアウト、余白スペースの取りかた、アニメーションなど参考にしたいウェブサイトのサンプル例として。
スクロール追尾アニメーションを中心に、パステルカラーの配色やグリッドを崩したレイアウト、SVGアニメーションなどさまざまなトレンドを取り入れています。ランディングページ作成の参考にもどうぞ。
サイト名の通りベランダー、バルコニー、お庭づくりに欠かせない観葉植物用ベースなどインテリア家具、雑貨をまとめたサイト。
スペインの楽園イビザ島の近くにあるメルノカ島で、木製のビンテージボードをレンタルできるサービス。ブランドイメージにぴったりなスタイリッシュな配色と余白スペースの使い方に注目。
まるで背景と動画が一体化したようなヒーローヘッダーが特長で、サーフィンをコンセプトにしたアニメーションがとても素敵。
まるで七色に輝く水面のようなアニメーションエフェクトが素敵なウェブサイトで、玉虫色のように絶えず変化する色合いはもちろん、高級感のあるセリフ書体などトレンドをうまく取り入れています。
美味しそうな料理レシピを更新するサイトで、海外らしいオシャレな料理が揃った、シンプルで読みやすいページデザイン。
不要な要素を取り除いたミニマルスタイルは、より写真や見出しを強調し、ブランドイメージをうまく演出できるテクニック。
WebGLを使った画面全体が歪んだようなエフェクトが素敵で、マウスで表示されるオブジェクトを360度自由に回転させ、JPEG画像として有料ダウンロードできる仕組み。
立体的に動く超リアルな犬をキャラクターが、ページスクロールに応じて360度の3D展開するアニメーションが印象的。
ユラユラと水面の上に浮かぶ文字テキストは、ずっと見ていると酔ってしまいそうなほどリアルな動きが再現されています。
2019年紹介したWebサイトデザイン全まとめ
以下は、2019年のあいだに紹介した世界のクリエイティブな最新Webサイトデザインとなります。今回未紹介のデザインも一緒に確認してみませんか。
2020年のウェブサイトはどうなる？最新デザイントレンドをチェックしよう
以下の記事では、これから2020年に注目したいウェブデザインの最新トレンド8個をピックアップ、予想しています。「アッと驚かすデザインをつくりたい。」そんな思いにさせてくれる、たくさんのデザイン事例と一緒に紹介しています。
