こんにちは。フリーランスのUIデザイナーをしていますタカサキです。

日頃からいろんなアプリのUIデザインに携わってるのですが、その中でも得意としている分野はゲームのUIです。

ゲームUIデザイナーって非常に珍しい職種でリアルでもネット上でもなかなかお目にかかることがありません。なのでゲームUIのノウハウを情報収集しようにもどこから情報を得たら良いかさっぱりなのです。

つい先日もこんなツイートを見かけました。

このツイートを見て思ったわけです…

「もっとゲームUIのノウハウ共有したらハッピーになれる人がたくさんいるのでは？」

ということで今回とある企画を考えました！

まずはこちら↓の画像をご覧ください。

RPG系のスマホゲームなどでよく見かけるボタンデザインかと思いますが、実はこれ、ひとつの四角いシェイプレイヤーにレイヤースタイルのみで作成されています。さらにシェイプの色を変えることでボタン自体の色を自然に変えられる汎用性も兼ね備えています。

通常このような作り込んだ感じのボタンデザインはレイヤー構成が何層にもなりがちなのですが、あえてレイヤー数を絞ってどこまで表現の幅を広げられるかと自分なりに研究して作成したものです。（最後にPSDファイルがダウンロードできるようにしてます）

恐らく多くのゲームUIデザイナーは独自にノウハウを持っているはずなのでそう簡単に外へ向けて公開することは気がひけると思うのですが、「ひとつのレイヤーにレイヤースタイルだけでデザインするノウハウくらいだったら共有してもよくない？」ということで今回の企画を考えました。

題して…

「ONEレイヤーチャレンジ」

ルール説明

・デザインツールはPhotoshopを使用
・ボタン、テキスト、装飾など各々好きなパーツをデザインする
・「ひとつのレイヤー」に「レイヤースタイル」だけを使って表現（必須）
・可能であればレイヤー効果を公開する（任意）

これに参加してもいいよというゲームUIデザイナーさんがいたら、ぜひTwitterでもブログでも公開してもらえると幸いです。もちろんゲームに携わっていないデザイナーさんや、勉強も兼ねてやってみたいという方でも大歓迎です。

今後はボタンのデザインの他にタイトル文字や装飾系（蔦っぽいやつとか）のノウハウも共有していこうと思っています。

自分自身もほぼ独学でやってきたので目から鱗なテクニックをぜひお待ちしてます！（切実に…）

今回お見せしたボタンのPSDファイルは下記からダウンロードできます。
※PSDファイルは自由に使っていただいて問題ありません！

ダウンロード