---
title: [性DEC2024下半期]次回作に同じUI素材を使いまわして且つ色もさくっと調整したーい！
tags: 
author: [enpel](https://www.docswell.com/user/enpel)
site: [Docswell](https://www.docswell.com/)
thumbnail: https://bcdn.docswell.com/page/PERMGR6Y79.jpg?width=480
description: [性DEC2024下半期]次回作に同じUI素材を使いまわして且つ色もさくっと調整したーい！ by enpel
published: December 28, 24
canonical: https://www.docswell.com/s/enpel/K3GJQY-2024-12-28-153825
---
# Page. 1

![Page Image](https://bcdn.docswell.com/page/PERMGR6Y79.jpg)

次回作に同じ UI素材を使い
まわして且つ色もさくっと調
整したーい！
2024.12.15 性DEC2024 下半期
@ながらえんぺる+くまにゃん


# Page. 2

![Page Image](https://bcdn.docswell.com/page/P7XVXRM4JX.jpg)

登壇者
名前： ながらえんぺる
サークル名：ながらえん
X： @nagara_studio
主な活動：技術同人誌執筆・ゲーム開発の支援・ゲーム開発
直近の実績
●
●
[ももいろたんざく] ちっちゃい先生と恋してる～教師と元教え子の甘々同棲生活
～+Game
もしも、会社の情シス担当がゼロ人になったら。
○
未経験から1人情シスになった 1年の話をつらつらと書いた本


# Page. 3

![Page Image](https://bcdn.docswell.com/page/37KQWRGP7D.jpg)

サポート登壇者
名前：くまにゃん
サークル名：ももいろたんざく
X： @momoiro_frame
主な活動：純愛いちゃらぶな18禁作品を主に作ってます。


# Page. 4

![Page Image](https://bcdn.docswell.com/page/LJ3P18N475.jpg)

本日は「ももいろたんざく」さんから 12月に出る
こちらの 2作品の事例です


# Page. 5

![Page Image](https://bcdn.docswell.com/page/8JDLXMW57G.jpg)

この2作品は前作の仕組みを再利用して開発しました
Unity+Naninovelで開発


# Page. 6

![Page Image](https://bcdn.docswell.com/page/VEP2PR9DE8.jpg)

本開発での課題


# Page. 7

![Page Image](https://bcdn.docswell.com/page/27VD2RMG7Q.jpg)

UIのデザイン は同じでOK
色は作品に合わせた色 にしたい


# Page. 8

![Page Image](https://bcdn.docswell.com/page/5JGYRMXDJL.jpg)

手作業で直すのはめんどいなぁ


# Page. 9

![Page Image](https://bcdn.docswell.com/page/47QMVR8XEP.jpg)

手作業でやる場合
1. 色を決める
2. Unityのプロジェクト内にあるUIのパーツそれぞ
れの色の値を手作業で直す
(フレームとかアイコンとか文字とかとか…


# Page. 10

![Page Image](https://bcdn.docswell.com/page/KE4VM82271.jpg)

毎回手作業は嫌なので効率化したい


# Page. 11

![Page Image](https://bcdn.docswell.com/page/L71382MKEG.jpg)

前作のUI数はものすごく多いわけではないが …
● 今後も色を変えたいはよくありそう
● 前作はデザイナーさんがカラーパレットを定義し
てくれているから活用したい
● 今後UIや色の種類も増えるかもしれない


# Page. 12

![Page Image](https://bcdn.docswell.com/page/G7WPZR3PE2.jpg)

なにかなかったかなぁ・・・


# Page. 13

![Page Image](https://bcdn.docswell.com/page/4JZK1RV6J3.jpg)



# Page. 14

![Page Image](https://bcdn.docswell.com/page/YE6QLR5LEV.jpg)

これでは？！


# Page. 15

![Page Image](https://bcdn.docswell.com/page/GE5R18YMJ4.jpg)

調査開始
※専門用語が増えます


# Page. 16

![Page Image](https://bcdn.docswell.com/page/972D1KGR7R.jpg)

uPaletteとは
@harumak_11氏が2021年に公開した色を管理するオープンソースのライ
ブラリ（ツクールで言うプラグイン）
日本人製なので日本語マニュアルがある
管理できるもの
●
●
●
●
色
グラデーション
文字スタイル
テーマ
反映できるもの
● UnityのUIであればだいたいに対応してそう


# Page. 17

![Page Image](https://bcdn.docswell.com/page/DJY2ZNV5JM.jpg)

色


# Page. 18

![Page Image](https://bcdn.docswell.com/page/V7N83XM4E8.jpg)

色の管理をする手順
● Palette Storeを作成する
● エントリを作成する
● エントリの色を設定する
● 色同期用のコンポーネントをUIに付ける
● 同期用のコンポーネントがどのエントリと同期す
るか設定する


# Page. 19

![Page Image](https://bcdn.docswell.com/page/YJ9K98N4J3.jpg)

実際にちょっとやってみましょう


# Page. 20

![Page Image](https://bcdn.docswell.com/page/GJ8R98KV7D.jpg)

グラデーション・文字スタイルも同様
● Palette Storeを作成する
● エントリを作成する
● エントリを設定する
● 同期用のコンポーネントをUIに付ける
● 同期用のコンポーネントがどのエントリと同期す
るか設定する


# Page. 21

![Page Image](https://bcdn.docswell.com/page/LJLKWRZR7R.jpg)

テーマ


# Page. 22

![Page Image](https://bcdn.docswell.com/page/47M29RVP7W.jpg)

テーマとは
● uPaletteで定義されているもの
● エントリで設定されている値をテーマ単位でまと
められる
● UIスキンみたいなイメージ
● ゲーム実行中に動的に切り替える事が可能


# Page. 23

![Page Image](https://bcdn.docswell.com/page/P7RMGR2YJ9.jpg)

こっちもやってみましょう


# Page. 24

![Page Image](https://bcdn.docswell.com/page/PJXVXRD4EX.jpg)

uPaletteの基本は以上！
今日みせたものがわかれば今すぐ活用できると思います！
気になる方は「 uPalette」で検索するか下記 URLから是非
https://github.com/Haruma-K/uPalette/blob/master/README_JA.md


# Page. 25

![Page Image](https://bcdn.docswell.com/page/3JKQWRXPJD.jpg)

つづいて uPaletteを導入したこちらの話


# Page. 26

![Page Image](https://bcdn.docswell.com/page/LE3P1854J5.jpg)

毎回手作業は嫌なので効率化したい


# Page. 27

![Page Image](https://bcdn.docswell.com/page/8EDLXMD5JG.jpg)

これは効率化できたのか？


# Page. 28

![Page Image](https://bcdn.docswell.com/page/V7P2PRXD78.jpg)

結論：できました


# Page. 29

![Page Image](https://bcdn.docswell.com/page/2JVD2RLGJQ.jpg)

どう良かったか？
● UIの色を変える敷居が大きく下がった
● オープンソースなので自分で機能改善もできる


# Page. 30

![Page Image](https://bcdn.docswell.com/page/5EGYRM3DEL.jpg)

UIの色を変える敷居が大きく下がった
● 導入しない場合と比べて覚える手順が圧倒的
に少ない
● 色の変更と反映までのサイクルが短いし反映さ
れる範囲も段違い
● 敷居が下がることでエンジニア以外が対応でき
るようになった。


# Page. 31

![Page Image](https://bcdn.docswell.com/page/4JQMVR5X7P.jpg)

自分で機能拡張できる
● どう作られているかは全部公開されている
● 独自のコンポーネントを適用する例などもマニュ
アルにある


# Page. 32

![Page Image](https://bcdn.docswell.com/page/K74VM892J1.jpg)

例:既存のUIの色をエントリに追加できる拡張
● AddEntryを押すと設定された色がエントリに追加される


# Page. 33

![Page Image](https://bcdn.docswell.com/page/LJ1382KK7G.jpg)

どんな課題がある？


# Page. 34

![Page Image](https://bcdn.docswell.com/page/GJWPZRDP72.jpg)

どんな課題がある？
● アニメーションは対象外
○ ちっちゃい先生では一部のボタンにアニメーションで色を
つけているところがあったのでこういうところは現状カ
バーできない
● 初回のセットアップは大変
○ UIを一つ一つ見つける作業は必要…これが終わればあ
とは楽
○ 今回は拡張を作ることで少し効率化を行った。


# Page. 35

![Page Image](https://bcdn.docswell.com/page/4EZK1RG6E3.jpg)

まとめ
● ☀uPaletteはUIの色管理をしたいなら簡単で強力
● ☀Unityに精通しなくてもUIの色調整が可能になる
● ☀今回の2作品では効率化できた
● ☁uPaletteを使っても初回は手間が多い
● ☔アニメーションには対応していない


# Page. 36

![Page Image](https://bcdn.docswell.com/page/Y76QLRYL7V.jpg)

ご静聴ありがとうございました。


