鹿児島県の西側に位置する甑島。
この甑島の滞在をサポートする古民家の宿泊サービスを提供するサイト。
サイトの情報の構成やデザインがとても良くできていて、思わず行きたくなってしまうサイトのデザインの考察をしてみました。

KOSHIKI Stay

雑誌やスクラップブックを見ているようなデザイン

テキストの量や写真の上に文字を少し重ねたり、あえて写真や文字などの配置も整列させずに崩して配置することで緊張をほぐし楽しげな印象にもなります。
koshiki02

サイトのテキストはwebフォントが使用されています

ゆったりと、やわらかい印象を与えているテキストは「りょう Text PlusN」というフォントを採用しています。
ですのでwindowsでもmacでも同じ見た目になります。
Adobe Typekitフォントなのでクリエイティブクラウドの方は無料で利用できますね。
フォントの特徴としては「さ」や「そ」が特に顕著に現れていると思いますが筆の筆跡が少し強いフォントです。
文字の細いラインと太いラインの強弱が大きく、やわらかく、ゆったりとした印象を与えます。今回のサイトにとてもマッチしたフォントです。
aiueo
Adobe TypeKit りょう Text PlusN

文字間を調節することで「ゆったり感」をさらに演出

文字間(下図の赤丸部分)も広くとられています。こういった細かな文字のデザインの調整がサイト全体の雰囲気に影響していきます。
koshiki04

飾らない言葉と情報

「どれもこれもホテルのように揃っていてピカピカというわけではありません。
田舎のおばあちゃんのお家に泊まりにいく感覚でしょうか。」

ありのままの、この言葉が誠実さとサイトの情報の信頼度をグッと向上させます。
サイトで使用している写真のクオリティは高いのですが決して飾らない自然の写真が好感を誘います。

随所にゆったりとしたインタラクションが

ナビゲーションをクリックした時には「ふわぁ~」と。
サイトをスクロールした時には画像が少しずつ小さくなったり。
文字が「ふわぁふわぁ」と表示される動きも、ゆったりとした世界観を崩さず印象付けを助けています。
こういった動きを取り入れるのは費用対効果だけを見るとクライアント様を説得しづらいのですが、この動きを取り入れる価値が感覚的にも伝わります。

旅先の過ごし方を想像させる

割とこういったコンテンツで忘れがちなのが宿の案内はしたものの、そこでどんな体験ができるのかという情報が抜けがち。
なのですが、しっかりと「すごし方」が記載されています。
koshiki03
「こんな過ごし方ができそう!」というのがイメージしやすく、雨の日は読書と雨の日まで配慮されています。

旅行に行くまでは予期的UX

まさに、KOSHIKI Stay のwebを見て旅を想像しているのが予期的UX。行くまでに、どれだけワクワクさせられるかがこのサイトデザインでやるべき目標の一つ。
UX白書
引用:http://site.hcdvalue.org/docs
一時的UXとエピソード的UXを考えると、例えば甑島を旅行中の人や旅行した人にInstagramで投稿してもらって、そのフィードを表示することで、それぞれの旅の楽しみ方が提供できるのではと思います。

まとめ

サイトデザインとコンテンツの質も上手にまとめられたサイト。
宮崎にも、こういうアプローチで魅せれる資源は沢山あるのでは。
デザインは数値化しづらく評価されづらい分野でありますが、こちらのKOSHIKI Stayサイトは感覚的にも良いデザインというのがわかるサイトになっているのではと思います。