どうも、わたしです。

ここ最近、iPhoneやAndroidでプレイできるソーシャルゲームにどっぷりハマっているんですが、
特に熱いのが「ドラッグ王子とマトリ姫」(通称:マトリ姫)、「スタンドマイヒーローズ」(通称:スタマイ)というゲームです。

「女性向け恋愛ゲーム」だと思っていただければ良いかな。

プレイヤーが主人公となり、仕事やら愛やら恋やらやっていくわけですが、
シナリオがとにかく良すぎて、年甲斐もなくキュンキュンしちゃうんです。これは…沼です…。

ストーリー

「ドラッグ王子とマトリ姫」

マトリ<麻薬取締官>の彼と送る
キケンな恋愛ストーリー

私がアブない組織から狙われる、特殊体質の持ち主──!?
「麻薬取締官として、ウチに来てほしい」
突然、マトリにスカウトされてしまったヒロイン。
パートナーになった”彼”に守られ、事件と向き合ううちに
彼のヒミツや素顔も知ることになって ・・・・・・

あなたが選ぶ、彼との未来は?

引用:ドラッグ王子とマトリ姫 公式サイト

「スタンドマイヒーローズ」

憧れの麻薬取締官<マトリ>として入庁したはずが-
男性ばかりの職場、配属先で命じられた
最初の任務は…

『男性パートナーをスカウトせよ!』
たった一人の女性課員として、
デキる男子たちをスカウト!

警視庁、高校生、セレブ、はたまた裏の組織!?
王道イケメンも、悪いオトコも
みんなスカウトして、恋も仕事も堪能しよう!

引用:スタンドマイヒーローズ 公式サイト

「マトリ姫」と「スタマイ」の関連性

記事を書く前に、「マトリ姫」と「スタマイ」の関連性について、ちょこっと書かせてください。

「ドラッグ王子とマトリ姫」は2015年3月25日に株式会社colyよりリリースされた
スマートフォン向け「恋愛ノベルゲーム」です。

いわゆる、乙女ゲームの括りで、高度なゲームの知識は必要ありません。
文章を読むだけ(一部選択肢あり)で話が進みます。

一方、「スタンドマイヒーローズ」は2016年9月5日に株式会社colyよりリリースされた
スマートフォン向け「パズル+ノベルゲーム」です。

こちらはパズルゲームが軸となっていて、マトリ以外のキャラクターのストーリーも読むことができます。

ドラッグ王子とマトリ姫 スタンドマイヒーローズ
ゲーム パズル
ストーリー 課金必須(250円〜360円) ゲームで貯めたポイント(エビ)等を消費
レーティング 17歳以上対象
(16歳以下の方は購入出来ません)
12歳以上対象
登場キャラクター(メイン) マトリ(麻薬取締官)+外交官の6名 マトリに加え、警察、セレブ等。計20名以上
キャラクターボイス なし あり

マトリの本編に関しては、「マトリ姫」も「スタマイ」も一緒みたいなので、
マトリが好きでストーリーをいち早く読みたい!という人は、マトリ姫で課金をオススメします。
もれなく沼にハマれます。ようこそ沼へ!

※本記事は「ドラッグ王子とマトリ姫」のウェブサイト、アプリゲーム内の画面で使われている、色やフォントなどといったデザインに関する部分をご紹介させていただいています。
※「スタンドマイヒーローズ」に関しては掲載しておりませんのでご了承ください。
※こちらの情報には信憑性はございません。ソラログの中の人が画面キャプチャーを見て、「こんな感じじゃね?」と作成したものです。
※この記事はマトリに対する愛だけで成り立っています。
※colyさんいつもお世話になっております。吸血鬼編の関さん、渡部さん待ってます。全裸で待ってます。

Webサイトロゴとキャッチコピー

ロゴ・キャッチコピー

「ドラッグ王子とマトリ姫」ロゴ

フォントを探してみたのですが、私の知る限りでは該当のものが見つかりませんでした。
一つ該当する特徴を見つけても、他の部分が違ってたり…というのが多かったので、
おそらく、複数のフォントを組み合わせたか、オリジナルで作ったものでしょう。

Photoshop レイヤースタイル設定

グラデーションオーバーレイ

#e4006e 0%
#951f83 40%
#64318f 60%
#005bab 100%

スタイル 線状
グラデーションの角度 94°
比率 100%

境界線

サイズ 4px
外側
色 白(#ffffff)

.matoriLogo {
  color: #ffffff;
  font-size: 130%;
  font-weight: bold;
  background: #005bab;
  background: -moz-linear-gradient(45deg,  #005bab 0%, #64318f 40%, #951f83 60%, #e4006e 100%);
  background: -webkit-linear-gradient(45deg,  #005bab 0%,#64318f 40%,#951f83 60%,#e4006e 100%);
  background: linear-gradient(45deg,  #005bab 0%,#64318f 40%,#951f83 60%,#e4006e 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#005bab', endColorstr='#e4006e',GradientType=1 );
}

キャッチコピー「お前の特別なカラダ、俺がもらう」

公式サイト内にあるキャッチコピーです。

Photoshop レイヤースタイル設定

フォント

ヒラギノ明朝Pro (モリサワ)
書体見本はこちらから

※「マトリ<麻薬取締官>の彼と過ごす、 キケンな恋愛ストーリー」も同じくヒラギノ明朝Proです。

グラデーションオーバーレイ

#3c3a3d 0%
#8c0d3f 100%

スタイル 線状
グラデーションの角度 0°
比率 100%

境界線

サイズ 4px
外側
色 白(#ffffff)

お前の特別なカラダ、俺がもらう
.matoriCopy {
  font-family: "MS P明朝", "MS PMincho","ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", "serif";
  color: #fff;
  font-size: 130%;
  font-weight: bold;
  background: #3c3a3d;
  background: -moz-linear-gradient(left,  #3c3a3d 0%, #8c0d3f 100%);
  background: -webkit-linear-gradient(left,  #3c3a3d 0%,#8c0d3f 100%);
  background: linear-gradient(to right,  #3c3a3d 0%,#8c0d3f 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#3c3a3d', endColorstr='#8c0d3f',GradientType=1 );
}

キャラクターセレクト

本編のストーリーを読む前にキャラクターの選択画面があります。
それぞれのキャラクターに色が付いてますので、そのグラデーションを作ってみました。

キャラクター選択画面

共通事項

フォント

A-OTF 丸フォーク Pro (モリサワ)
書体見本はこちらから

グラデーションオーバーレイ

※キャラクターのグラデーションについては後記
スタイル 線状
グラデーションの角度 90°
比率 100%

※お好みで、境界線(白)や光彩(外側:白)をつけてあげるといいかもしれません。

.matoriCharactor {
  color: #fff;
  font-size: 130%;
  font-weight: bold;
}

青山 樹 「マトリを引っ張る俺様エース」

こんなイケメン御曹司が、仕事出来て、めっちゃ料理上手いとか
もう、嫁いらないんじゃね?って思うほど完璧すぎて泣ける

グラデーションオーバーレイ

#222124 0%
#344693 50%
#475bdb 100%

マトリを引っ張る俺様エース
.matoriAoyama {
  text-align: center;
  background: #222124;
  background: -moz-linear-gradient(bottom,  #222124 0%, #344693 50%, #475bdb 100%);
  background: -webkit-linear-gradient(bottom,  #222124 0%,#344693 50%,#475bdb 100%);
  background: linear-gradient(to top,  #222124 0%,#344693 50%,#475bdb 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222124', endColorstr='#475bdb',GradientType=0 );
}

由井 孝太郎 「クール系変態?!天才薬学研究者」

髪の色的な意味でピンクかと思ったんですが、黄色ですね。
主人公(ヒロイン)とのやりとりが好きすぎて…。こういう変態な友達欲しい。

グラデーションオーバーレイ

#222124 0%
#90810e 50%
#ddc119 100%

クール系変態?!天才薬学研究者
.matoriYui {
  text-align: center;
  background: #222124;
  background: -moz-linear-gradient(bottom,  #222124 0%, #90810e 50%, #ddc119 100%);
  background: -webkit-linear-gradient(bottom,  #222124 0%,#90810e 50%,#ddc119 100%);
  background: linear-gradient(to top,  #222124 0%,#90810e 50%,#475bdb 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222124', endColorstr='#ddc119',GradientType=0 );
}

関 大輔 「誰もが羨む理想の上司」

(私の)大本命の関さん。関さんにいくら課金したか、私はもう忘れた…(カードの請求書見て絶句
きっと私は関さんに恋してる…毎日幸せすぎてしんどい…_:(‘Θ’ 」 ∠):_
赤は正義感やリーダーを象徴する色でもあるので関さんにぴったりですね!

グラデーションオーバーレイ

#222124 0%
#9c2a27 50%
#e34131 100%

誰もが羨む理想の上司
.matoriSeki {
  text-align: center;
  background: #222124;
  background: -moz-linear-gradient(bottom,  #222124 0%, #9c2a27 50%, #e34131 100%);
  background: -webkit-linear-gradient(bottom,  #222124 0%,#9c2a27 50%,#e34131 100%);
  background: linear-gradient(to top,  #222124 0%,#9c2a27 50%,#e34131 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222124', endColorstr='#e34131',GradientType=0 );
}

夏目 春 「頭脳派!依存系メガネ男子」

最近気になる夏目くん。メガネしてない公式絵を見てから毛根消滅した。
こんな可愛い子が(主人公と)同い年なんて…!

他のキャラクターより少しだけ色数多いです。
と言いますのも、茶系が見えたので、ほんの少し入れました。

グラデーションオーバーレイ

#222124 0%
#3c3125 25%
#61650e 50%
#679c0c 75%
#85c61b 100%

頭脳派!依存系メガネ男子
.matoriNatsu {
  text-align: center;
  background: #222124;
  background: -moz-linear-gradient(bottom,  #222124 0%, #3c3125 25%, #61650e 50%, #679c0c 75%, #85c61b 100%);
  background: -webkit-linear-gradient(bottom,  #222124 0%, #3c3125 25%, #61650e 50%, #679c0c 75%, #85c61b 100%);
  background: linear-gradient(to top,  #222124 0%, #3c3125 25%, #61650e 50%, #679c0c 75%, #85c61b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222124', endColorstr='#85c61b',GradientType=0 );
}

今大路 峻 「王子系隠れドS」

本編は見てないのですが、番外編見たら思った以上に凶変しててわろた。
普段は本当に爽やか系王子様なのにね。

そんな峻さんは水色。

グラデーションオーバーレイ

#222124 0%
#38728a 50%
#4cc7e0 100%

王子系隠れドS
.matoriIma {
  text-align: center;
  background: #222124;
  background: -moz-linear-gradient(bottom,  #222124 0%, #38728a 50%, #4cc7e0 100%);
  background: -webkit-linear-gradient(bottom,  #222124 0%,#38728a 50%,#4cc7e0 100%);
  background: linear-gradient(to top,  #222124 0%,#38728a 50%,#4cc7e0 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222124', endColorstr='#4cc7e0',GradientType=0 );
}

渡部 悟 「最強のテキトー外交官」

(私が)関さんの次に好きな渡部さん。ニコニコしてて人当たりもいいけど、
実は一番ミステリアスなのかもしれない…。そんなわけで魅惑の紫ってとこでしょうか。

渡部さんに愛されたら多分一生幸せだろうな。めっちゃ尽くしてくれそう。

グラデーションオーバーレイ

#222124 0%
#53477b 50%
#8947db 100%

最強のテキトー外交官
.matoriWatabe {
  text-align: center;
  background: #222124;
  background: -moz-linear-gradient(bottom,  #222124 0%, #53477b 50%, #8947db 100%);
  background: -webkit-linear-gradient(bottom,  #222124 0%,#53477b 50%,#8947db 100%);
  background: linear-gradient(to top,  #222124 0%,#53477b 50%,#8947db 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#222124', endColorstr='#8947db',GradientType=0 );
}

メインストーリー選択画面

キャラクターセレクト後に表示される画面です。(私が)関さん推しなので関さんで。
上部のタブは現在セレクトされているのが「本編」(背景ピンク)
その他、選択されていないのは背景がブルーになっています。

メインストーリー選択画面

グラデーションオーバーレイ

Pink
#eb58a4 0%
#f08fc4 100%

Purple
#475ff0 0%
#9152ef 50%
#e14fef 100%

スタイル 線状
グラデーションの角度 90°
比率 100%

本編
.matoriPink {
  color: #fff;
  font-size: 130%;
  font-weight: bold;
  text-align: center;
  background: #eb58a4;
  background: -moz-linear-gradient(bottom,  #eb58a4 0%, #f08fc4 100%);
  background: -webkit-linear-gradient(bottom,  #eb58a4 0%,#f08fc4 100%);
  background: linear-gradient(to top,  #eb58a4 0%,#f08fc4 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb58a4', endColorstr='#f08fc4',GradientType=0 );
}
関 大輔 DAISUKE SEKI
.matoriPurple {
  color: #fff;
  font-size: 130%;
  font-weight: bold;
  text-align: center;
  background: #475ff0;
  background: -moz-linear-gradient(bottom,  #475ff0 0%, #9152ef 50%, #e14fef 100%);
  background: -webkit-linear-gradient(bottom,  #475ff0 0%,#9152ef 50%,#e14fef 100%);
  background: linear-gradient(to top,  #475ff0 0%,#9152ef 50%,#e14fef 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#475ff0', endColorstr='#e14fef',GradientType=0 );
}

こちらのPurpleですが、今後、多くの場面で出てきます。
この画面で言えば、
「関 大輔 DAISUKE SEKI」
「ホーム」
「他のキャラを見る」
が全て同一のグラデーションです。

「2人とも、俺が殺した」

こちらは青から紫へ微妙に変化しています。

グラデーションオーバーレイ

#817af7 0%
#6093f7 100%

スタイル 線状
グラデーションの角度 90°
比率 100%

「2人とも、俺が殺した」
.matoriComment01 {
  color: #fff;
  font-size: 130%;
  font-weight: bold;
  text-align: center;
  background: #817af7;
  background: -moz-linear-gradient(bottom,  #817af7 0%, #6093f7 100%);
  background: -webkit-linear-gradient(bottom,  #817af7 0%, #6093f7 100%);
  background: linear-gradient(to top,  #817af7 0%, #6093f7 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#817af7', endColorstr='#6093f7',GradientType=0 );
}

手の届かない上司/朝起きたら、〜触れたとき…

「マトリ姫」では珍しい、一色ベタになります。
#5f52da

「手の届かない上司」の背景は

長方形ツール

#7197f1 ベタ

パターンオーバーレイ

白×透明のストライプ
不透明度 20%

ストライプですが、Archさんで配布されているのがボリュームもあってめちゃくちゃ使えるので、
Photoshopお持ちの方は是非使ってみてくださいね!Archさん、いつもお世話になっております!

ベーシックなストライプのPhotoshopパターン 460個セットを作りました : 460 Basic Stripe Set

人生に一度だけの、運命の恋が始まる

グラデーションオーバーレイ

#cf5eea 0%
#4f87f7 100%

スタイル 線状
グラデーションの角度 90°
比率 100%

人生に一度だけの、運命の恋が始まる
.matoriComment02 {
  color: #fff;
  font-size: 130%;
  font-weight: bold;
  text-align: center;
  background: #cf5eea;
  background: -moz-linear-gradient(bottom,  #cf5eea 0%, #4f87f7 100%);
  background: -webkit-linear-gradient(bottom,  #cf5eea 0%, #4f87f7 100%);
  background: linear-gradient(to top,  #cf5eea 0%, #4f87f7 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cf5eea', endColorstr='#4f87f7',GradientType=0 );
}

画面下部のボタン

少しめんどくさいですが、ボタンのぷっくりした感じを出すために、「ベベルとエンボス」を使います。

グラデーションオーバーレイ

#d164b6 0%
#84a3f5 100%

スタイル 線状
グラデーションの角度 90°
比率 100%

境界線

#fae4fc 0%
#ffffff 50%
#fae4fc 100%

内側
サイズ:3px

ベベルとエンボス

構造
スタイル:ベベル(内側)
テクニック:滑らかに
深さ:100%
方向:上へ
サイズ:10px
ソフト:5px

陰影
角度:90°
高度:80°
ハイライトのモード:通常 #ffffff 不透明度100%
シャドウのモード:不透明度0%

ベベルとエンボスの設定


番外編

お次は番外編ストーリー。本編とはまた違うシチュエーションのストーリーが読めます。

しかしまぁあれだよ。関さんパイロット編よかったよ…余は満足じゃ…
「嫌じゃなかったら、拒まないで」とか言われたら、無理だよ…拒めないよ…

番外編

シナリオの最後に書き下ろしイラストを掲載中!

フォント

「マトリ姫」に使われているフォントは、大体、このどちらかですね。
UDタイポス (モリサワ)
書体見本はこちらから

A-OTF 丸フォーク Pro (モリサワ)
書体見本はこちらから

更新が古めのは丸フォーク、最近のはUDタイポスという傾向っぽいです。
スタマイがUDタイポスだからそれに合わせてる感じなのかなぁ。

グラデーションオーバーレイ

#eb432a 0%
#f0873b 20%
#f0873b 80%
#eb432a 100%

スタイル 線状
グラデーションの角度 86°
比率 100%

シナリオの最後に書き下ろしイラストを掲載中!
.matoriComment03 {
  color: #fff;
  font-size: 130%;
  font-weight: bold;
  text-align: center;
  background: #eb432a;
  background: -moz-linear-gradient(bottom,  #eb432a 0%, #f0873b 20%, #f0873b 80%, #eb432a 100%);
  background: -webkit-linear-gradient(bottom,  #eb432a 0%, #f0873b 20%, #f0873b 80%, #eb432a 100%);
  background: linear-gradient(to top,  #eb432a 0%, #f0873b 20%, #f0873b 80%, #eb432a 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eb432a', endColorstr='#eb432a',GradientType=0 );
}

番外編セレクト画面

こちらは番外編のセレクト画面です。
左側にメニュー、右側にコンテンツという配置ですが、よく見ると矢印があります。
番外編、意外と結構な量なので、読み応え十分です!(課金です
1キャラだったら240円、2キャラ以上は360円ってとこでしょうか。

番外編選択画面

すべてのアイテムが透過されているので、少々厄介です。
どういう風に作ったか、レイヤースタイル公開しますね。

番外編選択画面レイヤースタイル

グラデーションオーバーレイ

Purple
#5d2d8d 0%
#b64ca3 25%
#1b3d9b 100%

Red
#b22a2a 0%
#a82c4d 25%
#770034 100%

スタイル 線状
グラデーションの角度 94°
比率 100%

.matoriBtn01 {
  width: 100%;
  height: 60px;
  border-radius: 10px;
  background: #5d2d8d;
  background: -moz-linear-gradient(bottom,  #5d2d8d 0%, #b64ca3 25%, #1b3d9b 100%);
  background: -webkit-linear-gradient(bottom,  #5d2d8d 0%, #b64ca3 25%, #1b3d9b 100%);
  background: linear-gradient(to top,  #5d2d8d 0%, #b64ca3 25%, #1b3d9b 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5d2d8d', endColorstr='#1b3d9b',GradientType=0 );
}
.matoriBtn02 {
  width: 100%;
  height: 60px;
  border-radius: 10px;
  background: #b22a2a;
  background: -moz-linear-gradient(bottom,  #b22a2a 0%, #a82c4d 25%, #770034 100%);
  background: -webkit-linear-gradient(bottom,  #b22a2a 0%, #a82c4d 25%, #770034 100%);
  background: linear-gradient(to top,  #b22a2a 0%, #a82c4d 25%, #770034 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#b22a2a', endColorstr='#770034',GradientType=0 );
}

基本グラデーションはこんな感じですが、
ここからさらに透明の5角形を重ねたりするとそれっぽくなります。

どうしても分からん…。データくれって方は、お声がけいただければ、
PSDファイル(か、レイヤースタイル)お送りしますね。(※商用不可)


終わりに

いかがでしたでしょうか。
スマホゲームにここまでどっぷりハマるのは初めてなので、自分自身ちょっと動揺しています。
(課金までするなんて…)

声優の前野智昭さん関連の情報を探っていたら、たまたま見つけたアプリ。
思 っ た 以 上 に 沼 一 直 線 で し た 。 (^q^)

「マトリ姫」は今後もストーリー配信あるようですし、
「スタマイ」はイベントやガチャなどで、ゲームとしても楽しめます。

そういえば、スタマイのホーム画面、ちょっとだけ作ってみたんですよね。
力尽きましたけど。

スタマイホーム画面

スタマイ公式がTwitterで「ストーリー画面をブラッシュアップする」という告知もされていましたし、
ますますデザインにも磨きがかかっていく感じでしょうか。非常に楽しみです。

「マトリ姫」のUIも一新して欲しいとか思ったり思わなかったり…
色や雰囲気じゃなく、操作性を考慮したデザインにして欲しいなぁ。
番外編の矢印とか見にくいから、スワイプでシュババババ!!!!って動くやつにしよ?(わかりづらい
簡単に説明すると、カルーセル的な感じでね。

今回はこんなとこで。
「スタマイ」の画面がブラッシュアップされたら、また色々調べてみようかなぁと思います。

それでは、また。