見出し画像

【サイトトレース・分析】WHEREのサイトから学んだこと

おじょう🫖

はじめに

今回は、学習のために印象に残った「WHERE」さんのWebサイトを分析しました。
白をベースにしたシンプルな世界観の中に、文字配置やフォントサイズにこだわりを持って制作されており、参考にさせていただきたいと思って選んだサイトです。
全体の構成や読みやすさへのこだわりがとても参考になったので、学んだことをまとめました。

元サイトについて

元サイトURL：https://whereinc.co.jp/

サイトの目的：地域に関わる事業やプロジェクトの内容を分かりやすく伝え、活動への参加や問い合わせにつなげること。

ターゲット（想定ユーザー）：

  • 地域づくりや地方創生に関心のある人

  • 自治体・地域団体の担当者

  • 「地域で働く・暮らす」に関心を持つ学生や転職希望者

  • WHEREの活動内容やプロジェクトを知りたい人

学びの目的：
レイアウト、写真の使い方、余白の作り方、読みやすいタイポグラフィ、落ち着いた世界観のつくり方の研究。

トレース画像（ぼかしあり）
学習目的で構成を理解しながらトレースしましたが、
著作権配慮のため、画像には全体的にぼかし加工を入れています。

WHERE, INC.サイトトレース画像

サイト全体の印象

余白が広く取られていて、「穏やかに暮らす地域の時間」を表現したような、落ち着いた世界観が印象的です。
写真も落ち着いたトーンでそろえられていて、地域の空気感が自然に伝わってきました。

カラーについて

このサイトは、白と黒をベースに色数を極力しぼって構成されています。
その分、写真の色や、黒丸アイコンのボタンがアクセントとしてしっかり際立っています。
写真を多く扱うデザインだからこそ、余計な色を使わずに統一感を出しているのだと感じました。

タイポグラフィ

細めのゴシック体で、やわらかく読みやすい文字組みになっています。
文字間も少し広めで、落ち着いた空気感が保たれている印象でした。

  • 見出し：Neue Haas Grotesk Text、A-OTF 見出しゴ MB31

  • 本文：Neue Haas Grotesk Text

レイアウト

スクロールごとに配置が変化し、単調にならず快適に読み進められる構成でした。

  • 写真とテキストの2カラム

  • ブログカードの横並び

  • 黒背景のセクション

  • 再び白背景に戻るセクション

  • CTAセクション

黒背景のセクションは視線の切り替えポイントになっていて、ページ全体のリズムを整える役割を果たしていました。

ボタン

ボタンには黒丸アイコンが付いていて、マウスをかざすとアイコンの大きさが変化します。
ボタン本体ではなくアイコン側が変化するものは珍しく、デザインの幅が広がる発見でした。

OUR SERVICE

写真とテキストの2カラム構成が、Z型の視線誘導に沿って交互に入れ替わる作りになっていて、自然と読み進めやすい流れが生まれていました。ユーザーが迷わず情報を追えるようによく工夫されていると感じました。

ACADEMY

  • 写真の世界観をそろえたサムネイル

  • 横並びのカードレイアウト

  • タイトルと開催期間のシンプルな配置
    が徹底されていて、とても読みやすく整理されていました。

カーソルを合わせると横スクロールのガイドアイコンが出てきたり、タイトルにかざすと「詳しく見る」ボタンに変わったりと、ユーザーが迷わない仕組みが丁寧に作られている点が素敵でした。

PROJECT

OUR SERVICEと同じ2カラム構成を基調にしつつ、縦並びではなく横スクロールに切り替えることで配置が単調にならない工夫がされていました。
スクロール方向が変化することで視線のリズムが生まれ、ページに動きが出ている点がとても魅力的だと感じました。

CONTACT

Contactのエリアにマウスをかざすと、大きな白い円形のCTAボタンがふわっと出現します。
カーソルに合わせて動くため、直感的に押しやすいデザインです。
「ユーザー目線の押しやすさ」を大切にしつつ、遊び心のあるボタンデザインも成立することが分かり、表現の幅が広がりました。

フッター

最後は黒背景に切り替わり、ページの終わりが自然に分かる構成になっています。
余白も広めで、整理された美しい締め方でした。

学んだこと

今回の分析で特に勉強になったのは次のポイントです。

  • 文字配置やフォントサイズのこだわりで、シンプルでも強い印象を残せる

  • 世界観を作るうえで、余白の取り方はとても重要

  • 写真を多く使うデザインでは、色数を減らすとまとまりが出る

  • 細めのゴシック体は読みやすく、やわらかい印象になる

  • 黒背景のセクションを挟むと、ページ全体のメリハリが生まれる

  • ボタンは「押しやすさ」を満たしたうえで、もっと自由にデザインをしていい

落ち着いた世界観を表現したいときに、すぐに応用できる学びがたくさんありました。

まとめ

今回分析したWHEREさんのサイトは、

  • 余白を活かした落ち着いたデザイン

  • 色を抑えて統一感を出す設計

  • スクロールごとのレイアウト変化の気持ちよさ

がとても魅力的なサイトでした。
写真を多く使用するデザインや、落ち着いたトーンのサイトを作りたいときに活かせる考え方が多く、学びが大きかったです。
これからの制作にも、今回の気づきを取り入れていきたいです。


いいなと思ったら応援しよう！