毎週私が見つけたデザインの参考にしたい素晴らしきWebサイトをまとめ、発信して行く予定です。
今週も魅力的なWebサイトは数多くありましが、その中から5つのサイトを厳選してお届けします。
個人的な感想や、使用されているフォントの紹介も交えながらピックアップしていきますので、Webサイトの提案やデザインの実制作に役立ててください。
1. Star Atlas(ブロックチェーンゲーム)
未来の宇宙が舞台でブロックチェーンを使った仮想空間で行われるゲーム「Star Atlas」の公式サイトです。
ゲームの世界観は映画さながらのクオリティを誇り、仮想通貨などゲーム内での経済活動まで行えるとのことで、いま世界的に話題になっているようです。
サイト設計も非常にクオリティが高く、スクロールアニメーションを軸に3Dホログラムが展開されていき、ドロワーのアニメーションやプログレスバーなど、インタラクション全般のこだわりも秀逸で、圧倒的な没入感を味わえます。
■採用フォント ベースは、線幅の差が少ないモノリニアの幾何学的なサンセリフである「Roobert」が採用されています。 メニューなどリンク関連には、ハイテクなあしらいと洗練されたモダンテイストである「Rogan」が採用されています。
ビジュアル：⭐️⭐️⭐️⭐️⭐️ 話題性 ：⭐️⭐️⭐️⭐️⭐️ 最先端 ：⭐️⭐️⭐️⭐️⭐️
2. ECLIPSE – TOBELOVE Experience(ショーイベント)
https://tobelove-experience.ru/en
2021年9月にモスクワで開催された新感覚の体験型のショーイベント「ECLIPSE – TOBELOVE Experience」の公式サイトです。
神話がテーマになっていることから、ダークトーンをベースに星座のモチーフが随所に散りばめられており、独創的なファッションイメージと巨大なタイポグラフィを使い分けることで、斬新で奇抜だがパワフルなイベントであることを感じさせてくれます。
■採用フォント 大文字が狭く折衷的な幾何学的ディスプレイのサンセリフである「Extatica」が採用されています。 ※タイトル関連には別のフォントが使用されていますが、現在調査中です。
ビジュアル：⭐️⭐️⭐️⭐️⭐️ 話題性 ：⭐️⭐️⭐️⭐️⭐️ 最先端 ：⭐️⭐️⭐️⭐️
3. オツモ株式会社(コーポレートサイト)
https://www.otsumo.com/ja/index.html
ライフスタイルブランド「HUMAN MADE」を運営元である「オツモ株式会社」のコーポレートサイトです。
ファーストビューのヒーローイメージが、経過時間やタップに応じて変化するユニークなアニメーションが印象的で、スクロールしていくと背景にロッカーが出てきて、中央を見ているとプロダクトが顔をのぞかせている姿が味わい深くほっこりします。
■採用フォント 和文には、親しみやすく優しい形状でグローバル展開されている「Noto Sans JP」が採用されています。 欧文には、幾何学的なタッチのモダンなサンセリフである「Gilroy」が採用されています。
ビジュアル：⭐️⭐️⭐️⭐️ 話題性 ：⭐️⭐️⭐️⭐️ 最先端 ：⭐️⭐️⭐️⭐️
4. 猫壁(プロダクトサイト)
https://www.lixil.co.jp/lineup/s/catwall/
2021年にグッドデザイン賞を受賞した、自宅の壁に取り付けるとキャットウォークになる「猫壁」の公式プロダクトサイトです。
ヒーローイメージの猫動画は癒しの塊で、つい「猫壁」を配置して間近で観察してみたくなってしまいます。
サイトのデザインも柔らかな印象で、流体と猫のイラストをうまく組み合わせながら、可愛くてオシャレなテイストに統一されています。
猫壁コミュニティのInstagramのハッシュタグ「#にゃんぺき」は、可愛さで溢れてるので必見です。
■採用フォント ベースは、ふところを絞った味わい深い丸ゴシック体である「FOT-筑紫A丸ゴシック Std B」が採用されています。 本文やテキストリンクなどには、親しみやすく優しい形状でグローバル展開されている「Noto Sans JP」が採用されています。
ビジュアル：⭐️⭐️⭐️⭐️⭐️ 話題性 ：⭐️⭐️⭐️⭐️⭐️ 最先端 ：⭐️⭐️⭐️⭐️
5. 株式会社切札(コーポレートサイト)
デザインおよびテクノロジーを用いた制作および開発をおこなうクリエイティブ集団である「株式会社切札」のコーポレートサイトです。
制作実績の演出が斬新で、PC版とモバイル版では見せ方を変えています。
モバイル版では作品一つ一つがカードになっており、スワイプするごとにカードを切り替えることができます。
一方PC版ではスクロールに応じて作品がグリット状に浮かび上がり、フォーカスされた作品のタイトルが巨大なタイポグラフィで表示され、オンマウスすると円形状のマスク内に映像が投影されるといったこだわり抜かれたアニメーションを見ることができます。
また、その作品をタップするとより詳細な作品の映像が確認できるので、ただ静的に作品を並べている制作実績とは一線を画すクリエイティブ力を強く感じます。
■採用フォント 和文には、親しみやすく優しい形状でグローバル展開されている「Noto Sans JP」が採用されています。 欧文のタイトルなどには、汎用的で扱いやすく視認性も高い「Padauk」が採用され、項目名などアクセントとしては、縦長ゴシックで有名なAlternate Gothicを再構築した「Oswald」が採用されています。
ビジュアル：⭐️⭐️⭐️⭐️⭐️ 話題性 ：⭐️⭐️⭐️⭐️ 最先端 ：⭐️⭐️⭐️⭐️⭐️
