つくり方の全容。

初稿。スマホの地図アプリでお馴染みの「下からせり上がるパネル」をそのまま当てはめました。蓼科の風景写真の上に、八室・体験・食事・アクセスの丸サムネを4つ。タップで下からパネルが3割せり上がり、もう一度タップで9割まで。狙いは「地図アプリと同じ操作感」でしたが、見た瞬間にあっけない。1枚の風景写真の上に丸が4つ点いているだけで、宿の魅力が伝わってきません。これなら普通の縦型ウェブの方が、よほど良さが出ます。

出した指示1枚の風景写真の上に丸サムネが4つ並ぶだけだと寂しく、宿の魅力が伝わってきません。これなら普通の縦型ウェブの方が、よほど良さが出る。ファーストビューを根本から見直してください。

情報密度を上げる試みも入れてみたものの、根本の問題が残っていました。地図アプリで「3割せり上がり」が成立するのは、その状態でも背景の地図をスワイプしたり、別の場所を見たりできるから。「背景を動かす動機」があってこそ中間状態が機能するのです。宿サイトの背景は固定の1枚写真。動かす理由がない。それどころか、せり上がったパネルが画面下のサムネを覆ってしまって押せなくなる。ここで方針を切り替えました。借りてきたUIを「そのまま」当てはめる発想を、まず捨てる。

出した指示アプリ的なUIは「そのまま」である必要はありません。ポイントで取り入れる形でも構わない。サイトの魅力を損なうのなら使う必要はない。いいサイトを作る、が上位の目的です。この前提でファーストビューから組み直してください。

サイトの構造を一から組み直しました。トップは写真をマット風に並べたポラロイド。下にスクロールすると概念→八室→体験→食事→アクセス→予約と編集的に流れていきます。せり上がるパネル自体は捨てません。「詳しく見る」ボタンを押した時だけ全画面のパネルが上がってくる「ポイント使い」に切り替えました。中身は一覧→個別詳細の二段構成で、お部屋を選ぶとカードが右にスライドしてその部屋の詳細が出てくる、というスマホで馴染みのある操作感を入れています。画面下のタブバーは「予約してください」を連呼する押しの強いボタンではなく、サイト内を歩き回るための地味な目次として置きました。

出した指示予約ボタンが右下に常時あるのは、宿のサイトを見る人にとっては押し付けがましく邪魔です。サイト内の情報に辿り着きやすくするのが先。最下部はハンバーガーメニューの代わりとして、主要セクションを並べたバー型のナビに変更してください。

八室のセクションでは代表的な部屋を1室だけ載せて、「全室を見る」ボタンへ誘導。押すと一覧のパネルが上がり、各部屋をタップすると右にスライドして個別の部屋詳細が表示される二段構造に。詳細の最下部に「予約する」ボタンを置いてください。

この連作は「スマホでの体験」が主役です。だからPCで開いた時に、無理にPC用のサイトを別に作るのは違う。中央に縦長のスマホ型カラムを置いて、その周りの広い余白に意味を持たせます。左には宿の編集メタ（場所・緯度経度・標高・今の時刻・天気・月齢）、右には章の目次。雑誌で本文の柱の左右に編集情報や脚注が並走するのと同じ作り。スマホでは邪魔だった情報を、PCの広い余白で生き返らせた感じです。下のタブバーは隠して、上のナビに切り替えました。

出した指示PCでは中央にスマホ縦長カラムを据え、その左右に編集メタ（緯度経度・標高・時刻・天気・月齢）と章目次を fixed で並走させてください。背景は全画面にヒーロー写真をぼかして敷く。下部のタブバーは隠し、画面上部の普通のナビに切り替えてください。

PC版で気付いたんですが、各セクションに紙色のベタ塗りを敷くのをやめると、ずっと綺麗になります。蓼科の風景写真をぼかして全画面に薄く敷き、本文セクションは透明にして、章と章の間は1本の細い罫線だけで区切る。「景色の上に紙を載せる」のではなく、「景色そのものが章を貫通する」構成です。蓼科という場所感が前面に立ちます。トップのポラロイド写真も、PCでは正方形にすると額に入った写真感が出ました。

出した指示各セクションのベタ塗り背景を全部撤去して、全画面の景色がそのまま章を貫通する構成にしてください。章間の区切り線は視認性を少し上げて、編集的な罫線として効かせる。ヒーローのポラロイドは、PCでは正方形（やや横長）の方が額装感が出て座りが良いです。