オーシャンズスタイルproduct by 横山浩介建築設計事務所　＃1日1サイトレビュー

別荘のようなリゾートライフを！ | オーシャンズスタイル

【概要】

横山建築設計事務所の建築の紹介サイト

【印象】

・手書きの文字やイラストが可愛く、堅くならずに良い抜け感になっている

・様々な家の写真が様々な角度から撮られていて暮らしが想像しやすい

【メインビジュアル】

・紹介ムービーがほぼフルスクリーンで表示

・再生しなくても紹介ムービーの所々が見れるが、再生ボタンを押すと紹介ムービーが全編見れる

・紹介ムービーの上の手書きの「別荘のようなリゾートライフを！」のコンセプトの文字が良い抜け感になっている

・グローバルナビゲーションのHOME、暮らしの提案3つ、問合せが右上に表示しているが、その隣にハンバーガーメニューも表示されている。ハンバーガーメニューではトップページに表示されていない設計者のプロフィールと設計までのFLOWが表示されている

【コンテンツ】

・メインビジュアルから下にスクロールすると暮らしの3つのケースが紹介されている

・それぞれの暮らしや写真に合わせたイラストが使用されていて可愛い

・手書きの文字やフリーハンドでグルグルと描かれた丸が良い抜け感になっている

・GO TO TRIPのボタンを押すとそれぞれのケースの詳細ページに飛べる

・詳細ページに飛ぶと写真がふんだんに使われていてどのような暮らしが楽しめるか想像を膨らませやすくしてくれている

・写真と写真の間の黒い棒が流れを繋いでくれている

・各ケースで使用される写真は9〜13枚

・無料設計相談の流れのコンテンツでは下にスクロールしていくとstepの四角いアイコンがゲージが溜まる動作のように左から右に向かって色がつく

・海を眺める暮らしなら海の写真が多く、自然に囲まれた暮らしなら緑や自然が多く映った写真が多い

・ページの下層に行くとPAGE TOPに促すイラストのアイコンが出てきてそのアイコンがユーモアがあって可愛い。アイコンを押してTOPに戻るとアイコンは下にフェードアウトしていく

・下層にSNS（Facebook、Twitter、LINE）ボタンがある

【文字】

・和文はNotoSans、手書き文字

・欧文はOpenSans

【カラー】

・ベースカラーは白（#ffffff）、メインカラーは黒（#000000）

・3つの暮らしのケースに合わせてそれぞれ背景の色が異なる（海を眺める暮らしは青のグラデーション、自然に囲まれた暮らしは白、愛車と寄り添う暮らしは黒）

・イラストのラインカラーは青緑（#5fbfbf）

【レスポンシブ】

・3つの暮らしのケースの詳細ページで流れをつなぐ黒い棒がPCでは斜めだがSPでは縦向きである。写真もPCは横並びにしている箇所もあるがSPはほぼ縦並び