あやね
これからUIデザインを始めるという人は一体何から始めれば良いかわからないという人がほとんどだと思います。人からアドバイスを貰う、教えてもらうという方法もありますが、実は世界的に認められているデザインシステムの存在をご存じでしょうか？
今回はUIデザイン初心者に向けてGoogle・Appleから基本を学び、初心者に優しい話題のUIデザインツール・Pixsoを使用してデザインを作り始めるところまでをご紹介していきます。イメージが湧いたら無料UIデザインツール・Pixsoを使って早速デザインを作ってみましょう。
1. デザインのイメージが掴めない時には、世界中で有名なデザインシステムから学ぶ
デザインシステムとはWEBページやUIデザインをする時の、共通の認識を書き溜めたものです。例えば繰り返し使用するような、ボタンやツール、コードなどをコンポーネントに保存して使用していると思います。
デザインシステムとはその企業版で、企業におけるデザインの方針や、ロジックなどを蓄積したものです。GoogleのMaterial Designや、AppleのHuman Interface Guidelineなどが有名です。この二つは一般でも公開されているため、デザインの基本を世界水準のサービスから学び、インスピレーションを受けたい人におすすめです。デザインシステムは個人利用の範囲であれば使用する必要はありません。コンポーネント機能だけで十分でしょう。企業単位でサービスに一貫性を持たせる時に使用されることがほとんどです。
2. Google Material Designの５つの特徴
Google Material Designにはデザインを構成する要素が大きく分けて５つあります。
2.1 現実世界の物理法則に従う
上から下といった具合に、現実世界の物理法則に則った動きを再現する必要があります・例えば下から上にスワイプすれば、画面が下にスクロールしていきますね。物理法則に則ることで、はじめて利用する場合でも直感的に操作をイメージすることが可能です。
2.2 紙とインクの要素で組み立てる
紙とインクの要素で画面を組み立てます。わかりやすくいえば、印刷物と同じルールでデザインするということ。色のつけ方や画像の配置、余白の使い方などを印刷物に近づけることで、ユーザーは画面の情報をとらえやすくなります。
2.3 色の配色を少なくする
Googleのデザインシステムでは少ない配色の方が、良いとされておりGoogleでは４色が基本です。メインカラー、サブカラー、アクセントカラーの３種類の使い分けをします。これに白、黒、グレーの無彩色を足してデザインを構成します。
2.4 影を使用して立体感を出す
マテリアルデザインとよく比較されるのがフラットデザインです。両者の違いは立体感の有無と言えるでしょう。立体感があることで、ここはクリニックができる！という視覚的な認識を与えることができます。次のページにリンクするような重要なボタンなどが、立体的にデザインされているのはマテリアルデザインの影響が大きいのではないでしょうか？
2.5 連続性のあるアニメーション
WEBページなどで、要素が収納されているプルダウンの表示ボタンをイメージしてもらえれば分かりやすいかもしれません。このボタンを押すと、異なる機能が使えるといった利便性の向上につながるコンテンツの重要性を指しています。
3. Apple Human Interface Guidelineの６つの特徴
Apple Human Interface Guidelineにはデザインを構成する要素が大きく分けて６つあります。
3.1 美的完成度
Appleのユーザーインターフェースの考え方には、機能性に追加してユーザーが使用していて心地よさを感じるデザインを重んじています。機能性だけでなく視覚的にも美しくなくては完成度の高いUIデザインに対応していないという考え方です。
3.2 一貫性
Appleのアイコンでシェアアイコンなどは、ほとんどのIOSに使用されています。最初はわからなくても、同じ機能に対応するアイコンを使い続けることで、ユーザーに対する認知度をあげ、自社のサービスを理解させる働きを持たせています。
3.3 直接操作
iPhoneのホーム画面で、アイコンを移動しようとしたときに、長押しをしてアイコン表示がプルプルと振動しだすと、アイコンの移動が可能になります。この操作によってユーザーは好きな場所にアイコンを配置ができます。Appleではユーザーが直接画面をタップして操作するような操作性を重んじています。
3.4 フィードバック
ビジネスシーンでもよく聞くフレーズですが、Appleのデザインシステムでは少し意味が異なります。ここで使用されるフィードバックとは、例えば現在どこにカーソルが合っているかを視覚的にオペレーションするために、ボタンの色、メニューがグレーに切り替わるようなアプローチを指しています。
3.5 比喩表現
Appleのデザインシステムにおける比喩とはメタファーと呼ばれており、例えば、音量調節の際に使用されるスライダーなどが代表的です。パッと見てオーディオ機器に取り付けられているボリュームを連想させることで、最小限の表現からユーザーに何をするところなのかを暗示しています。
3.6 ユーザーによる制御
ユーザーがカスタマイズする余地をデザインに残しておくという意味です。例えば、お気に入り登録や、フィルター設定など、ユーザー本位でシステムをカスタマイズするツールを指しています。
4. デザインシステムからイメージが湧いたら早速Pixsoを使ってみよう
世界的に評価されているデザインシステムから、インスピレーションを受けた後は、ぜひ自分で形に起こしてみるのが一番良いでしょう。PixsoであればUIデザイン初心者にも優しい設計となっており、しかも日本語でユーザーを完全にサポートしてくれます。
4.1 Pixsoは安心の日本語対応！UIデザインツールでは数少ない標準仕様が魅力的
UIデザインツールは数多くありますが、日本語に対応しているデザインツールは非常に数が少ないです。世界的に有名なUIデザインツール・AdobeXDも日本語に対応し始めたのはつい最近のことです。Pixsoはリリース当初から日本語対応が標準搭載されており、その他にも英語・中国語・韓国語に対応しています。アジア圏で活動するUIデザイナーとしては非常に助かる仕様となっています。
4.2 UIデザイン初心者にも優しいシステム設計
おそらくこの記事を読んでくれている人の多くは、これからUIデザインをはじめる人や、UIデザインツールを使い始めて間もない人が多いでしょう。デザインの基本構造が理解できればあとはPixsoで思いっきり使ってみてください。
PixsoはfigmaやSketchなどのシンプルな操作性に改良を加えているUIデザインツールです。ショートカットキーだけでなく、マウスと互換性が高いため、これまでPCを使用したことのある人であれば問題なく使い始めることができるでしょう。
まとめ
今回はどのようなUIデザインをすればわからないというような悩みを抱えている人への解決方法をご紹介してきました。日本人の性格上シンプルさや機能性にこだわると、余白が多く不安を感じる人も多いかもしれませんが、ユーザー視点に立つとまた違う見え方ができるかもしれません。
