INDEPENDENT DESIGN STUDY / 2026

余白を感じる、
体験をつくる。

「澄庭 SUMINIWA」は、庭と過ごす一棟貸し宿をテーマにした、架空のブランドのWebサイトです。参考サイトのレイアウトと動きを研究し、ブランド・写真・文章を置き換え、独自のコードで再構築した自主制作です。

ART DIRECTIONWEB DESIGNFRONTEND DEVELOPMENT

この作品の位置づけ。

実在する宿泊施設の受託制作・運営実績ではありません。掲載した写真は、コンセプトを表現するためのイメージ素材です。同一施設の写真ではなく、澄庭という実在の建物を紹介するものではありません。

宿泊予約や決済の機能は提供していません。「滞在を計画する」は、日程・人数の選択から滞在イメージの表示までを体験するブラウザ内のデモです。入力内容の送信、保存、個人情報の収集は行いません。

大きな実写写真と縦書きの言葉で、宿の世界観に触れる入口をつくりました。参考サイトの生成りの背景、白い縦型の見出し札、夜の紺色を再現し、写真の自然な質感が主役になるようにしています。

参考サイトと同じ導入、宿の紹介、一日の過ごし方、風景、お知らせ、アクセス、予約導線の順序と配置を基準に再構成しています。写真の大きさや余白、縦書きの文字組みを実測して合わせました。

約4秒の導入、ロゴの移動、写真のクロスフェード、スクロールに合わせた文章表示、PCでの5場面の横送りを基準サイトに合わせて実装しています。スマートフォンでは縦の流れに切り替え、端末の「視差効果を減らす」設定にも対応。アニメーション停止ボタンとキーボード操作を用意しています。

公開サーバーはNetlify。予約API、決済、顧客管理システム、解析タグは接続していません。実案件への導入時は、運営条件と必要なサービスに合わせて設計する想定です。

TOKITOKI PATINA のローディング、文字組み、レイアウト、スクロール表現を研究し、その配置と動きを基準に再構築しています。ブランド・写真・文章は置き換え、HTML・CSS・JavaScriptは独立して実装しました。元のデザインを完全に独自発案した作品とは位置づけていません。

参考サイトの写真、ロゴ、文章、CSS、JavaScriptは公開版に使用していません。参考サイトおよび運営者との提携・制作受託を示すものではありません。

写真はPexels Licenseに基づき使用しています。撮影者の作品を、空間のイメージとして選定しました。掲載は撮影者や撮影場所からの推奨・提携を意味しません。

書体はGoogle Fontsの Noto Serif JP、Noto Sans JP、Cormorant Garamond（SIL Open Font License）を使用しています。写真素材の再配布を目的としたサイトではありません。