Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationEventAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
198
Help us understand the problem. What are the problem?

More than 3 years have passed since last update.

posted at

updated at

UI設計者向けURLまとめ(メモ

※今回はUIのみ、UXについては別途記載する

ガイドライン

まず基本は大切にしたいので、ガイドラインから

Android

・Android アプリ品質ガイドライン
https://developers-jp.googleblog.com/2013/01/core.html
・Android Designガイドライン
https://developer.android.com/design/index.html?hl=ja
・UIパターンアイコン
https://developer.android.com/design/patterns/index.html

iOS

https://developer.apple.com/ios/human-interface-guidelines/overview/design-principles/
・日本語のドキュメント
https://developer.apple.com/jp/documentation/

Windows

・UXデザインガイドライン
https://msdn.microsoft.com/ja-jp/library/windows/desktop/dd834141.aspx

UI設計

・優れたUIを実現するために確認しておくべき51のチェックリスト
http://ohako-inc.jp/uiux-japan/ui-design/201409-51checklist_for_goodui.html

・Pixel Perfect Percision
http://ustwo.com/blog/the-ustwo-pixel-perfect-precision-handbook-3/

他社のデザインガイドライン

・Design Guidelines.
http://designguidelines.co
→ガイドライン作成の参考などに

コーディング

どのような実装方法があるのか、どのような意味合いがあるのか
把握しておくと誤った構成にはなりづらいし、開発者とのやりとりがスムーズ
私自身は逆引きから探すことが多い

・逆引きAndroid
http://www.adakoda.com/android/
・逆引きSwift
http://docs.fabo.io/swift/
・Swift公式
https://swift.org/https://github.com/apple/swift

"iOSの開発者に頂いたものの引用です。
iOSのリジェクト対象くらいは抑えておくと良い。

//ログイン不要なもの
・日本語ドキュメント
https://developer.apple.com/jp/documentation/
⇒オリジナル(英語)に比べて更新が遅れがちですが、特定の機能を調べるならまずはここから
 ※本で学べないものも多くある

・オリジナルの開発ドキュメント
https://developer.apple.com/documentation
 ⇒APIレベルでの仕様を調べるならここ

・審査ガイドライン
https://developer.apple.com/app-store/review/guidelines/jp/
 ⇒「こういうアプリはダメ」をAppleが定義しているページ

//ログイン必要なもの(AppleIDを取得してれば見られる)
・ダウンロードページ
https://developer.apple.com/download/
⇒開発ツールやOSのダウンロードページ
 ※一部はAppStoreからもインストールできますが、基本的にこちらから取得すべきかと

・ガイド&サンプル
https://developer.apple.com/library/content/navigation/
 ⇒最新のSDKのドキュメントとか、サンプルコードがある

・デベロッパーフォーラム
https://forums.developer.apple.com/welcome
⇒バグなどについて投稿したり相談したりするところ
 最新OSのバグなどはまずはここで探してみるとよい

prototype

議論が長引いたり、正解がないものは触ってみることがとても重要。

transition

・canvasflip
https://www.canvasflip.com/
 ⇒最近のお気に入り。無料で5Projectまで可能。
  1PJにつき3件の操作動画を見れたり、ヒートマップが見れたりする。
  簡単なユーザーテストが出来てすごく便利。しかし少し重い。

・Marvel
https://marvelapp.com/
⇒以前は作り放題だったが、今は2Projectまで無料。

・inVision
https://www.invisionapp.com/
⇒コメント付与機能が本当に便利、新規案件をチームで使うならオススメ

・Prott
https://prottapp.com/ja/
⇒有料版はワイヤーや画面遷移図の作成も出来てしまう、新規機能追加時にオススメ

・POP
https://marvelapp.com/pop/
⇒手書きをサクッとプロトタイピング、手軽で良いが
手書きが苦手な人もいて不評もあった

Design

・UXPin
https://www.uxpin.com/pricing.html
⇒ライブラリが豊富でそれっぽいワイヤーが作成できるし
 デザインも作成できる。コメント機能つきで無料の範囲があれば利用したい。

・Adobe XD
http://www.adobe.com/jp/products/experience-design.html
⇒とにかく軽い、現状無料、ワイヤー作成には一番良いかもしれない。
詳細なDesignは作れない。遷移もつけれるがあまりおすすめしない。

・Sketch
https://sketchapp.com/
⇒プラグインが豊富、導入している企業も多いしMacならSketch一択かも。

・Affinity Designer
https://affinity.serif.com/ja-jp/designer/
⇒Illustratorから乗り換えようか悩むくらい良アプリ
PhotoShop、Illustratorなども開くことが出来る
買い切りで6,000円、コスパ最強のツール
アセット書き出しもOK

ワイヤー

・moqups
https://moqups.com/
⇒フローチャート書いたり、UI遷移図書いたり、とにかくすごく使いやすい。
有料にしないと非公開ドキュメントが作成出来ない。

・使ってみたい
https://pidoco.com/en
https://www.mockplus.com/

UI参考サイト

論理的に説明するのが面倒になったら、
「どこどこでもやってます」って言うのが手っ取り早く合意形成できます

・UIOHMY
http://uiohmy.com/
⇒AndroidとiOSどちらも担当してる人におすすめ。
 2つのUIを並べて確認することができる。

・他オススメ
http://uxarchive.com/
https://www.pttrns.com/
http://www.mobile-patterns.com/

icon参考

http://icondrop.net/
http://www.iconsfeed.com/

UX

http://uxmilk.jp/
http://ohako-inc.jp/uiux-japan/
http://www.standardinc.jp/reflection/
※UXについては別途まとめる予定。

その他

フロー図

・UI Flow図作成ツール
http://qiita.com/hirokidaichi/items/ff54a968bdd7bcc50d42

マインドマップ

・MindMaple
http://www.mindmaple.com/
⇒対応するデバイスが多い、デザインやアイコンが豊富

・FreeMind
https://ja.osdn.net/projects/freemind/
⇒とにかく軽くて、ツーリーを折りたためるので見やすい

タスク管理

・Trello
https://trello.com/
⇒看板系やりたいこと、やること、やったことの可視化がしやすい
優先順位の管理や、画像を貼ったりも出来る、コメント欄をうまく活用すれば
Designのチェックなどを行ったり意見を出し合う作業にも向いている

・Todoist
https://ja.todoist.com/
⇒シンプルなタスク管理、やることの優先順位付け、完了日などの管理が出来る
親タスク小タスクやProjectを沢山つくれるので、社内外のタスクも管理しやすい
slack連携もあり簡単にタスク追加することが出来る
忘れっぽいので小さいタスクはこちらで管理している

課題管理

・JIRA
https://ja.atlassian.com/software/jira

社内情報管理
・コンフルエンス
https://ja.atlassian.com/software/confluence
https://seleck.cc/301

ガントチャート
・ブラビオ
http://brabio.jp

コミュニケーションツール

・slack
https://slack.com/
導入している企業も多いが、根付かず諦めたという現場も多い
ユーザーサポートが日本語対応された(?)ようなので再度使ってみてはどうか

・ChatWork
http://www.chatwork.com/ja/
タスクが作れるのは便利だと思う
電話の折り返しタスクを上司に作ってあげていた

データ分析

・GoogleAnalytics(Web/App)
https://analytics.google.com/
・UserInsight(Web)
https://ui.userlocal.jp/
・Repro(Push)
https://repro.io/

他社(競合調査)

・AppAnnie
https://www.appannie.com

ユーザー調査

・PopInsight
https://popinsight.jp/

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
198
Help us understand the problem. What are the problem?