一休.com Developers Blog

一休のエンジニア、デザイナー、ディレクターが情報を発信していきます

宿特化の写真投稿SNS「YADOLINK」のUIUX設計 について

YADOLINK事業部デザイナーの李と申します。

YADOLINKは、一休が運営する「ホテルや旅館など”宿”が大好きな人たちが集まるSNS」です。宿に特化したサービスだからこそ宿泊体験を気兼ねなく投稿でき、深い共感を得られます。 web版を2022年4月19日に公開し、iOSアプリを2023年1月24日(火)にローンチしました。

YADOLINK by 一休.com

YADOLINK by 一休.com

  • IKYU Corporation
  • 旅行
  • 無料
apps.apple.com

1. 写真投稿SNSの “ベーシック” を考える

どこまでInstagramに寄せるべきか?

YADOLINKは写真投稿が主要な手段のSNSです。広く知られている写真投稿SNSにInstagramがありますが、「インスタっぽいものだよ!」と簡単に伝えることで、最初の利用するハードルが下がると考えました。どのようにInstagramに寄せて、どのように差別するかを最初に検討しました。

フィードUI

Instagramの最も基本的なUIはホーム画面に表示される通常の投稿フィードです。

多くのユーザが使い慣れているUIであるため、YADOLINKでもユーザーの投稿をフィード形式にすることを決定しました。しかし、Instagramのフィードをそのままにするのではなく、YADOLINK独自のユーザーニーズに合わせて、情報整理を行い、以下の部分を差別化することにしました。

1. 宿に特化したサービスのため、宿泊施設が一番重要な要素となり、フィードに宿泊施設名を表示するように追加した。

2. 投稿全体に対しての説明だけでなく、写真ごとに説明&思いを記述できるようにキャプションを追加した。

3. 「いいね」をするハードルを下げるため「いいね数」だけを表示して、「いいね」をした人のリストは非表示した。

4. ユーザーの体験をよりスムーズにするため、ページ遷移せずにコメントできるようにコメントのUIをモーダルにした。(アプリのみ)

5. 初期リリース時には、お互い知らない人同士の投稿にいいねやコメントすることのハードルが高いと思われるため、いいね数やコメント数が少なくても投稿するモチベーションを高めるため、「閲覧数」という指標を表示することを決定した。

2列フィードUI
中華圏を中心とした新興SNSを参考に

初期リリース時にはフィードUIのみが提供されましたが、一覧性が低く1スクロールで1~1.5の投稿しか見られない、タイムラインに流れている投稿が自分がフォローしている人の投稿に限らず全ての投稿が表示されるなどの課題がありました。

この課題を解決するために、下記の2つの改善を行いました。

1. YADOLINKでは中華圏を中心とした新興SNSでよく見られる「2列フィード」のUIを導入しました。これは、生活必需品とは異なり、宿みたいな嗜好品を「気になるからとりあえず見てみたい(予約意欲までいかない場合も含む)」という場合、ユーザーのニーズが漠然としていることが多いです。「行きたい宿を探す」というより「漫然とユーザーの投稿を眺めている内に行きたい宿を見つける」という仕様がYADOLINKユーザーに最もマッチすると考えました。「行きたい宿が決まっている」場合は、YADOLINKよりも一休.comの方を利用するユーザーが多いかもしれません。「小紅書」という中国のSNSの2列フィードUIは、このようなユーザーの気持ちにとことん寄り添い、参考になりました!

※「小紅書」(RED) は、2022年2月時点、登録ユーザー数3億人の動画や写真などを共有できる「インスタグラムとアマゾンが合体したようなアプリ」です。

2. 2列フィードUIの導入に伴い、トップページは「おすすめ」「フォロー」「新着投稿」の三つのタブに分けられ、それぞれがタイムラインとして閲覧できるようになりました。

宿の写真が引き立っていることを一番大事に

一休.comというサービス従来の上質感を残しつつ、新しいサービスとしての活発・躍動感も表現できるようにデザインしています。

主役である宿の写真が引き立っていることを一番大事にしています。InstagramなどのSNSで流行っている写真の上に文字入れインパクト系の画像は上位表示させないなど、一休.comの上質な世界観を取り入れています。

2. SNSは “アプリが命”

YADOLINKはWebからスタートしましたが、最初からアプリを意識していました。なぜならば、SNSは「アプリが命」だと考えられているからです。頻繁に開かれるものであり、毎回ブラウザを開くことは大変面倒です。「いいね」「コメント」「フォロー」などの機能にもリアルタイムのプッシュ通知が不可欠です。アプリではウェブサイトで実装が難しいインタラクションも実現できるため、ユーザーの没頭を促し、ストレスなく操作することが期待できます。

下記の図のようにアプリでは
・スワイプでタブ移動、ページ遷移できるようになった
・インタラクションでおすすめ投稿一覧と投稿詳細間がスムーズな往来になった
WEB
 
APP
・ログインフローのUIUX改善
WEB
 
APP
アプリ開発に伴い、その他の改善点も整理してみました。興味がある方ぜひ触ってみてください〜
・新しく実装された関連投稿で次々に行きたい宿が見つかる
・いいねの傾向に基づいたおすすめ投稿の精度向上
・写真選択段階に並び順を変えられるように
・投稿画像の縦横方向を指定できるように
・トリミング時の画像拡大・縮小
・入力画面にてスクロースせずに全ての項目を入力できるように
・キャプションの追加などはページ遷移→モーダルに変更
・自分の投稿へのコメント通知により素早く返事ができるように
・他にも自分への投稿へのいいねやフォロー通知が受け取れる
・受け取りたい通知はカテゴリごとに制御可能

3.まとめ

「YADOLINK」は、お宿を訪れた方が自分で撮影した写真を投稿できる「宿特化型SNS」です。写真を中心に、ユーザーが直感的に好みの宿を探しやすいインターフェースを提供しています。自分自身では言語化できないニーズを発見したり、まだ知らなかった「自分好みのお宿」との偶然の出会いを演出します。

これまで一休にはSNSサービスがありませんでしたが、YADOLINKをきっかけに新しいUIUXに取り組み、試行錯誤しながら多くのことを学びました。

特定のジャンルを絞らないSNSとは異なり、宿泊施設に特化したSNSであるため、ユーザー層や利用頻度などが比較的限定的ですが、UIUXの改善により、より多くのユーザーに愛用していただけるよう努めています。

一休では、ともに良いサービスをつくっていく仲間を積極募集中です。応募前にカジュアルに面談をすることも可能ですので、お気軽にご連絡ください。

hrmos.co