Wrtn 生産性向上機能

Wrtnでは、月間アクティブユーザー数が500万人以上に成長したAIプラットフォームの構築に取り組みました。以下の2つのケーススタディは、これらの体験を設計し提供する中で私が解決した、主要なプロダクト課題を示しています。

言語を選択してください:

Japanese

ケーススタディ 1

AI要約ツール

ケーススタディ 2

AI文章ヒューマナイザー

ケーススタディ #1

断片化されたワークフローを超えて:マルチモーダルAIサマライザーのためのUI/UXデザイン

チーム

PM 1人、デザイナー1人、エンジニア3人

役割

専任プロダクトデザイナー

タイムライン

2025年8月 - 9月

プラットフォーム

Web、iOS、Android

概要

YouTube動画、ドキュメント、ウェブ記事などの散在する情報を1つのワークスペースに簡単に集約・要約し、親しみやすいAIアシスタントとの自然な会話を通じて、コンテンツを自由に編集・再利用できる統合型生産性サービスを設計しました。

このプロジェクトでは、唯一のプロダクトデザイナーとして、様々なインプットタイプに対応する一貫した情報フローを構築し、直感的な会話を通じてユーザーが結果を洗練させることができるインタラクションモデルを設計しました。

問題

ユーザーが長尺の動画やドキュメントデータを消費する際に直面する構造的な制限と心理的な障壁を、3つのカードコンポーネントに明確に定義しました。

ツールの断片化

ユーザーは、YouTube動画の視聴、PDFレポートの確認、ニュース記事の閲覧など、行う作業に応じてまったく別個のサイトやツールを切り替える必要があるため、非常に大きな摩擦(使いづらさ)に直面しています。

認知の過負荷

ユーザーは、長文を読む負担を減らすために要約ツールの力を借ります。しかし、AIからの返答が、階層構造のない、またしても難解な文章の塊である場合、皮肉なことに、ユーザーが避けようとしていたものと全く同じ精神的疲労を引き起こすことになります。

プロンプト不安症

一般的なAIチャットボックスは、不自然で機械的な印象になりがちです。ユーザーが要約を少し調整したいと思っても、適切な出力を得るためにどのようなロボット的なコマンドを入力すべきか悩んでしまい、「プロンプト不安」(プロンプト作成への不安や抵抗感)が生じることがよくあります。

ユーザーリサーチ

私は、硬直したプロンプトインターフェースや整理されていないテキストレイアウトに対する不満を捉えるために実際のユーザーの声を分析し、これらのユーザーのペインポイントを具体的なデザインの機会へと昇華させました。

「AIの要約は悪くないのですが、それでもまだ長くて硬いので、結局自分でハイライトを引いてメモを作る羽目になります。これではショートカットツールを使う意味が全くありません。」

ユーザーが求めているのは、単に文字数を短くすることではありません。すぐに使える、実用的で視覚的な構造が必要なのです。

「トーンを柔らかくしたり、ツイート(ポスト)風に変換したりするために、プロンプトボックスに何と入力すればいいのかいつも分かりません。毎回プロンプトの解説書のカンペを探すのには、もううんざりしています。」

ユーザーが安心感を取り戻せるよう、これまでのコマンドラインの固定概念を、スムーズな対話型インターフェースと直感的なプリセットショートカットへと移行する必要がありました。

インサイト

このセクションでは、ユーザーリサーチを通じて明らかになった主要なインサイトが、どのように主要な製品機能へと直接反映されたかを明らかにします。

統合インプットハブ

ユーザーが異なるツールの間で離脱するのを防ぐためには、YouTube、ドキュメント、ウェブサイト、テキストをすべて1か所に統合できる、単一の統一されたインターフェースを構築することが極めて重要でした。

生のテキストよりも視覚的階層を優先

ユーザーは、平坦で高密度な段落を前にするよりも、タイムラインや箇条書きのハイライトのように、レイアウト自体がすでにデータをチャンク化(細分化)し、カテゴリ分けしている画面を求めています。

共感力の高いエージェント

ユーザーに空の入力ボックスを見つめさせ、コマンドに頭を悩ませるのではなく、親しみやすいキャラクターのアシスタントがインターフェースに存在し、コミュニケーションのギャップを埋める必要があります。

プロトタイピング

私は鮮明なプロトタイプを作成するためにClaude Codeを活用しました。


リンク: https://chois584848.github.io/ai-summarizer/

解決策

Image Studio を独立した製品画面として設計し、画像生成、変換、ライブラリ管理を 1 つのワークフローに統合しました。

4フォーマット統合入力ハブ

クリーンなタブレイアウトを採用した 4フォーマット統合入力タブデザイン を反映し、ユーザーが1つのワークスペース内であらゆるコンテンツフォーマットを即座に貼り付けて処理できるようにしました。

コグニティブ・マルチプリセット・レイアウト

結果エリアの最上部に マルチプリセット出力レイアウト を配置し、視覚的なチャンキングによって読解による疲労を即座に軽減するようにしました。

会話型AIキャラクターパネル

右側、またはユーザーが修正を要求したときに、親しみやすくキャラクター主導の「Roi」インタラクションパネルを統合し、プレッシャーのない会話を通じてユーザーがテキストを共同制作し、洗練させることができるようガイドします。

影響

  • 統合インプットアーキテクチャにより、クロスプラットフォーム間のナビゲーションを排除することで、コンテンツ集約時の一般的なユーザー離脱率を削減することに成功しました。

  • マルチプリセットタブを活用したビジュアルレイアウト構造により、データのスキャン性が大幅に向上し、情報処理が加速されました。

  • 「Roi」による対話型のインタラクティブな推敲により、プロンプトエラーが最小限に抑えられ、最終的な要約を生成するまでのプロセスが劇的に短縮されました。

約4倍高速

タスク完了速度

-35%

AI処理中の離脱

反射

  • 技術的な機能とジェネレーティブUXの架け橋
    AIエンジンがいかに強力であっても、出力に視覚的な階層構造が欠けていたり、操作が難しく感じられたりすると、優れた体験を提供することはできないと実感しました。このプロジェクトを通じて、プロダクトデザイナーの究極の役割は、複雑な技術的機能を、直感的で文脈を理解したユーザーフローへと人間味のあるものにすることであると再認識しました。

  • ユーザーに主体性を与える重要性
    ユーザーが一方向的なAIの出力を受動的に受け入れることを強いられるインターフェースは、すぐにエンゲージメントの低下につながります。このプロジェクトは、ユーザーに主体性を与えることがいかに重要であるかを学ぶ貴重な機会となりました。プリセットされたショートカットや自然な会話を通じて、ユーザーがAIと簡単にカスタマイズや共同創造を行いながら、主導権を握っていると感じられるようにすることの重要性を理解しました。

ケーススタディ #2

高度な文制御構造による生成テキストUXの変革

チーム

PM 1人、デザイナー1人、エンジニア3人

役割

専任プロダクトデザイナー

タイムライン

2025年9月〜10月

プラットフォーム

Web、iOS、Android

概要

Text Humanizer(テキスト・ヒューマナイザー)は、AIが生成したテキストを、元の意味を維持しながら、より自然で人間味のある文章に変換する機能です。

コンテンツの起草に生成AIが一般的に使われるようになる一方で、繰り返しの多い表現、過度に洗練された文構造、個人の声(らしさ)の欠如などの理由から、依然として多くのユーザーが出力の編集に多大な時間を費やしています。

Text Humanizerは、認識されやすいAI特有のパターンを減らし、意図したコンテキストに合うように書き方を適応させることで、ユーザーがAI生成コンテンツを洗練させるのをサポートします。

問題

生成AIは執筆速度を大幅に向上させたものの、多くのユーザーが追加の編集なしに出力を使用することに苦労しました。

文章が過剰に推敲されており、ロボットのように不自然に感じられました。

類似したフレーズや推移が繰り返し現れました

ユーザーリサーチ

学生や社会人へのインタビューから、AIは主に最初の草稿を作成するために使用されていることが明らかになりました。

「類似したフレーズや移行表現が繰り返し現れました」

「AIのプロセスは信用できない」

参加者が一貫して強調した要件は、「本当に人間が書いたように聞こえるようにすること」でした。また、パラフレージング(言い換え)ツールの使用経験があるユーザーは、書き換えによって元の意味が失われることに対する懸念をしばしば表明していました。

ユーザーリサーチ

この調査によって、ユーザーは主にAI検出を回避しようとしているわけではないことが明らかになりました。

代わりに、彼らは以下を望んでいました:

自然な響きの文章

意味は
維持されます

変更内容の透明性

すべてを書き直すのではなく、Text Humanizerは著者の元の意図を尊重しつつ、読みやすさを向上させるインテリジェントな編集レイヤーとして機能する必要がありました。

解決策

変更を反映する

最終的な出力だけを表示するのではなく、修正されたフレーズをハイライト表示することで、ユーザーが変更内容を理解し、確認できるようにしました。これにより透明性が高まり、ユーザーが最終結果に対して確信を持ち続けるのに役立ちました。

調整可能な書き換え強度

異なる執筆作業には、異なるレベルの介入が必要でした。これをサポートするために、ライト、バランス、ストロングの3つの書き換えモードを導入しました。

ユーザーは目標に応じて、テキストをどの程度積極的に変換するかを選択することができました。

さまざまな書き方のトーンに対応

自然な文章は文脈によって異なるため、デフォルト、フレンドリー、フォーマル、アカデミックという複数のトーン(語調)の選択肢を導入しました。これにより、ユーザーは同じコンテンツを異なる聞き手や状況に合わせて調整できるようになりました。

重要な用語を保護する

ユーザーからは、ブランド名、技術用語、主要なコンセプトの変更に対して強い懸念が示されました。これに対応するため、書き換え時に重要な用語を保護する「キーワード維持機能」を導入しました。

影響

執筆ワークフローにおける摩擦の軽減

以前は、ユーザーがコンテンツの生成、編集、最終仕上げを行うために複数のツール間を行き来することがよくありました。Humanizerを執筆ワークフローに直接統合することで、ユーザーは製品から離れることなくプロセス全体を完了できるようになりました。

透明性の向上による信頼の獲得

編集プロセスを可視化することで、ユーザーは自分のコンテンツがどのように変更されたかをより深く理解できるようになりました。AIに取って代わられたと感じるのではなく、編集プロセスにより深く関わっていると実感できるようになりました。

反射

このプロジェクトは、重要な教訓を再認識させてくれました。それは、「人々はAIに自分の文章の主導権を握ってほしいわけではない」ということです。

ユーザーが求めているのは、自分のアイデアをより自然に表現できるようにAIが手助けしてくれることです。最も価値のある編集体験とは、コンテンツを完全に書き直してしまうものではなく、書き手の意図を維持しながら、明確さと信憑性を向上させるものです。

将来的には、一般的な書き直しにとどまらず、ユーザー一人ひとりの独自の声を反映したパーソナライズされた文章スタイルをサポートする機会があると考えています。