UX/UIデザインカンパニーのオハコがデザインについて発信していくメディア

Powered byOHAKO Inc.

2016.10.28

UI DESIGN

ニュープロダクトレビュー – UIデザイナーが触れて感じたiPhone7

皆様初めまして。
10月から株式会社オハコにJoinした、UX/UIデザイナーの細淵です。
入社早々厚顔無恥な私は会社の福利厚生を最大限に生かし、早速iphone7を10月8日に買ってきました。

今回は個人的主観を織り交ぜつつ、iphone7を様々な角度から『Good point』『Bad point』レビューしていきたいと思います。

Good point

OSアップデートのロック画面のUI変更

iOS9ではスライドでロック解除の機能はTOP画面下にありました。
Touch IDがうまく機能しない時よく重宝したので、この癖はiOS10のアップデートでウィジェットを起動させる原因になりました。

その他にもカメラなど大幅にコンテンツのレイアウトが再構成されました。
今までのiOS9に慣れていた人には『使い慣れたはずの導線を消すの?』
と思ったのではないのでしょうか。
当然、従来の動きやアクションの見直しはユーザーに再学習という大きな負荷を与えます。
iOS10を初めて触った時は初心者のごとく戸惑いを覚えました。Touch IDを使わないパス入力の場合、一度ホームボタンを押してロック解除になります。

しかし、再起動はともかく、Touch IDを使わないユーザーがどの程度いるのかということです。手入力よりもセキュリティは一般的に高度で、
工数も少なくロックの解除はスマートです。こと、iphone7の指紋の認証速度向上は、
一目瞭然でわかるレベルです。単純にセンサーの感度が向上したのか、A10 Fusionの恩恵なのか、ストレージの余裕なのか、OS自体の見直しなのか色々な要因が考えられますが、
ストレスのない良いレスポンスです。パス入力の画面にしても、伝統あるスライドからのロック解除の導線を廃したことは、ユーザーの工数削減に貢献していると感じられます。

カメラ起動のレイアウト変更に関しても言及したいと思います。
従来は右下カメラアイコン付近を狙って、上スワイプ(フリック)起動をしていましたが、
今回からは左スワイプに変更になりました。

  • ロック中のカメラ起動の押下エリア変遷

ロック画面
実はこちらの方が押下エリアが広く、誤作動が起きにくいと言えます。
持ち方にもよりますが片手操作なら基本親指が主体です。
指の動かし方も縦にスワイプするより使いやすいと言えます。アイコンなどを押す場合、
狙い(あたり)をつけてからフリックという2工程が必要ですが、
左スワイプ操作は狙う必要がほとんどありません。片手で起動する際や誤作動を懸念すると、今回の改善は決して改悪ではないことがよくわかります。
オートスリープ解除機能と併用するとカメラの起動はよりスマートになります。
しっかりとユーザーの行動を検証しているのではないでしょうか。

Apple Pay

10月25日の初日はApple Payを待ちわびたユーザーでシステム障害に陥り嵐の中の船出となったApple Pay。
早速ですがその使用感をレビューしてみたいと思います。

master card等各種クレジットカードの読み込みは勿論のこと、Suica自体の読み込みもシステム障害さえなければ、苦労することなく始められます。
カード裏面の下4桁の数字と生年月日を入力し、あとはカードにかざすだけで導入開始です。
余計な入力などは最低限まで抑えているので、様々なカードを登録したくなるほど心地の良く楽しい設計です。
登録した数のカードだけ対応できる範疇も広がるので、財布を出す機会は劇的に減りました。今後は様々な種類のカードが続々と参入し、Apple payはさらに盛り上がりそうです。

  • 1つの登録が1〜2分以内に完結するので負担が少なく非常に楽しめる設計に

suica登録_wallet
実際ドキドキしながら一通りの機能を体感しましたが、感応にも問題はなく杞憂に終わりました。電車通勤時は端末自体を手に持って移動しているシーンが多いので、
ポケットから取り出すというアクションが一つ減り、よりスムーズな入退場ができるのも面倒くさがりの私にとって時は大きなポイントです。

ログも出ているので大まかな時間計算や残額確認などが非常に便利です。
また1円単位でのチャージや定期の更新も簡単でその場で瞬時に行えます。常に残高と履歴が通知で確認ができるのでそれもありがたいポイントです。

  • チャージや更新などが場所を問わず簡単に行え、物理的なチャージ等が無いのも大きなポイント

定期券とチャージ

従来のカード式定期券だと、改札口や買い物購入時の限定的シーンでしか確認できませんでしたが、アプリやwebサイトを通さずにプリインで瞬時に見れるのも高評価でした。
タッチ後、または使用中に通知(フィードバック)がありますが、使っている側に安心を提供するといった意味でもしっかりと考えられています。

  • 入退場時や使用中にしっかりとフィードバックがあるのが不安を消し去る大切な要素に

Noification画面

従来の定期券のタッチを叩きつけるようにして通過いる方をよく目にしますが、デバイス決済がもっと普及すればそのようなアクションもなくなるので期待をしています。
しかし、これからの忘年会シーズン携帯を電車内に置き忘れたり、電池が無くなってしまわぬように何らかの対策は必要ですね。

Bad point

ケースレスにできない

普段からケースレスで使うことが多い私ですが、6、6Sモデルは飛び出したレンズを採用しているためにケースがないといろいろ不都合でした。
iPhone7でもその部分に改善がなかったのは残念でした。
ケースレスの状態で置きながらキー入力などをするとカタカタとリズムカルに動きます。Apple payも登場し、脱ケース化が加速するかなと思いましたが、それも難しそうです。

ケースはドレスアップや機能の拡張、デバイス自体の保護など様々な利点もあります。
しかし、ケースの種類にもよりますが、画面のキワでの操作性低下や通常より幅や厚みができて本来の使用感を損なうこともあります。
人気のJet blackも傷が発生しやすく、保護シールによっては総務省の転写プリントまで剥がれるという始末に。。。(ちなみに、公式でケース推奨を謳っています)
ただでさえ片手操作でも手の位置の持ち替えが必須となった近年のディスプレイサイズ。
薄さは年々変わってきていますが、もうケース無しでの使用は想定されていないのかもしれません。(6シリーズと7は厚さは同じですね。)
ケース無しで使用している人をほとんど見かけないのも、Appleがそのような形状を作る一つの理由になったのかもしれません。

メールの前後遷移

メールの読み方は皆さん違うかもしれませんが、私は一番古いもの→最新という読み方をしています。
iOS9ではメールボックスの並びに合わせた構造なので前後への遷移は直感的に理解できました。
この部分で苦労して覚えた経験は特段ありませんでした。

iOS10では如何でしょう?
なんと横配列です。

  • 従来はメールの構造に合わせた縦アローだったがアップデートから横アローに構成が変わった。

mail新旧画面
メールボックスの一番最新を開くと右側の矢印はDISABLEです。
進めない(NEXT)?じゃあ戻る(PREVUIOS)?私が考える構造とは逆のようです。
違和感すら覚えない方もいると思いますが、根本的な原因としては右左と上下の複合構成になっているためです。

本来迷わせる、もしくは押し間違えるUIは適切ではありません。
おそらくですが、私は階層構造で「最新メールはさらに深い階層へ(NEXT)」「過去の一番古いメールは最新へ戻る(PREVUIOS)」という認識があるようです。
結果と私の考える矢印とは逆です。これは習うより慣れるしかないです。
会話の中で私だけではないと思いますが「右と左どっちがいい?」と対面で聞かれた場合、ジェスチャーがない場合、
もしくは具体的な単語や連想させるキーワードがない場合「どちらから見て右?左?」となります。皆さんこの矢印、どう感じますか?

Music app

これはリリース直後から現在まで様々な場所で議論が生まれています。
私は正直に最初に見た時は「素敵だな」というよりは「あぁ。。」というネガティブな感想でした。

Complexion reductionと言われるような新語(造語?)ができるぐらい、
大きいFontを使ったりコンテンツを目立たせて操作画面はモノトーンにすることは今年のトレンドになりました。
Instagramを始めAirbnbも違うように見えますがテイストは確かに近いですね。
では新旧のインターフェイスを比べながら分析したいと思います。

こういったものは英語などある程度秩序や規則性のある言語ならともかく、日本語などでは扱い方が非常に繊細で難儀です。
そもそも日本語では漢字・ひらがな・カタカナという三種類だけでなく、英語もあります。
そもそもの字が違うだけでなく、太さも大きさもバラバラなので秩序性に欠け、残念な結果になりやすいです。

  • 同じ位置にあるのにもかかわらず、重さも見栄えも違うタイトル

タイトル画面のfont比較
アイコンの角の丸みや他のカードやダイアログ等の角Rは、前より可愛さを増したように感じます。
アイコンの太さや濃さなどもインパクトが強く、押しやすさやユーザビリティ向上に寄与しているかもしれませんが、
とにかくインパクトがすごいです(最近までは#000000もなかなか使わない色でした)。
これはMaterial designを見すぎた私には少し衝撃的でした。慣れるまで時間を要しました。

  • ずいぶん可愛さが増え、そして重くなったアイコンたち

play画面の比較

全体的に洗練された繊細なイメージからインパクトが強いものへなりました。コンテンツなどは見やすく視認性は大きく向上しました。

  • 再生画面以外でのシークバーの廃止

ライブラリ画面の比較
ジャケット写真が多くある場合、非常に楽しくて人に見せたくなるような、いい高揚感があります。
当然ですがザッピング感覚で見る場合スクロール数も増えます。

ハードウェア面の改善点

最後に、こちらはハードウェア面についてなのですが、私が購入したいと感じた最初のタッチポイントとなった部分(=気持ち上向きポイント)ですので是非紹介させてください。

これまで、電波を妨げない為に長らく採用されていた通称「Dライン」と呼ばれる部分。
今回からこの「D」の直線部分が端に追いやられました。これで、Jet BlackとBlackでは特に、ほとんどラインが目立たなくなりました。
統一感が大好きな私は、iPhone4Sは外的な要因もあり、トータルで3年も新品に交換ながら使い続けました。(Rose Gold/Goldは個人的に残念な結果になってしまいましたが。。。)
それだけずっと背面の一体成型に思いを馳せていた私ですが、現時点で一番外的な要因が満たされたモデルがついに出てきました。

そしてDラインの問題で違和感を覚えるカメラレンズの配置は綺麗な位置に戻りました。
写真のようにほぼレンズサークルと端末のアウトラインのRがほぼ合わさっています。
少しばかり誤差はあるものの、違和感のある部分は取り除かれ規則的で心地の良いレイアウトに収まったといえます。
(実は4Sまではしっかりとカメラレンズと外のRを意識したデザインです)

  • 明らかにバランスが良くなり全体的に綺麗におさまったレンズ位置

iphone6s_7

  • Dライン問題が発生する前までの過去モデルはカメラの位置を意識したデザイン

iphone3gs4s

まとめ

さて如何でしたでしょうか?
皆さんがこれらを見て、また色々な議論が生まれればいいなと思っています。
常にトレンドが生まれ、古いものは廃れ行くハイサイクルの世の中で2年後にはどんなトレンドがスタンダードになるのでしょうか。
大きなムーブメントの陰には必ず小さな変化があるものです。

以上簡単なレビューでした。
他にも様々な気になる機能はあります。
皆さん自身も無意識的操作をする前に意識的操作を心がけてみてください。
必ず違和感を覚えるポイントがあるはずです。それはきっとデザインでもビジネスでも日常生活でも活かせるポイントにつながるはずです。
小さな体験は全体の評価の一要素ですが、その一要素でも評価を揺らいでしまうこともあります。私も意識しながら取り組みたいと思います。

最後までお読みいただきありがとうございました。

EDITOR'S PROFILE

細淵一伸

細淵 一伸

UXデザイナー/UIデザイナー

埼玉県生まれ。学生時代はプロダクト専攻で学芸員資格を持つ謎の肩書。2016年までziba tokyoでデザイナーを担当。最近株式会社オハコの仲間入りをしUX/UIのデザイナーへ。最近ハマっているものはサバゲ。趣味は写真・スケボー・バイク・そして映画鑑賞。気になったことは酸いも甘いもとりあえず触ってみる・体験してみるのがモットーです。