今回の仕上がり
KenneyのPNGを背景に置いた、押せる「はじめる」ボタンです。クリック後の説明文の変化を確認した使用例で、完成したゲームではありません。
この記事の目次 開く・閉じる
最初の画面で、何を確かめたい？
個人開発では、機能もデザインも自分で決める場面が増えます。ここで「おしゃれな画面」を最初の目標にすると、色、余白、アイコン、アニメーションと、決めることが一気に増えがちです。
このページでは、初めて見る人が、次に何をすればよいか分かることを最初の目標にします。ゲームなら「開始する」、素材サイトなら「条件を確認して入手する」、メモアプリなら「一件保存する」。まず一つの操作と、その結果を決めます。
これはすべての作品に共通する正解ではなく、みっけメディアが今回の小さな試作から提案する進め方です。見た目そのものが価値の作品や、有料製品として売る段階では、必要な完成度も変わります。
① 図は、正しい答えを出すためではなく迷いを見つけるため
最初に使ったのがExcalidraw。ブラウザで箱と文字を置き、矢印でつなぐ道具です。今回は実際に長方形二つと文字を配置し、「アイデア → 小さく試す」という関係を描きました。
アプリの下書きなら、この考え方で「最初の画面 → 入力 → 結果」を並べてみます。各画面に細かい装飾はまだ不要です。行き止まりはないか、押す場所は何個必要か、戻れるかを見るための下書きにします。
触って感じたのは、画面のつながりを図にするだけでも、次の作業を決めやすくなることでした。ただし、この図はユーザーの理解度を測定した実験ではありません。紙でもほかのツールでも、目的に合う下書きは作れます。
② 素材は「見た目」、動作は「実装」と分ける
次にKenney UI Pack 2.0の青いボタン画像を使い、Webの一画面を作りました。素材は公式ZIPから入手し、同梱のLicense.txtでCC0の案内を確認しています。
画像をHTMLのbutton要素の背景にし、文字を上に重ね、クリックすると説明文が変わる処理を追加しました。画像を貼っただけの状態と、操作に応答する状態は別です。素材集をダウンロードしても、アプリの完成までは自動で進みません。
同じスタイルの素材を使うと見た目をそろえやすい。一方、元の画像を極端に伸ばすと縁や角も崩れます。まずは自然な比率のまま配置し、文字が読めるか、押す範囲が狭くないかを確認しました。
素材を使った画面は、Kenney様の公式ゲームや監修作品ではありません。作者が作った素材を使い、画面の組み立てと動作確認は自分で行います。作者の素材と自分の作業を区別して紹介します。
③ きれいさの前に、迷わず押せるかを確認
試作品を見るときは、次の項目を一つずつ確かめてみてください。全部の機能を一度に試すより、確認したい一つの流れを最初から最後まで追います。
- 入口：一番してほしい操作のボタンが見つかるか。
- 言葉：「実行」だけでなく、何をするかが伝わるか。
- 反応：押した直後に、結果や処理中の状態が分かるか。
- 文字：スマホで小さすぎず、背景に埋もれないか。
- 操作：キーボードでもボタンへ移動して実行できるか。
- 条件：素材名、作者、配布元、ライセンスを後から確認できるか。
今回のサンプルは、ボタンのクリックと文言変化を実際に確認しました。掲載前にスマホ幅の表示とキーボード操作も確認しています。ただし、画面を知らない利用者によるテストや、各種支援技術での網羅的な検証は実施していません。
実用サービスにする場合は、さらに入力ミス、読み込み失敗、戻る操作、データの保存などを確かめます。このサンプルは、操作をどう設計するかを説明するためのものです。そのため、設定を永続保存せず、実際の音やゲーム処理もありません。
AIへ頼むなら、一画面の意図を具体的に
AIを使う開発でも、最初から「いい感じのアプリにして」だけを渡すと、何をよくしたいかが曖昧です。今回のように誰が、何を押して、何が変わるかを先に決めると、確認する項目を絞れます。
これは依頼の書き方の例であり、複数のAIの性能比較や成功率を測定した結果ではありません。生成された画面は、見た目だけでなく実際の操作で確かめます。今回のExcalidrawの図もKenney様の素材も、生成AIで作った画像として紹介しているものではありません。
最初の完成度は、確かめたいことから逆算する
流れを考える段階なら図で十分なことがあります。押せるかを試すなら動く一画面が必要です。販売や正式公開を目指すなら、失敗時の処理や対応端末まで含めた仕上げが必要になります。
下書き → 一画面の実装 → 操作確認 → 必要な部分を磨く。この順番なら、素材やAIに任せる部分と、自分で判断する部分を分けやすくなります。最初から全部を作り込むのではなく、「次に何が分かれば前へ進めるか」を決めてみる。今回の小さな試作では、この進め方が役立つと感じました。
実施内容と出典
確認日：2026年9月27日。Excalidrawで図を描き、画像出力画面まで操作。Kenney UI PackのZIPを公式から入手・展開し、PNGをHTMLサンプルに使用しました。画像は実画面のスクショです。Excalidrawでのファイル保存完了、ゲームエンジンへの導入、実利用者によるユーザビリティテストは未確認です。
道具の詳しい操作はExcalidrawのガイド、素材の入手と条件はUI Packの紹介へ。この記事は、その二つをどう使い分けるかという制作の考え方を扱っています。