M.Studio

チャットサービス　UI

個人制作 / UIデザイン

チャットツール UI

Overview 案件概要

ターゲット
  • BtoB / BtoCを問わず、幅広い層が利用。
  • 一般的なITサービスやWebツールを使い慣れている層。
  • 過度な遊び心（エンタメ性）は抑え、機能性と実用性を重視。
制作期間 3週間
使用ツール Figma

Concept デザインのコンセプト

ターゲットの心理 LINE等のプライベートとは別の「ライフスタイル全般やビジネスシーンに特化したコミュニケーションツール」を求めている。（公私の切り分けのため）
サイトの印象 最新のUIトレンドを反映したモダンな操作感を想起させ、「直感的でストレスなく使いこなせそう」という期待感を持つ。
魅力を感じる部分 カジュアルな日常のやり取りからビジネスまで、シーンを選ばずに幅広く活用できる汎用性。
期待していること
  • UIの最適化による、心理的ストレスのない円滑なコミュニケーションや操作体験。
  • 用途に応じた機能の使い分けなど、公私どちらのニーズも満たす柔軟な機能性。
カラー
  • 【パープル】
    低彩度の紫を採用し、プロダクト全体の「透明感」「モダンさ」「クリーンな品位」を表現。
  • 【オレンジ】
    彩度の低い薄めのオレンジを使用し、全体の世界観を保ちながら、要所を目立たせる目的で使用。
  • 【水色】
    クリーンで洗練された、爽やかな印象を与えるために使用。
  • 【グラデーション】
    明るいトーン：ライトで少し軽やかな印象を表現。
    落ち着いたトーン：ビジネスシーンにも馴染む、少し落ち着いた大人らしさを表現。

Point デザインのポイント

フォント
  • Hiragino Sans　日本語フォント
  • SF Pro　英数字
サイト
  • 主要なチャットツールのUIを比較・分析した上で、操作性の高い要素を自身の設計に最適化して反映。
  • 階層が深くなったり、余分な操作が入らないようした。
  • 誤操作の防止のため、アラートなどの出し方を工夫した。
プロトタイプ Figma プロトタイプに移動

SP スマートフォン

scroll

Back Works
Back Works