これからUIデザインを学びたいけど、どこから学ベばいいか分からない。
自分でUIを作ってみたいけど、何を参考にしたらいいか分からない。
デザインツールを何となく使っているため、きちんとマスターしたい。

と悩んだことはありませんか?

Goodpatch Blogでは過去に、様々なデザインを学べるデザインリソースやツールを発信してきました。
そこで今回は過去に紹介した記事も含め、UIデザインを学ベるサービスやプラットフォーム、そしてアウトプットへ繋げるツールをご紹介します!

オンラインビデオ講座:どこでもすぐに新しいことを学べる

UIデザインを作るうえで、デザインツールは欠かせませんよね。ツールをより使いこなすために、「ツール 使い方」などで検索をすると、溢れ出る多くの情報に気が滅入ってしまったり、静的な説明文を理解をするのに時間がかかってしまうことはありませんか?そんな時に役立つのがオンラインビデオ講座です。動画と音声によって、講師や先生が実際にツールを使っている場面を説明をしてくれるので、より分かりやすくスピーディーに学ぶことができます。ツールの使い方以外にも、実際にWebデザインの作り方を学べるオンラインサービスをご紹介します。

Schoo

https://schoo.jp/

Schooは受講者参加型の生放送で授業を受けられるオンラインサービスです。受講生同士でリアルタイムでディスカッションをしたり、授業中に直接先生に質問することができます。講座を教えてくれる先生たちも、専門領域の第一線で活躍されるプロフェッショナルの方々ばかりです。
Schoo デザイン学部では、Webデザイン・アプリケーションの基礎から応用、IllustratorやPhotoshopなどのデザインソフト使い方などを学べる講座を紹介しています。

Skillhub

http://skillhub.jp/

Skillhubはデザイン、プログラミング、マーケティングなどを体系的に学ぶことができるオンラインスクールプログラム。基礎コースを無料で受講することができ、ノンデザイナーのためのWebデザイン講座、Illustrator入門講座などの初心者向けから、Webサイト制作実践講座という実際に自分で制作物を作成できる講座など充実しています。

Udemy

https://www.udemy.com/

80,000以上のオンラインコースから、自分が学びたいトピックの動画を視聴することができます。全てのコースが1,600円から購入する有料制ですが、30日間の返金保証があります。未経験者向けのWebデザイン講座や、ツールの使い方基礎編から上級編など自分のステージにあったコースを選ぶことが可能です。また、レビュー機能も搭載されているので、過去の受講者の評判を知ることができます。

本:一人でも始められるナレッジ蓄積のお供

過去にもGoodpatch Blogではデザイン、UI/UXに関連するオススメの本を紹介しました。読書を通してどんどん自分のデザイン知識の資産を増やし、アウトプットの質の底上げに役立ててください。

こちらの記事ではGoodpatchメンバーが薦めるUIデザインの本をピックアップしました。ユーザー心理を学べる本から、プロダクトの作り方、インスピレーションの得方など多方面でのUIデザインについて知りたい方はぜひチェックしてみてください。

ビジネス職の方やデザインを学んだことがない人でも読みやすいデザインについての書籍をピックアップしたのがこちらの記事です。「設計」と「装飾」、対局のように思える意味をもつデザインについて知識を深めてみてください。デザインの初心者や、「デザインとはなにか」を知りたい方におすすめです。

TED:世界的な著名人の話を聞こう!

世界的に有名な専門家や著名人のプレゼンテーションを聞いてみませんか?TEDでは、様々な著名人のプレゼンテーションを聞くことができ自分の知見を広げることができます。

https://www.ted.com/

TED (Technology Entertainment Design) は、世界で大規模な講演会を主催している非営利団体です。そのTEDが開催している講演会では、テクノロジー・エンターテインメント・デザインを中心に世界中で活躍している著名人がプレゼンテーションを行なっています。10~20分ほどのプレゼンテーションの中で、考え方や生き方に触れることができます。
以前にもGoodpatch Blogでは、デザイン入門者向けへのおすすめTED動画をご紹介しました。問題解決や価値創造の手法・考え方をぜひインストールしてみてください。

デザインリソース:インスピレーションの源泉

UIを学ぶためには、良質なインプットが欠かせません。以前にもGoodpatch Blogではひらめきに繋げるデザインリソースをご紹介しました。今回は、ご紹介しきれなかった便利なサービスをリストアップしました!

Panda

https://usepanda.com/

PandaはデザイナーのポートフォリオサービスのDribbbleBehanceをまとめてチェックすることができるサービスです。人気エントリーと新着エントリーに分けられるほか、デザインに関するニュースも閲覧することができるので、最新のデザイントレンドをもチェックできます。ウェブサイト版とGoogle Chromeの拡張版があるので、自分好みにカスタマイズしてみてください。

Daily UI

http://www.dailyui.co/

Daily UIとは、月曜日から金曜日までメールでUIデザインのお題が届くサービスです。作成したデザインをSNSに #DailyUI のタグをつけてシェアをすることで、アウトプットの習慣化にも繋がります。また、同じお題に取り組む他の方の作品も比較することができるので新しい発見やひらめきに繋げてみてくださいね。

Collect UI

http://collectui.com/

Collect UIは、Dribbbleに投稿されているDaily UI challengeをカテゴリー分けして表示されるサービスです。左のコラムの、サインアップ画面、ランディングページ、設定、検索などを選ぶことでそれぞれのデザインを閲覧することができます。掲載されるデザインは、閲覧者に新しいインスピレーションを与えることができるハイクオリティの作品のみ。そのため運営のデザイナーたちがひとつひとつ作品を精査したのち、紹介されています。

MobileMozaic

http://www.mobilemozaic.com/

MobileMozaicは厳選されたiOSアプリのUIデザインを紹介しています。特徴的なのがUIパターンでカテゴライズされているほか、教育・ビジネス・ニュース・健康などアプリの趣旨ごとにもカテゴライズ検索することが可能。運営によって選ばれたデザインのみ掲載されているため、ハイクオリティーなUIばかりが揃っています。

ツール:手を動かし自分で作れる

UIデザインを作るにあたって、ツールを使いこなすことは必要不可欠。そこで実際にデザイナーが使っているデザインツールや便利なサービスをご紹介します。ぜひ、ご自身のアウトプット制作に役立ててみてください。

Sketch

https://www.sketchapp.com/

SketchはWebやモバイルのアプリなどのUIデザイン制作に特化したツールです。軽い操作性、シンプルなインターフェースから多くのデザイナーに好まれています。
プラグインやテンプレートが豊富で、自分の好みなツールへとカスタマイズすることが可能です。
以前にGoodpatch Blogで紹介したSketchのおすすめプラグインの記事もぜひ参考にしてみてください。

Adobe Illustrator

https://www.adobe.com/jp/products/illustrator.html

Adobe Illustratorは、Webやモバイル、印刷など幅広い用途に活用できるグラフィックアプリケーションです。豊富な線画ツールと鮮明なイラスト制作が可能なことが特徴的。UIデザインの他にも、ロゴやアイコン作成にも適しています。
上記で紹介した、Udemy、Schoo、Skillhubなどのオンラインビデオ講座でもAdobe Illustratorの初級から上級までの講座がありますので、ぜひ活用してみてください。

以前のGoodpatch Blogでは、GoodpatchメンバーがAdobe Illustratorを使ってロゴ制作のプロセスをご紹介しました。デザイナーが何を考えて作品を設計しているのか参考にしてみてください。

 

STUDIO

https://studio.design/ja

STUDIOは、コードを書かずにデザインをするだけでWebサイトを作成できるプラットフォームです。コーディングの作業やサーバーへのセットアップの必要がありません。Webサイトのデザインを作ったけどコーディングができずに公開ができない、と悩んでいる方に必見のサービスです。自由自在にデザインができるだけではなく、既存のテンプレートのカスタマイズも可能。自分だけのデザインでWebサイトを作ってみてはいかがですか?

Prott

https://prottapp.com/ja/

Goodpatchが提供しているProttは、アプリのプロトタイプを素早く作成することができます。画像を取り込み、つなぎ合わせてアニメーションを指定するだけで実際に自分で動かせるプロトタイプが完成。メンバーにシェアをして、フィードバックを貰えるコメント機能もあるため自分で作ったUIを友人や先輩のデザイナーにみてもらいアドバイスを頂くことができます。そして作成したプロトタイプは、プレビュー機能でiPhoneやAndroidなど実機検証することが可能です。自分で作ったUIデザインを、実際に端末で触って試してみてください!

Prottの使い方を動画でも説明していますので、ぜひチェックしてみてください。

いかがでしたでしょうか。
これからUIデザインを学んでみたい方向けに参考となるデザインリソースをセレクトしました。ぜひ、これらの知識やノウハウを自分の資産として積み重ね、アウトプットへ活かしてみてください。

最後に、GoodpatchではUI/UXデザイナーを学びたい人のためのコミュニティ「Designers Gym」を運営しています。Twitterアカウントでは、今後もUI/UXデザインを学ぶ人へ情報を発信していますのでぜひチェックしてみてください!
https://twitter.com/designers_gym