コピペ3分！Chromeで好きなドット絵を動かそう Webエンジニア直伝のプログラミング魔法【超初心者向け】

皆さんこんにちは。Webエンジニアのokamoです。

突然ですが、皆さんが今この記事を見ている Google Chrome。 ただの「Webサイトを見るためのアプリ」だと思っていませんか？

実はChromeさん、裏技が使えるんです。 もっと言うと、**プログラムを動かして、好きなキャラクターやドット絵を自由に動かせる「魔法のキャンバス」**でもあるんです。

「えー、でもプログラミングなんて難しいんでしょ？」 「黒い画面に文字がいっぱいで怖い……」

そんな心配は無用です！ 今日やることは、「コピペ」して「エンターキー」を押すだけ。 それだけで、あなたのブラウザ画面に「自作のドット絵」を召喚したり、ちょっとしたゲームを作って遊んだりできます。

嘘だと思ったら、騙されたと思って3分だけお付き合いください。 きっと「Chromeだけでこんなこともできるんだ！」と感動していただけるはずです。

---

1. 秘密の扉「コンソール」を開けよう

まずは、魔法を唱えるための場所（コンソール画面）を開きます。 ハッカー気分で、以下のキーを押してみてください。

• Windowsの方: F12 キー（または Ctrl + Shift + J）
• Macの方: Command + Option + J

もし何も起きない場合は、ページ上の何もないところで 右クリック → 「検証」を選び、出てきたパネルの上の方にある「Console」というタブをクリックすればOKです。

画面の右側（または下側）に、ちょっと難しそうなパネルが出てきましたか？ それが魔法への入り口です。

---

2. 最初の試練：コピペの封印を解く

ここで一つ、壁があります。 Chromeさんはセキュリティがしっかりしているので、初めての人が怪しいコードを実行しないように「貼り付け」をブロックすることがあるんです。

コードを貼り付けようとしたとき、赤文字や黄色文字で

Warning: Don't paste code into the DevTools Console...

みたいな警告が出たら、Chromeさんに「大丈夫、わかってやってるよ」と伝えてあげる必要があります。

以下の解除用呪文をコンソールに手入力して、Enter キーをッターン！と押してください。

• ブラウザが日本語設定の場合: 貼り付けを許可
• ブラウザが英語設定の場合: allow pasting

これで封印は解かれました。

---

3. 実践！ 謎の生命体「okamoん」を召喚する

準備は整いました。 では、以下の呪文（JavaScriptコード）をコピーして、コンソールに貼り付け、エンターキーを押してみてください。

▼ 召喚コード（コピーしてください）

(function() {
    // --- 1. 初期化処理 ---
    // すでにokamoんが画面にいたら、一旦消去する（重複防止）
    const id = 'js-okamon';
    const existElement = document.getElementById(id);
    if (existElement) existElement.remove();

    // --- 2. キャンバスの作成 ---
    // ドット絵を描くための画用紙（Canvas）を作る
    const canvas = document.createElement('canvas');
    canvas.id = id;
    canvas.width = 16;  // ドット絵の元の大きさ（横）
    canvas.height = 16; // ドット絵の元の大きさ（縦）
    const ctx = canvas.getContext('2d');

    // --- 3. スタイル設定（表示位置と見た目） ---
    Object.assign(canvas.style, {
        position: 'fixed',      // 画面上の決まった位置に固定
        bottom: '10px',         // 下から10pxの位置
        left: '-50px',          // スタート地点（画面の左外側）
        zIndex: '9999999',      // 他の要素より手前に表示
        width: '64px',          // 表示サイズ（16pxを4倍の64pxに拡大）
        height: '64px',
        imageRendering: 'pixelated', // ドットをぼやけさせずクッキリ表示
        pointerEvents: 'none'   // クリックしても邪魔にならないようにする
    });

    // --- 4. カラーパレット定義 ---
    const c = {
        n: '#002060', // Navy：髪、目、口（深い紺色）
        d: '#000040', // Dark Navy：眼鏡フレーム（さらに暗い紺色）
        s: '#ffcc99', // Skin：肌色
        _: null       // 透明（何もしない）
    };

    // --- 5. ドット絵データ（16x16） ---
    // 修正版：耳なしスッキリ＆ニッコリ線画スマイル
    const map = [
        [c._,c._,c._,c._,c._,c._,c._,c._,c._,c._,c._,c._,c._,c._,c._,c._], // 0: 空白
        [c._,c._,c._,c._,c._,c._,c._,c._,c._,c._,c._,c._,c._,c._,c._,c._], // 1: 空白
        [c._,c._,c._,c._,c.n,c.n,c.n,c.n,c.n,c.n,c.n,c.n,c._,c._,c._,c._], // 2: 髪（トップ）
        [c._,c._,c._,c.n,c.n,c.n,c.n,c.n,c.n,c.n,c.n,c.n,c.n,c._,c._,c._], // 3: 髪
        [c._,c._,c._,c.n,c.n,c.n,c.n,c.n,c.n,c.n,c.n,c.n,c.n,c._,c._,c._], // 4: 髪
        [c._,c._,c.n,c.n,c.n,c.n,c.n,c.n,c.n,c.n,c.n,c.n,c.n,c.n,c._,c._], // 5: 髪（サイド）
        [c._,c._,c.n,c.s,c.s,c.s,c.s,c.s,c.s,c.s,c.s,c.s,c.s,c.n,c._,c._], // 6: 輪郭
        [c._,c._,c.d,c.d,c.d,c.d,c.d,c.s,c.s,c.d,c.d,c.d,c.d,c.d,c._,c._], // 7: 眼鏡（上フレーム）
        [c._,c._,c.d,c.s,c.n,c.s,c.d,c.d,c.d,c.d,c.s,c.n,c.s,c.d,c._,c._], // 8: 目と眼鏡
        [c._,c._,c.d,c.s,c.s,c.s,c.d,c.s,c.s,c.d,c.s,c.s,c.s,c.d,c._,c._], // 9: 眼鏡レンズ部分
        [c._,c._,c.d,c.s,c.s,c.s,c.d,c.s,c.s,c.d,c.s,c.s,c.s,c.d,c._,c._], // 10: 眼鏡レンズ部分
        [c._,c._,c.d,c.d,c.d,c.d,c.d,c.s,c.s,c.d,c.d,c.d,c.d,c.d,c._,c._], // 11: 眼鏡（下フレーム）
        [c._,c._,c._,c.s,c.s,c.s,c.s,c.s,c.s,c.s,c.s,c.s,c.s,c._,c._,c._], // 12: 頬
        [c._,c._,c._,c.s,c.s,c.s,c.n,c.s,c.s,c.n,c.s,c.s,c.s,c._,c._,c._], // 13: 口角（ニコッ）
        [c._,c._,c._,c._,c.s,c.s,c.s,c.n,c.n,c.s,c.s,c.s,c._,c._,c._,c._], // 14: 口底（カーブ）
        [c._,c._,c._,c._,c._,c._,c._,c._,c._,c._,c._,c._,c._,c._,c._,c._]  // 15: 空白
    ];

    // --- 6. 描画処理 ---
    // 定義したmapデータを1マスずつ読み込んで四角形を塗る
    map.forEach((row, y) => {
        row.forEach((color, x) => {
            if (color) { // 色がある場所だけ塗る
                ctx.fillStyle = color;
                ctx.fillRect(x, y, 1, 1);
            }
        });
    });

    // 完成した画用紙をWebページに追加する
    document.body.appendChild(canvas);

    // --- 7. アニメーション処理 ---
    let positionX = -60; // 画面の左外からスタート
    let time = 0;        // 時間経過（動きの計算用）

    function animate() {
        // 横へ移動（数値を大きくすると速くなる）
        positionX += 2.5;

        // 画面の右端を超えたら、左端に戻す
        if (positionX > window.innerWidth) {
            positionX = -60;
        }

        // ふわふわ跳ねる動き（サイン波を使用）
        // Math.sin(time / 8) で波を作り、* 8 で高さを調整
        const bounce = Math.abs(Math.sin(time / 8)) * 8;

        // 計算した位置をスタイルに適用
        canvas.style.left = positionX + 'px';
        canvas.style.bottom = (10 + bounce) + 'px';

        time++;

        // 次のフレーム（コマ）をブラウザに予約する
        requestAnimationFrame(animate);
    }

    // アニメーション開始！
    animate();
})();

いかがでしょうか？

画面の下の方をよーく見てください。 変な眼鏡のキャラクターが、楽しそうにフワフワと通過していきませんでしたか？

何かが動いていれば大成功です！ これは、この記事のために用意した私(okamo)のアバター、名付けて**「okamoん（おかもん）」**です。

「……うざい」

そう思った方、ごめんなさい（笑）。 でも、せっかくのコンソールデビュー記念ですから、次は皆さんの好きなキャラクターを動かしてみましょう。

※ 停止方法: ページを再読み込み（F5キーなど）すると、魔法は解けてキャラクターは消えます。

---

4. AIにお願いして、好きなキャラを作ろう

「okamoん」じゃなくて、もっと可愛いキャラやカッコいいキャラがいいですよね？ 今はAI（ChatGPTやGeminiなど）にお願いすれば、このコードを一瞬で作ってくれます。

以下の依頼文（プロンプト）をコピーして、AIに投げてみてください。

# ドット絵JS生成の依頼プロンプト

Chromeのコンソールにコピペして動かせる、ドット絵アニメーションのJavaScriptコードを作成してください。
以下の要件でお願いします。

## 1. キャラクターの特徴
**（※ここを好きなキャラに書き換えてね！）**
- **モチーフ:** （例：青いスライム、赤いスカーフをした白猫、ゾンビ、など）
- **見た目:**
    - 体の色： （例：水色）
    - 目の色： （例：黒）
    - 特徴： （例：頭に王冠を乗せている、しっぽが長い、など）
- **雰囲気:** （例：かわいい感じで / 8bitレトロゲーム風で）

## 2. 動きの指定
- **動き方:** （例：画面の下を左から右へ走らせる / 画面の中をふわふわ漂わせる）
- **スピード:** （例：ゆっくり / 素早く）

## 3. 技術的な指定
- 画像ファイルは使わず、Canvas APIを使った1つのソースコードにしてください。
- 著作権に配慮し、既存のキャラクターそのものではなく、それを模したオリジナル、あるいは指定した特徴に基づいたオリジナルキャラにしてください。
- ブログで紹介したいので、コードはコピペで動く完成形でお願いします。

うまくいくと、懐かしのゲームキャラクター風のドット絵も簡単に作れちゃいます。 自分だけのキャラが画面を動き回る様子は、見ているだけで楽しいですよ！

---

5. 応用編：禁断の「コンソール・シューティング」

ドット絵を動かすだけじゃ物足りない！というゲーマーなあなたへ。 ドット絵を応用した**「コンソール・シューティングゲーム」**も用意しました。

これを実行すると、ブラウザ上でインベーダーゲーム的な何かが始まります。

注意: 弾の発射エフェクトが黄色いため、Webページの背景が白いと見えづらい場合があります。 その際は、Chromeの設定やOSの設定で**「ダークモード」**に切り替えてから遊ぶと、宇宙っぽい雰囲気も出ておすすめです！

▼ ゲーム起動コード

(function() {
// 既存のゲームがあればリセット
const oldCanvas = document.getElementById('console-shooter');
if (oldCanvas) oldCanvas.remove();

// 1. 画面（キャンバス）の準備
const canvas = document.createElement('canvas');
canvas.id = 'console-shooter';
canvas.width = window.innerWidth;
canvas.height = window.innerHeight;
Object.assign(canvas.style, {
position: 'fixed', top: 0, left: 0,
zIndex: 9999999, pointerEvents: 'none' // ゲーム中もクリックは裏に透す
});
document.body.appendChild(canvas);
const ctx = canvas.getContext('2d');

// 2. 変数の初期化
let player = { x: canvas.width / 2, y: canvas.height - 50, w: 40, h: 20 };
let bullets = [];
let enemy = { x: 50, y: 50, w: 40, h: 40, dx: 5 }; // dxは移動スピード
let score = 0;
let keys = {};

// 3. キー操作の受付
window.addEventListener('keydown', e => keys[e.code] = true);
window.addEventListener('keyup', e => keys[e.code] = false);

// 4. メインループ
function loop() {
// 画面をクリア
ctx.clearRect(0, 0, canvas.width, canvas.height);

// --- プレイヤーの処理 ---
if (keys['ArrowLeft']) player.x -= 7;
if (keys['ArrowRight']) player.x += 7;

// スペースキーで発射（連射制限付き）
if (keys['Space'] && !player.cooldown) {
bullets.push({ x: player.x + 18, y: player.y });
player.cooldown = 10; // 次弾までの待ち時間
}
if (player.cooldown > 0) player.cooldown--;

// 自機の描画（緑色）
ctx.fillStyle = '#00FF00';
ctx.fillRect(player.x, player.y, player.w, player.h);
// 三角形っぽく装飾
ctx.beginPath();
ctx.moveTo(player.x + 20, player.y - 10);
ctx.lineTo(player.x + 40, player.y);
ctx.lineTo(player.x, player.y);
ctx.fill();

// --- 敵の処理 ---
enemy.x += enemy.dx;
// 壁に当たったら反転
if (enemy.x < 0 || enemy.x > canvas.width - enemy.w) enemy.dx *= -1;

// 敵の描画（赤色）
ctx.fillStyle = '#FF0000';
ctx.fillRect(enemy.x, enemy.y, enemy.w, enemy.h);

// --- 弾の処理 ---
ctx.fillStyle = '#FFFF00';
bullets.forEach((b, i) => {
b.y -= 10; // 弾速
ctx.fillRect(b.x, b.y, 4, 10);

// 当たり判定
if (
b.x > enemy.x && b.x < enemy.x + enemy.w &&
b.y > enemy.y && b.y < enemy.y + enemy.h
) {
// 当たったときのエフェクト
ctx.fillStyle = 'white';
ctx.fillRect(enemy.x, enemy.y, enemy.w, enemy.h);
bullets.splice(i, 1); // 弾を消す
enemy.dx *= 1.2; // 敵が少し速くなる！
score += 10;
console.log("HIT! Score: " + score); // コンソールにもログを出す
}
});

// 画面外に出た弾を消す（メモリ節約）
bullets = bullets.filter(b => b.y > 0);

// スコア表示
ctx.fillStyle = 'white';
ctx.font = '20px monospace';
ctx.fillText("SCORE: " + score, 20, 30);

requestAnimationFrame(loop);
}

loop();
})();

🎮 遊び方のコツ（動かない！という方へ）

昔のBASICパソコンと違い、今のブラウザでは**「キー入力がどこに向けられているか（フォーカス）」**が重要です。

コードを実行した直後は、キー入力が「コンソールの文字入力」として吸われてしまい、自機が動かないことがあります。

1. コードを貼り付けて Enter を押す。
2. マウスでWebページの背景（文字のないところ）を一度「カチッ」とクリックする。
3. それから ← → キーや スペース キーを操作する。

この手順を踏めば、緑色の自機が滑らかに動くはずです。

---

編集後記：あの頃のBASICの思い出

いかがでしたでしょうか？

私は子供の頃、BASIC（ベーシック）というプログラム言語を、雑誌を見ながらポチポチと打ち込んで遊んでいました。 当時は「●」を画面に表示させるだけで一苦労。 作ったというより、本の内容を必死に丸写ししていただけでしたが、それでも画面の中で何かが動いた時の感動は今でも覚えています。

そんなことを思い出したら、今の便利なChromeブラウザを使って、もっと気軽に「ドット絵を動かす」プログラミングの楽しさに触れてほしくてこの記事を書きました。

「難しそう」が「楽しい！」に変わる瞬間。 Chromeコンソールさえあれば、いつでもどこでもプログラムは動かせます。

ぜひ、いろいろ遊んでみてくださいね！

---

2026/02/01追記：自動生成できるアプリを作りました！

記事で紹介したドット絵アニメを、キーワードを入れるだけでAIが一瞬で作ってくれるWebアプリを公開しました。 生成されたHTMLタグを貼れば、あなたのブログでも「クリックで動くドット絵」がすぐに設置できます。 インストール不要・無料で遊べるので、ぜひ自分だけのキャラを召喚してみてください！

👉 ドット絵アニメジェネレータを使ってみる