昨年(2018年)末,日本ではPayPayやLINEPayなどモバイル決済サービスが話題になりました。Payといったアプリを使ったモバイル決済が多くのユーザーに利用されています。TikTokも国境を超えて話題になっており,中国のIT先進国としての認識も日本で高まっています。昨年,筆者は2度ほど中国に滞在していましたが,滞在期間中,中国のスマートフォンアプリやITサービスを自分事として触れる機会がありました。実際に利用していると,「⁠これは日本にはない特徴だな」「⁠このUIはほかの中国のアプリでも使われていたな」といった共通点や特徴に気が付くこともありました。今回はそんな中でも,特に飲食店情報,旅行情報,ECなど多数の情報を取り扱うようなアプリのUIデザインの共通項とその背景などについて考察します。中国というとカラフルで派手な色彩であるという印象を個人的に持っていました。実際に,日本のメディア系サービスなどと比較すると色数を多く用いているように感じられ,抱いていた印象と近いものが多いように感じました。カラフルだというわけではなくトーンが統一されていて,美しく表現することを意識しているように感じとれます。図1の3つの画面は,それぞれ別々のアプリのホーム画面です。(a)は「淘宝」(⁠タオバオ)というショッピングサービス,(b)は「大众点评」という飲食店などのクチコミサービス,そして(c)は「Ctrip」という旅行情報・予約サービスです。それぞれ業種が異なりますが,どことなくホーム画面が似ているのが特徴的です。異なるアプリのホーム画面(iPhoneアプリ)特に目に止まるのが,各コーナーへの動線のアイコンです。どのホーム画面も表現がよく似ています。背景のサークルは別々の色で塗り分けられていますが,絶妙にグラデーションがかけられています。その下にはテキストで説明が補足されています。このアイコンをタップし次の階層に遷移した場合,下の階層でも同じようにサークルにアイコンを乗せた動線が利用されているのです(図2⁠)⁠。Ctripの階層構造とファーストビューのUI(iPhoneアプリ)このようなデザインを筆者がした場合,下層のデザインはホーム画面のアイコンの色をテーマカラーとして,世界観を色で分けることを意識すると思います。中国のこれらのアプリでは,動線の色とそれぞれのコーナーのUIのキーカラーは一致していません。意味の関連性よりも,それぞれの画面での見た目の印象に意識がいっていることが考えられ,コーナーごとや画面ごとでの分業があるのかもしれません。ディテールの作り込み前述したように,アイコンの下に敷かれたサークルは微妙に繊細なグラデーションがかけられていますが,そのほかにも,このような細かいところの作り込みへの意識が感じとれる部分を紹介します。図3はHuawei製のスマートフォンにプリインストールされているAppGalleryで,画面上部のフィーチャーアプリ紹介エリアです。1つの画像に見える要素は,テキストやアプリアイコン(前面の要素)と背景やキャラクター(背面の要素)でレイヤ構造が分かれていて,スワイプするとそれぞれ,ずれて動くことがわかります。アプリ名,キャッチ,アプリアイコン,背景とそれぞれ分けることによって,メンテナンス性の高いデザイン要素にすること,統一感を生み出すことを両立できる気がします。AppGallery(Androidアプリ)のUI図4は上でも紹介した「大众点评」を運営する会社の「美团」というアプリです。画面右下に固定で,袋のような「領券」(⁠クーポン)と書かれたイメージが半分ほど見えています。画面をスクロールして上に戻ろうとするとすべて画面に出現され,またスクロールしようとすると元に戻るというように見え隠れしています。このイメージはアプリ上で見ると雪の結晶がちらついている演出があるため,スマートフォンで見ると目に止まりやすくなっています。美团(iPhoneアプリ)このような,細かな動きのギミックが散りばめられてあり,コンパクトで効果的な演出をしています。購買意欲を高めたり,ユーザーの気持ちをひと押しするようなサービスにおいては効果的に感じます。いった細かな演出に力を入れられるのは,多くの人口がいる(多くのデザイナーがいる)中国だからこそなのかもしれません。使い勝手の共通項アプリ内で決まったアクションをするとき,使い勝手にも共通点を感じる部分があります。中でも実際に利用していて特に感じられた2つについて紹介します。画面キャプチャのUIアプリ内で画面のキャプチャを撮ると,画面のサムネイルが,キャラクターが添えられて画面右側に表示され,次のアクションを促されます。図5は図1で紹介した「大众点评」(⁠(b)⁠)⁠,Ctrip((c))の2つのアプリです。それぞれ別のアプリではあります,似たUIが用いられています。キャプチャのUI筆者が日本でユーザーインタビューをした際に,気になる商品や,行きたい場所,忘れないでおきたいことなどを,それぞれのお気に入り機能ではなく,画面キャプチャを撮って,ギャラリーアプリで横断的に管理しているようなユーザーと出会ったことがあります。日本でも同じようなことを考えられると思いますが,このような背景には,キャプチャを使ったキャンペーンや,キャプチャを友達にシェアするような機能が日本よりも多く利用されているのかもしれません。場所選択のUI筆者が体験したアプリでは,利用者の「場所」が意識的に強調されているように感じました。図6のように,画面左上にユーザーの設定した場所がダイレクトに変更できるUIをよく見ます。大众点评の位置を表すUI中国はとても広い国であり,場所によって提供すべきコンテンツが大きく変わることや,旅行計画を練る場合などほかのエリアの情報を取得しやすくするために,こういったUIの特徴に表れるのかもしれません。今回は,中国のアプリのUIデザインの特徴的な部分について触れました。当然ながら,ユーザー体験はどのような暮らしをしているか,どのようにスマートフォンが使われているかに大きく依存します。中国だけではなく,世界中それぞれの場所に合ったUIデザインがあるように思います。日本人の暮らしにあったUIデザインがどのようなものか考えてみることも大切かもしれません。著者プロフィール池田拓司(いけだたくじ)デザイナー。多摩美術大学を卒業後,ニフティ株式会社,株式会社はてなを経て,2012年にクックパッド株式会社に入社。Sassを使ったUIフレームワークの構築,Webアプリケーションなどサービス全体の設計,ユーザーのほうを向いたデザインやサービス開発の組織づくりにも努める。インターネットサービスをはじめとするさまざまなデザイン業,およびサービス開発などに取り組んでいる。2019」を開催しました。DAY1・DAY2の様子を注目セッションとともにお伝えします。LINEのエンジニア3名がイベントに先駆けて見どころを紹介します。コードの安全性・安定性を高める開発サイクル~テスト管理の効率を上げ,脆弱性診断を自動で行う~本連載では,連載「業務を改善する情報共有の仕掛け」を受けつつ,安全性・安定性を加えた開発サイクルについて考えていきます。若者世代から圧倒的な人気を誇るライブ配信&動画投稿コミュニティアプリ「MixChannel」(ミクチャ)の裏側(レコメンドシステムやサーバサイド開発など)について解説していきます。その他の連載CSS3アニメーションでつくるインターフェイス表現CSS3によるアニメーション表現を紹介していきます。その中でも,幅広い読者に応用してもらえるだろうインターフェイスを主なお題とします。MySQL道普請便り本連載では,MySQLを使ったアプリ開発・運用に関するノウハウをご紹介していきます。RecipeUbuntuの強力なデスクトップ機能を活用するための,いろいろなレシピをお届けします。JavaScriptセキュリティの基礎知識JavaScriptに関するセキュリティ上の問題はどこで発生し,どうすれば防ぐことができるのか?について解説していきます。〜システムをきちんと運用するための基礎知識システムは「作って終わり」ではなく,運用の中でさまざまな問題が発生します。問題の発生に備えて事前にどのような対応をしておくべきなのか,問題発生時に何をしなければならないのか,ポイントを解説していきます。きたみりゅうじの聞かせて珍プレーソフトウェア開発の現場で体験したトホホな失敗,思わずうなる珍プレーをきたみりゅうじ氏が四コママンガで紹介。Linuxのメンテナンスの傍ら,Linuxやオープンソースソフトと日々を過ごす著者が,その魅力とつきあい方を,エッセイ風味でお届けします。PRESS特別編集部員,さわやか笑顔のスーパーハカーはまちちゃんとネット大好き14歳わかばちゃんが,毎号,読者の皆さんから寄せられたおたよりを紹介します。皆さんの日頃の悩みにも答えちゃいますよ。]メールでのお知らせメールで次の案内をお送りしております。メールの配信を希望する方は,利用したい項目をチェックしてメールアドレスを入力し,[登録]ボタンをクリックしてください。UPDATES[ほぼ週間に1回]新刊メールマガジン[ほぼ週間に1回]電脳会議の各号案内[ほぼ1ヵ月半に1回]※変更する場合や停止する場合は,登録情報変更ページをご覧ください。※登録いただいたメールアドレスには,そのお知らせ以外,配信いたしません。Ltd.ページ内容の全部あるいは一部を無断で利用することを禁止します。個別にライセンスが設定されている記事等はそのライセンスに従います。