くらげだらけスマートフォン用の表示で見るくらげだらけこの広告は、90日以上更新していないブログに表示しています。Adventar近年はSketchのようなUIデザインツールがたくさんあって、それらが出てきたというだけでなく、実際に利用しているユーザーも増えてきましたね。戦国時代という感じです。XDやFigmaなどそれぞれに注目して試して見たりとすることもあります。いえ今回は皆さんそんなことも書くだろうと思い、最近のSketchの使いで試してみたことというベタなことを書こうと思います。エンジニアや新規のデザイナーと協業するにあたって、最近ではSketchファイルを直接見てもらうということも多くなってきました。エンジニアと協業するにあたってSketch関連で使われるツールの代表格としてはZeplinがありますが、今回の話はZeplinを使うことでもできるような話だと思います。そこをあえて、Pluginなどに頼らずデフォルトの状態でどこまでできるのかを試したという話でもあります。StyleのOverrideつまり上書き変更ができるようになりました。これに関連することで今まで困っていたことといえばSymbol内の要素の色の管理でしたが、Styleの上書き変更ができることになったことで随分と楽になりました。以前までは、アイコンや色付きのボタンなどの場合ShapeのマスクとカラーのSymbolを駆使することでそれを補っていました。テキストのカラーについても同様に、と言いたいところですがTextでマスクすることはできません。Mode(Screen)を駆使して実現する方法も試していたことはありますが、これは背景が白(#FFFFFF)のときにのみしか利用できません。Styleの上書き変更によって、Styleを事前に定義しておきさえすればテキストのカラー変更も容易になります。Stylesをきちんと使いこなすことが重要でしょう。ここまでは割と一般的な話しを書いてきましたが、ここから最近試してみたことについて紹介します。デザインデータを通してのエンジニアなどの他者とのやり取りには、マージンやオブジェクトサイズ、テキストサイズ、アイコン画像など様々ありますが、今回は色についてです。色は個々のブランドのらしさを表す象徴的なものでもありますが、それゆえにきちんとマネージメントしないと似たような色が複数できて統一が図れないということもあります。カラーマネージメントにおいて個人的にも難しく感じるのがグレースケールカラーです。灰色は一つのサービス内で複数使用することも多く、薄い灰色というのは微妙な差でいくつか利用することが多々あります。同じような薄い灰色でも背景(塗り)で使用する色や、区切り線で使用する色、それから文字に使用する色と、見た目の強弱を正しくつけるためにどうしても微妙な差異を付ける必要が出てきます。サービス内の白黒と数値的に完全な白黒のカラー見分け・使い分けについても同じような問題があるかと思います。通常、白黒はコントラスト差を押さえるために数値的に完全な白黒(#FFFFFFや#000000)ではなく、少しグレーに寄せた色にすることが多いためです。いえ、完全な白黒も利用したい場面が出てくることもあるものです。ちなみに私がよく利用する色はこのような感じです。Colorとしてカラーパレットに色を記録することができるのですが、これはあくまで色のデータのみを記録します。そのため、パッと見ただけでは判別が難しく、データを作っている本人ならわかるとしても、エンジニアや新しくjoinした別のデザイナーから見れば容易ではありません。Stylesを用いて、カラーデータのコミュニケーションを円滑にするというのを試してみました。Stylesの名称の最後に色名を入れるだけというとてもシンプルな方法です。シンプルな方法ですが、オブジェクトを選択すると何色なのかがひと目でわかります。これだけのことでエンジニアとのコミュニケーションはものすごくスムーズになりました。複数色が使われている場合には全ての色名を書いて、Opacityが設定されている場合には色名の後に数字を入れるというルールにしています。色名は塗りか線か影かに関係なく単純にそれぞれで使用されている色名を並べています。StyleにそのUIコンポーネント特有の名称をつけておきたい場面もあると思います。Buttonのような場合もそうでしょう。Style名をカテゴリなどでスラッシュ区切りにしつつ、UIコンポーネント名も加えて、最後に色名を入れるようにしています。Styleの分別・シンボル化も実現しつつ、当初の目的を達成しています。都合の良いことに、現状のSketchAppのUIはスラッシュ区切りのStyle名の最後のワードの部分のみを強調して表示してくれるので、色名をわかりやすくするのにはうってつけです。最初にデザイナー&エンジニア間で色の定義や命名規則さえ済ませておけば、非常に簡単にコミュニケーションすることができます。エンジニアだけのことを考えればZeplinを利用することで同様なこともできますが、同じデザインデータを触るような別のデザイナーとのコミュニケーションなどを考えたときにもこの方法は有効です。他にも基本的なことではありますが、レイヤー/フォルダの構造や名称をデフォルトのままではなくきちんと入れておくことや、デザインデータ内でタッチエリアをわかりやすいように明示的に定義しておくことなども重要なことです。Figmaの例のように、今やコラボレーションを前提としたツールも登場してきている中で、誰が見てもわかりやすい、それがそのまま仕様書やデザインスタイルガイドになりうるようなデザインデータづくりを今後も心がけたいです。JapanっていうSketchの日本ユーザー向けS...2019-07-29DarkModeのデザインを中心とした色彩設計の考え方こんにちは、くだくらげです。Pluginの作り方(初級編)とTipsはてなブログをはじめよう!kudakurageさんは、はてなブログを使っています。ブログを報告するスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。