ドット絵の作業員［ドカタ氏］を作った - 左下からお問い合わせへ

この記事はスクリーン左下の作業員を作った記録です

2026年10月11日、制作ノート（notes.docata.jp）と、コーポレートサイト［docata.jp］の左下に、ドット絵のキャラクターを置きました。

名前は ドカタ氏 です。屋号の［ドカタ］に、敬称の［氏］を付けました。オレンジのヘルメットをかぶった二頭身で、身長くらいある大きなスコップを持っています。

デザインを引き継いだ話は、別の記事にまとめました。この記事では、ドカタ氏を作った理由、絵の作りかた、動き、つまずいたところを記録します。

先に結論です

• お問い合わせへの入口を、画面の左下にずっといる、ドット絵のキャラクターにしてみました。
• 絵は、画像ファイルではなく、文字の並びから作った SVG です。ほとんど重くなりません。
• 吹き出しは、ホバーのときだけ出ます。文言は、『相談してくれよな！』です。
• アイキャッチがない記事のプレースホルダー画像にも、ドカタ氏を入れました。ただし主役は、あくまで［ドカタ.jp］のロゴです。

なぜキャラクターなのか

お問い合わせへのリンクは、すでに記事の中にも、フッターにも、ヘッダーにもたくさんあります。そこで、少し違う入口を考えました。画面の左下にいつもいる、ドット絵のキャラクターから、お問い合わせへつなげる案です。

なお、フッターの上には、お問い合わせの帯も置いています。帯は、読み終わったあとに目に入る入口です。キャラクターは、読んでいる途中でも、画面の隅から声をかけてくれる入口、という違いがあります。

イメージは、Chrome がオフラインのときに出る、ドット絵の恐竜です。ただ、恐竜そのものの絵は使わず、独自に描き起こしました。屋号の［ドカタ］にちなんで、オレンジのヘルメットの作業員にしています。

絵の作りかた

絵は、文字の並び（1文字が1ドット）から、ビルドのときに SVG の四角を並べて作っています。

"....oooooooo....",
"..oooooooooooo..",
".ooowwooooooooo.",
".dddddddddddddd.",
".ffffffffffffff.",
".fffewffffewfff.",

• o：ヘルメット（オレンジ）
• d：ヘルメットのつば（濃いオレンジ）
• f：顔と手
• e：目と口
• w：ツヤ・目のハイライト
• b：作業着（スカイブルー）

色は、サイトの差し色（オレンジ、スカイブルー、墨色）に合わせました。画像ファイルを使わないので、直したいときは、文字の並びを書き換えるだけです。

動き

• 走る：足を2コマ交互に見せて、その場で走ります。7秒に1回、小さくジャンプします。
• 現れる：ページを少しスクロールすると、ふわっと現れます。最初から、画面にはいません。
• ホバー：走るのをやめて、スコップを地面にザクッと刺します。土ぼこりが舞って、ふきだしが出ます。
• 押す：お問い合わせフォームへ移動します。
• 閉じる：×を押すと、その訪問のあいだは出ません。
• 動きの設定：［視差効果を減らす］設定のときは、動きを止めます。
• スマホ：少し小さくして、ふきだしは出しません。

スコップを刺す動きは、持ち上げて（約3ピクセル）、地面に食い込ませて（約2ピクセル）、戻す、という3段階です。刺した瞬間にだけ、土ぼこりが見えるようにしました。

つまずいたところと直しかた

縁取りがあるとダークで目が白く見えた

最初は、輪郭に墨色の線を引いていました。ところが、ダークでは、その線が明るい色になって、目まで白く見えてしまいました。そこで、輪郭の線をやめて、色の面だけで描くことにしました。縁取りなしのほうが、軽くて、かわいい印象にもなりました。

大きさが大きすぎた

最初の試作は、64ピクセルほどでした。常に画面にいる要素としては、大きめでした。48ピクセルに小さくして、スコップを持たせた今は、横幅が60ピクセルです。スマホでは、40ピクセル幅にしています。

お問い合わせの帯のところでは引っ込めないことにした

notes にはフッターの上に、docata.jp のトップにはページの下に、お問い合わせの帯（セクション）があります。同じ目的のものが2つ並ぶのを避けようと、最初は、帯が画面に入っているあいだはキャラクターを引っ込めていました。ところが、帯の手前でキャラクターが消えると、かえって落ち着きません。そこで、引っ込めるのは、フォームそのもののページ（docata.jp のお問い合わせ）だけにしました。フォームが目の前にあるページでは、入口が要らないからです。帯のところでは、出たままにしています。

ふきだしの文言をラフにした

ふきだしは、はじめ［ご相談はこちら］でした。丁寧ですが、キャラクターの雰囲気とは、少し合いません。そこで、『相談してくれよな！』にして、しっぽも付けました。

アイキャッチがない記事のプレースホルダー

アイキャッチがない記事は、一覧では、空のグレーの箱になっていました。そこで、ロゴの隣に、ドカタ氏を小さく並べた、1200×630ピクセルの画像を用意しました。

• ドカタ氏の足もとは、［ドカタ.jp］のロゴの下の位置にそろえています。
• ドカタ氏の下に、名前（［ドカタ氏］）を入れています。
• 画像のなかのドカタ氏は、あまり大きくしていません。主役は、ロゴです。
• 画像は、HTML を Chrome で書き出して作っています。docata.jp の OGP 画像と同じ方法です。

使う場所は、ホームの注目記事、一覧のカード、そして SNS で共有されたときの画像（アイキャッチがないとき）です。

確かめたこと

• 型チェックは、エラー0件でした。
• ライトとダークで、縁取りなしの絵が、どちらでも見えることを確かめました。
• ホバーのときに、スコップの位置が［持ち上がる、食い込む、戻る］と変わり、土ぼこりが出ることを、測って確かめました。
• notes と docata.jp で、スクロールすると現れることを確かめました。お問い合わせの帯のところで引っ込む処理は外してあり、本番の HTML にも残っていません。docata.jp のお問い合わせのページだけは、出さない設定です。
• プレースホルダーが、ホームの注目記事、カテゴリとタグの一覧のカード、SNS の共有画像に出ることを確かめました。

注意したいところ

• お問い合わせが増えたかどうかは、まだ測っていません。 出しかたしだいで、読みの邪魔にもなるので、様子を見ながら調整します。
• 絵は、Chrome の恐竜を使わず、独自に描いたものです。ほかの有名なキャラクターに寄らないよう、気をつけています。
• 動きの見えかたは、ブラウザや端末によって、変わる可能性があります。
• ×で閉じたあとは、その訪問のあいだ（タブを閉じるまで）、出ません。
• ふきだしは、スマホではホバーがないので、出していません。

中小企業ではどう役立つか

会社のホームページに、ちょっとした遊びごころがあると、［ここは、人が運営しているサイトだ］と伝わります。［こんなことを相談してもいいのかな］と思っている人が、お問い合わせに踏み出す、ささやかなきっかけになるかもしれません。

ドカタ.jp では、サイトの制作や、いまのサイトに小さな仕掛けを足すご相談もお受けしています。お気軽にお問い合わせください。

この記事は、作業の記録をもとに Claude Code が EmDash の MCP サーバー経由で下書きを作成し、筆者が確認・編集して公開します。