従来のありがちなウェブサイトではなく、アイデアや工夫を凝らした、デザイン制作の参考にしたい最新ウェブデザイン36個をまとめています。
ストーリーテリング手法やなめらかなアニメーション、美しい配色やセリフ書体を中心としたフォント選びなど、2019年に注目されているデザイントレンドを盛り込んだサイトを中心に揃えています。
サムネイルをクリックすることで参照元で移動できるので、ぜひ一度ウェブサイトを開いて、クリエティブな面白最新ウェブデザインを体験してみましょう。
Webの進化が止まらない！参考にしたい最新ウェブデザインまとめ
制作実績を一覧にしたポートフォリオサイトで、アクセントになっている立体的なリボンエフェクトが展開しながら、視線をうまく誘導しながら次のコンテンツへ進みます。
オランダで今月開催されるフェスのランディングページで、ページスクロール似合わせて万華鏡のようなエフェクトを実現しています。
マウス長押しでページが開始され、画面全体が歪んだようなスライダーエフェクトを実装したポートフォリオサイト。
ユニークな配色とアニメーション効果が参考になるポートフォリオサイトで、各コンテンツに表示されているGIFや動画が目を引くデザイン。
タイポグラフィーを中心としたスッキリとレイアウトに、文字と写真を重ねたレイアウトやアニメーションなどをふんだんに盛り込んだウェブサイト。
ポーランドの歴史をストーリーテリング仕立てで進めながら学ぶインタラクティブサイト。
WebGLを使った画面全体が歪んだようなエフェクトが素敵で、マウスで表示されるオブジェクトを360度自由に回転させ、JPEG画像として有料ダウンロードできる仕組み。
アートディレクションやウェブデザインを手がける日本人デザイナーのポートフォリオサイトで、カスタムマウスカーソルとアニメーションを利用することで、うまく過去実績に遷移していきます。
レイアウトと配色が印象的な新卒採用エントリーページには、実際に働いているショップスタッフやストアマネージャーの先輩によるインタビューを公開しています。
お雛様や五月人形など節句人形を作成している会社で、わかりやすい動画とイメージに合った書体選びがトレンディーな作品。
パン粉ができるまでをわかりやすい動画で伝え、ページをスクロールすることでパン粉が宙を舞うユニークなエフェクトも。
映画のロケ誘致や撮影のサポート、エキストラ募集などを行う、福岡県うきは市の面白い取り組み。
カスタムマウスカーソルや画像ホバーエフェクトなどを加えることで、シンプルながらオリジナル性の高いショッピングサイトに仕上げています。
英語ナレーション付きで進んでいく、ステーリーテリングの手法を取り入れた、触れて楽しむインタラクティブなウェブサイト。マウスドラッグすることで、きれいな花を野原に咲かせることができます。
淡いパステルカラーの配色と、高級感のあるセリフ書体、美しいイメージ画像などどれもブランディングにマッチしたエレガントなつくり。
十字キーで飛行機を操作しながら、「パイロットはなぜ二人必要？」など、空に関する素朴な疑問や質問に答えていきます。
ページ全体に配置された植物のイラストをマウスカーソルで探りながら進める、ストーリーテリング手法のランディングページ。
「2001年宇宙の旅」などでも知られるスタンリー・キューブリック監督の90歳をお祝いして、これまでの実績をタイムライン別にまとめたランディングページ。
各コンテンツに移動することで、立体的に並んだ球型グラデーションボールの配置が移動したり、ポリゴンスタイルを多用した商品ページなど、SF感満載なウェブサイト。
ストーリーテリングを得意としたデザイン会社で、このページもスクロールに合わせて、さまざまなアニメーションやイラストを効果的に活用しています。
ダイナミックな動きを演出しながら、制作実績を紹介するポートフォリオサイトで、スクロールに応じたアニメーションや余白スペースのとり方など、オーディエンスの注目をうまく集める工夫が。
マウススクロールと連携してイラストがアニメーション付きでモーフィング変化していくなど、最後までページをスクロールしたくなる仕掛けも。
Spaceキーでジャンプしながら、表示される香水を重ねて月を目指す新感覚のゲーム。香水をきれいに重ねると、高得点につながります。
こちらもページスクロールに合わせて、画像ファイルや文字テキストなどに細かいアニメーションを追加した、マイクロインタラクションが素敵なサイト。
アメリカのサンディエゴにあるデザイン会社で新社屋をスタイリッシュに紹介したサイト。マウス長押しでスタートです。
古い絵画から飛び出した登場人物たちがに動きを加えたユニークなヒーローイメージ。
ページスクロールに連動して、ぼんやりと文章テキストや画像が表示されるダーク系ウェブサイトの好例として。
グリッドを無視した縦横無尽で余白たっぷりなレイアウトに、なめらかな動きのアニメーションを加えることで、よりエレガントな雰囲気に。
マウスカーソルに合わせて動く、没入感満点なファーストインプレッションが、ページを最後までスクロールしたくなります。
マウスの動きに合わせて背景色が変化するユニークな仕掛けで、タイポグラフィーのみのシンプルなレイアウトを魅力的に仕上げます。
「できないことをしよう。」というコンセプトのうえ、映像を中心としたストーリー仕立てで進んでいくインタラクティブなウェブサイト。
ページをスクロールしていくと、画像が重なったり、サイズを変更しながら表示されるなど、アニメーションを効果的に利用した参考例。
さまざまなワインを販売しているウェブサイトで、ボトル全体を配置し、まるで手に取るように細かく説明を加えています。
ページスクロールに応じて左側のタイポグラフィーが連動して動くユニークな仕掛けで、はっきりとした太字フォントが印象的なデザイン。
マウススクロールすると画像ファイルが重なったようなエフェクトが適用されており、シンプルながら注目を集める手法は参考になりそう。
デザイントレンドをおさらいしよう。
特に注目を集めているウェブデザインで話題のトレンドや動向を知っておけば、これから行うデザイン制作でもテクニックを活用できます。2018年から続くトレンドも多いので、一度確認しておくと良いでしょう。
便利ツールでウェブ制作を爆速に！
デザインしたいウェブサイトのコンセプトやアイデアが決まったら、用途にあったウェブツールを利用してみましょう。制作時間の短縮につながるのはもちろん、面倒な作業もスムーズに行うことができます。
サムネイル@ : #このラジオがヤバい | NHK・民放連共同ラジオキャンペーン
