マガジンのカバー画像

ゲームUIデザインレシピ

ゲームUIデザインに関連する、素材の作り方・動きのつけ方・考え方が学べます。PhotoshopやAfterEffectsで作成したデータがダウンロードできます。
マガジン購読を開始した月以降の記事から、毎月2-4本の有料記事を500円でオトクに入手できます。詳…
¥500 / 月
運営しているクリエイター
はなさくの

#ロゴ

ゲームUIデザインレシピとは？

ゲームUIデザインに関する情報とデータをお届けする、月額500円のマガジンになります。 ゲームUIデザインのお役立ち情報 ゲームUI素材の作り方 ゲームUI素材配布 ゲームUIアニメーション素材配布 ゲームUIの作り方が知りたい、グラフィック部分でももっと上手くなりたい、作り方を知りたいという方にオススメです。 01｜どんな記事が読めるの？定期的にTwitter（@HanaSakuno）でゲームUIのお役立ち情報やデザイン・アニメーションなどを公開しています。

はなさくの

【PS】バレンタインデーロゴ

こんにちは。ゲームUIデザイナーの「はなさくの」です。 イラストも描けるフリーランス2Dデザイナーの柴さんに依頼し、デザインを作成していただきました！ お題は、バレンタインデーのロゴになります。 Photoshop 2025を使用して、解像度72pixel/inchで作成しています。 （有料版は、ページ最下部からPhotoshopデータをダウンロードできます） 01｜バレンタインデーロゴ文字の後ろにカップケーキやチョコのイラストがありますが、これらはスマートオブジェク

¥800
はなさくの

【AE】クリスマスロゴアニメーション

こんにちは。ゲームUIデザイナーのはなさくのです。 今回はAfterEffectsで作成した、クリスマスロゴアニメーションのデータを配布します。 AfterEffects 2025を使用して、作成しています。 有料版は、ページ最下部からAfterEffectsデータをダウンロードすることができます。 背景画像、BGM、SEは付属しておりません。 01｜クリスマスロゴアニメーション3種のクリスマスロゴを作成し、それぞれにアニメーションをつけてみました。クリスマスシーズンに

¥800
はなさくの

【PS】クリスマスロゴ

こんにちは。ゲームUIデザイナーの「はなさくの」です。 「クリスマスロゴ」をPhotoshopで作成したので、そのデータを配布します。 Photoshop 2025を使用して、解像度72pixel/inchで作成しています。 （有料版は、ページ最下部からPhotoshopデータをダウンロードできます） 背景画像は含みません。 01｜クリスマスロゴ配布データには、3つのクリスマスロゴが含まれています。 パーツ類は結合しておらず、すべてパスデータで作成しているため、拡大縮小

¥800
はなさくの

【PS】打ち替え可能！アニバーサリーロゴのデータ配布

こんにちは。ゲームUIデザイナーのはなさくのです。 Photoshopでアニバーサリーロゴを作りましたので、データ配布いたします。 今回文字は打ち替え可能、各種素材もイラレで作成してカーブをつけているため、好きなように変更可能です。 自分でロゴを作るのはめんどくさいので、文字差し替えで利用したいときなどは使ってみてくださいね！ Photoshop 2023を使用して、解像度72pixel/inchで作成しています。 （有料版は、ページ最下部からPhotoshopデータを

¥800
はなさくの

【AE】簡単なロゴアニメーションの作り方

こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、AfterEffectsで、ロゴをアニメーションさせる方法についてご紹介します！ 有料版は、ページの一番下から、AEデータがダウンロードできるようになります。 01｜ロゴアニメーションの作り方今回のロゴですが、AEの機能である「パスのトリミング」をメインに使用しています。これを覚えるだけで、それっぽいアニメーションが簡単に作れるようになるので、オススメです！ パスのトリミングの使い方が分からない方は、YouT

¥800
はなさくの

【PS】ポケモンカフェMix風ロゴの作り方

こんにちは。ゲームUIデザイナーのはなさくのです。 かなり前に作成したものですが、当時「ポケモンカフェMix」というゲームがリリースされたときに、ロゴの装飾が可愛かったので、その装飾をPhotoshopのレイヤースタイルでできるかぎり再現してみようと作成したロゴになります。 （有料版は、ページ最下部からPhotoshopデータをダウンロードすることができます） 01｜ロゴの作り方ロゴ作りの流れについては、下記に図解していますので、ご確認ください。 それでは、ページ下か

¥800
はなさくの

【PS】ワープテキストを使った変形文字の作り方

こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、Photoshopでワープテキストを使った変形文字の作り方についてご紹介します！ （有料版は、ページ最下部からPhotoshopデータをダウンロードすることができます） 01｜ワープテキストを使った変形文字の作り方基本的な作成手順は、下記になります。 01｜好きな文字をテキストツールで入力する 02｜テキストを選択した状態で、Photoshopの上部メニューから、書式 > ワープテキスト を選択する 03｜ワ

¥800
はなさくの

【PS】Photoshopで3D文字を作る方法

こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、Photoshopで、3D風文字を作る方法についてご紹介します！ 01｜3D風文字の作り方Photoshopにあった3D機能が廃止されるので、こちらではなく別の方法で再現していきたいと思います。 今回、詳細な作り方については、YouTubeに動画をアップしましたので、こちらを見ていただけると嬉しいです。 3Dらしい立体感を表現するために、フィルター＞ぼかし＞ぼかし（移動）を使い、その後に、レイヤースタイルの境

¥800
はなさくの