Moodnotesというスマホアプリをご存知でしょうか？これは、毎日思ったことをそのときの感情と一緒に日記につけるというシンプルなアプリです。言葉と感情をキャプチャすることで、自分の考え方の癖や、この周期でいつもこうゆうことに悩まされているななど、客観視され、自分の思考習慣を見直し、毎日を健やかに暮らすことができます。
臨床心理学者とデザイナーで作られたアプリということで、認知療法の効果をアプリ化したようなものなのですが、このデザインがとてもかわいく、やさしい気持ちになれて、気になっていたので、デザイナーとして分析してみました。
Moodnotesのロゴ
Identifontという、特徴からフォントを調べるサイトで調べたところGothamというフォントが丸くなると、このフォントになりそうです。このGothamというフォント、力強くて視認性が高く、今風のすっきりした感じが安定感があって、人気のフォントですね。
Moodnotesで使われている色
基本的に使われている配色を抜いてみました。ヨーロッパ的な配色でベージュが目立ち、目にやさしい印象です。やはりどことなく医療関係を思わせる色使いです。ポイント的にロゴと同じビビッドなブルーが使われています。
このアプリの最大の特徴が、自分がそのとき感じている感情に近い表情の顔アイコンを選ぶというもので、上記の色はFeelingsで使われているカラーです。画像の左上からポジティブ〜ネガティブと感情のグラデーションを表しています。顔アイコンは線だけの画面に大きく表示されるアイコンなので、やや強い色を使っています。
パッと考えると、ポジティブなら赤系、ネガティブならブルー系を選びそうですが、それだとユーザーにある種の押し付けがましさを与えるおそれが出てくるので、オレンジ〜グリーン〜グレーという配色は、配慮されたよいデザインだと思います。
Moodnotesの導線
ここでこのアプリの導線を見ていきましょう。
①日記一覧から遷移できるページ
アイコンタップすると、まず日記一覧（画像左）。日付、曜日、日記の文章の出だし（グレーで塗りつぶしてます）、その時に選んだ表情が並びます。日記一覧の下のアイコンは、左からタイムラインで、「今いるこのページ」が太字で表示されていて、今自分がどこの階層にいるか分かるようになっています。真ん中のグラフアイコンが感情のインサイトのページ(画像中央)、いちばん左はアプリ設定のページ(画像右)です。
②日記を書く / +アイコンをタップしたとき
左上の+アイコンで日記を書くページに遷移、まず表情マークのアップを選び、ポジティブ感情か、どちらでもないか、ネガティブなのか、おおよその感情を７段階から選びます。すごく嬉しい〜普通〜すごく悲しいといった選択ができます。
中央のFeelingsは後述の画面で細かく設定できます。今回は２つのFeelingsを選んでいます。
上の画像の一番右は日記を書き終え、感情を選択した後で出てくる気づきを表すページでDeepL翻訳すると下記のようになります。
私たちは誰もが思考の罠に陥っています。一度これらのトラップを特定すれば、私たちは私たちがどのように感じるかを改善するために、私たちがどのように考えるかを変更することができます。
思考を記述する
あなたのネガティブな感情の一番の原因となった思考は何ですか？
私は考えていました
思考のトラップを識別する
何か罠にはまりましたか？
トラップを選択してください。
日記を書くと、Select Feelings（そのときどう思った）が詳しく選べます。このときの感情を表す表現は30以上出てきて、事細かにそのとき自分がどう思ったか見える化されるようになっています。
感情を表す表現 / ポジティブ感情（上から）
画像はこちら。
感情を表す表現 / ネガティブ感情
画像はこちら。
ここでも、ポジティブだから暖色系、ネガティブだから寒色系の色をあえて使わず、あくまでユーザーに気づかせようと促している設計が、アプリの目的からも、ユーザーへの労わりの点でもちゃんと配慮されていると思います。
まとめ
ユーザーは、一週間の終わりに、あるいはなんとなく気になった時に一覧を見るか、インサイトのページを見るという使い方をしそうです。「最近は暗い表情が多いから気をつけなきゃ」とか、「明るい表情が多いから幸せを感じているんだな」と、他人から急かされるのではなく、自分自身に気づきを与ええられますね。
インサイトとはマーケティングの用語で「ユーザーの行動や感情の背後にある意識構造を見ることで分かる核心、購買意欲」などを指しますが、インサイトで自分の感情をお客さん化して、自分が本当は何を感じているか客観視し、気づきを得る、というのはセンシティブで、やはり個人的に面白く感じました。自分を幸せにするのも、不幸にするのも自分だという設計思想というか隠れたメッセージを感じます。
今回はここまで。お疲れさまでしたー！
追記
ブログを見てくださった方から無料のフォントダウンロードサイトを紹介していただきました！海外サイトですが、有名なフォントもあり、なんせ無料で使えるようなので便利そうです。Gothamは無料ではさすがにないのですが、ご参考まで。
https://www.websiteplanet.com/blog/best-free-fonts/https://www.websiteplanet.com/blog/best-free-fonts/
