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

Material Theme Builderの使い方

2024/06/13Material Theme Builder

Material Theme Builderの使い方 サムネイル 04
ナツメグチャンネル

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

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

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

もうちょっとカラフルにしたいという貴方に
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を組み合わせて
サイトの配色を
作ってみました。

今回は以上です。

Material Theme Builder