個人的UIデザインの情報源まとめ

どうも。
最近エンジニアからデザイナーになったものです。

最近UIデザイナーになってUIデザインの情報源って意外とまとまってないなと思ったので、個人的によく参考にする情報源をまとめました。
ここに載ってないやつでおすすめの情報源あればコメントとかで教えてください。

OSガイドライン

OSのデザインガイドラインはUIデザイナーだったら必ず読んでますよね。

Material Design

デザインシステム的な話から装飾、カラーツールなどデザインに必要な話がとてもたくさん詰め込まれているためデザイン学習の教材として非常に優秀です。コンポーネントもユースケースやスペックまできちんと網羅されていて参考になるし、金と手間隙かかってるなあと思います。
Blogもあり、更新頻度は高くないですが面白い記事が多いのでたまに読んでいます。

Human Interface Guidelines

こちらはAppleのデザインガイドラインですね。Material Designのドキュメントと同様にUIの基本設計にまつわることが書いてあります。こちらもとても参考になるんですが、出てくる用語とかiOS開発を経験した人でないとちょっと読みにくいかなと思います。

Fluent Design System

これはMicrosoftのデザインシステムです。こちらはデザインカタログの趣が強いので、読み物としての要素は薄いですね。しかし各要素ごとに「なぜそうなっているのか」や「ベストプラクティス」などがまとまっており、自分の作っているUIと見比べてみると発見があって良いと思います。

ブログ

企業ブログ

有名企業のデザインブログは有益な話が多いのでチェックしています。
Inside DesignはUIについてというより「デザイン」全般についての話が多いですが、オンライン投票など時事ネタも扱っていて面白いです。

• The Official Blog of Figma
• Facebook Design
• Airbnb Design
• Slack Design
• Inside Design

その他ブログ

UX Collective

僕が一番良くチェックするのはUX Collectiveです。名前の通りUXデザインの記事が中心ですがUIデザインの記事もあります。更新頻度も高く面白い話が多いのでおすすめです。Twitterもフォローしとくと良いと思います。

UX MILK

国内のメディアで唯一チェックしてるのはUX MILKです。UXデザインの話が中心ですが、UIデザインに活かせる話も多いです。イベントも面白いテーマのものが多く毎回多くの人で賑わってますよね。

freshtrax

嘘ついた、チェックしてる国内メディアもう一個ありました。これは国内メディアかと言われると微妙な気もしますが。サンフランシスコにあるUXデザインカンパニーであるbtraxが運営するブログです。東京にも拠点があるため、日本語のブログがあります。

英語版もありますが日本語版と内容が異なるので注意が必要です。英語版のほうは日本のスタートアップやビジネスについて紹介する内容になっていて、日本語版とは少し毛色が違います。

LAWS OF UX

これはブログではないかも。デザインで使われる原理原則をまとめたサイトです。勉強になるしデザインがおしゃれで好きです。

はてなブックマークのデザインカテゴリ

国内のトレンドを把握するのにははてなブックマークのデザインカテゴリを見てます。コメントは特に読まないですが、テクノロジーカテゴリのような荒れたコメントはそんなに多くないかなと思います。

デザインシステム

Design Systems

Figmaが運営してるデザインシステムメディアです。現状デザインシステムについての情報が一番まとまっているのはここだと思います。デザインシステムに関わっている、興味のある人はここをチェックしていれば問題ないと思います。

デザインシステムの基礎（スペース、アイコン、タイポグラフィなど）からデザインシステムの実装や運用・組織運営の話まで内容は多岐にわたります。どの記事もデザインシステムを実践しているデザイナーや開発者によって書かれているため、非常に質が高いです。

Figma Community

公開されているデザインシステムをまとめているサイトはいくつかありますが、僕が一番よく参考にするのはFigma Communityです。Figmaのファイルをコピーすることができるので、大きさや色などを細かく見ることができて非常に便利です。

Figma Communityにはデザインシステム意外にもワイヤーフレームやアイコンなど様々なデザインリソースが投稿されているので、UIデザイナー必見です。

この他にもDesign Systems For FigmaというデザインシステムのFigmaを集めたサイトがあります。こっちは掲載数が少ないですが、Communityに公開されてないやつがいくつかあります。（Audiとか）

デザインシステムまとめサイト

企業が公開しているデザインシステムをまとめたサイトもいくつかあります。これらのサイトに載ってないものもありますが、自力で見つけるのは大変ですからね。

僕はデザインに行き詰まったときやレイアウトの参考が欲しいときに、これらのサイトに載っているデザインシステムのドキュメントを読んでます。

• Adele
• Design Systems Repo
• Design System Gallery

インスピレーション

UIデザインでもインスピレーションが必要なときってありますよね。良いインスピレーションが湧くためには十分なインプットが必要です。僕は暇なときにDribbleやPinterestを眺めて、レイアウトや色彩などをインプットしています。

Muzliではその週のデザイントレンドをまとめた記事が出るので、インスピレーション枠にいれました。直接何か参考にならなくても、頭の中の引き出しに貯めておくと後で良いことあるかもな、と思います。

• Dribbble
• Pinterest
• Muzli

Twitter

TwitterではFigma、UX Collectiveのアカウントを中心に見ていて、それらのアカウントがリツートした人をリストに突っ込んだりフォローしたりして情報を集めています。

フィードバックもらったやつ

U-Site

U-Siteは、株式会社イード リサーチ事業本部が運営しています。このサイトでは、四半世紀にわたる調査実績を基に、市場調査やユーザビリティ調査の手法・コツ、調査から得られた知見を紹介しています。

ユーザビリティの評価手法やUX調査について具体的にどんなことをするか、非常に実践的かつ具体的な内容が学べます。またUX原論の著者である黒須先生の書かれたコンテンツもあります。

Nielsen Norman Group

UIデザイン/UXデザイン界隈では有名なDon Norman先生とJakob Nielsen先生が運営してるUXデザインファームのサイト。記事だけでなく動画もあります。UXデザイン成分多めです。

Sociomedia ヒューマンインターフェース ガイドライン

ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。

僕もたまに参考にします。UIデザイン初心者の人はこれにざっと目を通してからデザイン始めるとスムーズに行けそうな気がしましす。

Designing for Mobile, Part 1: Information Architecture | UX Booth

Part3まであるらしい。モバイルデザインする人必読。

最後に

いろいろ紹介してきましたが、全部を毎日見るのは大変なので、いい感じにまとめてくれるサービス欲しいなあと思いました。