【2021年】デザインの参考にしたい素敵なWebサイト5選 #16

Web Design Inspirations #16

毎週私が見つけたデザインの参考にしたい素晴らしきWebサイトをまとめ、発信して行く予定です。
今週も魅力的なWebサイトは数多くありましが、その中から5つのサイトを厳選してお届けします。

個人的な感想や、使用されているフォントの紹介も交えながらピックアップしていきますので、Webサイトの提案やデザインの実制作に役立ててください。

1. Paper Play – Moooi(インテリアブランド)

https://moooi.com/en/paper-play#intro

インテリアブランドmoooiのデザインを楽しめるデジタルコンテンツ「Paper Play」の特設サイトです。

多種多様なペーパーモチーフを軸に、BGMも交えながら独創的な世界観を演出しており、
スクロールしていくとMoooiが展開しているプロダクトたちの舞台演劇を観ているような感覚にさせてくれるアニメーションが展開され、没入感あふれる体験が味わえる魅力的なサイトとなっています。

■採用フォント
ベースは、幾何学的な合理性とジョイント部分の繊細さや優雅な曲線美が特徴的な「SangBleuSansが採用されています。
キャプションや本文などには、読みやすくモダンでありながら、ポップで陽気な雰囲気も感じさせてくれ、幾何学的なタッチとヒューマニストの両面を兼ね揃えた「GillSansが採用されています。
局所的に、エディトリアル用のタイポグラフィで堅牢かつ可読性が高くモダンなセリフ体である「TiemposTextが採用されています。
ビジュアル:⭐️⭐️⭐️⭐️⭐️ 
話題性  :⭐️⭐️⭐️⭐️
最先端  :⭐️⭐️⭐️⭐️

2. POLA(We Care More特設サイト)

https://www.pola.co.jp/wecaremore/menomae/

「We Care More-世界を変える、心づかいを。-」をコンセプトに、POLAが取り組むケアの一部を紹介している特設サイトです。

キャラクター性の高いイラストと、タッチした時のサウンドとインタラクションの演出が心地よく、時間を忘れてアイコン一つ一つをタッチしてみたくなります。
また、説明が簡潔なので手軽にサクサク読めてしまうのでもポイントです。

■採用フォント
和文には、可読性と安定感がよく、長く愛されてきた伝統的なゴシック体である「中ゴシックBBBが採用されています。
「We Care More」のキャッチコピーに、美しい造形かつ組み方次第で上品にもポップにも表現できる、定番のサンセリフ体である「Futuraが採用されています。
ビジュアル:⭐️⭐️⭐️⭐️⭐️ 
話題性  :⭐️⭐️⭐️⭐️⭐️
最先端  :⭐️⭐️⭐️⭐️

3. オフィス12(シェアオフィスブランド)

https://12-office.com/

リビタが企画運営する住まいの機能を充実したシェアオフィスブランドである「オフィス12」のブランドサイトです。

ヒーローイメージを含め、写真とホワイトスペースをうまく組み合わせたミニマルデザインとなっており、画像が切り替わる際にタイル状に画像が分解×結合していくアニメーションは、とてもユニークで印象深いです。

■採用フォント
和文には、現代的な明るさを残しつつもオーソドックスで、可読性も極めて高いゴシック体である「ヒラギノ角ゴ ProNが採用されています。
欧文には、大文字と小文字が混在する場合の可読性を高め、背の高いエックスハイトのサンセリフ体である「Interが採用されています。
ビジュアル:⭐️⭐️⭐️⭐️⭐️ 
話題性  :⭐️⭐️⭐️⭐️⭐️
最先端  :⭐️⭐️⭐️⭐️

4. MOM FoR STAR(シングルマザーのための就業・協働プロジェクト)

https://www.momforstar.jp/

沖縄のシングルマザーのための就業・協働プロジェクトである「MOM FoR STAR」の公式サイトです。

サイト自体の構成はシンプルなものの、トレンドであるキャラクターイラストや、流体アニメーションを取り入れることでモダンな雰囲気を演出しており、柔らかなフォントや図解を交えた説明がとても分かりやすいデザインとなっています。

■採用フォント
和文には、ふところを絞ったモダンで味わい深い丸ゴシック体の「FOT-筑紫A丸ゴシック Stdが採用されています。
欧文には、Helveticaキラーと呼ばれているグロテスクなサンセリフ体の「Aktiv Grotesk Extendedが採用されています。
ビジュアル:⭐️⭐️⭐️⭐️
話題性  :⭐️⭐️⭐️⭐️
最先端  :⭐️⭐️⭐️

5. plein de vie(ファッションブランド)

https://www.pleindevie.net/

フレンチ・シックをベースに、旬を取り入れながらも着回しの効くアイテムを提案するブランド「plein de vie」のブランドサイトです。

ヒーローイメージのクロスディゾルブでのトランジションが特徴的で、シックで独自性の高いビジュアルデザインとなっています。

スクロールアニメーションとして細やかなパララックスが採用されていたり、シンプルながらも柔らかくて品のあるインタラクションからブランドの気品が感じられ、イメージ写真を引き立たせる演出として効果的となっています。

■採用フォント
和文には、明るく品のある落ち着いた雰囲気の「游明朝体が採用されています。
欧文タイトルには、Garamondをベースにエレガントさを追求し高解像度で洗練された「Cormorant SCが採用されており、アクセントに、幾何学的で目を引くメッセージングに最適なモダンテイストである「Abelが採用されています。
またメニューボタンには、美しい造形かつ組み方次第で上品にもポップにも表現できる、定番のサンセリフ体である「Futuraが採用されています。
ビジュアル:⭐️⭐️⭐️⭐️⭐️ 
話題性  :⭐️⭐️⭐️
最先端  :⭐️⭐️⭐️⭐️