Macarun

Transcript

1. 株式会社サイバーエージェントのUI DESIGN ACADEMY 23期に参加させていただ き、「新規性を取り入れたパズルゲームを制作する」という課題に取り組みました。 「苦手分野であったグラフィックに自信をつける」という目標を立て、細部のパーツ や世界観づくりにもこだわりました。 制作期間 種類 担当範囲 制作人数 使用ツール 事前課題：2週間 / インターンシップ：3日間（2022/8/19〜8/21） UXデザイン/ゲームUIデザイン 1人（メンターからのフィードバックあり） Figma/Protopie/illustrator/AfterEffects 株式会社サイバーエージェント UIDA23期 色がマージされる マカロンのパズルゲーム
2. ゲームルール 小人から与えられたミッションを 達成するとステージクリア！ 目標のマカロンを集める 上下左右好きな方向にフリック。 色が混ざってできたマカロンをタップし、回収！ 違う色同士のマカロンがぶつかると、色が混ざって 一つのマカロンに。同じ色同士は混ざらず、新しい マカロンが1フリックにつき1つ出てきます。 フリック＆タップの操作 ＋ = ＋ = = ＋ マカロンはぶつかると色が混ざる！ このパズルの新規性は「色がマージされる」という点。実際の絵の具 での色の作り方を参考に、ゲームでの色の混ざり方のルールも直感で イメージしやすいものにしました。 ex. 右に1フリック タップ！ 新しく出てきたマカロン 概要 企画 ペルソナ 制作 プロトタイプ
3. リサーチ 新規性・操作性の決定 日頃ほとんどゲームをしない自分にとって、ゲームUIを作るというのは未知の領域でした。ユーザー数が多いものから ニッチなものまで視野を広げ、かつパズルゲーム以外のゲームも観察しました。実際にプレイする際には、「どこがハマ る要素か」「パズルのルール」「パズルの操作性」の3つの観点を意識しました。 ゲームのデザインの要素の中の、ユーザー（ゲーマー）について調べました。 一般的なゲーマーは4属性に分類されることがわかりました。 既存のパズルゲームを触ってみる ゲームのデザインについて調べてみる 2048の独特な操作感 01 02 アチーバー ソーシャライザー エクスプローラー キラー レベル上げやトロフィー のコンプリートが大好き なタイプ。 プレイヤー同士で協力し ながらゲームを進めたい タイプ。 ゲーム内での世界で、登 場人物やプレイヤーと関 わりたいタイプ。 とにかく敵を倒したいタ イプ。 色が混ざるという新規性 幼少期にハマっていた「ミニーのクッキングパーティー」 というゲーム（現在は廃盤）から、パズルにおいて色が 混ざるというゲームはまだないのではと着想。 色と色を混ぜて、目標としている色に近づけるという部 分に今回のパズルの新規性をおくことを決めました。 リサーチを進める中で、フリックに合わせてブロックが移 動し、数字がマージされると共に新しいブロックが出現す るという2048の操作感が他にはないものであることに気 づきました。数字の部分を「色」に置き換えて自分のゲー ムにしようと考えました。 概要 企画 ペルソナ 制作 プロトタイプ
4. ペルソナ マネタイズ エクスプローラー ソーシャライザー アチーバー ヘビーユーザー ミドルユーザー ライトユーザー キラー ・平日は大学の授業とサークル、カフェでアルバイトをしている。 ・友達と遊ぶのも好きだけど、休日はインドア派。 ・よく使うSNSはインスタグラム。 ・SNSも見飽きた時には、たまにゲームをすることも。 松木 柚華 20歳 女性 大学生 カフェ巡りとNetflix鑑賞 性別 年齢 職業 趣味 ゲーム初心者、息抜きとプチストレス発散 夕食後の時間 通学の電車 課題や作業の合間 想定している利用シーン 課金要素はコイン購入のみ。 女性のDAUが高いことを想定。 ゲーム内での アイテムとの交換 ゲームをプレイするために 必要なハートへ交換 概要 企画 ペルソナ 制作 プロトタイプ
5. Before Before Before After After After 難易度設定 アイテムのルール設定 UI制作での工夫 使用できない マス目が出てくる 2回以上マージしないと 作れない色のマカロンが出現する ＋ ＋ = = ＋ ＋ = = ＋ ＋ = = … タップしたマカロンの色を変更できる 1行ブロックを消すことができる 1列ブロックを消すことができる タップしたマカロンを消すことができる … … … 先のステージが見えるレイアウトに マカロンの色が浮き立つように 視認性の確保 事前課題では、横に進んでいくようなレイアウトでステージ選 択画面を作っていました。 1画面内で3つのステージしか表示できないレイアウトだったた め、進んだ先をイメージしやすいように画面の奥に向かってス テージが進んでいくようなレイアウトに組み直しました。 色が 大事な ゲー ムで あったため、 マカロンの ブロッ クの 色が 際立つよう、 試行錯誤しました。 盤面のメイ ンカラーを 薄くし、 マカロンの 色の 彩度 を あげることで コント ラストを作 りました。 イ ンゲー ム画面の ボタンの 色もコント ラストが 低い こと か ら背景に 埋もれてしまっていました。 背景の 色を 濃く す ることでメ リハリができ、 ボタンがしっか りと浮き 立 つようにな りました。 概要 企画 ペルソナ 制作 プロト タイ プ
6. ▲ホーム画面 ▲ゲームスタート画面 ▲ゲームクリア画面 ▼ステージ選択画面 ▼インゲーム画面 「小人がお客さんのオーダーのマカロ ン集めを依頼する」という設定のゲー ムのため、マカロンショップをイメー ジしたホーム画面に。 お客さんから受けた注文（このゲーム でのミッション）を確認できます。 ゲームをクリアしたことと共に、 ステージでのスコアや獲得コイン を確認できます。 世界観を作りつつ、文字の視認性や各 ステージのステータスが一瞬でわかる ように試行錯誤しました。 必要な要素を入れつつ、メインのパ ズルの操作性も担保できるように。 概要 企画 ペルソナ 制作 プロトタイプ https://youtu.be/oxTknErq6Ls プロトタイプ の動 画 →
7. インターンシップでの学び 「ウィークポイントであるグラフィック力をあげたい」というのが、 自分のUIDAでの1番の目標でした。実際にゲームのUI画面を作成する となると、キャラクターやマカロンなどのパーツだけではなく、ゲー ム全体の世界観を作る上で背景やパズルの盤面などにもこだわる必要 がありました。 最前線で活躍されているデザイナーの方に質問できる機会をフル活用 させていただき、どうやってサンプリングを集めたらいいのか、集め たサンプリングのどこを観察しどのように真似ていくのかなど、テク ニックをたくさん吸収することができました。 「新規性」というインターンシップのテーマに合わせて、自分は既存 のパズルゲームですでにあるルールやロジックをたくさん観察するこ とを意識しました。ですが、最終発表ではルールや操作性が新しいの ではなく、ゲームとしてのユニークさやクリエイティビティが感じら れる作品がとてもたくさんありました。 同期のインターン生の「型にはまらず、当たり前を疑う」という姿勢 が勉強になると共に、これからの自分のデザインに対しても生かして いきたいと思いました。 デザインに関してほぼ独学で勉強している自分にとって、デザインを 専門としている他の学生の方と、かつこんなにもたくさんの方々と同 じ場所で取り組めたことがとても刺激になりました。個性豊かな同期 のメンバーに囲まれてとても心が揺さぶられたとともに、私も自分の 武器をもっと研ぎ澄ませ、デザイナーとして成長していきたいと強く 感じさせられる機会となりました。 楽しさとたくさんの刺激が ギュッと詰まった3日間でした！ ツムにはフェルトの テクスチャがかかっている ハイライト・インナーシャドウの入れ方 キャラクター・ロゴともに 曲線が多い 01 02 03 グラフィック力をあげるためのコツ 美大・デザイン学部の同期からの刺激 チャレンジ精神をもっと持つ！