UI/UX | デザインその他

はじめての UI デザイン

こんにちは。
デザイナーの福原です。

フェンリルに入社してから2カ月が経ちましたが、まだまだデジタルのデザインに四苦八苦している毎日です。

これからウェブやアプリのデザインをはじめる方へ、業務の中で感じた UI デザインとグラフィックデザインの違いをお話ししたいと思います。

※ここではグラフィックデザイン＝広告などの印刷物、UI デザイン＝ウェブやアプリのデザインと限定させていただきます。

そもそも UI / UX ってなに？

UI / UX とは、ウェブでもアプリでもプロダクトでも、ユーザーとの間で相互に作用の起こるものすべてに関わる広義な概念のことを言います。

UI とは

ユーザーインターフェース（ User Interface ）の略です。機械を介してユーザーと情報またはサービスをつなぐ接触面（インターフェース）のことです。ウェブやアプリでいうと、表層のデザインにあたります。

UX とは

UX とはユーザーエクスペリエンス（ User Experience ）の略です。UI を通じて得られる体験の総称です。「使いやすい」や「うれしい」などユーザーがサービスを利用する中で抱く感情のすべてを含みます。

デザインの考え方の違い

グラフィックデザイン

媒体上で完結する
決められた枠の中で情報を整理し伝える
文字間や行揃えの美しさにより可読性を高める
余白を生かし印象的な画面を作る

UI デザイン

デバイスに依存しない柔軟性
目的の達成（コンバージョン）に直結する導線
ユーザーのアクションを想定した構造
誤操作を招かない余白

ビジュアルや文字で情報を伝えることに重点を置き、間接的に目的達成に導くグラフィックデザインに対し、ユーザーが直接操作することを想定し、迷うことなく目的達成できるよう設計する UI デザイン。

デザインをスタートする段階で考え方が大きく異なります。

「ユーザーが操作する」ということ

デバイスが持つ操作性（携帯を片手で操作している時のタップしやすい範囲など）
誤操作を招かないための最低限のルール（最小アイコンサイズや規定の幅など）
ユーザーによって異なるデバイス（スマホなのか、PC なのか、タブレットなのかなど）

「ユーザーが操作する」ということは、上記のような様々な可能性を想定しなければならないということで、そこに柔軟に対応できるデザイン構造でなければなりません。

UI デザインにおけるデザイナーの領域には、「想定される操作」という新たな軸が出てきます。この感覚を養うためには、なぜこのように設計されているのか？という意識を持って、どれだけ多くの良質な UI デザインに触れるかが大切になってくると考えます。（絶賛勉強中）

複数の人が関わるデザイン

もう一つ想定しておかなければならないこととして、デザインから校正、入稿までを 1 人で担当することの多い印刷物のデザインとは異なり、ウェブやアプリの制作には複数の人が関わります。

デザインガイドライン

全体のトンマナ（トーン＆マナー）を定めたもの

レイアウト指示書

余白（マージン）やフォントサイズなどを数値で示したもの

全員の認識を統一するために「デザインガイドライン」を作成し、デザインをシステム上で忠実に再現してもらうために「レイアウト指示書」を作成します。

デザインを作成したあと、エンジニアの方はこのレイアウト指示書にのっとり開発作業を進めていきます。

エンジニアの方が開発していくということを想定し、統一できる部分はあらかじめ余白（マージン）を均一に作成するなど意識しながらデザインを進めると、レイアウト指示書を作成する際のスピードも上がり、正確なレイアウト指示書が作成できます。正確なレイアウト指示書を作成することで認識のブレが減り、開発の効率も上がります。