自分が作りたいアプリをFigmaでデザインしたくて学んでみましたが、何か自分が作ったものはうまくデザインされた感じではありませんでした。
そこで、Figmaを上手に使うにはUIデザインについて理解しておく必要があると感じました。
Figmaの使い方というよりは、デザインをどのような意図で行うべきかを整理した記事としてお読みください！
解像度と単位の理解#
物理ピクセル（PX）と論理ピクセル（DP）には違いがあります。
Webではcssがpxを論理ピクセルとして認識し、emやremのような相対的な単位も使用されます。
解像度と画面サイズ
解像度：画面の総ピクセル数（横 x 縦） 例）1920x1080 1280x1024
インチ：画面の対角線の長さ（1インチ = 2.54cm） 例）24、27、32インチモニター
ピクセル密度
PPI (Pixels Per Inch)：1インチあたりのピクセル数
DPI (Dots Per Inch)：実際の画面領域のピクセル数
デザイン単位
DP(Density-independent Pixels)：Androidのサイズ単位
SP(Scale-independent Pixels)：Androidのテキスト単位
PT(Point)：iOSのサイズ単位
DPIは1xだとぼやけて見えることが多いため、2xのPNGでExportするのが良いです。
イラストレーションやアイコンなどの場合、ベクターのSVGファイルを使えば劣化しません。
8pxグリッドシステム#
8pxグリッドシステムはデザインの一貫性と開発親和性を高める方法です。
すべての要素のサイズと間隔を8の倍数に設定することを指します。
例）アイコンの基本サイズ：16、24、32、64pxなど
デザインアセットのサイズと間隔、すべての数値を8単位に揃えれば、すべてのデバイスでピクセルが崩れず、開発フレンドリーなデザインができます。スクリーンサイズが8bit（1byte）を基準に発展してきたため、8を基本にすることで画像がきれいにレンダリングされます。
必ずしも8の倍数だけにこだわらず、必要に応じて4pxや2px単位も使用します。
8pxグリッドシステムをUIに適用できる領域の例：フォントサイズ(Font size)、行間(Line height)、パディング(Padding)、マージン(Margin)、角丸(Radius)、固定幅/高さ(Fixed width/height)など
すべての環境を考慮する場合でなければ、8pxグリッドを必ず守る必要はありません。
Figmaでは Preferences > Nudge amountを8pxに設定することで簡単に適用できます。
ボックスモデルの理解#
すべての要素はボックス領域の中に入っています。すべてのUI要素はボックスモデルに従うことができます。
- コンテンツ：実際の内容
- パディング：コンテンツとボーダーの間のスペース
- ボーダー：要素の境界
- マージン：要素間の間隔
コンテンツとパディングはボーダーの内側に存在し、ボーダーの外側にはマージンがあります。
コンテンツとボーダーの間の間隔はパディングが担当し、ボーダーとボックス領域の間はマージンが担当します。
タッチ領域は一般的に44 x 44px以上を推奨しますが、状況によって小さくなる場合もあります。
フォント#
OSごとにデフォルトフォントは異なる場合があります。
一貫したフォント体験を提供したいなら、デザイン/アプリにもあらかじめフォントを設定しておくのが良いです。
- Android: Noto Sans CJK KR（韓国語）、Roboto（英語）
- iOS: Apple SD Gothic Neo（韓国語）、SF Pro Display（英語）
フォント選択時は可読性とブランドの一貫性を考慮する必要があります。
デザインシステムの活用#
すでによく作られた一貫したデザインのために、デザインシステムを活用することをお勧めします！
- Material Design System
- Apple Human Interface Guidelines
新しくコンポーネントを作る必要がある場合は、すでによく作られたデザインから少しずつ変えていくのが良いです。
このようなガイドラインを参考にすれば、プラットフォームごとの特性を考慮したデザインが可能になります。
レスポンシブデザイン#
さまざまなデバイスに対応するためのレスポンシブデザインも検討してみてください。
- コンポーネントにレスポンシブ属性を適用
- デバイスごとの最小/最大サイズの設定
- モバイル：最小、最大
- タブレット：最小、最大
- デスクトップ：FHD、QHD、4Kなど
レスポンシブデザインで考慮すべきさまざまなデバイス：
Mobile, Tablet, Desktop, Watch, Car, VR
アセット管理#
- FigmaではsRGB色空間でのみアセットのエクスポートが可能
- ベクター形式（SVG）を使用して解像度に依存しないアイコンとイラストレーションを制作
- ラスター画像の場合、2x DPIでPNGエクスポートを推奨
さらに考えてみるべきこと
コンポーネントとスタイルを活用してデザインの一貫性を維持する。
レスポンシブデザインのためにAuto Layoutを使用して柔軟なレイアウトを構成する。
プロトタイプ機能を活用して開発前にインタラクションデザインをテストしてみる。
開発ではバージョン管理とコラボレーション機能を活用してチーム作業の効率性を向上させる。
A man is great by deeds, not by birth.
— Chanakya
