写真の使い方に情景を見せる工夫がされた 「星のや」 のサイトを分析

「星のや」のサイトは、たくさんの美しい写真に彩られています。写真そのものの美しさはもちろんのことですが、写真の見せ方、使い方、スライドショーのデザイン、画面の切り替わりで より一層美しさを引き立たせており、サイトを訪れた人に、自然や施設の洗練された美しさや高級感を感じさせ、「行ってみたい」と思わせるデザインになっています。

メインビジュアルは広々とした京都の自然の写真が大きく使われています。静止画ですが、少しずつズームアウトの動きが
付いていることで、訪れた人の目をより惹きつけます。白い文字が読みやすいよう、少しトーンを落とし目にしてあるのも、壮大な自然と広々とした空気を演出しています。不必要なものをできるだけ削ぎ落としながらも、空室検索への誘導ボタンははっきりと表示され、わかりやすくスムーズに予約ができるようになっています。

スクロールすると、「星のや」へ向かう道中がストーリーのように語られ、言葉と写真、イラストで描かれた地図が「星のや」の世界観へ惹き込みます。

テキスト部分は大きめに余白を取り、すっきりと読みやすくまとめられています。
横にかなり余白が取られており、テキストの横幅はかなり狭めになっているので、かたまり感のある1つのオブジェクトのようで写真とのバランスがとても良いです。
また、シンプルな中でもタイトルとボディテキストの部分でフォントを使い分けていたり、さりげなく間にシンボルマークを入れて画面を引き締めていたりと、細部にまで意識が見られるデザインになっています。

写真を見せるスライドショー部分は、特にこだわりを持って作られています。
横に余白を取らず、画面いっぱいに写真が横に流れていきますが、写真の両サイドがマスクで切られており、実際はもう少し両脇が広めに取られているのがわかります。そのため、流れると隠れていた端の部分が少しずつ現れ、静止画でありながら動きや奥行きを感じられる、その空間を切り取った情景に見えてきます。
また、それぞれ写真の左上には番号とタイトルが表記されており、一枚一枚が作品のようです。
スライドショー部分にポインタを乗せると、形が「>」「<」と変化し、わかりやすいナビゲーションになっています。

さらに、写真を見せるスライドショーが続きますが、また違った作りになっており、飽きさせません。
先ほどの部分では景色や情景をメインにみせ、こちらでは宿の細部を組み合わせ、全体の雰囲気を表現しています。
スクエア型の1枚の写真、次に進むと7分割の構成の写真、と交互に表示させて変化をつける工夫がされています。
移り変わりの動きも美しいので、つい次へ進みたくなるスライドショーです。

客室・食事のページは、上部に画像が使われていますが、文字とのレイアウトが雑誌のように組まれています。
写真を四角く切って入れた文字タイトルは、写真の上に文字を乗せるよりも目を引きますし、どんな写真がきても見やすさが変わりません。
説明テキスト部分はトップページのように横幅が短く収められ、二段で組まれているので、横に続いていく組み方よりメリハリがつき、読みやすいデザインになっています。
ここでの写真は、右側いっぱいに配置されていますが、足りない部分が同じ写真の連続で埋められています。
これにより、ウインドウの横幅が変わっても、ほぼ影響がありません。両側にこの処理がされていると、うるさく見えそうですが、片側だけなので、画面を邪魔することなく自然に見えます。写真の横幅が足りない場合や、写真を広々と見せたい場合、またウインドウの横幅にあまり左右されないようなデザインにする、1つの解決策かもしれません。

このように、「星のや」のサイトでは、写真の使い方に様々な工夫がみられます。
写真のクオリティの重要性はもちろんですが、使い方を工夫することで雰囲気の演出や細部へのこだわりを感じさせることができます。
「星のや」のウェブサイトは、写真のあしらい、空白の取り方で洗練された様子や静かさをイメージさせ、「星のや」とそれをとりまく自然の美しさや高級感を演出しているサイトデザインになっています。