見出し画像

UIイラストの作り方【海外記事メモ】

今日はこの記事についてメモしたいと思います。イラストなども以下から引用します。

UIでイラストを使いたくなる場面って限定的ですが、特にインハウスデザイナーとして比較的大規模なアプリを作っている会社にいる方にとってはしばしば課題になるテーマな気がしています。

UIにとっては一見不要な要素とも考えられるイラストですが、顧客体験や顧客の製品への印象への作用は大きいため、本日はそんなテーマの記事を読んでいきたいと思います。

本日もよろしくお願いいたします。

UIイラストの5ステップ

アプリのイラストはアプリ全体のデザインにとって特別な役割を持った領域です。アプリ全体を通して、イラストはユーザーをサポートする要素である他に、アプリの雰囲気などを生み出すほどの力を持った重要な要素です。

例えば、イラストのみによってユーザーが無意識的にアプリ全体の好き嫌いを判断してしまうこともあります。人の脳は対象の微妙な違いですぐに印象を決定づけてしまいます。
イラストはサポートページなどで頻繁に使用されていますが、プロモーションキャンペーンやマーケティングの際にも中心的な役割を果たします。


イラストの作り方

ランディングページのイラスト(こちら

1.アプリとその使用用途について明確な理解をする

イラストを作る前に、アプリの使われ方やターゲットのニーズや好みについて考える必要があります。そうすることで、ターゲットに対して適切なイラストを作ることができます。

2.スケッチでいろんなイラストを試してみる

スケッチで異なるアイディアの検討をします。
この工程を踏むことでデザインの方向性を修正することや、アプリが本当に伝えたいことをちゃんと伝えるためのアプローチを考えることができます。

各絵文字のカラーパターン

3.一貫性のあるスタイルとカラーを守る

すべてのイラストは一貫性のあるスタイルとカラーによってまとまりある印象を与え、UIとしてプロフェッショナルな品質を保ってください。
そうすることで、デザインの世界観がまとまり、イラストは理解や解釈を手助けしてくれるものとなります。


4.一貫性のあるグリッドを使う

グリッドの使用

一貫性のあるグリッドは整列された印象やまとまりあるアプリの雰囲気を生み出します。見る人はまた、パーツ同士の微妙な違いに気づくことになります。グリッドはイラストのきちんとした要素配置を簡単にし、バランスの取れた構成を生み出します。まとめると、きちんとグリッドを使ってデザインすることはイラストの明快さと一貫性を強めてくれます。


5.イラストをテストしてみる

イラストが完成したら、それらが想定通りの働きをし、ユーザーの要求や期待に添うものであるかを確認します。イラストの妥当性を図るために必要なリサーチはこのテストでのフィードバックに基づくものになります。

イラストのバリエーション例


感想:イラストもきちんとグリッドを使おう

短い記事だったこともあり、内容はわりと平易なものでした。
しかし、アイコンだけでなくイラストに関しても確かにグリッドを使ってちゃんとデザインすることは大切だなぁと改めて感じました。

大事なのは一貫性と、そこから生み出されるアプリの手触り感や雰囲気。
そして何よりユーザーを安心させ、目的へ到達するための道筋の理解を促すことを念頭におくことが重要と再認識しました。

__________________________________________________________
@やました
デザイン集: https://www.saito-t-design.com/
Twitter(note更新の際につぶやいたりしてます) : https://twitter.com/yamashita_3
__________________________________________________________

#デザイナー #UIデザイン #UX #UXデザイン #UI #海外記事翻訳

サポートいただいたお金は今後の発信活動に関わるものに活用させていただきます。