Material Theme Builderの使い方
ナツメグです
今回は前回の記事の補足になります。
前回の
【Luxeritas】メニュー（グローバルナビ）とフッターの色を揃えるでは
使う色の選択に
Cohensive Colorsを使いました。
使ってみると分かるのですが
Cohensive Colorsは色数が意外と少ない。
もうちょっとカラフルにしたいという貴方に
Material Theme Builder
（マテリアルテーマビルダー）を使った
サイトの色を組み立てる方法を解説します。
Material Theme Builderの使い方
Material Theme Builderを開きます。
こんな画面です。
ユーザー生成のスキームは
ユーザーの壁紙の選択から5つのキー カラーを作成します。
壁紙を選択するか独自の壁紙を追加して
ユーザーが生成した色の動作を確認します。
ダイナミックカラーについて詳しく学びましょう。
と書いてあります。
Material Theme Builderは
アプリ開発用に
デザインを整える為のサイトなんですが
ブログの色の組み立てにも当然使えます。
画面の上の方のCustomを選択。
Custom画面が表示されました。
カスタムカラースキームを構築して
カラーをマッピングしたり
フォールバックカラーとして使用したり
ブランドテーマを実装したり出来ます。
カラーシステムは
アクセスしやすい色のコントラストを自動的に処理します。
色の役割について詳しくは
こちらをご覧ください。
と書いてあります。
何を言ってるのか良く分かりませんが。
前回の記事で
Cohensive Colorsを使って
色を5色選択したので
それを使ってみます。
色コードは#555e7b, #99b2b7, #c5e0dc, #f9d423, #f0f2ebです。
前回の記事はこちら
https://nutmeg-channel.com/luxeritas-menu-and-footer-colors/Core colorsの
Primaryに一番左の紺色#555e7bを入力します。
丸いところをクリック。
カラーピッカーが表示されるので
＃555e7bを入力して
Enterを押してから
Closeを押します。
同じように
Secondaryに水色の#c5e0dc
Tertiaryに黄色の#f9d423
Neutralに薄いグレーの#f0f2ebを入力しました。
すると画面の右側に色の見本が表示されました。
アプリの色の構成はこうすると良いという事ですね。
ボタンの色。
ライトスキーム。
ダークスキーム。
Show tonal palettesをクリックすると
色調パレットが表示されます。
使いたい色の組み合わせが出来たら
スクリーンショットを撮影して画像をダウンロードします。
右クリックでメニューが表示されるので
スクリーンショットを撮影を選択。
範囲を指定して画像をダウンロード。
この画像をMedibang Paintに
読み込んで使えば
いちいちMaterial Theme Builderを
起動する必要がなくなるので便利です。
MediBang Paintは
右クリックがスポイトになっているので
右クリックで色を選択すると
カラーピッカーに色のコードが表示されます。
Core colorsに入力する色は
順番を変えると
印象がかなり変わるので
色々試してみて下さい。
配色は自分で考えると
ダサくなりがちなので
配色を教えてくれるサイトで色を決めると
ダサくならずに済みます。
Cohensive Colorsと
Material Theme Builderを組み合わせて
サイトの配色を
作ってみました。
今回は以上です