Material Theme Editorを使ってみた

今回のGoogle I/O 2018では、Material Designの大幅なアップデートが紹介されていました。

Material Designのメリットは、レスポンシブを考慮したレイアウトやコンポーネントを設計しているので、様々なデバイスで使用しても破錠しない点です。

一方デメリットとしては、完全にガイドラインに合わせてデザインすると、代わり映えのないビジュアルになってしまい、差別化が難しい点がありました。

そのような課題に対して「Material Theming」というコンセプトを掲げ、Material Designのコンポーネントを自由に編集できる「Material Theme Editor」というプラグインをリリースしています。

今回はMaterial Theme Editorをざっくり使ってみた感想をまとめています。

まずは、Material Theme Editorの使い方

マテリアルデザインをカスタマイズし、作成したテーマをライブラリーとして使用することができます。
配色 / タイポグラフィー / アイコン / コーナースタイルを一括管理でき、非常に便利です。

1. Materal Theme Editorをダウンロードし、sketchへインストール

Material Theme Editor – Create and customize your Material theme         https://material.io/tools/theme-editor/

2. sketchで新規ファイル(作業ファイル)を作成して、Plugins > Material > Open Theme Editorを展開

3. MTEのウィンドウが立ち上げるので、テーマを選んで「Start with the [選択しているテーマ名] Theme」をクリック

4. テーマを新規ファイルとして保存して、sketchファイルが立ち上がる

5. 一番最初に作成した作業ファイルの方に、必要なコンポーネントを配置する。

配色を変更すると、すべてパーツへ一括反映!

1. テーマファイル側で、editorウィンドウのTheme Color Paletteを表示して、変更したいカラーを選択

2. カラーパレットが表示される

・Light とDarkは選択した配色から自動で抽出されるので変更できない
・customするかMaterial Designで定義された色を選択するかの2択

3. 色を指定すると自動的にパーツの色が変わります

テキストカラーの自動アクセシビリティチェックが可能!

左側のボタンがチェックされている場合は、自動で調整されている状態でうす。

右側の+ボタンはカスマイズで、クリックすると別ウィンドウが展開されテキストカラー選択が任意で可能になります。

配色を調整して[ ! ]マークが表示されると、コントラストが低く見えづらいという状態です。下にあるfix contrastをクリックするとWCAGで推奨されているテキストカラーへ変更されます。

ボタンやアイコンも、カラーパレットに合わせて自動で変更

Theme Color PaletteとText colorに紐付いているので、Text colorが黒ならアイコンは黒になるし、Text colorが白ならアイコンは白になるといった具合です。

カラーは基本的にテーマカラーパレット内で操作する設計になっているようです。

まとめ

最初にデフォルトで用意されているテーマの完成度が非常に高いので、プロダクトのVIに合わせてカスタマイズするだけで、デザインガイドラインができあがります。いままでデザインガイドライン制作かけていた時間を、大幅に圧縮できそうですね。

デザインガイドラインは作ることがゴールではなく、組織で運用されることがゴールです。

P.S. オリジナルのコンポーネントを、デフォルトと同じように管理できるか検証できていないので、また次の機会に投稿したいと思います!



この記事が気に入ったら、サポートをしてみませんか?気軽にクリエイターを支援できます。

132

Yuya Furusato

#デザイン 記事まとめ

デザイン系の記事を収集してまとめるマガジン。ハッシュタグ #デザイン のついた記事などをチェックしています。広告プロモーションがメインのものは、基本的にはNGの方向で運用します。
7つのマガジンに含まれています

コメント2件

MDCのシンボル使ってる限りは管理できるそうです。
Googleのマテリアルデザイン布教へのやる気が見えますね!
コメントを投稿するには、 ログイン または 会員登録 をする必要があります。