【イベントレポート】ゲームとデザイン。〜ゲーム開発に活かせるデザイン基礎を学ぼう！〜

井上 真史 氏

コードキャンプ株式会社
教務

プロフィールを見る

×

井上 真史 氏

コードキャンプ株式会社
教務

プログラミング・Webデザインスクールを運営するCodeCampでデザイン教務を担当中。 「Webデザインの現場を再現する」をモットーに、商品開発・デザイナー支援を行っています。

イベント概要

当日のタイムスケジュール

イベントの狙いは？

今回のワークショップでは「ゲームを面白くするデザイン」にフォーカスしました。デザインと聞くとイラストやキャラクターの絵を描くイメージがありますが、実はゲーム画面に並ぶ情報を「どこに配置するか」「どれを大きく見せるか」といった視覚設計がとても大切。そこにグラフィックデザインの基礎が活かされます。 本イベントでは、スライドを用いてデザインの4大原則（近接・対比・整列・反復）を学び、各ポイントの解説後、Miroを使ったワークで即実践に移すことで理解を深めてもらいました。

いざ、イベント開始！はじめに講師の井上先生のご紹介

最初にコードキャンプ株式会社・教務の井上真史氏が講師として登場し、デザイン30年のキャリアやゲームのコレクションを紹介。「自転車や格闘技など体を動かすのも好き、でもゲームも大好き」といった自己紹介は、参加者の雰囲気を一気に和ませました。

ワーク開始！はじめに、みなさんのことを教えてください

Miroのボードに移動して、参加者それぞれが「好きなゲーム」や「ゲームが面白いと感じるポイント」を付箋に書き出します。カードゲームからオンラインゲームまで、ジャンルはさまざま。「グラフィックが綺麗」「キャラクターの世界観が魅力的」など、いろいろな意見が出ました。

デザイン講座：まずは4大原則を学ぼう

4大原則を学ぼう

ここではスライドの内容とともに、そのポイントをかいつまんでご紹介します。

• 1．近接（仲間は近づけよう）
• 2．対比（目立たせたいものは目立たせよう）
• 3．整列（要素の頭を揃えよう）
• 4．反復（繰り返しのルールを作ろう）

1．近接

• 関係のある要素は「近くに配置」することでグループ化し、見る側が自然に意味を理解しやすくする。
• ゲーム画面であれば、スコアやHPゲージなどの情報をまとめておくと、プレイヤーが迷わずに確認できる。

2．対比（コントラスト）

• 優先順位や重要度に応じて、強調すべきものを大きく・目立つ色にする。
• 「ゲームオーバー画面」で一番伝えたいのは「ゲームオーバー」の事実。文字を大きくすることで自然と目に入り、その後「再チャレンジするかどうか」の選択を促す流れになる。

3．整列

• 頭の位置がバラバラだと見づらくなる。情報を縦にそろえる、左右どちらかにそろえるなどの工夫が大切。
• ゲーム内の装備リストなど、多くの情報をスッキリ整理するのに有効。

4．反復

• 同じデザインやレイアウトを繰り返すことで、一貫性を生み出す。
• ゲーム内のボタンデザインやアイコン配置など、「同じ条件は同じ見せ方にする」ことでユーザーが戸惑わなくなる。

ワークで実践！Miroで学んだデザインを活かしてゲーム画面のレイアウトを考える！

この講座のメインは、学んだ4大原則を使って実際にゲーム画面のデザインを試してみることでした。以下のような手順でワークを進行しました。

参加者たちは「敵キャラと味方キャラの距離を変えて分かりやすくする」「メインタイトルを大きくし、続きから/はじめからを少し小さめに配置する」「装備リストは左揃えで並べ、ボタンの色は統一する」など、積極的に試行錯誤を楽しんでいました。

スタート画面を作るワーク

ロード画面を作るワーク

ステータス画面を作るワーク

最後に、4大原則のおさらい

• 近接：仲間は近づける
• 対比：目立たせたいものはしっかり目立たせる
• 整列：要素の頭をそろえて違和感をなくす
• 反復：ルールを決めて一貫性を持たせる

講師の井上さんいわく、「デザインは絵の上手さだけで決まるわけではなく、論理的に組み立てていける点が面白い」とのこと。4大原則を意識するだけで、視覚的なわかりやすさや美しさが格段に向上するという学びが印象的でした。

FAQ（質疑応答）

イベントの成果は？

今回のイベントを通して、参加者たちはゲーム画面でも同じデザイン原則が通用することを体感してもらいました。

• 1．デザインの基礎をゲームに取り入れる面白さ
• 2．Miroを使ったオンラインワークの新鮮さ
• 3．他の参加者とのアイデア共有を通じた学び

さいごに

「ゲームとデザイン。」は、ゲーム好きの子どもたちにとって「デザインの面白さ」を感じる絶好の機会となりました。講師の井上真史さんの30年にわたる実務経験とゲーム愛が、講座をより一層盛り上げたことも印象的でした。

CodeCampKIDSでは今後もこうした「学び」と「エンターテインメント」を掛け合わせたイベントをどんどん企画していきます。ゲーム開発、デザイン、プログラミングなど、子どもたちの興味を引き出しながら未来を広げるイベントにぜひご注目ください！

皆さんの「やってみたい！」という気持ちを大切に、これからも面白いゲームを一緒に作っていきましょう。ご参加いただいた皆さん、本当にありがとうございました！

CodeCampKIDSについて

CodeCampKIDS（コードキャンプキッズ）は創造力、論理的思考力、問題解決力、コミュニケーション力、プレゼンテーション力を身につけ、プログラミングを学んで世界を変える小学生・中学生を育成します。品川区大崎で教室を開校しています。プログラミング教室のフランチャイズ加盟者募集中！

コードキャンプ株式会社について

「ITの力で、社会を変革する未来のプロフェッショナルを育てる」ためのIT/プログラミング教育サービス「CodeCamp」を運営しています。2013年に日本初となるオンライン・マンツーマンでのプログラミング教育事業を開始し、ITエンジニアの育成プログラムやWebデザイン教育、法人・自治体向けのプログラミング/DX研修事業、子ども向けのプログラミング教育事業などを展開しています。