UIの可読性検証をSketchプラグイン "Camilo" ＋ "Anima" で時短する
こちらは「Design Tools Advent Calendar 2018」の3日目の記事です。
はじめまして。プロダクトデザイナーの田村(@wowr_t)です。
UIにおける可読性を高めるポイントはたくさんあると思います。使用するフォントやサイズ、行間、見出しと本文のバランス...etc。
これらは何が最適であるかはサービスによって異なるため、最終的な意思決定までにかかるタスク量と時間が読みづらい部分です。
しかしながら、時間もリソースも限られている状況下では最短で意思決定をしなければなりません。検証をより短く行うための工夫はとても大事です。
この記事では、私がUIの可読性検証を効率化できた手法をご紹介します。
今回のサンプルファイルはこちらになります。
(Animaの設定が引き継げないかも。。)
www.dropbox.com
背景
- SketchでUIを組んでいて、
- 想定されるor実際のデータをSketch上に反映させている(プロトタイプを実体験に近づけるため)。
- 可読性の検証をするために、フォントサイズや行間、カラーなどを変えた複数のUIパターンを作成している。
課題
- コンテンツ量が多いページ(例えばwebメディアの記事詳細ページなど)は、変更するオブジェクトが多く複数パターンのUIを揃えるのに時間がかかってしまう。
何に時間がかかるか？
1. オブジェクトの選択・変更
2. オブジェクト間のマージンの詰め直し
上記課題の解決
1. オブジェクトの選択・変更
→Sketchプラグイン「Camilo」
github.com
- Libraryを元にカレントファイルの
Layer StyleText StyleSymbolを一気にリプレイスしてくれるプラグイン。
2. オブジェクト間のマージンの詰め直し
→Sketchプラグイン「Anima」
www.animaapp.com
Animaは色々な機能があります。
レスポンシブの制約を細かく設定できる「Auto-Layout」、作成したカンプをノンコーディングでwebにパブリッシュできる「Launchpad」、インタラクション制作に役立つ「Timeline」。
Padding
その名の通りオブジェクトにpaddingを設定してくれる機能。Stack
CSSのFlexbox的な機能。オブジェクトの相対的な位置を保持してくれます。実例
テキストの行間をパターン検証するシュチュエーションの元、webメディアの記事詳細ページを例に実例します。
環境
- Sketch: 52.5
- Camilo: 1.1
- Anima Toolkit: 2.4.9
1. 元となるSketchファイルを作る
まず、サクッと元となるSketchファイルを作成します。
2. Text Styleを設定する
下記のようにText Styleを設定します。
3. Padding, Stackを設定する
まずは、作成したページを明示的にセクションごとに分けます。
次に、オブジェクトにPaddingを設定します。
オブジェクトを選択した状態で、右下の「Padding」をクリックし数値を入力します。
最後に、Stackを設定します。
Paddingを設定したオブジェクト群を選択し、右下の「Stack」をクリックし数値を入力します。
緑色の部分がPaddingを設定したグループ、ピンク色がStackを設定したグループになります。
するとオブジェクト間のマージンが保たれるようになります。
テキストの高さが変わっても大丈夫。
最後にStackを設定したグループにPaddingを設定します。
上記の作業をセクションごとに行います。
4. 検証パターンの数だけLibraryを作る
先と同命名のText Styleを設定したSketchファイルを作成し、Libraryとして読み込みます。
今回は、行間が1.5のものと1.75のLibraryを用意しました。
5. 確認
最後にCamiloでパターンを変更してみます。
うまく設定できていれば、このようにText Styleが上書きされオブジェクト間のマージンが保たれたままになるはずです。
まとめ
Sketchはオブジェクトが多くなってしまったりすると変更や管理が大変だと思うのですが、工夫次第で楽にできますね。
今回のサンプルファイルはこちらになります。
www.dropbox.com
使ってみての不明点やフィードバック、間違っているところなどはお気軽にDMでお知らせください！
