「品格」を、コードで表現するということ
Webサイトのデザインには、言葉以上に雄弁な「佇まい」があります。訪問者がページを開いた瞬間、まだ一文字も読んでいないのに「ここは、本物だ」と直感的に感じる。そんな体験を設計できるかどうかが、ブランドの第一印象を左右します。
無料HTMLテンプレート「EYANCA」のラインナップの中でも、『SANCTUARY（サンクチュアリ）』はまさにその「佇まい」を追求したテンプレートです。ゴールドとオフホワイトを基調としたカラーパレット、パララックス（視差効果）によるスクロール体験、そしてモーダルウィンドウによる丁寧な情報設計。高級ホテルや旅館のWebサイトを思わせるような上質な空間が、HTMLファイル1つで手に入ります。
この記事では、『SANCTUARY』のデザインの特徴やおすすめの活用シーン、カスタマイズのヒントまで、じっくりご紹介します。
デザインの特徴とこだわり
画面を覆う没入感 ― フルスクリーンスライダーの演出
『SANCTUARY』を開いてまず目に飛び込んでくるのは、画面いっぱいに広がるフルスクリーンのヒーロースライダーです。最大5枚の画像がクロスフェードで切り替わり、中央にはキャッチコピーが静かに浮かんでいます。
ここで注目したいのは、画像の切り替え方です。派手なスライドアニメーションではなく、6秒かけてゆっくりとズームしながらフェードする設計。この「ゆるやかな動き」が、訪問者に焦りを感じさせず、むしろ時間の流れが少し遅くなったような錯覚を与えてくれます。高級感の演出において、「急がせない」ことがいかに大切か。このスライダーは、それを静かに教えてくれるような存在です。
スクロールで生まれる「奥行き」 ― パララックスエフェクト
コンテンツエリアに配置された画像には、パララックス（視差）効果が施されています。スクロールに合わせて背景画像がわずかにずれて動くことで、画面に物理的な「層」があるかのような印象を与えます。
フラットなWebページが当たり前になった今だからこそ、この控えめな立体感が効いてきます。訪問者は意識せずとも「居心地の良さ」を感じ、ページを最後まで読み進めたくなる。パララックスは派手に使えばうるさくなりがちですが、『SANCTUARY』ではあくまで「気づく人だけが気づく」程度のさりげなさに留めています。この匙加減が、テンプレート全体の品格を守っています。
書体が語る品格 ― Cinzel × Shippori Mincho
デザインにおいて、フォント選びはカラー選定と同じくらい重要です。『SANCTUARY』では、見出しに「Cinzel」、本文に「Shippori Mincho」という2つの書体を組み合わせています。
Cinzelは古代ローマの碑文からインスピレーションを受けたセリフ体で、そこに在るだけで荘厳な雰囲気を纏います。一方、Shippori Minchoは日本語の明朝体としての美しさに加え、Web上での可読性も考慮されたフォント。この「西洋の格式」と「日本の繊細さ」が溶け合うことで、和洋を問わないラグジュアリーな空気感を作り出しています。
欧文書体「Cinzel」は、あえて”本文には使っていない”
見出しに使っている Cinzel は、古代ローマの碑文をルーツに持つ書体で、実は「大文字（キャピタル）専用」に近い性格を持っています。小文字はほぼ持たず、日本語のグリフ（文字）も含まれていません。つまり、そもそも長い文章を組むようには作られていない書体です。
なので、このテンプレートでは Cinzel の出番を意図的に絞り込んでいます。使っているのはロゴ・項目名・モーダルの見出しといった、ごく短い欧文ラベルだけ。本文と日本語はすべて Shippori Mincho に任せ、Cinzel は「点」で効かせる象徴的なアクセントとして配置しています。
ここはデザイン上の判断が分かれるところで、欧文の装飾的な書体は「広く使う」より「ここぞという一点に置く」ほうが格が出ます。面で多用した瞬間に、上品さは消えて読みにくさだけが残る。引き算で使うのがコツです。
AIでカスタマイズする際の注意点もここに絡みます。「サイト全体のフォントをCinzelに統一して」とお願いすると、日本語が意図しない書体に化けたり、欧文が全部大文字の壁になって読めなくなることがあります。見出しの書体だけ変えたい場合は、本文（Shippori Mincho）はそのままに、Cinzelを指定している箇所（ロゴ・項目名・見出し）だけを差し替えるよう伝えると、バランスを崩さずに変更できます。
こんな方・こんな用途におすすめ
ホテル・旅館・高級サロンのWebサイト
『SANCTUARY』が最もフィットするのは、やはりホスピタリティ業界です。フルスクリーンの画像スライダーで客室や施設の美しさを伝え、モーダルウィンドウで各部屋の詳細情報を見せる。この導線は、実際のホテルサイトで採用されている構造そのものです。予約バー（固定フッター）も標準搭載されているため、訪問者がどの位置にいても「予約する」というアクションにすぐたどり着ける設計になっています。
高級不動産・物件紹介ページ
物件の魅力を伝えるうえで、「写真を大きく見せること」と「世界観を壊さない情報提示」は欠かせません。パララックスで物件写真に奥行きを持たせ、クリックで詳細を開くモーダル方式は、不動産サイトとの親和性が高いです。ゴールドの配色をお好みの色に変更すれば、モダンな物件にもクラシカルな物件にもフィットさせることができます。
伝統工芸・ブランドのストーリーテリング
歴史ある工房や、クラフトマンシップを売りにするブランドのWebサイトとしても力を発揮します。文字の量を増やしてストーリー性を持たせたい場合にも、明朝体ベースの文字組みと広い行間が、長文を美しく読みやすく整えてくれます。
正直なところ、これは”写真の力”を借りるテンプレートです
SANCTUARYは上質な世界観を一瞬で立ち上げてくれる反面、選ぶ前に一つだけ確かめてほしいことがあります。それは「見せられる写真があるか」です。
このテンプレートは、大きく美しい写真と、空間や体験（客室・施設・物件・作品）を見せる構造が土台になっています。裏を返すと、強い写真素材がない場合や、モノ・サービスを説明文中心で伝えたい場合には、画面が間延びして寂しく見えてしまいます。高級感は、余白と写真の質にかなり依存します。
なので、もし「写真は多くないけれど、文章でブランドのストーリーをじっくり読ませたい」なら、雑誌のように文字を主役にできる EDITORIAL や、紙の質感で長文を美しく組める PAPER のほうが噛み合うかもしれません。「写真は数点だけど、一点一点を静かに引き立てたい」なら、美術館のような余白設計の LUMINA も候補です。”自分が見せたいもの”と”テンプレートが得意なこと”が合っているかを基準に選んでみてください。
カスタマイズのヒント
アクセントカラーの変更で「季節感」を演出する
設定エリアにあるアクセントカラー（ゴールド）を別の色に変えるだけで、テンプレート全体の印象がガラリと変わります。たとえば：
- 深いブラウン系: 秋の温もりを感じる、和モダンな趣に
- ダークグレー系: クールで都会的な印象に変化
- バーガンディ（深い赤）系: ワイナリーやバーの空気感を
色を変えるだけで想像以上に表情が変わるので、ぜひ試してみてください。
スライダー画像の枚数と切り替え速度
デモではスライダーに3枚の画像を設定していますが、最大5枚まで増やせます。画像が多いほど飽きにくいスライダーになりますが、一方で読み込み時間とのバランスも大切です。ベストは3〜4枚程度でしょう。切り替え間隔はデフォルトで3秒ですが、より落ち着いた印象にしたい場合は5〜6秒に伸ばすのもおすすめです。
ロゴは背景に合わせて、自動で色を変えています
ページを上から下までスクロールすると、左上のロゴやナビの文字色が、背景の写真に応じて自然と読みやすい色へ変わっていることに気づくでしょうか。これは mix-blend-mode という指定で、背景の明暗を反転させて文字色を決める仕組みを使っています。明るい写真の上では暗く、暗い写真の上では明るく——わざわざ色を切り替えるコードを書かなくても、常に文字が埋もれないようにしているわけです。
ここはこのテンプレートの「縁の下の力持ち」なので、AIにカスタマイズを頼むときは少し注意が必要です。たとえば安易に「ヘッダーの文字を白にして」とお願いすると、この自動反転の仕組みごと上書きされて、明るい写真の上で文字が真っ白に飛んでしまうことがあります。もし色を固定したい場合は、その自動反転は残したままにするよう一言添えるか、写真の上に薄い暗幕（オーバーレイ）を一枚敷くよう指示すると、読みやすさを保ったまま調整できます。
まとめ ― 静寂のなかに宿る「おもてなし」
『SANCTUARY』は、派手なアニメーションやトレンド感で勝負するテンプレートではありません。むしろ、余白と書体、そして控えめな動きの積み重ねによって、ブランドの「格」を静かに、しかし確実に引き上げてくれるテンプレートです。
「高級感のあるWebサイトを、できるだけシンプルな構成で作りたい」。そんな方にとって、このテンプレートは理想的な出発点になるのではないでしょうか。
