こんにちは!ameashi(アメアシ)です。

私は紙媒体から入ったグラフィックデザイナーなので、最近ようやくWEB関連の制作に関わる機会が増えたものの、UIって具体的になに?という状態です。
正直、紙媒体の需要は年々減ってきているので、これはマズイ!勉強せな!と奮起した次第です。

とはいえ、情報が溢れすぎているご時世、何を手につけたら良いかも分からなかったので、知人の現役エンジニア(兼デザイナー)にUIをこれから勉強するにはどうしたら良いか?を聞いてみました。

avatar
ameashi
備忘録かねてまとめてみたので、良かったら参考にしてください。

UIとは?

UIとは、User Interface(ユーザーインターフェイス)の略称です。
Interfaceには(二者間の)境界面、接点という意味があり、『情報』と『ユーザー』を繋ぐ「画像やテキストなど画面上の全て」がUIと定義されているようです。

こうして見ていただいている文章もすべてUIということになりますね。

UI(User Interface:ユーザーインターフェイス)は、ユーザーがウェブサイトやアプリと情報をやり取りする接着面を指します。ウェブサイトの場合、PCやスマートフォンに表示される画像やテキストなどのすべての情報がUIである

どう勉強したら良いの?

自分でオリジナルデザインをして練習した方が良い?と聞いたところ、有名アプリのUIを完全コピーすることをおすすめされました。有名アプリは設計がしっかりしたデザインになっていることが多いため、まずは完全コピーをしてみて、どうしてその設計になったのか?を考えた方が良いとのことでした。
絵なども模写から入った方が上達すると言いますもんね。

また、Daily UI(デイリー UI)という、出されたお題に沿って100日にわたりUIデザインを制作するサイトも良いそうです。
このDaily UIについては詳しい記事がありましたので、気になる方は読んでみてくださいね。
LIG:習慣は力なり!「Daily UI」でUIの引き出しを増やそう!

avatar
ameashi
私はまだやってないので、チャレンジしたらまた記事にしたいと思います!

何を読んだら良いの?

デザインシステム

デザインシステムを勉強するうえで、最近の事例を取り入れている本としては下記の本をおすすめされました。
デザインシステムについて分かりやすい記事がありましたので、なにそれ?と思った方は、まずは下記の記事を読んでみてくださいね。
UX MILK:デザインシステムの定義と作成方法、導入事例

UI

メジャーなUIを理解するためにオススメされたのは、Appleの「Human Interface Guidelines」と、Androidの「Material design」でした。「iOSでの体験」「Androidの体験」をそれぞれがどのように規定し統一しているかを示したものだそうです。

どちらも英語で記載されているので、英語が読める人はぜひ!私はGoogle翻訳を片手に読み解いてみようと思います・・・。

おわりに

最後まで読んでいただきありがとうございました!
これからUIの勉強する方の参考になったでしょうか?
すぐ見返せるようにまとめも置いておきますので、ぜひ参考になさってください。

avatar
ameashi
仕事や子育てでスケジュールが圧迫されているなか勉強するのは大変ですが、お互い頑張りましょう!

まとめ

有名アプリのUIを完全コピーしてみる
Daily UI(デイリー UI)にチャレンジしてみる
Design System(下にリンク貼っておきます)を読む
Appleの「Human Interface Guidelines(英語)」を読む
Androidの「Material design(英語)」を読む