UXとは言っていても実際何をすれば良いの？〜05.表層デザイン〜
UX５段下位構想の最後のパート 05.表層を整えるフェーズ です。
最後は見た目を整えていく作業になります。
要件をデザインとして落とし込んでいく
さて、ここからは色々なHow to Designの記事があるので細かい内容は省きますが、表層をデザインしていく中で代表的なものをざっとあげてみます。
①ビジュアルデザイン
・UIデザイン
・インタラクション
・キャラクターデザイン
・エフェクト
・アニメーション
・背景
・アイコン
・キービジュアル
他にも多くのデザイナーさんが存在し、様々なデザインの手法があるとは思いますが、今回はUIデザインと直結するところを紹介します。
ビジュアルデザイン〜 UIデザイン 〜
UIデザインを考えていく上で、前回あげたAtmic Designという考え方、Style Guideの作成、ここで効率よく進めるのに一番大切なのは
デザインで使うレギュレーションを決める
ことだと思います。
このような雰囲気で、フォントサイズ、カラー、パディング(マージン)サイズ、使うアイコン、画像サイズなど固定値を決めます。
そこからどうしても足りなくなったら元のレギュレーションに追加しながらパズルのように決めたレギュレーションに従ってデザインをおこしていきます。
これがUIデザインの基本で、ゲームデザインのように見た目をカッコ良くするためにデザインディテールをふんだんに使う、、とは対象の考え方で作っていきます。
〜 UIデザイン 〜 レギュレーション:色
色は下記くらいに振り分けておくと良いでしょう
Theme ：1~2色 / ビジュアルのKey color
Base ：4~6色 / 文字や背景色
Attention : 1~2色 / 注意や通知など
Shade : 2~3種 / 上に被せる
Shadow : 2~6種 / 影
Disable : n色 / 押せない、動かせないときの色
参考 : Figmaで使える！スタイルガイドテンプレートのつくりかた (テンプレートのみ有料)
多くなりすぎてもごちゃつくし、少なすぎると見づらくなるので、ここのテンプレートがきれいに作れる＝良いUIデザインができることにつながると思います。
ポイントは押せないときの色(Disable)を決めておくこと、背景色を真っ白(#ffffff)で作らないこと、あたりを抑えるといきなりよくなります。
〜 UIデザイン 〜 レギュレーション:フォント
フォントは大見出し、小見出し、詳細、引用など要素を洗い出しあらかじめ作成したレギュレーションにハマるようにしないといけません。
基本的には余白(マージン/パディング)は８の倍数で作成することが推奨されており、フォントサイズも余白のレギュレーションに合わせた８の倍数で作ると良いでしょう。
よく使われているデフォルトの文章のフォントサイズは12px,14px,あたりをよく聞きます。(2020年現在なので、今後端末が変われば変わると思いますが）
８の倍数だけに捉われず、適切で読みやすいフォントサイズでレギュレーションを作ることも大事です。
〜 UIデザイン 〜 レギュレーション:UI Stack
UI Stackという言葉はご存知でしょうか？
ご存知ない方はこちらで紹介しているのでよかったらどうぞ
タイトルでも分かる通り、エラーやブランク状態のページも忘れずデザインしましょうね。ということです。
デザインがバッチリできて満足して忘れがちですが、開発の方に
ホバー状態はどうしましょう？ローディングは？待機中は？エラー表示は？
と聞かれた時に、何も用意していなかったらまずいです。そこもちゃんと作ってこそのUIデザイナー。がんばりましょう。
ビジュアルデザイン〜 インタラクション 〜
UIデザインが無事完了したら最後の仕上げはインタラクションです。
インタラクションとはページ遷移のときのアニメーションや、ボタンタップ後の動き、ローディングからページを読み込むときのアニメーションなどを指します。
今ではインタラクションデザイナーやコーダーの方も出てきましたが、小さなプロジェクトではまだまだここはUIデザイナーの領域になります。
疎かになり、エンジニアの方が気を利かせてくれて勝手に動きをつけてくれることも多々ありますが、インタラクションはUI,UXに紐づく重要なポイントです。
例えば下記の場所でインタラクションが使われます
・ページ遷移
・ボタンタップ
・送信から完了
・ローディング
・読み込み(達成率プログレムバー)
・通知
・バッチ
・トースト(すぐ消えるお知らせ)
・いいねボタン
その他にも最近はインタラクションが進化し、「送信ボタンをタップするとそのボタンが紙飛行機になりどこかに飛んでいって完了ボタンが表示される」など、エンターテイメント制のある物も増えてきました。
ここで重要なことは、何でもかんでも動かせば良いわけではないということ。
ちゃんと意味のある、ユーザーの目線や感情が気持ち良い程度の適度なインタラクションをつけることも重要です。
一番良いインタラクションとは、ユーザー目線で動いていることを実感しない物だと思っています。
twitterのいいねボタンなどは主張はそれほどしていないのに、実はよく見ると細かくきれいに作り込まれています。でもウザくもないしすごく動いている感じもしない。早すぎないし遅すぎない。この適度な動きをつけるのがインタラクションの楽しいところです。
まとめ
ということで、05.表層ではUIデザインに関わりそうなところだけを紹介しましたが、その他キャラクターデザインやイラストレーターの方など多くのデザイナーもこの表層のタイミングで関わってサービスを作り上げていきます。
長くなりましたが、UXとは言っても実際何をすれば良いの？をUX５段回構想に習って紹介してきましたが、いかがだったでしょうか？
自分調べの内容なので所々おかしな点はあるかもしれませんが、そこはご了承ください。（コメントなどでご指摘いただけると嬉しいです）
日々勉強を続けてまた新しい考え方や改良点、もっと良い内容があれば紹介していけたらと思っています。
関連記事
UXとは言っていても実際何をすれば良いの？〜01.戦略を定める〜
UXとは言っていても実際何をすれば良いの？〜02.要件定義〜
UXとは言っていても実際何をすれば良いの？〜03.構造設計〜
UXとは言っていても実際何をすれば良いの？〜04.骨格デザイン〜(OOUI)
UXとは言っていても実際何をすれば良いの？〜05.表層デザイン〜
もしこの記事が少しでも役に立てば、♡などいただければ励みになります。
この記事はBrewus,Inc.で開催した勉強会をベースに作成しています。
Brewusではアプリ開発をはじめ、webやUI,UXについての取り組みも行っています。
この記事が気に入ったらサポートをしてみませんか？