Index

01.完成したデザイン

※スマホから閲覧すると機種によっては画面設計が壊れてしまうので完成したデザインはPCから閲覧してください！

まずは完成したデザインをご覧ください。
実際にスマホ画面の中にタップできるエリアを作っているので、実際操作するようなイメージでお楽しみください。

02.オフィリアの概要

皆さんはこれからSNSはどうなっていくと思いますか？
頭の良い多くの天才が今まさに新しいSNSを開発しています。私たちには想像できないような斬新な機能や高い操作性、美しいビジュアルを兼ね備えたものでしょう。どんなものかはわかりませんがそれは「進化」です。

ただ、本当にそれだけでしょうか？
私はこれからSNSは進化とは逆方向にもベクトルが伸びていくと考えています。

「規制の強化」です。
技術的な進化をアクセルとするならば、これからはブレーキがより強く求められると私は考えています。SNSの規制を考えることはSNSを進歩させることと同じくらい大切なことだと私は思います。

オフィリアは命と心を守るために開発されたSNSと正しく向き合うための疑似SNSです。

03.人工知能「オフィリア」

人口知能オフィリアは私に大きな影響を与えた小野美由紀さんのSF短編小説「レジリエンス」に登場する「オフィーリア」から敬意を込めて名前をいただきました。
小野美由紀さんは“女性が性交後に男性を食べないと妊娠できない世界になったら？”を描いた恋愛SF小説『ピュア』が大きな話題を呼ぶなど恋愛や対人関係、家族などよくあるテーマを非常に斬新な切り口で紡ぐ私の大好きな小説家の1人です。小野美由紀さんの作品を読んだことがない方は是非読んでみてくださいね。

さて、そんなオフィリアには3つの機能を設けました。

01.オフィリアジェネレーティブ
オフィリアジェネレーティブは無から有をする生成・変換する機能。
その対象はテキストと音声の2種。

音声のジェネレーティブ機能によって、音声投稿を行う際は投稿前に1度、全くの別人の音声で自分の投稿を聞かなければ投稿することができない仕様に設計している。

こうすることで自分自身の投稿を客観視し、受け手の立場を実体験させることで感情的な投稿を抑制する狙いがある。

02.投稿サポート機能
投稿サポート機能はオフィリアの最もベーシックな機能。投稿内容の構成の指導や、話し方で意識すべきポイントなどを教えてくれる。また、ユーザーの感情的な投稿を予防する役割も果たす。

03.アナライズ機能
アナライズ機能はオフィリアが「個人」「学級」の2つの視点で分析を行う機能。
投稿に対するリアクションや学級単位で割合などの基礎情報から、感情の分布や音声の採点化など多様な視点で分析結果を可視化する。

04.マッチ&コメント機能
投稿は通常のSNSと同様、投稿はフィードとして一覧表示されるが、「マッチ&コメント機能」でオフィリアが定めた相手にしかコメントを行うことはできない。

また、コメントの相手の中にはオフィリアも紛れ込んでおり、擬似的な炎上を人工的に作り出したりする。

05.レポーティング機能
オフィリアの投稿は「レポーティング機能」によって教職員へ伝達される。
投稿の内容やアナライズ機能から心理状態を予測し、不安定な心理状態の学生や偏った思想を持つ学生などを教職員向けの管理画面から把握することができる。

対面の授業での発言が得意ではない学生の本音を把握するツールとしても活躍が期待できる。

04.コンセプト設計

-サービス名称

Ophelia(オフィリア)
由来:本アプリの要となる人工知能の名称をそのままアプリの名称としました。
小野美由紀さんの真意は分かりかねますが、おそらく源流はシェイクスピアのハムレットの登場人物「オフィーリア」を参照されてらっしゃるかと思います。
浅知恵で語るには恐れ多い名作なので素人の私が深い言及はできませんが、私の認識ではオフィーリアは純白で透明感のあるまさに女性の鏡のような女性で、後述のテーマカラー選定の際のベースのイメージになっています。

-コンセプトを一言で言うなら

SNSとの正しい付き合い方を学ぶ疑似SNS

SNSとの正しい付き合い方を学ぶ疑似SNS

・近年、SNSを媒介とするトラブルが急増し、人を傷つけたり、死に至らしめるような悲しい出来事も発生するようになってしまった。闇バイトのような犯罪の温床としての側面もある。
・しかし、国やサービス提供会社は有効打を模索中であり、歯止めがかからない状態にある。サービスの構造の見直しや規制強化は大切だが、利用者側のリテラシーを高めることも重要だと思った。
・これほどまでに日常生活に浸透しているのに、教育を受ける場がない方がおかしいと考え、座学ではなく実践でSNSを学ぶ機会をつくれないかと考えた。

– コンセプト決定までのプロセス

①定量調査による課題精査

定量調査は「①投稿前の「自己制御」に関して」「②自分と異なる意見への接触」「③オンラインでのやり取りの難しさ」「④SNS利用時の心理的不安」「⑤SNSの学びについて」「⑥反省・振り返りに関して」の6つのカテゴリにそれぞれ2~3の設問を設け、20代〜30代を中心にアンケート形式で実施しました。
この調査を通して下記のようなことが明らかとなりました。

①SNSを通して傷ついたり、難しさを感じたりした経験は多くの人がもっている
②投稿には多くの人が慎重な姿勢
③SNSの使い方を教育するニーズはある

②情報設計

②-1 過去の失敗事例をブラッシュアップする



Tune Inは私自身がかつて自主制作した「デザイナーのための音声SNS」。
しかし当時はスキル不足や企画設計の甘さからお蔵入りとしました。

ただ、本件の制作に転用できるノウハウやUIがあると考え、完全な0から考えるのではなく、Tune Inをブラッシュアップする形で制作を進めました。

②-2.目的の設定

制作が進むと各論にばかり目がいってしまい全体像が見えなくなってしまうことがあります。
そんなときに立ち返るべき羅針盤がプロジェクトには必要です。
弊所ではそれを「目的」とそれを実現するための「手段」という分かりやすい形で設定してプロジェクトを推進します。
一見すると遠回りに感じる工程かもしれませんが、ここを明確化しておくことで論理的に議論ができたり、不要な脱線を防止することができます。
チーム制作の際にはチームで同じ方向を向くために必須のものであり、チームメンバーで意見が割れた際も感覚や好みではなく、指針に沿った建設的な議論を行うことができます。

この「手段」は後述するUIデザインにしっかりと落とし込まれます。
例えば、「いいねの廃止」や「色+動物による匿名性の実現」などです。

「なんとなくこうした」「自分の好みだから」はプロとしてNG。
デザインはよく感覚の世界だと誤解されがちですが、プロは例外なく知識とロジックの上でデザインを行っています。

②-3.5W1H

目的と手段が決まったら「ターゲット」を描き始めるのですが、まずは5W1Hの形式で大枠を形づくります。

5W1Hは小学校でも学ぶ基本的なことですが、実務においても非常に有効なアプローチだと考えています。
このあとの工程で「ペルソナ」と呼ばれるターゲットを設定するのですが、この5W1Hの工程を飛ばしていきなりペルソナ設定にはいると「Who」や「What」に視点がフォーカスしやすくなり、「When」や「Where」など実際の開発で非常に重要な視点が抜け落ちてしまうことがあります。
なので、弊所では必ずこの工程を経てからペルソナの設定を行います。

②-4.ペルソナとCJM

5W1Hで定めた大枠に従って、「ペルソナ」と呼ばれる架空のユーザーを設定します。
ペルソナの設定にあたっては①学生,②教育関係者,③子をもつ複数名の親にヒアリングを行いました。

ペルソナ設定が終わると、そのペルソナが実際にどのようにプロジェクトと接点をもつのかを考え、「カスタマージャーニーマップ(以降CJM)」というものを作成します。
CJMは顧客が製品やサービスを利用するまでのプロセスを時系列で可視化した図のことでマーケティングの基本のきです。

今回は製品を販売するようなモデルとは異なるため、事務所で使っているCJMテンプレートを若干カスタマイズしました。

05.UIデザイン

本件のUIデザインは6つの要素に大別できます。
簡単にではありますがそれぞれご紹介させていただきます。

UI Design

UI01.デモ＆登録画面

初回起動時にはまず、アプリの面白さを感じてもらうため、音声入力画面が立ち上がります。
この初回の音声入力画面は背景が動いたり、ボタンにグラスモーフィズムデザインを取り入れるなどして他の画面とは異なるデザインではアプリへの期待感や没入感を高めるようデザインを行いました。
実際にアプリを運用するとなるとこのデザインでは可読性が低いことやアプリ自体へのデータ負荷が重く、アプリ全体の挙動に影響を及ぼすと考えたため、導入部のみに留めました。

デモ音声入力を終えると一般的なアプリでいうところの新規登録画面へ遷移します。
ただ、本件は教育現場での運用を想定しているため、①学籍番号　②事前に設定したパスワード の2種の情報を入力することでデータベースに事前に登録されている学生の情報とマッチングするという想定です。


本人確認が完了すると「あなたの大切な人教えてくれませんか？」というちょっぴり特殊な画面が立ち上がります。
本件では「感情的な人をどのように冷静にさせるか」という難題に向き合い、試行錯誤の末、「視覚情報による抑制」が最も有効なアプローチであると結論づけました。
そこで学生には教員から事前に「大切な人の写真を用意しておいて」という指示だけを事前に行っていただき、各人が自分の大切な人を事前に登録しておくことでオフィリアが感情的な投稿を検知した際の安全装置の役割を果たしてもらうことを期待しました。

1つの流れで遷移する画面には「フローボタン」を設置。
①戻る(線) ②進む(塗り:グレー) ③進む(塗り:青) の3種を用意しており、同じ形状のボタンを線や塗りで状態変化を与えることで直感的な操作ができるよう配慮をしています。

タップしやすい大きさ・配置などプロトタイプ検証やユーザーテストを重ねて最も心地良いレイアウト・デザインとなりました。

UI02.フィード画面

本アプリはSNSについて学ぶために開発を行っているため、フィード画面は実際のSNSのUIをベースとしながら機能をミニマムにしてデザインを行いました。

本アプリでは教員から議論のテーマが出題されて初めて学生は投稿を行うことができ、設定されたテーマに対しYESかNOの2択のいずれかの立場を選択したうえで投稿を行う。

投稿の「型」を設定することで前提を念頭に置いた建設的な主張を学ぶことができる。

「色＋動物」がフィード上ではランダムに割り当てられ、投稿の度に変化するため実生活での個人特定を回避し、自由な主張ができるように設計した。

また、YESは青・NOは赤でアイコンを示すことでコメントが複数になった際に立場を一目で認知できるようにした。

本アプリでは4つの投稿形式を作成し、教員が設定した投稿形式で学生は投稿を行う。

投稿方法は「テキスト」「音声」の2種で、文字だけの情報と人間の声が入ることでの感じ方の違いを学んでもらう。

投稿方式は「1on1」「Group」の2種で、オフィリアによる自動マッチで特定の相手とコメントで議論交わす際の人数を示す。

1対1なら意見を主張できたが、「自分以外が全員反対意見」というアウェイな状況を作り出し、その中での主張のしにくさなど環境要因によるコミュニケーションの難しさやその際の思いやりなどを学ぶことが目的だ。

音声投稿のUIとして作成した「サウンドバー」はユーザーテストで下記のような意見をいただいた。

①スクロール時に間違って再生ボタンをタップし、意図しない再生が発生しそう
②声が小さい人もいると思うから音量調整機能がほしい

これらの意見を受け、再生ボタンは左側に配置。右側には音量調整ボタンを新設した。

UI03.投稿画面

最初から3回の投稿はオフィリアによる投稿サポートを必ず受ける必要があります。
投稿のサポートは①目的設定 , ②デモ音声の視聴 , ③意識する5つポイント , ④話の構成 , ⑤キーワード提案の5つのステップから構成されます。


ステップ1で「批判や否定」「ストレス発散」などの項目を選択すると事前登録された大切な人がオーバーレイで立ち上がり、冷静になってもらうための安全装置の役割を果たします。
オフィリアからの声かけは「〇〇をするな」という禁止ではなく、「あなたが感情に流されない優しい人だと知っているよ」という形にしています。

音声入力画面では通常画面で唯一背景色が変化するなどUIに大きな変化が生じます。
音声入力中は波形が動作することで録音中という状態を表現します。
音声入力が完了すると自動的にオフィリアによる解析が始まり、投稿の内容はもちろん、音量の急激な上がり幅や、話すスピードなどを総合的に評価し、感情的な投稿と判断された場合は警告文がオーバーレイで立ち上がり、再録音を促します。
内容に問題がなければ評価画面に遷移し、投稿サポートの「意識する5つのポイント」に即した評価が可視化されます。

音声はオフィリアジェネレーティブによって3種類の他人の音声に自動変換されます。
変換の理由は下記の2点です。

①音声による個人特定を回避するため
②音声を客観視してもらうため

②が特に重要であると考えており、オフィリアジェネレーティブによって生成される音声には実はあえて「攻撃的に感じる」ように極端に変換された音声が1種入っており、同じ投稿内容でも話し方が変わることで受け手の感覚が変わることを感じてもらうためにこのような設計としました。

音声での入力内容は自動的にオフィリアが解析し、テキストのジェネレーティブ機能で音声から自動的に文字起こしを行うことも可能です。

UI04.通知画面

通知画面は①タスク , ②リアクション , ③コメントの3つに大別しました。
リアクションとコメントはアコーディオン形式で情報がまとまっており、リアクションは自分の投稿、コメントは自分以外の投稿が表示されます。

通常のSNSと異なり、競争を煽る「いいね」機能は本アプリでは廃止しており、通常のフィード画面でも投稿に対するリアクションは非表示となっており、通知画面のリアクションと後述する振り返り画面でのみ投稿に対する反響は確認することができます。

また、リアクションは左から順に閲覧数 , 音声再生回数 , 保存数 , コメント数を示しています。

UI05.自分の投稿画面

「自分の投稿」は自分の投稿と投稿に対するコメントを表示します。
基本構造は他の画面設計と同様、アコーディオンによる整理をベースとしつつ、一連のコメントにはボーダーを追加し、1つの流れであることを表現しています。

UI06.振り返り画面

「振り返り画面」は投稿終了後に教員の管理画面からの操作で学生の画面に反映されます。
最初の画面では他の画面設計とUIを統一し、テーマごとに振り返りが整理されます。

1つのテーマに対し、自分自身とクラス全体のデータを閲覧することができます。
クラス全体のデータを授業の中で振り返るような運用を想定しました。

06.マネタイズについて

どんなに良いアプリでもそのサービス自体を維持することができなければ本末転倒です。そこで、どのようにマネタイズできるか想定を行うこともまた重要であると考えています。
本件では6つのマネタイズ計画を考えています。


① 教育機関向け「ライセンス販売モデル」

【概要】
学校や教育委員会、自治体単位でライセンスを販売

【内容】
・年間契約 or 生徒数に応じたサブスクリプション
・教師向け管理画面（振り返りの集計・心理傾向の分析など）付き
・導入研修 or 教員研修プログラムもセット販売可能

【メリット】
安定した収益源、拡張性が高い

【課題】
教育委員会や行政の審査・導入プロセスに時間がかかることが想定される

② 授業パッケージとしての「1回使い切り型プラン」

【概要】
単発授業やワークショップ向けにパッケージ販売

【対象】
・学校の特別授業
・民間の教育サービス,セミナー,NPOなど

【メリット】
教師が導入しやすい、導入のハードルが低い

【課題】
利用頻度が単発になりがちのため、収益モデルとしては弱い

③プレミアム版機能の「アプリ内課金」

【概要】
基本機能は無料、学校や先生用にオプションでプレミアム機能を提供

【例】
・オフィリア分析の詳細レポート
・生徒の心理傾向レーダーチャート
・カスタムテーマ（学校独自のロゴや配色）

【メリット】
「無料で導入→興味が出たらアップグレード可能」という構造のため、導入障壁が低い

【課題】
フリーミアムにありがちな無課金層とのバランス取り

④民間連携・企業スポンサー型

【概要】
SNSリテラシー教育に力を入れている企業と提携

【例】
・通信会社、SNSプラットフォーム（LINE、Instagramなど）とのタイアップ
・企業ロゴ掲載などの特典の付与

【メリット】
大規模導入や無償配布の実現、CSRとしての広がり

【課題】
教育機関がスポンサー色を嫌うことが想定される

⑤継続学習プラットフォーム化

【概要】
アプリを一過性の体験にせず、継続的な「対話教育プラットフォーム」へ進化

【展開例】
・生徒・教師間だけでなく、校外の人とも対話できる「議論イベント」の開催
・有料会員（月額制）で他校の生徒との対話やフィードバックを受けられる

【メリット】
利用頻度の向上、エデュテインメント要素の強化

【課題】
教育現場とのすり合わせや安全設計が必須

【マネタイズの総括】

①最初は「1回使い切りパッケージ」× 無料トライアルで導入障壁を下げる
②効果が評価されれば、学校単位で年間ライセンス契約へ移行
③一部学校にはCSR提携で無償提供し、事例を拡大して実績づくり
④「Ophelia for company」のような企業の広報担当向けの派生アプリの開発などの将来的な拡張を想定

07.おわりに

ユーザーテストは本当に大事!!!!

ある程度の段階でプロトタイプによるユーザーテストを複数名に対し何度か実施したのですが、大変勉強になりました。(協力してくれたみんなｱﾘｶﾞﾄｳ…!!!!)
例えば前述のサウンドバーに対する指定は自分でもハッとしました。デザインに集中すると視野がどうしても狭くなりがちなので、多くの方の意見に耳を傾けることは本当に大事だと思いました。

時には息抜きも兼ねてデザインを寝かせて見ると、翌日に気づくこともありますね。

ではここで結びの一句!!!!!!!

落とすなら　一晩寝かせろ　デザインと恋文

最後までお目通しいただきありがとうございました！


Back to All WORKS.