Scannyのご紹介：Scanner Proの新マスコット誕生の舞台裏

Scanner Proは2009年からApp Storeで提供されています。その長い歴史の中で、シンプルなスキャンAppから、ほとんどのユーザーが使いこなしきれないほどの機能を備えた本格的なプロ向けツールへと成長してきました。こうした成熟は強みですが、チームは本格的なプロ向けツールでありながらも、親しみやすく、人の温かみを感じられるAppであり続けたいと考えていました。

最近行われたScanner Proのグローバルリデザインは、そのギャップを埋めることを目指したものです。 

その中でも控えめな決断のひとつが、実は最も目立つものになりました。光から生まれた小さな青いキューブ「Scanny（スキャニー）」が、今ではScanner Proの世界に住んでいます。 

Readdleのデザインリードであるハリナ・ヴォロシャネンコ（Halyna Voloshanenko）氏に、Scannyが誕生するまでの経緯を伺いました。

ユーザーとのつながりをつくる

Scannyの構想は、リデザインとともに自然に生まれました。「主な目的は、グローバルリデザインを通じてブランドの認知度を高め、ユーザーとの感情的なつながりを強めることでした」とヴォロシャネンコ氏は語ります。「ユーザーとのコミュニケーションを新しくしたかったんです。マスコットがいれば、マーケティングメッセージを伝えるのも、新しいユーザー層を惹きつけるのもずっと簡単になります」

Scanner Proの歴史の長さは、この課題をさらに難しいものにしていました。 

リリースから20年近くが経ち、Appは基本的なスキャン機能をはるかに超え、多機能なプロ向けツールへと進化しました。パワフルである一方、必ずしも親しみやすいとは言えません。「この複雑なプロ向け製品を、もっと理解しやすく、感情に訴え、人間味のあるものにしたかったんです」と彼女は説明します。「その思いが、リデザインと、Appに感情を加える方法の模索の両方につながりました。そして、マスコットがその助けになると気づいたんです。マスコットは製品そのものを作り変えるわけではありませんが、ずっと親しみやすいものにしてくれます」

チームが定めた役割は明確でした。インターフェイスを使い始めやすくすること、そして新しいリリースを、変更履歴を渡されるのではなく、案内してもらっているように感じられるものにすることです。

Scannyが生まれるまで

Scannyはすぐに完成したわけではありません。「最終的に、4つの本格的なコンセプトを作りました」とヴォロシャネンコ氏は言います。「4つ目に決めたのは、余計な注目を集めることなく、私たちのテクノロジーの本質を最もよく表現していたからです。クリーンでモダン、そしてミニマル。この方向性は製品にぴったりでした」

コンセプトに取りかかる前に、チームはまず外に目を向けました。「市場を調査し、Duolingoのフクロウ、Monobankのネコ、HeadspaceやGentle Streakのキャラクターを研究しました」と彼女は言います。どの役割がScanner Proに合うかを決める前に、マスコットが果たせるさまざまな役割を理解したかったのです。「マスコットがどこで使われているのか、製品の中でどんな役割を担っているのか、どのコミュニケーションチャネルで活躍しているのかを分析することに関心がありました。 

こうしたAppの多くでは、ブランディング全体がキャラクターを中心に作られています。一方で私たちは、マスコットが脇役として、私たちのツールの真面目なインターフェイスをさりげなく引き立てる、自分たちなりの絶妙なバランスを探していました」

Scannyとは何か

Scannyをひと言で表すと、とヴォロシャネンコ氏に尋ねると、返ってきたのは「かわいさ」よりも「落ち着き」でした。「Scannyが表しているのは、落ち着き、信頼性、モダンさ、そしてさりげないサポートです」。どのビジュアルの選択も、魅力的に見えると同時に、これらの特徴のいずれかを伝えるために行われました。

角の丸いキューブ型は、親しみやすさを意図して選ばれました。「厳格なテクノロジーをもっと人間らしくするために、ミニマルな形を選びながらも、鋭い角はなくしました」と彼女は言います。「この柔らかな丸みが、ただのキューブを親しみやすく頼れるアシスタントに変えてくれます。さらに、iPhoneのホーム画面のアイコンの形とも視覚的に呼応しています」。一方、深いブルーは逆の役割を果たし、Scannyを本格的なツールにしっかりと結びつけています。「本格的なプロ向けツールらしさを保つために、深いブルーを使いました。これは私たちのビジュアルスタイルをそのまま受け継いだもので、ユーザーの信頼を築く役割を果たしています」

Scannyにとって唯一の表現手段は光です。「主なインタラクションの手段は光のビームです」とヴォロシャネンコ氏は説明します。「これはスキャンのプロセスそのものを直接的かつわかりやすく表すメタファーです。同時に、その柔らかな光は、Scannyが気にかけていることの表れでもあります。あなたの書類を見守り、日々の仕事を楽にする手助けをしていることを、視覚的に伝えているんです」

その誕生秘話も、製品と結びついています。「画像のスキャンと補正は、ステップごとに、1ピクセルずつ進みます」と彼女は言います。「だからScannyは、もともとはただの平らなピクセルでした。それが命を得て、立体的で躍動感のあるキューブへと変身したんです」

チームが「取り入れなかったもの」は、「残したもの」と同じくらい重要でした。 

Scanner Proのユーザーは30歳以上の大人のプロフェッショナルが中心で、そのことが最初からデザインの指針を形づくっていました。「子どもっぽさ、漫画っぽさ、過剰な表現は避けるようにしました」とヴォロシャネンコ氏は言います。「書類を扱う作業をエンターテインメントにしてしまわず、本格的なツールとしての信頼を保つために、手足や複雑な表情といった古典的な擬人化はやめました」

Crazy 8sのブレインストーミングからFigma、そしてRiveへ 

最終的なキューブにたどり着くまでには、3つの明確な段階がありました。 

最初はリサーチです。競合がどこでマスコットを使っているか、Scanner Pro自身のどのタッチポイントでマスコットを活かせるかを洗い出し、その後の検討に向けた技術的な制約と基準を定めました。 

次はブレインストーミングです。チームはスキャンから連想するものを出し合い、Crazy 8sのセッションですばやくアイデアを生み出しました。そして、ブランドとのつながり、UIへの適合性、モーションの可能性、キャンペーンへの応用しやすさといった基準で結果を評価しました。このふるいを通過したのは3つの方向性でした。

最終段階は、デザインチームの手に委ねられました。 

「マーケティングデザイナーのアーニャが素晴らしい仕事をしてくれました」とヴォロシャネンコ氏は振り返ります。「選ばれた3つの方向性それぞれについてコンセプトを作り、チームにプレゼンしてくれたんです。 

プレゼンの間、全員でそれぞれの案について話し合い、メリットとデメリットをすべて洗い出しました」。ひとつの案が明確に勝ち残ったわけではなく、4つ目のコンセプトは3つの案の良いところを組み合わせて作られました。「大きな方向転換はありませんでした。むしろ進化のプロセスでした」と彼女は言います。「最初の3つのコンセプトに取り組んだ結果、どれも単独では完璧ではないと気づきました。そこで、3つの案から最もうまくいった要素を取り出して組み合わせたんです」

彼女によれば、最も難しかった判断は、どのコンセプトを選ぶかよりも、Scannyにどこまでディテールを持たせるかでした。「繊細なバランスを探していました。アニメーションしやすく、真面目なUIの邪魔にならない、できるだけシンプルな形にしつつ、それでいて独自の個性があり、退屈に見えないものにしたかったんです」

初期のスケッチはCrazy 8sのセッション中に手描きで行いましたが、その後の作業はすべてFigmaに移り、ちょっとしたアイデア出しにはProcreateを使いました。 

より大きな制約が生まれたのは、モーションチームが加わってからです。Scannyは、いずれAppとWebサイトでインタラクティブなRiveアニメーションとして動くことを想定して作られています。Riveではグラデーションや複雑なグローなどのエフェクトを描画できますが、Figmaのモックアップからそのまま再現できるとは限りません。「最大の制約は、モーションデザイナーがアニメーションで100%正確に再現できるエフェクトとビジュアル表現だけをFigmaで使うことでした。そうすることで、どこでもキャラクターが同じように見えるようにしたんです」とヴォロシャネンコ氏は言います。 

そのため、ビームのグローや形の柔らかな変化といったディテールをテストして調整し、ライトモードとダークモードの両方を含め、どんな状況でも一貫して見えるようにしました。

まさに部門横断のプロジェクト

Scannyはデザインチームだけで作られたわけではありません。「プロダクト責任者、プロダクトマネージャー、プロダクトデザイナー、そしてデザインリードの私からなる部門横断のチームでした」とヴォロシャネンコ氏は言います。「さらに、社内のクリエイティブデザイナーや、外部の新鮮な視点を得るために独立したコンサルタントにも参加してもらいました」

多くの人が関わっていたにもかかわらず、プロセスは驚くほど対立のないものでした。「深刻な意見の衝突や激しい議論はありませんでした」と彼女は言います。「最初に制約を明確にし、メタファーについて合意していたので、チーム全員が共通のビジョンを持っていました。社内のフィードバックは、全体の方向性を変えるというより、むしろディテールを磨くのに役立ちました」

Scannyの感情表現を仕上げる前に、チームはScannyを社外に連れ出し、実際のApp Storeのスクリーンショットやマーケティング用クリエイティブを使って、実際のユーザーでテストしました。「App Storeのスクリーンショットとマーケティング用クリエイティブでマスコットをテストしました」とヴォロシャネンコ氏は言います。「テストでは良い結果が出て、私たちの仮説が裏付けられました。そのうえで初めて、感情表現や追加の状態の最終調整に進んだんです」

名前と、最初に登場する場所

名前の由来は、深く考えるまでもないほどシンプルです。「Scannyという名前は『scan（スキャン）』という言葉から来ていますが、柔らかくフレンドリーな響きで、温かく迎えてくれるアシスタントとしての役割を際立たせています」とヴォロシャネンコ氏は言います。

社内の反応は上々です。「チームは大喜びです」と彼女は言います。「Scannyは、私たちの新しいビジョンとUIを見事に際立たせてくれます。製品のバランスも絶妙で、Scanner Proはプロ向けツールのままでありながら、ずっと親しみやすく、温かみのあるものになりました」

Readdleは、Scannyを少しずつ、ひとつずつ展開していきます。「リデザインの最中にユーザーを戸惑わせないよう、段階的に展開する戦略を選びました」とヴォロシャネンコ氏は言います。Scannyはまず、Scanner ProのWebサイトとApp Storeのスクリーンショットに登場し、その後、購入画面を皮切りに製品内へと広がっていきます。チームはまだ一部を秘密にしています。「ユーザーの皆さんを嬉しい形で驚かせたいので、詳細はまだすべて明かしていません」

振り返って、ヴォロシャネンコ氏が最も誇りに思っているのは、チームが「あえてしなかったこと」です。「顔や表情のある古典的なマスコットの道を選ばず、3Dキューブのクリーンな形と光の動きだけで個性を表現できたことを、何より誇りに思っています」と彼女は言います。「Scannyはまさに思い描いたとおり、控えめな存在になりました。書類作業から注意をそらすことなく、むしろインターフェイスをとても自然に引き立てています」

もしひとつやり直せるとしたら、それはデザインの判断ではないそうです。「過去の自分には、最初の見積もり時間を少なくとも3倍にしなさい、とアドバイスすると思います」と彼女は言います。「最初は、キャラクター作りなんて簡単に終わるプロセスだと思っていました。でも、デザインではよくあることですが、本当にシンプルでわかりやすいものを作ることこそが一番難しいんです」

彼女が人々に感じてほしいことも、結局はシンプルです。「ユーザーがApp内や広告、WebサイトでScannyを見たとき、そこにスマートで速く、わかりやすいスキャン技術そのものを感じてもらえたら嬉しいです」と彼女は言います。「マスコットのなめらかな動きと柔らかな光によって、書類を扱う作業の中でも、Appとのやり取りがもっと生き生きとしたものになってほしいと思っています」

ScannyはすでにScanner ProのWebサイトとApp Storeのスクリーンショットに登場しており、今後はApp内にも広がっていきます。ぜひ注目してください。Scannyはもうすぐそこまで来ています。