こんにちは。お疲れ様です。ソリューション事業部でディレクターしてます かっきー です！こちらでお世話になって早3年目を迎えました、もう若手ぶってられません。………頑張ります －＝≡(o*ﾟｰﾟ)o
私はもともとWebデザイン出身なこともあり、アプリよりかはサイト制作のほうを得意としております。
がしかし、世の中アプリアプリ…。最近ではスマホサイトでもアプリっぽいUIを求められることもあり、アプリから学べることいっぱいあるなーと痛感しております。
ということで、今回はスマホサイトやアプリ案件を制作する上で事前知識として入れておきたい参考記事や個人的な見解を述べさせていただきますっ！
優れたUIを実現するために確認しておくべき51のチェックリスト
UI/UX JAPAN さんの記事です。すごくシンプルに分かりやすく説明してくれています。51項目もあるのですごい長いですが、説明短くてすらすらっと終わります。以下、１部抜粋させていただき、僭越ながら個人的感想を添えさせていただきました。
すべての選択肢を均等にではなく、おすすめを強く伝える
特に、スマホサイトでは画面内に収まる情報が限られますので優先度のつけ方にはセンスが必要ですよねー。むつかしい。
- 構成案の前に、情報の優先度をリストアップする
- メイン要素とサブ要素の差異をつけた構成にする
- ステータス系（ログインしてるしてないetc）の情報はヘッダーを固定して常時目の届く場所に配置する
- 情報の優先度についてちゃんとデザイナーさんに説明する、または、一緒に悩む
- アコーディオンなど動きを入れて情報を隠しておく
- その他いろいろ…
確認画面を挟むのではなく、やり直し機能を用意する
これは、ライトなユーザー登録や申込みで効果があるかもしれませんが、問い合わせや購入手続きでは入力の誤字脱字を防ぎたいところなので考えものですね。
個人的にスマホを使うようになって誤字脱字増えております。してても気にならなくなってますし…(´･ω･`)ｼ 空気読んで的な…。
選択肢は最初から表示しておく
これは盲点でした！見た目のシンプルさばかり気にして選択肢をプルダウンなどで１まとめにしがちなんですが。
そういえば、Facebook の Download Brand Assets の UI が好きです。全部英語だけど何のストレスも感じない。ビジュアルも入ってきれいですよね。
その他、コンテンツ系について
- 誰のためのサービスか、を伝える
- 疑問系ではなく、言い切り型で伝える
- 登録前にサービスを体験してもらう
- 機能ではなくメリットを宣伝する
- しないことによるデメリットを強調する
- コンバージョン部分で、保障を再度掲載する
- 価格を小さく見せる
わたし個人的な癖で「内容読まない」「見た目で機能や内容を判断する」ところがあるので上記のところグサーッ！ときます。食わず嫌いはいけませんよね…。
——————
参考元：UI/UX JAPAN
優れたUIを実現するために確認しておくべき51のチェックリスト
モバイル向けUI/UXデザイン10のポイント
freshtrax さんの記事です。こちらはアプリを軸としたUI/UXデザインのお話です。デザインのことでもあるので記事自体かっこいいですねっ！
こういうデザイン見ていると、うっかり「Webでも…」と思ってしまいますが、Webは世界中いつでも簡単にさまざまな端末から見れてしまいますからね。技術的な制約があってなかなか実装できないのが悔しい…( ￣っ￣)ﾑｩ
レイヤースタイルのUIで奥行きを出す
ここでいう“奥行き感”とはどうやって表現するんでしょうか？
いま現在デザイナーではないので、あれなんですが。
従来の「ドロップシャドウを入れる」「ボタンをぷっくりさせる」ではないですよね。
例えばですが、下図のメニューデザインの違いを説明してみますね。
左側はいま主流のフラットデザインと言われるものになります。べた塗りの同系色の配置によって各要素の仕切りを表現しております。シンプルでフロントを実装する方には超うれしいデザインですよね。
一方、右側はちょっと昔よく使われていたデザイン。微妙なグラデーションや影を使っており、こちらの方が“紙の折れ具合”といった素材感が表れています。個人的見解ですが、モザイク画や印象派絵画の概念に近い表現方法になっているのかな？と思います。
デザインには流行り廃れもあるのでいちがいに何が正解とは言えませんが、技術者、提案者の人は自分のスキルの選択肢を増やして、目的に適した表現や機能を提供できるよう精進しないといけませんね。（大変ﾀﾞｰ）
ブラー (ぼかし) エフェクトを効果的に利用する
こちらはアプリのみで可能な機能になりますね、と思ったらHTML5になってできるようになっているようです！！
参考）Fullscreen Image Blur Effect with HTML5
こちらの記事にもありますが、エフェクトの活用方法には気を付けましょう！何かの目的（友達を検索して詳細をみたい！など）があっていくつか画面遷移を通った最終画面でエフェクトを使うと、ユーザーに「ここが目的地か」という印象を与えることができ、直感的なUXを提供することができます。
その他為になるUI/UX記事詳細
最後に、雑になってしまい恐縮ですが、読んで為になった記事のご紹介になります。
——————
参考元：
UIの学習のために生まれたUI
——————
参考元：Mac – 週アスPLUS
UIはシンプルがベスト THE GUILD深津氏に聞くアプリ開発術
——————
参考元：
情報がないことを伝えるUIデザイン
——————
参考元：
アプリのUX/UIをデザインするなら絶対に見ておくべき海外のサイト7選
——————
参考元：
UIデザインにおけるナビゲーションのデザインパターンまとめ
——————
参考元：
「深津貴之氏に学ぶ、スマホUI/UX講座 ～iOS7についての考察とfladdictデザイン論～」に参加してきました。
