日本語コミュニケーション設定UI画面

選択したコミュニケーションの人格や関係性タイプを微調整する、洗練された日本語Webアプリのオンボーディング／設定画面（ステップ2）。16:9デスクトップUIスクリーンショット、白から淡いグレーの背景、約720px幅の中央配置されたコンテンツカラム、ゆったりとした余白、柔らかなシャドウ、角丸カード、ミニマルなSaaS UIデザイン。 ヘッダー：上部中央に「2」が入った小さな円形バッジとラベル「相手タイプの微調整」。その下に太字の日本語見出し「選んだ人格を、あなたらしく整えましょう」。見出しの下に小さめのグレーのサブタイトル「おすすめ設定が用意されています。こだわりたいところだけ調整しても、そのまま進んでも大丈夫です。」 メインレイアウト：細いライトグレーの枠線と角丸の、垂直に並んだ正確に4枚のアコーディオンカード。各カードには左側に線画アイコン、太字の日本語タイトル、小さめのグレーの説明文、右側に山形矢印アイコン： 1) 閉じたカード：人物アイコン、タイトル「友だち・家族」、説明「気心の知れた相手とのカジュアルなやり取り」、下向き矢印。 2) 閉じたカード：ビルアイコン、タイトル「社内（メンバー）」、説明「チームメンバーや同僚とのやり取り」、下向き矢印。 3) 展開中のアクティブカード：[鮮やかなブルー]で強調されたユーザーアイコン、タイトル「社内（上司・別チーム）」、説明「上司や他部署のメンバーとのやり取り」、上向き矢印。 4) 閉じたカード：ブリーフケースアイコン、タイトル「社外・取引先」、説明「取引先やビジネスパートナーとのやり取り」、下向き矢印。 展開カードの詳細：3枚目のカード内に、左側に日本語ラベル、右側にセグメントピル切り替えコントロールが並ぶ正確に6行の設定項目： - 1行目：「敬体」選択肢：「タメ口」、「砕けた敬語」、アクティブな[鮮やかなブルー]の「丁寧敬語」、「ビジネス敬語」。 - 2行目：「相手の呼び方」選択肢：アクティブな[鮮やかなブルー]の「〜さん」、「〜様」、「あだ名・呼び捨て」、「宛名なし」。 - 3行目：「絵文字」選択肢：「なし」、アクティブな[鮮やかなブルー]の「たまに」、「よく」、「相手に合わせる」。 - 4行目：「！？の量」選択肢：「使わない」、アクティブな[鮮やかなブルー]の「たまに」、「よく」、「相手に合わせる」。 - 5行目：「書き出し＆締め」選択肢：「なし」、「定型」、アクティブな[鮮やかなブルー]の「名乗る」、「相手に合わせる」。 - 6行目：「よく使う絵文字の手札」9個の小さな正方形絵文字ボタンとプラス記号：選択中の笑顔絵文字、親指アップ、キラキラ、汗のしずく、ハート2つ、目、両手を上げる、クラッカー、考え込む顔、そして「+」。 フッター：アコーディオン群の下に、中央配置された丸みのある[鮮やかなブルー]グラデーションのプライマリーボタン、白文字で「これで作る」。 スタイル：モダンでクリアな日本のプロダクトUI、ダークネイビーのタイポグラフィ、控えめなカードシャドウ、すっきりとした余白、ブラウザ枠なし、透かしなし、すべてのUIテキストは完全な日本語で表記。