UI/UXを始めるために参考になるサイト

  • 投稿日
  • 更新日
  • 著者 ささぴよ
  • カテゴリー UI/UX
  • カテゴリー テクノロジー

TechAcademyでメンターをしています

UI/UXという言葉が聞かれるようになって久しいところですが、ここに来て部署異動などでUI/UXに触れなければならなくなったというお話しもよく聞くようになってきました。

今回はUI/UXを担当するに当たって参考になりそうなサイトをまとめてみました。

この記事の目次

UI素材集

Apple iOS系（フラットデザイン）

言わずもがな、iOSアプリのデザインを作るなら必須でしょう。
最新の物だけではどうも素材が足りないので9.3系の物も参考にすると良いと思います。

勿論、iOSアプリのデザイン時にはHIG（Human Interface Guidelines / ヒューマン・インターフェイス・ガイドライン）を参考にしなければいけませんが、その中にもリソースがあります。

Android系（マテリアルデザイン）

言うまでも無く、googleさんオフィシャルにもございます。

アイコン素材

何でもかんでも拾ってくれば良いかというと違うのですが、モックアップを作って行く中で参考にするとか、権利に従って本番アプリでも使ってみるなんて事はいくらでもあると思います。
ありがたくお借りしましょう。権利についてはそれぞれ異なるので必要な物について確認をお忘れなく。

ガイドライン

OS毎にどのような基準に則っているか、それぞれ違う部分もありますので、それらを参考にアプリ開発することが求められます。
特にAppleの審査は厳しいという話を聞きますので、細かい部分も確認してからUIを確定させた方が良いと思います。

英語ですが、この世界では必須の試練です。諦めて読みましょう。

色関連の情報

配色とか色選びってとても大変な部分の1つですが、慣れるまでは基準に忠実にやることをお薦めします。
音楽の1/fのゆらぎのように、一部ふらつかせることで無意識の中に印象を強く持たせることも可能ですが、そこはセンスも関わってくるでしょう。スキルが身についてきたらチャレンジするのもありだと思います。

SNS等はよく登場しますが、ブランドにはカラーの取り決めがあり、ロゴの利用についての規定や、色の規定など細かい物が多いです。

このほか、番外編で紹介している動画も参考になると思います。

カスタマージャーニーマップについて

ユーザの動きをまとめる為に作られるカスタマージャーニーマップ。
その作り方や活用方法もまだまだ試行錯誤な所も多いようですが、このあたりを参考にするといかがでしょう？

ペーパープロトタイプについて

慣れてきたらツールを使ってワイヤーフレームをモックアップの初期段階とすることも多いのですが、紙とペンで作るペーパープロトタイプも活用はしやすいです。
打ち合わせの中で書き上げていくデザイナーとか格好良くないですか？！ 古典的ながら、活用しがいのある手法です。ツールに慣れるまでは紙で乗り切れ！

Sketch

今やUI/UXの標準デザインツールになっているSketchですが、AdobeのIllustratorに比べてやれることが少なめな印象だったりします。
とはいえ、素材もUI関連はSketchで提供されている物が多いので、使える様になるのは理想的でしょう。

よく聞かれる質問としてPhotoshopとIllustratorは何が違うんですか？みたいなものがありますが、細かいことは別記事にしますけれども、SketchはIllustratorに近いソフトです。ベクターで描くタイプのソフトですね。

Prottの使い方情報

そして、Sketchで作った物をモックアップにするときに使われるツールの1つがProttですね。
Prottには便利な機能もたくさんあるのですが、まずはこのあたりをみてみてはいかがでしょうか。

別途Prottの便利な点はまとめていこうと思います。

Adobe Experience Design(XD)もありますが、Betaであることも踏まえ、別記事で紹介しようと思います。

番外編: Adobe公式のYouTubeより参考

AdobeさんがIllustratorの周年記念に24時間ぶち抜き配信をしたときのセッションの中から、特に配色で使えそうな物を紹介していきます。

通してみると、Illustratorの便利な使い方等も紹介されており、非常に役に立ちます。時間があるときにお菓子食べながらみてみると良いのでは無いかと思います。

と、いろいろと紹介してきましたが、改めて勉強するべき内容ってたくさんあるんだなぁと実感。

もし、UI/UXについてお悩みがある様であれば、私が担当しているTechAcademyのUI/UXデザインコースを受講してみるのもいいかもしれません。他にも実務でUI/UXに携わる方がメンターにいますので、いろいろな意見を聞けるチャンスになると思います。
気になったら下のリンクから申し込んでみて下さい。（UI/UXではありませんが無料体験もありますよー。）

Adobe Android Experience Design icon Illustrator iOS iPad iPhone Photoshop Prott Sketch UI UX XD アイコン ガイドライン 配色

この記事を書いた人

ささぴよ

TechAcademy公認エバンジェリスト
株式会社シノビアシ 取締役副社長 兼 CTO

中学時代に買ってもらったPerforma 550以降ずっとアップル製品漬けの人生。iPhoneは日本上陸時から愛用し続けている。
「誰かが作っているなら、自分でも作れるはず！」という安易な発想からHP制作などを始め、ネットの世界から情報を集めてひたすらいろんなことをやってみるようになった。

TechAcademyでは、Webデザイン / WordPress / UI/UX / Node.js / OSS活動 / デザイン実践ポートフォリオ / フリーランスサポートのコース を担当するメンター。

よく歌って踊っている。

記事一覧