【Webレビュー】No.3 yado Inc.

URL

yado | 泊まるように暮らす

第一印象

• アニメーションがゆったりとしていて、落ち着いたリラックスした雰囲気を感じさせる。

• 全体的に白を基調としていて、清潔感を演出している。「ホテルのサイトのよう」と感じた。→”泊まるように暮らす”というコンセプトを視覚的に表現している。

• Aboutや実績が下の方に配置され、インタビューや記事が大きく場所をとっている。

（仮説）家を建てる/リノベーションを考えている人は他の人の体験談を聞きたいと考えるから、実際に暮らしている人のインタビューやまとめた記事を載せることで、意欲を高める効果。

ターゲット

家を建てたい、リノベーションしたい、と考えている人

使用フォント

メイン…ryo-text-plusn,serif
サブ…yo-gothic-plusn,toppan-bunkyu-gothic-pr6n,"Hiragino Kaku Gothic ProN","Hiragino Sans","Helvetica Neue",Arial,Meiryo,sans-serif;
英数字…neue-haas-grotesk-text,ryo-gothic-plusn

配色

ベース…＃F8F8F2／rgb(253, 253, 250）
メイン…#061826
アクセント…#ffff

サイト構成

Top
About
House
Contact

トップページ構成

header
Magazine
pick up article
Latest article
About
House
Supporter’s comments
footer
Instagram
Contact

デザインポイント

• トップビジュアルは６枚。動画と写真がフル画面に表示。画像も動かし、yadoのコンセプト「泊まるように暮らす」を視覚的に表現している。

• 会社の情報などの前に記事のページを設けることで、家を建てる/リノベーションを考えている人は他の人の体験談を聞きたいと考えるターゲットに寄り添っている。

• 同時にWebマガジンを運営していることもアピールしている。

実装ポイント

• アニメーションがゆったり動いていて、落ち着きのあるエレガントな印象を演出している。→transition: opacity 450ms,transform 900ms cubic-bezier(0.22, 0.61, 0.36, 1);

⭐️イージングとdurationでだいぶ印象変わる！