見出し画像

「細部にこだわり、いいものをつくる。」筑波山登山アプリを手掛けたデザイナーが向き合う、フラーでデザインするということ

株式会社ARC地域研究センター、筑波大学芸術系の原忠信准教授、つくばトレイルガーディアンズ、株式会社ターバンとともにフラーが2021年11月にローンチした筑波山登山アプリ「Mount Tsukuba」は、筑波山登山をもっと楽しく安全にするアプリです。

遭難時に救援してもらいやすいよう登山届をアプリの中に組み込む、山での混雑緩和のために登山ルートを分散させるといったさまざまな仕掛けを機能として実装しています。

また、頂上でARフラッグと撮影する機能を搭載。筑波山登山を自慢できるような体験を提供しました。

アプリ開発のプロジェクトをすすめる中で、実際に企画や開発を手掛けたフラーのメンバーはどのような思いをもって取り組んだのでしょうか。

「ヒトに寄り添うデジタルを、みんなの手元に。」をミッションに掲げるフラーで、デジタルパートナーとして実際にものづくりに取り組むメンバーがそれぞれのプロフェッショナル領域や興味関心をもとに綴りました。

今回の記事を書いたのは、「Mount Tsukuba」のデザインを担当したデザイナーの原です。(編集:吉川璃子・日影耕造)

原さんが自ら書いた自身のイラスト

原(デザイナー)
プロフィール:事業会社でWEBデザイナーとして、アプリ開発会社でUIデザイナーとして勤務した後、2020年4月フラー株式会社に入社。フラーでは主に、アプリのUI/UXデザインやWEBサイトのデザインに従事。新潟本社に勤務。関西出身。

登山者と筑波山のためにアプリができること

筑波山は首都圏からのアクセスも良く、初心者にも登りやすい

筑波山は首都圏からのアクセスも良く、初心者にも登りやすい山です。

しかし、気軽に登れるがゆえに登山届を出さない人が多いこと、時には下山困難に陥ってしまう登山者もいること、登山道整備など安全のための環境保持資金の捻出に苦労していることなど、さまざまな課題を抱えていることを知りました。

これらの課題をデジタルの力で解決し、「こういう筑波山だったら素敵だな」というよりよい姿の実現をお手伝いする、これがフラーのミッションでした。

アウトドア、アクティビティのサービスやアプリは世の中に多数たくさんあり、方向性もさまざまです。

フラーのデザイナーはいつも「これは何をするものか、何のためのものか」という問いを上長から投げかけられ、自問自答しながら、デザインのコンセプトを固めていきます。

単純な問いのようですが、アプリでできることも求められることも多種多様なため、ついあれもこれもとなってしまいがちで、一つの答えを決めていくことはとても難しい作業です。

機動性が高くヒトとの距離が近いモバイルアプリは、ユーザーが使ってこそ、その本分が果たされます

デザインのコンセプト「Personalized」を設定した

これらの背景を踏まえて、今回わたしたちは、筑波山をより楽しむためにユーザーに使ってもらえるアプリとして必要なことは何かを考え、プロジェクトのコンセプト「Safety・Sustainable・Share」に加えて、デザインのコンセプト「Personalized」を設定しました。

登山の絶対的なハイライトである登頂は、必ずリアルな一次体験であり、デジタルでは取って代われない部分です。そのハイライトの前後には、計画をたてる・記録を残すという主にデジタルが貢献できる二次的な体験があります。

この2つの体験をサポートし、より楽しくより便利にするものこそが、アプリが目指す「Personalizedされた道具」ではないかと考えたのです。

実体験を元に考える使いやすさ

スマホを片手に筑波山登山体験をするフラーのメンバーら

コンセプトが固まると次は、屋外しかも山登りというハードな活動中でも使いやすいインターフェースの検討です。

はじめは実際に登山してみるところから。写真を撮るためにスマホを出し、歩き出す前にしまってはまた取り出し…。

初心者ながら近所の山に登ってみて、登山中にスマホを操作するのはとても煩わしいことだと気付きました。

登山者はトレッキングポールを持つかもしれないし、足だけでなく手も非常に忙しく、スマホを片手に山を登ることは考えられません。

自身の体験から、操作するのは登山前、山頂にいる間、下山後でなければ難しいことが実感できました。

難しいというだけでなく、登山という強烈なリアルの体験を存分に楽しんでほしい、デジタルを過剰に持ち込むことで邪魔をしたくない、という思いも生まれました。

これらを踏まえてインターフェースの方針として定めたのが「ページ構成を複雑にしない」「行動中の操作は片手でさっとできる」の2つです。

アプリが提供する体験として「複雑な操作は登山の前後に」という前提も加わりました。

この方針や前提のもと、機能を絞ったり統合したり、操作領域を画面下部に集めたり、インターフェースの設計を進めていきました。

すでにあるものとの調和を考えたデザイン

Mount Tsukuba”のウェブサイトより

スタイリッシュなビジュアルで筑波山のさまざまな情報を発信する”Mount Tsukuba”というメディアの運営団体が、今回のアプリの運営も担当しています。

そこで、同じ”Mount Tsukuba”ブランドの一員として今後も生き続けられるようなデザインをアプリの制作でも意識しました。

ロゴやカラーはすでにあるものを活かし、ローディングアニメーションやアイコンなどアプリ独自特有の要素についても、既存のデザインをアレンジして使用しました。

クライアントの方にとって、自分たちのブランドやロゴはとても大切なものであり、愛着を持っているはずです。

自分自身もロゴを作成する際には「実際に所有し使う人に愛されるものを作る」ことをいつも心がけています。

アプリ制作にあたり新しく生み出すものもありましたが、既存のブランドが持つビジュアルを尊重しうまくマッチさせることを心がけました。

新しくつくるものと既存のものとをうまく調和させることは、デザインの大事な役目であり、デザイナーとしての技量の向上にもつながります。

どこまでユーザーのためにこだわれるか

今回のアプリではどうしてもユーザーに負担を強いる場面があり、そのストレスを緩和するためにデザインでできることをいくつか取り入れています。

登山届の入力中に進捗を教えてくれる“小さな登山者”

例えば、面倒に思う登山届の入力中に進捗を教えてくれる“小さな登山者”のイラストがチュートリアル役として登場したり、長く感じがちな通信時間中に“小さなトレイルランナー”のローディングアニメーションが現れてコミカルに動いたりします。

Personalizedの観点から、登った回数を表示してユーザーの“筑波山愛”を視覚化する機能も入っています。

“小さなトレイルランナー”のローディングアニメーション

日没時刻の表示機能は当初予定にありませんでしたが、クライアントから「油断して暗くなってしまい下山できなくなる人が結構いる」との声を聞き、最終的には専用の画面まで作ることになりました。

専用の画面まで作った日没時刻のデザイン

その時に「もっともっとかっこ良くして!」と背中を押してもらったおかげで、現在の日没時刻のデザインになりました。

このように、クライアントと議論し、ユーザーの動きに思いを馳せることで出てくるアイディアがたくさんあります。

もちろん取捨選択は必要ですが、実際に使う人のことを考えてデザインにも機能にもこだわりぬくことで、よりよいプロダクトにつながっていると確信しています。

フラーでデザインするということ

“小さなトレイルランナー”もそうですが、フラーが開発するアプリのローディングアニメーションはすべてカスタムで作られています。

フラッグと一緒に写真を撮る機能「登頂記念ARフラッグ」

登頂記念ARフラッグについては、2Dでデザインを作ったら、3Dアニメーション化されて、あっという間にフラッグと一緒に写真を撮る機能「登頂記念ARフラッグ」が実装されました。

これらは社内に3Dアニメーションとエンジニアリングの熟練者がいるからこそ、短期間で実現できたことです。頼れる仲間が近くにいることを、とても心強く思います。登頂記念ARフラッグはフラー初のAR機能の開発事例となりました。

デザイナーが細部にこだわることで、アプリの質も高まり「いいものをつくる」ことに貢献できるのではないかと考えています。

もちろん仕事である以上、制約もあり、やりたいことをすべて実現できるわけではありませんが、「思い切りやっていい!こだわっていい!」と言ってくれるメンバーがいることは、デザイナーとしてのモチベーションにもなっています。

御幸ヶ原から望む男体山

フラーの場合は、クライアントに意見をもらったり提案したりしやすいこと、やりたいことを一緒に実現できるメンバーが社内にいること、もっと良くするという視点でアドバイスをくれる上長がいることによって「デザイナーがこだわれる環境」が作られているのだと思います。

恵まれた環境にいることに感謝しながら、期待してもらえるような、そして期待に応えられるような仕事をしよう、とあらためて思っています。

筑波山登山アプリ「Mount Tsukuba」を手掛けた、ほかのメンバーの記事もあります。ぜひご覧ください。

ーーーーー
フラーでは、新メンバーを随時お迎え中。ご興味お持ちいただけましたら、こちら↓の採用ピッチ資料もぜひご覧ください。

採用ページ↓もぜひ覗いてみてください!

最後までお読みいただきまして、ありがとうございます!もっと詳しくフラーを知ってみませんか?