IDOL×IDOL STORY! 感想レビュー サムネイル ナツメグチャンネル
Luxeritas カスタマイズ サムネイルナツメグチャンネル
【Luxeritas】記事一覧カスタマイズ【カード型】 サムネイル ナツメグチャンネル
【Luxeritas】ヘッダー下に画像リンク4つ並び【再利用ブロック】 サムネイル 02 ナツメグチャンネル

Material Theme Builderの使い方

2024/09/04Material Theme Builder

Material Theme Builderの使い方 サムネイル 04ナツメグチャンネル
ナツメグチャンネル プロフィール 02
ナツメグ

ナツメグです

今回は前回の記事の補足になります。

前回の
【Luxeritas】メニュー(グローバルナビ)とフッターの色を揃えるでは
使う色の選択に
Cohensive Colorsを使いました。

使ってみると分かるのですが
Cohensive Colorsは色数が意外と少ない。

もうちょっとカラフルにしたいという貴方に
Material Theme Builder
(マテリアルテーマビルダー)を使った
サイトの色を組み立てる方法を解説します。

Material Theme Builderの使い方

Material Theme Builderを開きます。

Material Theme Builderナツメグチャンネル

こんな画面です。

ユーザー生成のスキームは
ユーザーの壁紙の選択から5つのキー カラーを作成します。

壁紙を選択するか独自の壁紙を追加して
ユーザーが生成した色の動作を確認します。

ダイナミックカラーについて詳しく学びましょう。

と書いてあります。

Material Theme Builderは
アプリ開発用に
デザインを整える為のサイトなんですが
ブログの色の組み立てにも当然使えます。

画面の上の方のCustomを選択。

customを選択ナツメグチャンネル

Custom画面が表示されました。

Material Theme Builder Custom画面ナツメグチャンネル

カスタムカラースキームを構築して
カラーをマッピングしたり
フォールバックカラーとして使用したり
ブランドテーマを実装したり出来ます。

カラーシステムは
アクセスしやすい色のコントラストを自動的に処理します。

色の役割について詳しくは
こちらをご覧ください。

と書いてあります。

何を言ってるのか良く分かりませんが。

前回の記事で
Cohensive Colorsを使って
色を5色選択したので
それを使ってみます。

青を基調ナツメグチャンネル

色コードは#555e7b, #99b2b7, #c5e0dc, #f9d423, #f0f2ebです。

前回の記事はこちら

Core colorsの
Primaryに一番左の紺色#555e7bを入力します。

Core colorsナツメグチャンネル

丸いところをクリック。

カラーピッカーナツメグチャンネル

カラーピッカーが表示されるので
#555e7bを入力して
Enterを押してから
Closeを押します。

同じように
Secondaryに水色の#c5e0dc
Tertiaryに黄色の#f9d423
Neutralに薄いグレーの#f0f2ebを入力しました。

色の指定ナツメグチャンネル

すると画面の右側に色の見本が表示されました。

色の見本 01ナツメグチャンネル

アプリの色の構成はこうすると良いという事ですね。

色の見本 02ナツメグチャンネル

ボタンの色。

色の見本 03ナツメグチャンネル

ライトスキーム。

ライトスキームナツメグチャンネル

ダークスキーム。

ダークスキームナツメグチャンネル

Show tonal palettesをクリックすると
色調パレットが表示されます。

色調パレットを表示するナツメグチャンネル

使いたい色の組み合わせが出来たら
スクリーンショットを撮影して画像をダウンロードします。

スクリーンショットを撮影 02ナツメグチャンネル

右クリックでメニューが表示されるので
スクリーンショットを撮影を選択。

ダウンロード 02ナツメグチャンネル

範囲を指定して画像をダウンロード。

この画像をMedibang Paint
読み込んで使えば
いちいちMaterial Theme Builderを
起動する必要がなくなるので便利です。

MediBang Paint カラーピッカーナツメグチャンネル

MediBang Paintは
右クリックがスポイトになっているので
右クリックで色を選択すると
カラーピッカーに色のコードが表示されます。

Core colorsに入力する色は
順番を変えると
印象がかなり変わるので
色々試してみて下さい。

配色は自分で考えると
ダサくなりがちなので
配色を教えてくれるサイトで色を決めると
ダサくならずに済みます。

Cohensive Colorsと
Material Theme Builderを組み合わせて
サイトの配色を
作ってみました。

ナツメグチャンネル プロフィール 02
ナツメグ

今回は以上です


Material Theme Builder