【Tips】コンポーネントライブラリを作るときのポイント3つ✒️
こんにちは！PLAY THE DESIGNERメンター兼SNS担当おかちゃん ( @okbchyk ) です🐧Twitterで紹介したTipsをnoteでもご紹介💁♀️
今回は「コンポーネントライブラリ」についてです👀
コンポーネントライブラリって何？👀
コンポーネントライブラリはデザインシステムの一部です。プロダクトで使われるUIモジュールをまとめた一覧のことです📝
デザインに慣れてきた方は、Atomic Designの記事を読んだりして学んでいると思います。
コンポーネントライブラリを作ることで、こんなメリットがあります👀
- デザインルールを統一できる
- ガイドラインに反したパーツを使うことがなくなる
- トンマナが揃う
1人でアプリを作る時はあまり有用性を感じないかもしれませんが、チームでデザインする時にコンポーネントライブラリがあることで、圧倒的に便利になります✨
コンポーネントライブラリを作る時のポイント3つ📝
コンポーネント作りでお役立ちなTipsを3つ、紹介しようと思います✨
🔖アイコンを透明な四角の上に配置
アイコンサイズは形状によって異なるもの👀
背景に透明の四角形を敷いてシンボルを定義することで、アイコンも共通サイズにできます！
🔖モジュール名称に共通言語を使う
チームメンバーが普段使っている単語と全く異なるものを使用して名称をつけてしまうと、お互いなんのことを話しているのかわからなくなってしまいます😓 名付けルールを決めたり、用語集を作ったりして、メンバーが名称を把握できるようにしておきましょう！
中の人は、 Human Interface Design Guidelines や Material Design Guideline で定義されている名称を使うようにしています。多くのデザイナーが知っているガイドラインを共通言語のベースに使うことで、メンバーへのインストール速度が上がります✨
🔖他社サービスのデザインガイドラインを参考にする
他社サービスがどんなコンポーネントライブラリを持っているのかを知ることで、作り方の参考になります👀
Apple・Googleはリソースを配布してくれているので、ファイルから設計思想を逆算して学ぶことができます👀
アトラシアンのデザインガイドラインは、社員でない私たちでもみられます！
他にもガイドラインを公開しているサービスがあるので、探してみてください！👀
この記事が気に入ったらサポートをしてみませんか？