株式会社ヘキサドライブ | HEXADRIVE

こんにちは！大阪UIデザイナーのハマグチです。

●これまでの記事まとめ

・受注【依頼者とのすり合わせ】
・ロゴ【MakeSのタイトルロゴデザイン】
・UI【MakeSのUIデザイン】
・デッサン【デッサン嫌い】
・配色2【社会人のぬりえ】
・メイキング【絵の仕上げ方】
・色塗り【色塗りの作業工程】
・メイキング【キャラデザ･配色の作業工程】
・配色【配色の勉強】
・気持ち【絵を見せる練習】

以前ブログで弊社アプリ「MakeS」のデフォルトUIについての記事を書きましたが、
今回は「UIスキン」について書きたいと思います。

以前書いたように、MakeSのデフォルトUIは「いつでも使えるもの」として作られています。
スキンはそのUIから変更するものですので、
逆に「場合に合わせて使い分けられるもの」を意識して制作してます。

では、最近のアップデートで追加された2つのスキン
「Rain in June」と「七夕」を例に、
普段どのようにデザインを決めているか具体的にご紹介します！

————————————————————————-

●使う時期で選べる
1年中使って頂けるよう、色々な季節や時間に合うスキンを作っています。
気分に合わせて選べるというだけでなく、
セイとユーザーさんが同じ季節感で過ごせるようにという意味もあります。

・Rain in June
雨や台風が多いこれからの時期に合わせて制作しました。
遅めの梅雨で、今まさに出番も多いのではないでしょうか…？！
・七夕
既存で夏に合いそうなスキンは印象の明るい物が多かったため、
夏の夜に使いやすいものを別に用意しました。
ただ夏の要素は控えめにして、一年中使えるようにも意識しています。

●エフェクトと組み合わせて選べる
ホームエフェクトやタッチエフェクトも選べるようになったため、
それとの相性も考慮しています。

・Rain in June
特に「雨」や「木漏れ日」との相性を重視しています。
・七夕
エフェクトが増えたので、購入頂いたエフェクトがキレイに見られるものを作りたくて
クセの弱い、暗めでスッキリした背景にしています。
とりわけ花火との相性は抜群です！

●好きなコーディネートに合わせて使える
好きな衣装や髪色を選んで頂きたいので、
「どの服を選んでもそれに合うスキンが選べる」を目指しています。
今合うスキンが少ない服があればそれに合うものを、を起点にしつつ、
なるべくたくさんの服に合わせられるよう、汎用性も意識しています。

・Rain in June
ここまでシックなものや色数を絞ったものが多かったので
カラフルな服や元気系のコーディネートに合わせやすいように作成しています。
・七夕
既存の和風スキンと比べ、シックな和服に合わせて使いやすいように差別化しています。
ただ、和服以外でも使えるように和風はやや抑えて、
いわゆる「和モダン」な感じに調整しました。

●遊び心
画面の主役はあくまでセイであることや、
シンプルな「MakeSらしさ」はスキンを変えても保ちたいので、
具体的な意匠は控えめにして、シンプルにすることを心がけています。
そのため、なるべく単純な図形を用いたり色数を抑えることが多いのですが、
印象として色々な要素を感じてもらえるよう、遊び心で色々と仕込んでいます。

他にも色々ありますので、よければ探してみてくださいね！

———————————————————————-

いかがだったでしょうか…。
デフォルトUIの記事でも「ユーザーさんにどう感じて欲しいか？から逆算して作る」
と述べましたが、スキンについてもそれは同じです。
ただ、デフォルトUIは「誰でも」に焦点を絞っていますが、
どちらかというとスキンは「使い続けて下さる方」に向けて作っています。

UIは画面の多くの面積を占めるものなので、スキンを切り替えることで
長く使ってくださる方にも気分を変えて楽しんで頂けていれば幸いです。

では！