メグリでプランニングを担当している篠キチです。

弊社はアプリプラットフォーム『MGRe(メグリ) 』 というサービスをやっているので、多くのお客様からのアプリ開発のご要望をお請けして、それにお応えしてきてるのですが、その中でアプリのUIにこだわって作り込みをしたい、独自のUIをデザインしたいという要望をいただくことがあります。

MGRe自体はプラットフォーム型のサービスであるにも関わらず、カスタマイズに強い柔軟性の高さをご評価いただくことが多いんですが、UIに関してはiOS・Androidともに可能な限りOS標準のものを使うことを基本方針にしていて、この部分を独自性の強いUIにカスタマイズするといった対応は、仕様上できない場合があります。

ただ変更できたとしても、ゲームアプリ等を作っているんでもない限り、僕個人としてスマホアプリで独自のUIを頑張って作ることはあまりおすすめしません。

今回はそのことについてお話ししていきたいと思います。

アプリのUIにはガイドラインがある

そもそもの話、AppleもGoogleも自社プラットフォーム上で展開するアプリやサービス向けに標準的なUIのガイドラインを設けています。当然スマホアプリ向けにもガイドラインが用意されています。

そのためスマホを使っている人は、知らず知らずのうちにそのガイドラインに沿ったUIを普段から使い慣れているので、アプリを作るときもガイドラインに準拠したUIにすることで自然と使いやすくなる、ということがまず基本的な話としてあります。

逆に言うと、このあたりのことを踏まえずにオリジナルなUIのアプリを頑張って作っても、初めてそのアプリを触った人にとっては操作に戸惑うだけになってしまうという、マイナスの効果を生んでしまう可能性が高くなると言うことです。

ゲームアプリなどの場合、UI自体がゲームを楽しむ一要素だったりするのでまだ我慢してくれるかもしれませんが、単に情報を見たり買い物をしたりすることが目的のアプリでそういうことが起きると、かなりのストレスになります。それだけでアプリ削除されてしまう可能性も十分でてきます。

では、その標準的なUIとはなんなんでしょうか

ヒューマンインターフェースガイドライン(HIG)とマテリアルデザイン

まず、Appleの場合はヒューマンインターフェースガイドライン(HIG) というものが用意されています。僕の記憶ではiPhoneが世に出た頃にはすでにあったと思いますが、最近ようやく日本語化され、そのことがちょっと話題になったりしてました。

そしてGoogleの場合はマテリアルデザインというデザインガイドラインが設けられていて、この中にアプリのUIなどの定義も内包されています。
こちらが発表されたのは2014年が最初なので、Androidの端末が世に出始めた頃よりちょっと遅めのタイミングです。

どちらも結構な量がありますが、アプリに携わったりUIについて考えるなら一度は目を通しておくべきものです。

UIについてざっと把握したいときは↑に置いたリンクは両方とも「コンポーネント」について書かれた章に飛ぶので、まずはそこだけでも読んでみることをオススメします。

これらを読むと、様々なUIを構成するパーツが並んでいて、それぞれにちゃんと名前がついていることがわかります。まあこれがHIGとマテリアルデザインで同じようなUIの呼称が違ったりするのがちょっと厄介なんですが…。

たとえばアプリの下部に5つくらいアイコンが並んでいるおなじみのUI、iOSでは「タブバー」、マテリアルデザインでは「Navigation bar」と定義されています。

名前は違いますが内容は似ていて、どちらも画面下部にアイコンを最大5個まで配置できるメニュー的なUIとして定義されています。

ちなみにHIGでは『ナビゲーションバー』は全く別の用途のUIパーツを指しています。

ガイドラインに沿ったUIを採用するメリット

誰もが使い慣れたUIを使えば初見でも戸惑わずに操作できる、というメリットは最初に書いたとおりもちろんあるんですが、実は他にも意外なメリットがあります

スマホアプリには開発用のキット(SDK：Software Development Kitの略) というのがあります。iOS SDK、Android SDKという形でApple、Googleから提供されていて、基本的にアプリを作るときはこれを組み込むことになっています。

そしてこのSDKにはHIGやマテリアルデザインで定義されているコンポーネントがパーツのような形であらかじめ用意されています。そのためガイドラインに沿ったUIでのアプリ開発はそもそもラクだったりします。これもメリットです。（僕が実際に作ってるわけじゃないので、あくまで一般論としての話ですが…）

さらにもう1つのメリットはOSのアップデートに対して動作が保証される可能性が高いという点です。

そもそもこれらはOSが用意しているガイドラインに沿ったUIコンポーネントなので、OSがアップデートされたときにいきなり使えなくなるということは通常考えにくいです。

これが独自に作りこんだUIだと、OSがアップデートしたときに問題なく動くかどうかは自力でテストしなければなりません。iOSもAndroidも機種のバリエーションは多様でテストも大変ですし、うまく動かなければそれを直すのも自己責任です。

これは先日別のnoteにも書いたんですが、ここ数年OSは毎年アップデートかかってますし、iOS SDK/Android SDKもアップデートがそれなりの頻度であります。この負担は意外と大きく、この点だけでも標準的なUIを使うメリットは大きいのです。

iOSとAndroidのUIを合わせていく工夫

さて、標準的なUIガイドラインがあるといっても、iOSとAndroidではそのガイドラインが異なることがわかりました。

また、iOSを使ってる人にはあまり馴染みがないと思いますが、AndroidにはOS標準のUIとして「戻る」ボタンがあったり（最近はジェスチャーナビゲーションに置き換わって「戻る」が非表示だったりしてますが）、逆にiOSは画面上部のステータスバーと呼ばれる部分をタップすると表示中の画面の一番上まで一気に戻ってくれる、慣れると重宝するUIが標準的に備わっていたりします。
このように、iOSとAndroidではそもそもの操作の作法のようなものに差があり、ユーザーはそれぞれのUIをごく当たり前に使い込んで、カラダにしみこませたかのような感じになっています。

ただ、MGReというアプリプラットフォームを作っている我々は、実は両OSのアプリのUIをかなり統一感をもった形に整えています。

この記事はMGReの前身のプロダクトであるEAPがリリースされた後に書かれたものですが、これを見ると当時から「なるべくOSの標準コンポーネントを使用する」といったことに配慮していたことがわかります。

そしてもう1つ「iOS/Android両OSのアプリでアプリ体験が大きく変わらないように考慮している」とも書かれています。

ざっくり言うと、タブバー/Navigation barのようにどちらのガイドラインにもあり、どちらのOSのユーザーからも違和感のない中庸なUIに揃えていってるイメージです。すべてのUIを完全に揃えたりはしていませんし、ガイドラインを準拠することに躍起になっているわけでもありませんが、操作系や構成はどちらのOSのアプリを使ってもほぼ同じになっています。

実際のところ、僕みたいにiPhoneとAndroidを2台持ちで常用し、アプリを入れまくって日々調べまくってるような変な人でもないかぎり、両OSのアプリを見比べて差異を探したりはしないので、OSごとにUIが違ってもそんなに大きな問題にはならないと思います。
実際、開発当初はOSごとに最適なUIにしていくべきでは？ という意見も出ていた覚えがあります。

ただ、僕個人としてはなるべく同じになるように作ってくれてよかったなと感じています。

なぜかというと、僕らが作っているアプリプラットフォームはアプリを作るためのサービスではありますが、それ以上に実際にアプリを使ってくださるお客様にスマホを介して体験を届けるサービスでありたいと思っていて、その体験はOSやUIによる差をなるべくなくして、同じクオリティでお届けしたいと思うからです。

そのために、この章の冒頭で引用した記事にもあるようにOS間の差異はなるべくないほうがいいし、操作系や構成は可能な限り同じになっているほうがよいように思います。

正直なところ、開発当初はそこまで僕は考え抜いてはいませんでしたが、EAPから始まりMGReへと受け継がれたいまのサービスが提供するUIは、結果的によい落とし所となり、すべてのお客様に同様のアプリ体験をお届けできるものになったのではないかと思っています。

MGReの前身となるEAPを開発していた頃はOSごとのクセというか、iOSに慣れている人はAndroidの操作が全くわからない、逆もまたしかりという感じがまだまだありました。

ただ最近はAndroidの「戻る」ボタンがなくなりつつあったり、iOS/Androidそれぞれ固有のクセが強いUIも影を潜めてきて、OSが異なっても使い勝手の面でストレスを感じることがなくなってきたというか、あまり困ることがなくなってきた印象があります。両OSのUIが歩み寄って、同じような操作感になってきてるイメージです。

そんな感じでだんだんとOS間の差異も薄まってきているような流れを感じながら、そういう時代に合ってきたというか、数年前にEAPというプロダクトが選んだUIの方向性が結果的にいまのiOS/Androidの風潮にもなじんできたのかな？ と僕個人は感じています。

こういった流れもあり、MGReはiOS/Androidそれぞれ個別開発して作り上げてきましたが、ユーザーの手に触れるUIの部分に関してはOSごとのガイドラインになるべく沿った、ユーザーの使い慣れた形でアプリを提供できるプラットフォームになっています。

OSごとにネイティブ開発しているのでいわゆるクロスプラットフォーム開発を採用しているプロダクトに比べて一般的に動作パフォーマンス面で有利と言われていますし、SDK組込やOS機能に依存性の高いカスタマイズ開発などにも柔軟に対応できるアプリプラットフォームとしての独自性も手に入れることができました。

その上でガイドラインに沿った標準的なUIを採用しているため、OSバージョンアップなどにも強い安定性と、誰でも戸惑うこと無く操作できる使い勝手の良さを実現しています。

UIにこだわった独自性の強いアプリを作りたいという気持ちは非常によくわかりますが、アプリは企業がお客様とつながる接点として、まず何よりも使いやすく、ストレスなく、長くお付き合いいただき、すべてのお客様に同じ体験・サービスをお届けできるものであることが大事だと我々は考えています。

アプリをつくるときにMGReを採用するだけでこれだけのメリットを享受できるという点、地味でなかなかわかりにくい部分ではありますが、この記事でお伝えできていたら幸いです

タイトル画像はぱくたそさんのワイヤーフレームを引いてディレクション中のフリー素材を使わせていただきました