はなさくの

フリーランスのゲームUIデザイナー。現在は、ゲームのUIデザイン／バナー制作のお仕事を…

はなさくの

フリーランスのゲームUIデザイナー。現在は、ゲームのUIデザイン／バナー制作のお仕事をしています。 ゲームUIデザインに関する情報発信を定期的にしています。 また、無料イラスト素材サイトやデザインブログも運営中！ 詳細はTwitterで（@HanaSakuno）

  • ゲームUIデザインレシピ

    ゲームUIデザインに関連する、素材の作り方・動きのつけ方・考え方が学べます。PhotoshopやAfterEffectsで作成したデータもお届け！

【PS】サムネイルフレームデザイン

こんにちは。ゲームUIデザイナーの「はなさくの」です。 ソーシャルゲーム内で、キャラクター一覧画面などで使用される「サムネイルフレーム」をPhotoshopで作成したので、そのデータを配布します。 Photoshop 2024を使用して、解像度72pixel/inchで作成しています。 （有料版は、ページ最下部からPhotoshopデータをダウンロードできます） キャラクターや背景などのイラスト素材は含みません。サムネイルフレーム単体でのデザインデータになります。 01

800
はなさくの

    • 【AE】ゲームイベント画面演出

      こんにちは。ゲームUIデザイナーのはなさくのです。 今回はAfterEffectsで作成した、ゲームイベント画面演出のデータを配布します。 AfterEffects 2024を使用して、作成しています。 有料版は、ページ最下部からAfterEffectsデータをダウンロードすることができます。 ※BGMやキャラ画像などは付属しませんので、ご自身の作品と差し替えてご使用ください 01｜ゲームイベント画面演出とはソーシャルゲーム内で、メインクエストとは別に、イベントページが設

      800
      はなさくの

      • 【AE】音楽再生画面演出

        こんにちは。ゲームUIデザイナーのはなさくのです。 今回はAfterEffectsで作成した、音楽再生画面演出のデータを配布します。 AfterEffects 2024を使用して、作成しています。 有料版は、ページ最下部からAfterEffectsデータをダウンロードすることができます。 ※BGMやキャラ画像などは付属しませんので、ご自身の作品と差し替えてご使用ください 01｜音楽再生画面演出とはソーシャルゲーム内で、ゲーム中に再生されるBGMやSEなどをまとめて確認でき

        800
        はなさくの

        • 【PS】音楽再生画面デザイン

          こんにちは。ゲームUIデザイナーの「はなさくの」です。 Photoshopで、音楽再生画面のデザインを作成したので、そのデータを配布します。ソーシャルゲーム内でも、ゲーム内で使用されているBGMを再生できる画面があるため、そちらをイメージして作成しました。 Photoshop 2024を使用して、解像度72pixel/inchで作成しています。 （有料版は、ページ最下部からPhotoshopデータをダウンロードできます） 01｜音楽再生画面デザインPhotoshopデー

          800
          はなさくの

        【PS】サムネイルフレームデザイン

        はなさくの

        マガジン

        • ゲームUIデザインレシピ
          ¥500 / 月

        記事

          【AE】ロック解除演出

          こんにちは。ゲームUIデザイナーのはなさくのです。 今回はAfterEffectsで作成した、ロック解除演出のデータを配布します。 AfterEffects 2024（v24.1）を使用して、作成しています。 有料版は、ページ最下部からAfterEffectsデータをダウンロードすることができます。 ※BGMやキャラ画像などは付属しませんので、ご自身の作品と差し替えてご使用ください 01｜ロック解除演出とはソーシャルゲームなどで、特定のステージやキャラクターなどが、何らか

          800
          はなさくの

          【AE】ロック解除演出

          はなさくの

          【AE】デジタル名刺データ配布

          こんにちは。ゲームUIデザイナーのはなさくのです。 今回はAfterEffectsで作成した、デジタル名刺アニメーションのテンプレートデータを配布します。 AfterEffects 2024（v24.1）を使用して、作成しています。 有料版は、ページ最下部からAfterEffectsデータをダウンロードすることができます。 ※BGMや作品の動画・顔アイコンなどは付属しませんので、ご自身の作品と差し替えてご使用ください 01｜デジタル名刺とはSNSなどで自分が作っている作品

          800
          はなさくの

          【AE】デジタル名刺データ配布

          はなさくの

          【AE】ローディングデータ配布

          こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、AfterEffectsで、ローディングのアニメーションを3つ作成したので、そのデータを配布します。 AfterEffects 2024（v24.1）を使用して、作成しています。 有料版は、ページ最下部からAfterEffectsデータをダウンロードすることができます。 01｜ローディングアニメーション01-01｜水が溜まっていくようなローディング AE標準エフェクトの「波形ワープ」を使用すると簡単に波の動きが

          800
          はなさくの

          【AE】ローディングデータ配布

          はなさくの

          【AE】タップエフェクトデータ配布

          こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、AfterEffectsで、タップエフェクトを6つ作成したので、そのデータを配布します。 AfterEffects 2024（v24.1）を使用して、作成しています。 有料版は、ページ最下部からAfterEffectsデータをダウンロードすることができます。 無料のプラグインを使用しているので、詳細は下記に記載します。 01｜タップエフェクトで使用している無料プラグインをご紹介01-01｜SABER 「Sab

          800
          はなさくの

          【AE】タップエフェクトデータ配布

          はなさくの

          【PS】ユーザー名入力フォームの作り方

          こんにちは。ゲームUIデザイナーの「はなさくの」です。 ゲームをしているとストーリーの流れの途中で、ユーザー名を求められる画面に遭遇することがあります。その世界観やストーリーに応じて見せ方が変わってくるとは思うのですが、今回作成したようなカード型のデザインは汎用性が高く見かける機会が多いため、取り上げてみました。 ということで、Photoshopでユーザー名入力フォームを作る方法について、ご紹介します。 Photoshop 2023を使用して、解像度72pixel/in

          800
          はなさくの

          【PS】ユーザー名入力フォームの作り方

          はなさくの

          【AE】BOSS登場演出の作り方

          こんにちは。ゲームUIデザイナーのはなさくのです。 今回は、AfterEffectsで、BOSS登場演出の作成方法についてご紹介します！ AfterEffects 2024（v24.1）を使用して、作成しています。 有料版は、ページ最下部からAfterEffectsデータをダウンロードすることができます。 01｜BOSS登場演出で使用した機能をご紹介01-01｜3Dレンダラー（Cinema 4D）

          800
          はなさくの

          【AE】BOSS登場演出の作り方

          はなさくの

          【PS】ゲームクリア装飾の作り方

          ゲーム系出身のデザイナー兼イラストレーターのスミ マミさんに、ゲームUIデザインレシピの記事を依頼し、作成していただきました！ お題は、クリアのデザインです。 Adobe illustrator 2023 Adobe Photoshop 2023を使用して、作成しています。 有料版は、ページ最下部からPhotoshopデータをダウンロードすることができます。 Illustratorデータ,背景イラストは付属しておりませんのでご注意ください。 01｜ゲームクリアの作り方

          800
          はなさくの

          【PS】ゲームクリア装飾の作り方

          はなさくの

          【PS】見出しデザインの作り方

          現役のゲームUIデザイナーの方に、ゲームUIデザインレシピの記事を依頼し、作成していただきました！ お題は、見出しデザインの作り方になります。 Adobe Photoshop 2023を使用して、作成しています。 有料版は、ページ最下部からPhotoshopをダウンロードすることができます。 01｜見出しデザインの作り方STEP1｜ラフを作成 ラフを作成していきます。Photoshopのシェイプツールでざっくり形を作成。雲や星のラフはブラシツールで描いていきます。

          800
          はなさくの

          【PS】見出しデザインの作り方

          はなさくの

          【PS】本アイコンの作り方

          ゲーム系イラストレーターの43ふじさんに、ゲームUIデザインレシピの記事を依頼し、作成していただきました！ お題は、本アイコンの作り方になります。 Adobe Photoshop 2023を使用して、作成しています。 有料版は、ページ最下部からPhotoshopをダウンロードすることができます。今回はラフなど途中経過のデータも入っています。 01｜本アイコンの作り方STEP1｜ラフを描く 今回はPhotoshopを使用しています。 CLIP STUDIOなどのイラス

          800
          はなさくの

          【PS】本アイコンの作り方

          はなさくの

          【PS】トロフィーアイコンの作り方

          UIデザイナーのミアさんに、ゲームUIデザインレシピの記事を依頼し、作成していただきました！ お題は、トロフィーアイコンの作り方になります。 Adobe Photoshop 2023を使用して、作成しています。 有料版は、ページ最下部からPhotoshopをダウンロードすることができます。今回はラフなど途中経過のデータも入っています。 01｜トロフィーの作り方STEP1｜ラフの作成 トロフィーのラフを作成します。 Photoshopのブラシでざっくり描きます。シルエッ

          800
          はなさくの

          【PS】トロフィーアイコンの作り方

          はなさくの

          【PS】ルーレットの作り方

          ゲーム系出身のデザイナー兼イラストレーターのスミ マミさんに、ゲームUIデザインレシピの記事を依頼し、作成していただきました！ お題は、ルーレットの作り方になります。 Adobe Photoshop 2023を使用して、作成しています。 有料版は、ページ最下部からPhotoshopをダウンロードすることができます。Illustratorデータは付属しておりませんのでご注意ください。 また以下のデータはレイヤーが分かれておりませんのでご注意ください。 - キャラクターイラ

          1,000
          はなさくの

          【PS】ルーレットの作り方

          はなさくの

          【PS】属性アイコンの作り方

          遊技機のデザインに強いキユマヤ園さんに、ゲームUIデザインレシピの記事を依頼し、作成していただきました！ 普段は主に遊技機のコンポジット作業や図柄デザイン画面・液晶表示物の2D・3D作成の仕事をしているそうです。 お題は、属性アイコンの作り方になります。 Adobe Photoshop 2023を使用して、作成しています。 有料版は、ページ最下部からPhotoshopデータをダウンロードすることができます。5属性すべてのデータが含まれます。 01｜属性アイコン（闇）

          800
          はなさくの

          【PS】属性アイコンの作り方

          はなさくの