140110b
Design

UIデザインを知るべし

こんにちは!新人森田です。
1月8日で株式会社ハレノヒは一周年を迎えました。入社のタイミングもあって、忘年会(歓迎会)・年明け・一周年と、最近お祝い続きです。このハレノヒパワーで今日も張り切っていきたいと思います。では師匠、お題をよろしくお願いします!

[山形師匠]
Webデザインが紙と大きく違うところは、紙は情報を受動的に ”見る・読む” のに対し、Webは ”操作する” という動作が加わります。そして操作するためのパーツのことをUI(ユーザーインターフェース)と呼びます。定番はもちろん最新UIの種類や応用方法にアンテナを張っておきましょう。

[森田]
最近Web制作関連の情報を読んでいると「UI」ってワードをよく見かけて、重要そうだなーと思ってました。ストレスなくページを見られるのはしっかりとしたUIがあるからなんですね。どんなものがあるか調べてきます!

Dribbble

dribbble

世界のデザイナー達が作品などを投稿するSNSです。
今まで日本のサイトばかり見ていた私は、かっこいい作品の数々に目からウロコ。色んな国のセンスにリアルタイムで触れられるのは本当にインターネットならではだと思うので、これからものすごくお世話になること間違いなし。

Behance

behance

クリエイター向けポートフォリオサービスです。
めちゃめちゃレベルが高くて、良い刺激にも指針にもなってくれます。早くこの領域に近づきたくてうずうずします。

素晴らしいUIを沢山見ることができて満足していたら、師匠からUIに関する情報を発信しているブログを教えていただきました。

MEMOPATCH

memopatch

 UI制作を専門とする会社が運営するブログです。UIに関する様々な角度からの記事が盛りだくさんで参考になります。

 colisscoliss

Webサイト制作に関するあらゆる情報が豊富に紹介されているブログです。Webは表現だけでなく幅広い知識が必要なんですね。

Hail2u.net

hail2u

Photoshopで作るだけでなく、実際にWebページに組み込むコーディングも含めてUIです。こちらはフロント寄りの情報を取り扱っているブログです。

MOONGIFT

moongift

プログラムのオープンソースを紹介しているブログです。まだ技術的なことまで手が回りませんが、こういったソースも理解できるようになりたいです。

一言にUIといっても、見た目だけじゃなく色んな側面を持っていることがよく分かりました。こういうブログを毎日チェックして勉強しなければ。
次は、実際に使用されているUIはどんなものなのか、ちょっと見てみたいと思います。

Windows Phone

wp

現在のフラットデザインの先駆けといえるWindows Phoneです。Windows Phone 7の発表が2010年ということをふまえると、実は結構前からフラットデザインのUIって使用されていたんですね。

Google

google

2013年春にGoogleのサービスもフラットデザインになりました。
こういうアイコンって、無性に沢山並べてずっと眺めてたくなります。ちなみに森田は最近携帯をNexus5にしたばかりです。

iOS7

ios7

そして2013年6月、フラットデザインを一気に広めたiOS7。
すぐ目に入ってくるし、きれいだしかわいい!やっぱりApple大好きです(iPhoneじゃないけど)。

有名どころを挙げてみましたが、そのブランドのカラーを出しつつ世界中の人々に快適に使われているって凄いことだなと改めて思いました。

言葉を使えば説明はすぐ伝わるけど、それだと長かったり重たかったりする。言葉抜きでユーザーに機能を説明したり、パッと見の美しさもあったりと、UIがWebデザインする上でどういう風に重要かということが前よりも分かった気がします。
流行も反映されやすいし、もっと周囲に目を光らせなければ!と、今回はこの辺りで修行を終えたいと思います。デザインに入るまでの道のりは長いです。押忍!

標準