😸

【翻訳】5 tips to create a modern app UI【UI/UX】

2023/05/23に公開

UI/UX

デザイン

idea

最近、現在勤めている会社のアプリのUIを
Androidで「モダンにする」という仕事を任されました。

モダン、ヤング、クールなどという言葉は、どれも漠然としています。
何をもってモダン、オールドとするのか。

人によって意味が変わってきます。でも、そう言って放置するわけにもいかず🤪

そこで私は丸一日かけて、
私たちが一般的にモダン、ヤング、クールだと認識しているアプリの様々な例を
見てきました。

Airbnb、Coinbase、Robinhood、Uber、Swiggy、Headspace、Cocoon、Eventbrite、Public、Wise、Google payといったアプリです。

私はこれらのアプリを見るためにMobbinを使いました。
みなさんが一つ一つダウンロードしたかどうか疑問に思うかもしれませんが🤓

これらのアプリを見ると、

誰もがCredのNeumorphismのような派手なデザインスタイルを
採用してモダンに見せているわけではないことがわかります。

モダンに見せるための工夫は、とてもシンプルなものでした。
とてもシンプルなので、
私はそれを5つの短いヒントにまとめることができました😎

1.とにかく空白を作れ

スペーシングに余裕を持たせましょう。

行の高さ、パディング、マージン、特に水平方向のマージン。

私は、デザイナーが余分なスペースを追加することに
生来の恐怖心を抱いていることに気づきました。

ほとんどの場合、
目標はユーザーのビューポートにできるだけ多くのコンテンツを収めることです。

インドの人口の87％以上が720px以上の高さのデバイスを所有しています。

つまり、縦方向のスペースが十分にあるので、
さらにスペースを追加することができます。

8pxの余白が必要だと思ったら、12pxにしてみてください。
大きめに始めて、多すぎると感じたら減らしてください。

Spaced out Vs Cramped up

2.インビジブルヘッダー

ベタ塗りのヘッダーは2010年代風です。

アプリをモダンに見せる一番手っ取り早い方法は、
ベタ塗りのヘッダー（背景色とは異なる）を取り去ることです。

その代わりに、ヘッダーは、ユーザーがページをスクロールしたときに、
コンテキストやクイックアクションを提供するためだけに
スライドさせることができます。

こうすることで、デザインに必要なホワイトスペースが自動的に追加され、
通気性がよくなり、ごちゃごちゃした印象がなくなります。

Eventbrite：ヘッダーがスライドし、スクロールすると「Singapore」というテキストが表示されます。これにより、ユーザーがどのページにいるのかがわかり、「場所を変更する」ことが簡単にできるようになりました。

3.曲線美を誇示する

Google: Material you

自然界には、角が尖っているものはめったにありません。
世の中は丸い角でできているのです。
鋭利な角はあなたを傷つけます。鋭利な角は避けるべきです。

by スティーブ・ジョブズ

私たちは進化の過程で、
鋭利なものを危険なもの、攻撃的なものと認識し、
丸みを帯びたものを親しみやすいもの、安全なものと認識する
ようになったのです。

この区別は、私たちが生き残るための努力に役立っています。
その生得的な生存本能は、今日でも私たちの中にそのまま残っているのです。

鋭利な角は、攻撃的なものでない限り、避けるようにしましょう。
鋭利な角を使う良い例として、アクションゲームが挙げられます。

Call of Duty on mobile

余談ですが、丸いものへの愛情が、
シャープな顔立ちのオオカミを、
人間の親友である犬という丸いおバカさんに変えたのかもしれませんね。

私たちが愛犬を丸く愛しているならば、
インターフェースもそうではないでしょうか。

あなたならどちらを抱きしめますか？

4.イメージを使う

人間は視覚的な生き物です。
UXデザインにおける画像は、写真とイラストの2つに分類されます。

イラストでメッセージが伝わると思うのであれば、そうしてください。
また、画像によって文脈がより明確になると思うのであれば、
それを追加してください。

長いスクロールのコンテンツには、関連する画像を挟んでみましょう。

3M社の研究によると、
私たちはビジュアルをテキストよりも6万倍速く処理すると結論付けています。

Airbnbはイラストだけでなく、写真でページを分割している

5.モーション

モーションについては、個人的にまだ勉強中です。でも、アプリの動きがスムーズだと、すごく気持ちいいじゃないですか？

iOSのHonkアプリ。
世界で最も好きなアプリデザインの一つです。滑らかなアニメーション。

Google: Material you

モーションデザインについてもっと知りたい方は、
Issara Willenskomerの記事をご覧ください。

上記のポイントを押さえれば、かなり見栄えの良いUIがすぐに出来上がります。

しかし、タイポグラフィ、カラー、アイコン、シャドウなど、
他にもたくさんの要素があり、
最終的な製品の洗練された見え方にも大きく関わってきます。

それらを身につけるには、
お気に入りのアプリのデザインを見たり再現したりして、センスを磨くしかないのです。