現実逃避映画診断
製作期間 : 2019年10月 〜 12月 カテゴリ : ウェブサービス ディレクター : とりいめぐみ フローチャート作成 : 川野芽生、細川瑠璃 フローチャートデザイン : 庭石 フローチャートコーディング : かねこ LPデザイン : 清水陽平 LPコーディング : やなぎ（Portfolio）
ねとらぼ様に取り上げていただきました。
今の気分にピッタリな映画が分かるかも？ 診断サービス「現実逃避映画診断」がオープン
「現実逃避映画診断」は、質問に二択で答えていくと現実逃避にぴったりの映画をおすすめしてくれる無料のwebサービスです。 「空想癖がある」「いつも憂鬱だ」「私は女王だ」などの質問に答えていくと、「マッドマックス 怒りのデスロード」から「サタンタンゴ」まで、バラエティのある映画がサジェストされます。
現実に嫌気がさした人、嫌なことがあった人、旅に出たい人など、様々な人のために、この現実から逃れて想像の世界に心を遊ばせるのにちょうどいい映画をセレクトしました。 診断結果は充実の36通り。そのまま予告編の動画を見るか、Amazonのページに飛ぶことができます。
これは近く公開される新プロダクト「numaflow（ぬまふろー）」の予告編です。 numaflowでは、誰でも無料で質問系診断を作り、ネット上で公開することができます。 自分の好きなものを的確に人に薦めたり、PRしたりしたい方に嬉しいサービスです。 また、弊社チームによる診断作成サービスも展開予定です。 PRや宣伝、教育などにおすすめです。ヒアリングから行い、診断を作成し、統計情報を取ることもできます。
企画・編集
診断系サービスが流行っている中、精度の高さと結果の多さで他と一線を画すフローチャートを作ろうと始まったプロジェクト。 おすすめしたいものをおすすめしたい相手に的確に届けることを目指しています。
映画好きのエディター二人が選んだテーマは、「現実逃避映画」。 「おすすめ映画◯選」といった漠然とした括りでは面白くないと、「現実逃避に適した映画かどうか」という新しい切り口を設定してみました。 これで知っている映画も今までとは違う視点で観直せるのではないでしょうか。偏愛とマニアックさをあえて前面に出した映画のチョイスとリード文、ちょっと癖のある質問文など、この診断を経験することで味わえる世界観を重視しました。 これだけでもちょっと現実離れした雰囲気を味わえるはず。
デザイン
主にスマホで遊ぶことを想定して、シンプルで見やすいデザインに。
「現実逃避映画」というテーマを掲げ、映画の中に入り込むような作品を紹介するサービスにふさわしく、この診断で遊ぶことそのものによって映画の中に入り込んだ気分になれるような、フィルムをイメージしたデザインを作りました。 映画っぽさを出すためにも操作性を高めるためにも、診断を進めるとフィルムが流れていくようになっています。 スクロールするときヘッダーとフッターに透け感を出すなど、細部までフィルムらしさにこだわりました。
キャラクターや質問や回答ボタンの配置に細かい工夫を凝らすことで、フィルムのコマが並んだデザインと操作性を両立し、ストレスなく遊べるよう細部に気を配りました。 また、フィルムらしさを出すために、全体的にレトロで落ち着いた色合いにしていますが、「現実逃避」というテーマと合わせ、幻想的な雰囲気を出すためボタンの色は鮮やかに。
キャラクターデザイン
映画診断の案内人を務めるのはかわいらしいような小憎らしいようなとぼけ面の鳥のキャラクター。 人格を持ったキャラクターがいると質問されることに必然性が生まれますし、世界観を演出するのにも役に立ちます。 スタートページで訪問者を迎えてにょきっと立ち上がり、まばたきしたり振り向いたり、質問への回答にひとつひとつリアクションしながら、おすすめ映画へと誘ってくれます。
ユーザーのアクションに対してキャラクターのリアクションがあった方が最後まで飽きずに遊んでもらえるはず、ということで、すべての質問の回答に対して鳥の反応を用意しました。 放置した場合だけでも「寝る」「きょろきょろする」「はてなを浮かべる」と反応のバリエーションがあるので、そういった細部の変化を見つける楽しみもあります。 診断の「顔」になるキャラクターをと考えて作りました。
ポイントは、単にかわいいだけではないところ。 「こいつは何だろう」「何が始まるんだろう」と興味を引けるような、どこか掴みどころのない「変さ」のあるキャラクターにしました。性格もちょっと偏っています。 「自分は生まれる世界を間違えたと思う」という質問でYesを選ぶと「うんうん」と頷くなど、この鳥の振る舞いの背景には独特の考え方が透けて見えます。 なにしろコンセプトや内容からして偏りを前面に出したサービスですから。 また、診断の世界観に入り込んで楽しんでもらえるよう、世界観に合ったちょっと非現実的な感じの鳥になりました。
コーディング
映画フィルムをイメージしたデザインを技術面でも最大限に活かし、遊び心と操作性の高さを両立させた設計になっています。 フィルムが流れるようにスクロールし、次の質問へ滑らかに進んでいく仕掛けです。 選択肢が選ばれて次の質問が決まった段階で、速やかに次のページが追加され、自動的にスクロールするようになっています。 画面を遷移させることなく次の質問を表示しているため、操作が少なくて済み、上にスクロールするだけで前の質問をやり直すことができます。
また、コーディングと並行して他のチームメンバーがフローチャートの文言を追加したりイラストを変更したりといった作業が簡単にできるよう、スプレッドシートからJSONファイルに変換して取り込む機構を作っています。 チャート編集者やデザイナーはスプレッドシートに記入するだけでいいので、プログラミングの知識がなくても大丈夫です。
結果の統計データも取っています。 ユーザーがどの選択肢を選んだか、Google Analyticsで集計し、ビジュアライズしました。
LPデザイン
フローチャートのLPなので中身もフローチャートにしました。 「numaflow」は、何らかの対象に強い熱意を持つ人が、それを他の人にも薦めたいと思う時などに使ってほしいと思っています。 そこで嵌っているジャンルを指す言葉「沼」をタイトルに冠するとともに、LPのデザインも沼をイメージしました。 スクロールしていくと段々色が濃くなっていきます。
数字の丸部分にも、だんだん沼感が現れるようにしています。
