![「Material UI」と「Penumbra」の導入方法をまとめて解説【2024/04/24更新】](https://toramemoblog.com/wp-content/uploads/2022/05/5304d0529b1a9d140492d354bce5f0d1.png)
当記事のツールを使用することで被るいかなる不利益も
当ブログでは一切の責任を負いません。
導入・使用は自己責任です。
また、ツールを使用することによって
・攻略の楽しみを失う
・他のプレイヤーを不快にする
という可能性を含んでいます。
上記の内容に少しでも嫌悪感を抱かれる方に対しては
ブラウザバックを推奨しています。
匿名性に不安を感じる方はVPNサービスをオススメします。
2022/06/18
Mod Browserの使い方を追記。
例として敵視マークをバー表示にする「Bar Enmity」で解説。
2022/07/02
一部記事をわかりやすく修正。
2022/08/04
一部修正と削除。
コメントでも話していますが、
MaterialUIは動作が若干不安定のようです。
私はもう使っていません。
2022/09/15
MODの読み込み方の部分を修正。
2022/11/30
Penumbraのみを解説したページを作成。
2024/04/24
↑がリンクになっていなかったので修正しました(1年以上放置されてました)
今回紹介するのは、UIをこんな感じにするMODです。
![materialUI XIVLauncher Penumbra](https://toramemoblog.com/wp-content/uploads/2022/05/2022-05-02_17h52_23.png)
![](https://toramemoblog.com/wp-content/uploads/2022/01/220124_toramamesama_04-e1643021926499.png)
あくまで一例で、キャラクターのテクスチャなども変更できます。
↑こちらで紹介しているものを使いやすくしたのがこの記事で紹介するPenumbraです。
![](https://toramemoblog.com/wp-content/uploads/2022/01/220124_toramamesama_04-e1643021926499.png)
TexToolsは非推奨としています。
![](https://toramemoblog.com/wp-content/uploads/2022/01/220124_toramamesama_04-e1643021926499.png)
参考にしたページ
GitHub - skotlex/ffxiv-material-ui: Material UI mod for FFXIV
GitHub - Sevii77/ffxiv_materialui_accent
MaterialUI(を含めたModファイル)を使うためには
2通りの方法があります。
△ TexTools
◎ Penumbra (←XIVLauncher上で使えるツール)
![](https://toramemoblog.com/wp-content/uploads/2022/01/220124_toramamesama_04-e1643021926499.png)
XIVLauncher上でもできるようにしたツールです。
Penumbraを使用する際にTexToolsは必要ありません。
![](https://toramemoblog.com/wp-content/uploads/2022/01/220124_toramamesama_06-e1643021874454.png)
MODを自分で作成するようなことがない限り
TexToolsを使う必要はありません。
パッチが発生するたびにインデックスファイルが壊れることを心配することなく自動的に更新されます。さまざまなオプションを簡単に適用することもできます。
こちらを参照して日本語訳しました。
![](https://toramemoblog.com/wp-content/uploads/2022/01/220124_toramamesama_04-e1643021926499.png)
![](https://toramemoblog.com/wp-content/uploads/2022/01/220124_toramamesama_05-e1643021973387.png)
1. XIVLauncherにPenumbraとmaterialUIをインストール(導入)する方法(カスタムプラグインリポジトリを利用する方法)
システムからDalamud設定を開く
Escキーを押してシステム画面を開き、Dalamud設定を開きます。
![](https://toramemoblog.com/wp-content/uploads/2022/01/2022-01-14_12h42_01.png)
![](https://toramemoblog.com/wp-content/uploads/2022/01/2022-01-14_12h45_00.png)
試験的機能タブでURLを入力
![](https://toramemoblog.com/wp-content/uploads/2022/01/2022-01-14_12h47_08.png)
① 試験的機能タブをクリックする
② 入力欄にURLを入力します。
https://raw.githubusercontent.com/Sevii77/ffxiv_materialui_accent/master/repo.json
↑MaterialUI
https://raw.githubusercontent.com/xivdev/Penumbra/master/repo.json
↑Penumbra
③ +をクリックする(入力するURLは2つあるので2回行います)
④ 保存して閉じるをクリックする
プラグインリストで「Penumbra」「materialUI」を検索し、インストール
![](https://toramemoblog.com/wp-content/uploads/2022/05/2022-05-06_15h33_24.png)
![](https://toramemoblog.com/wp-content/uploads/2022/05/2022-05-06_15h33_31.png)
普通のプラグインと同様にインストールできます。
2. ゲーム内でUIアセットタイプを4Kにしておく
Material UIを使用するには、ゲーム内でUIアセットタイプを4Kにする必要があります。
設定してある人は飛ばしてもらって大丈夫です。
![](https://toramemoblog.com/wp-content/uploads/2022/07/2022-07-02_19h14_44-1.png)
![](https://toramemoblog.com/wp-content/uploads/2022/01/220124_toramamesama_04-e1643021926499.png)
3. ゲーム内でPenumbraの設定画面を開き、Material UIを有効化する
「Penumbra」という根本があって、その中に「Material UI」を入れ込んで使うという形。
MODファイルである「ttmp2ファイル」は「Material UI」と同列です。
![](https://toramemoblog.com/wp-content/uploads/2022/01/220124_toramamesama_06-e1643021874454.png)
使わない方が良いです。
Penumbraで導入するため。
プラグインリストからPenumbraを選択もしくは「/penumbra」
![](https://toramemoblog.com/wp-content/uploads/2022/05/2022-05-06_15h33_24.png)
歯車マークをクリックもしくは「/penumbra」でPenumbraの画面を呼び出します。
![materialUI XIVLauncher Penumbra](https://toramemoblog.com/wp-content/uploads/2022/05/2022-05-02_18h23_06.png)
![](https://toramemoblog.com/wp-content/uploads/2022/01/220124_toramamesama_04-e1643021926499.png)
MODファイルを導入する際に
最初からXIVMODSを開くので便利。
DLする際はXIVMODSに入れておけば導入がスムーズ。
![](https://toramemoblog.com/wp-content/uploads/2022/05/2022-05-06_16h28_55.png)
![](https://toramemoblog.com/wp-content/uploads/2022/01/220124_toramamesama_04-e1643021926499.png)
(2022/09/15更新)ttmp2ファイルを読み込む【MaterialUIでは不必要】
MaterialUIではなく別のMOD(ttmp2ファイル)を読み込む際に必要な手順を解説します。
![](https://toramemoblog.com/wp-content/uploads/2022/09/2022-09-15_14h16_53.png)
②をクリックすると下図の画面が表示されるので、
読み込ませたいttmp2ファイルを選択し、OKをクリック。
![](https://toramemoblog.com/wp-content/uploads/2022/09/2022-09-15_14h18_33-800x533.png)
MODファイルは.ttmp2という拡張子のファイルです。
TexToolsで使っていたファイルをこちらで読み込ませると良さそう。
MaterialUIでは・・・
Penumbraのリストに読み込ませることが出来ない場合、
おそらく再起動で解決すると思われます。
仕様としては一応「自動的にMODリストに表示される」はずですので。
元に戻す(オフにする)方法
![](https://toramemoblog.com/wp-content/uploads/2022/05/2022-05-04_10h02_57.png)
![](https://toramemoblog.com/wp-content/uploads/2022/01/220124_toramamesama_04-e1643021926499.png)
4. materialUIの設定画面
まずはこれ Mainタブ
![](https://toramemoblog.com/wp-content/uploads/2022/05/2022-05-06_16h24_54.png)
![](https://toramemoblog.com/wp-content/uploads/2022/01/220124_toramamesama_04-e1643021926499.png)
![](https://toramemoblog.com/wp-content/uploads/2022/01/220124_toramamesama_05-e1643021973387.png)
PenumbraのModタブに
Material UIがあるか確認しましょう。
![](https://toramemoblog.com/wp-content/uploads/2022/07/2022-07-02_19h19_21.png)
なければ再起動するなり上記手順を見直してください。
色変更について
ここで色変えて「Apply」をしてから再起動をすれば良さそうなんですが、
私の環境では反映されません・・・。
わかり次第更新します。
なにかわかる方いましたらコメントにてお願いします。
Mod Browserの使い方
ヘイト値をバーで表示する「Bar Enmity」で説明
まずMod Browserタブで目的のModにチェックを入れます。
今回はBar Enmityを入れてみます。
敵のヘイト値を表示する部分です。
普段は緑~赤で光っている部分。
![](https://toramemoblog.com/wp-content/uploads/2022/06/2022-06-18_14h22_33.png)
次にPenumbraでMaterial UIを開き、
Settingsタブの中にあるEnmity Symbolのところを設定します。
![](https://toramemoblog.com/wp-content/uploads/2022/06/2022-06-18_14h15_54.png)
![](https://toramemoblog.com/wp-content/uploads/2022/01/220124_toramamesama_04-e1643021926499.png)
何という設定項目なのか は
一概には言えないのでじっくり見るしか無いかも。。
![](https://toramemoblog.com/wp-content/uploads/2022/06/2022-06-18_14h25_08.png)
お好みの設定を選びましょう。
![](https://toramemoblog.com/wp-content/uploads/2022/06/2022-06-18_14h21_45.png)
再起動するとこんな感じです。
Tips: TexToolsからの乗り換え
2022/05/02現在ではまだ試していませんが、
以前紹介したTexToolsでやっているようなことが
こちらのツールで出来るようになると思われます。
おそらくこちらのツールの方が扱いがラクなので、
私はこちらに乗り換えしようと思っています。
![](https://toramemoblog.com/wp-content/uploads/2022/01/220124_toramamesama_04-e1643021926499.png)
(2022/05/10追記)MaterialUIに搭載されているmodを有効化する方法
![](https://toramemoblog.com/wp-content/uploads/2022/01/220124_toramamesama_04-e1643021926499.png)
![](https://toramemoblog.com/wp-content/uploads/2022/05/2022-05-10_13h47_45.png)
簡単な英語なのでわかると思います。
例1 マップを正方形にしてみる
「Minimap」のところを「Square - Colored Cardinal」にしてみます。
設定後、ログアウトしてログイン。
![](https://toramemoblog.com/wp-content/uploads/2022/05/2022-05-10_13h43_06.png)
このようにして簡単にMODが適用できます。
オススメの設定があればぜひコメント欄にて共有していただけると助かります。
例2 非アクティブのウィンドウを透過する
![](https://toramemoblog.com/wp-content/uploads/2022/05/2022-05-12_15h13_03.png)
このようにするにはpenumbra上で
![](https://toramemoblog.com/wp-content/uploads/2022/05/2022-05-12_15h37_53.png)
このようにして再起動します。
色々なMODファイルを探すには
こちらのDiscordサーバーに参加し、textoolsのチャットからttmp2ファイルをダウンロードして導入してみてください。
![materialUI XIVLauncher Penumbra](https://toramemoblog.com/wp-content/uploads/2022/05/2022-05-02_20h44_41-800x559.png)
![](https://toramemoblog.com/wp-content/uploads/2022/01/220124_toramamesama_05-e1643021973387.png)
コメントにて共有してもらえると助かります。
終わりに
駆け足になりましたが、MaterialUIとPenumbraの導入記事でした。
分かりづらい点や詰まった点などあればコメントにて共有いただけると非常に助かります。