毎日新しいWebデザインを手掛けていれば、レイアウトや構成が思い浮かばないことがあっても当然です。
そんなときは新しく公開された、話題になっている国内外のホームページを覗いて、次のデザインアイデアやヒントを手に入れましょう。
この記事では、ここ2か月くらいで公開されたデザインが際立つ最新ホームページ事例40個をまとめてご紹介します。
どのようにUIデザインテクニックを活用するのか分かる、目からウロコの事例を中心に集めています。
Webデザイン見本リスト
BOTANIST | フレグランスコレクション キンモクセイとフィグの香り
スマホ特化型レイアウトその２。細長いレイアウトはそのままに、見出しタイトルや目次、リンクメニューなどをデスクトップ版では配置。キンモクセイが降ってくるアニメーションも素敵。
HAPPY OUTSIDE BEAMS | さぁ、外遊びしよう
週末も、平日も、“外遊び“を
全力で楽しむためのヒントが詰まったエンターテインメントの発信地。フェス、キャンプ、乗り物…、つい友達に自慢したくなるような、ヒト、モノ、コトから見えてくるハッピーなアウトサイドを提案します。
株式会社ON 採用サイト | ON CO.LTD. RECRUITMENT
ただただ楽しいリクルートページは、画面を埋め尽くすほどのマーキーテキストや絵文字、イラストなど満載。すごい数のエントリー応募が掲載されてます。
Premium Branding for Serious Startups | SERIOUS.BUSINESS
カーソルに合わせて陰影が変化するヒーローイメージにはじまり、カードスタック型サービス紹介、コンテンツの切り替わりに合わせた背景トランジション、テーマカラーのピンク、記憶に残るデザイン。
Sprightly Creatives | Atlanta Creative Service Agency
サイケデリックで発色の良いグラデーションを全面に使用し、フォントとの相性もばっちり。レトロなWebデザインの配色に困ったときに。
マウススクロールに合わせて、中央に配置された彫刻がリアルに回転し出すエフェクトは、一度見たら忘れない感動デザイン。ニューヨークにあるタトゥースタジオのWebサイト。
We all shine | Halo Dental Technologies
歯磨きのみがき残しや歯の状態などをアプリで継続的に確認できるデジタルミラー。接続するとすぐにストリーミングが可能で、状態を説明する3Dモデルにアクセスできます。
McDonald’s Brings Back New Collector’s Edition Cups
レコードやカセットテープのラジカセなどレトロなグッズで飾られた、90年代のヘッドルームから、お気に入りのコレクターズカップを見つけよう。
Sound Ethics | In The Dawn of AI Revolution
シンプルですが、スクロールに合わせてテキストサイズをグンと拡大するテクニックは、個人的に一度活用してみたいところ。
Gather Round • Co-working Spaces • Bristol and Bath
セリフ書体の使い分けや、落ち着いたナチュラルな雰囲気の配色カラーパレット、レイアウト構成など参考になる点が多数。
Lumara Container Homes – Innovative, Customizable Living
高級素材を使用したラグジュアリーなコンテナ住宅の建築を専門としたアメリカ、フロリダ拠点のウェブサイト。
Pluto | We help humanity transcend physical location.
今後ますます重要になってくる３Dデザイン要素をふんだんに利用したテクノロジー関連のWebサイトデザインに。
Advanced career for pilots on a Global Scale
スクロールに合わせて文字テキストが一文字ずつフェードインで表示、水平スクロール型コンテンツなど、トレンドを押さえたミニマルデザイン。
パタパタと切り替わる文字テキストや、ブラウン管テレビのようなラインが入ったヒーローイメージ、グリッチアニメーションなど人気トレンドを盛り込んだSFデザインが素敵。
BLUXSTUDIO | Estudio de diseño web creativo
無重力状態の宇宙飛行士がフワフワと舞っているポートフォリオサイト。超巨大テキストや手描きイラストパーツなど、クリエイティブな小技がぎっしり。
Creative Agency | Video Production Company | Animus Studios
サンセリフとセリフ書体、さらにはドットフォントも組み合わせた独自の世界観で伝える見出しタイトルは、UIテクニックも活用していて効果的。
How realignment left college football with four major conferences
アメリカ大学フットボールの覇権をめぐる過去、現在、そして未来の戦いを描いたストーリーテリング手法のコンテンツ。
Faith Of A Mustard Seed – The new album from Mustard
新アルバムの発表に合わせて公開されたプロモーションページで、PV動画やトラックリストなどもチェックできる、ファンにはたまらない仕様に。
前回からおよそ2か月ぶりとなった今回のまとめ。
このリストをつかって、最新のホームページデザインやWeb技術に触れてみましょう。「イメージやアイデアはあるけど、何をどのように作ればいいか分からない」といったときにもきっと役立ちます。
アドビだからストック素材サービスも ここまでクリエイティブ。
Adobe Stockは、アドビがクリエイターのためにつくったストックサービスです。写真やイラストなど高品質な素材が約3億点。無料素材も100万点。
検索、プレビュー、ライセンスの取得をPhotoshopから直接できるので効率の良さが抜群。
たくさんのAdobe Creative Cloudユーザーに選ばれているのには理由があります。
最初のひと月は素材が10点まで無料なので、気軽に始めてみませんか。
