見出し画像

UI / UXデザイン | ふたり会議

[概略]
株式会社すきだよ様のサービス『ふたり会議』のUI / UXデザインを担当。パートナー間のコミュニケーションツールとして、どのような形のパートナーシップでも抵抗なく使えるデザイン、文言、動線を目指して設計を行いました。

01 | 目的・背景

「ふたり会議」は結婚前にパートナーと価値観を確認できるサービス。2019年9月のリリースに伴い、WEBサイトのデザインのご依頼を頂きました。当初のご相談内容は以下の通り。

① 質問形式で価値観を確認するものである
② 回答をパートナーと比べて、相違点を発見できるものである
③ WEBブラウザ上で閲覧を行う
④ 今回のサービス立ち上げはβ版の位置付けであり、完璧さよりも早期のリリースを優先する

02 | 要件整理

今回はβ版の位置付けとのことで、まず最初に「達成したい目的」「やること / やらないこと」といった、基本的な部分の擦り合わせを行わせて頂きました。ご相談の際にはエンジニアも同席し、実装時の技術的な要件、現実的な費用感、リリースまでのスケジュールを相談の上、要件の粒度を上げて明文化して行きました。

画像7

結果、ユーザー認証やこだわったデザインなど+αの部分については後のフェーズに回し、「ここだけは最低限クリアしたい」という範囲のミニマムな機能リリースを行うことになりました。デザインについても実装の簡易性を重視し、マテリアルデザインフレームワーク(幾つか検討の上、最終的にはVueのVuetifyに決定)を使用することになりました。

03 | イメージの擦り合わせ、色の決定

次に、イメージの擦り合わせを行うため、思い描くものに近いサイトを数点ピックアップしていただきました。その後、こちらで同系統のサイトを抽出 → カラーの抽出 → 系統の分類 → カラーテーマの提案 と、幾つかのステップを踏みながら、頭の中にあるイメージを近付けて行きました。

スクリーンショット 2019-12-17 11.11.49

02 カラー抽出結果

03 カラー提案

この擦り合わせの目的は、サービスのキーカラーを決定することにありました。事前に頂戴したサイトはピンク×ブルーの組み合わせが圧倒的に多い状況でしたが、「多様なパートナーシップに配慮した設計にしたい」「女性だけでなく男性でも抵抗なく使えるものにしたい」というご要望があることを鑑みて、「ピンクとブルーの組み合わせは男女のイメージが強すぎないか?」「男性でも抵抗なく利用できるものであるか?」「既存の性別イメージが付いていない色が良いのでは」など、ご依頼者様と慎重に協議を行いました。最終的に決定したのは右のシンプルなカラーリングで、これをベースに設計を行うこととなりました。

04 | コア機能「質問」のUI検討

次にコア機能である「質問」のUIについての検討を行いました。
まずカラーと同様にリサーチを行います。今回のサービスは、位置付けとしては診断サービスに近しいと考え、既存の診断サービスのUIを数点ピックアップ。傾向を大まかに分類すると「YES / NOで答えられるタイプ」と「ユニークな個別回答を行うタイプ」の2タイプがあったことをご報告。

当初頂いていた質問の原稿は、 "Q. 結婚式には誰を呼びたいですか?" に対して "A. 友人 / 両親 / 親戚 / 会社の人" の中から該当するものを複数回答する形式で、「ユニークな個別回答を行うタイプ」に当たりました。

04 UIリサーチ結果

質問内容とターゲット像を見比べながら、今回のユーザーにとってどちらが好ましいか検討を重ねます。最終的に、
・回答は意思決定の連続であること
・意思決定には労力を要すること
・離脱せずに診断が終わることが最も大事であること
などを鑑みて、意思決定のコストが最小限であることがユーザーにとって好ましいはずだという仮説のもと、「YES / NOで答えられるタイプ」を選択することに。既存の質問をすべてこのタイプに変換しました。

【当初案】
Q. 結婚式には誰を呼びたいですか?(A. 友人 / 両親 / 親戚 / 会社の人)

【決定案】
Q1. 結婚式を開催したいですか?(A. YES / NO)
Q2. 結婚式に友人を呼びたいですか?(A. YES / NO)
Q3. 結婚式に両親を呼びたいですか?(A. YES / NO)…


05 | ワイヤーフレームの作成

骨組みとなる要件が固まったので、ここからデザイン案を作成して行きます。とはいえ今回はVueのフレームワークを利用するので、完璧なプロトタイプは不要と考え「ご依頼者様とエンジニアに伝わる、ちょっと綺麗なワイヤーフレーム」くらいのものを目指しました。

07 作成していただきたい文章

※ワイヤーなので色味などが本番と異なります。ここで頂いた文章や「カップルが診断している様子のイメージをトップに入れたい」といった追加のご要望を受けて、調整を行って行きました。

06 | ロゴ等の素材作成

最後に必要なWEB素材について、優先順位を決めつつ制作を行いました。実は、トップ画像は当初「タブレットを眺める男女の写真」でしたが、多様なパートナーシップを応援しているご依頼者様のポリシーを踏まえ、イラストに変更させて頂きました。ふたりのパートナーが食卓であれこれ会議をしている、そんな印象を持っていただければと思います。

スクリーンショット 2019-12-17 12.46.56

07 | 実装と納品

合意をいただいたデザインをもとに、実際のサービスを実装します。今回は実装をエンジニアが担当していたため、担当者と相談しつつ、文字のカーニングや余白の微調整を行いました。

↓実際のサイトはこちら
https://futari-kaigi.com/

本件は立ち上げとリリースまでを担当させていただきました。以後のアップデートにつきましては株式会社すきだよ様で運用されております。サービスに関するお問い合わせ、ご要望につきましては、お問い合わせまでご連絡頂けますと幸いです。

08 | クレジット

公開年月日:2019年9月21日
制作期間:15時間
制作環境:Figma / Adobe Illustrator

株式会社すきだよ様(代表取締役 あつたゆか様)
https://sukidayo.co.jp/

ふたり会議
https://futari-kaigi.com/

この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

note.user.nickname || note.user.urlname

いただいたサポートは息子のおやつ代になります。最近はズッキーニを焼いたものがマイブームみたいです。

超大吉
222
2歳の息子&夫と暮らす bosyu のUIデザイナー / 育休シミュレーター&YASUMO の運営 / 家庭の効率化を考えるのが趣味 / たまに絵や記事も書きます
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。