Naru Office — Playable Portfolio

見せるだけでなく、 触って確かめられる実績を。

Webゲーム・業務アプリを個人で企画から公開まで作っています。ブラウザで遊べる作品は、実際に動かしてお確かめいただけます(一部は準備中・非公開です)。

Works

制作実績 — 全8件のうち4件をここに掲載。遊べる作品はリンクからお試しいただけます
HIK金属 公式サイトのトップページ:紺色のヒーローと金属スクラップ回収の案内

Client Website Live

HIK金属 公式サイト

姫路市近郊で金属スクラップの出張回収を行う HIK金属さまの公式サイト。静的HTMLで試作したデザインを WordPress のオリジナルテーマに移し、お知らせの投稿とお問い合わせフォームを、ご本人がスマホから運用できる形にしました。

  • WordPress
  • PHP
  • HTML・CSS
  • Contact Form 7
ブロックくずし 3D のプレイ画面:奥行きのあるブロックの列とボール・パドル

3D Game Playable

ブロックくずし 3D

Unity と C# で制作した3Dブロックくずし。難易度選択・一時停止・スマホのタッチ操作に対応し、WebGL 版をブラウザで公開しています。実装・テスト・ビルドを Claude Code のコマンドライン操作だけで進める型を試した作品です。

  • Unity
  • C#
  • WebGL
PRIVATE TOOL 自分専用の業務ツール

Workflow Tool Private

クラウドワークス案件管理アプリ

案件収集から応募文の下書き作成・進捗管理までを1画面にまとめた自分専用の業務ツール。安全のため自動送信は行わない設計です。制作の裏側は記事にしています。

  • Python
  • Claude連携
AIドット絵オフィスの画面:ドット絵のオフィスに12人のキャラクターが並び、ほとんどのキャラクターの左上に稼働状態を示す小さな丸が付いている

Monitoring Tool Private

AIドット絵オフィス

Claude Code のセッションログを読み取り、AIの稼働状況をドット絵のオフィスとして表示する自分用の道具。Python の FastAPI で自分のPCの中だけに小さなWebサーバーを立て、キャラクターと背景のドット絵はローカルの ComfyUI で作りました。

  • Python
  • FastAPI
  • ComfyUI

作品は全8件あります。ここに並べているのは、そのうちの4件です。

すべての作品を見る(全8件)

Blog

制作記事
記事のサムネイル。紺色の背景に白文字で「ショート動画を」「自動で作る仕組み」の見出し、下に横長の動画枠から矢印でつながった縦型の動画枠(下部に赤いバー付き)のイラスト。
制作の裏側

ショート動画を自動で作る仕組み

長い動画から見せ場を選び、字幕つきの縦型ショート動画に仕上げる仕組みを自分で作りました。字幕の型やテロップ、画面の分割も指定して頼め、実測した処理時間と自動テスト285本の記録もあります。

記事のサムネイル:LINE Official Account Managerの画面。「LINE公式アカウントが作成されました。」という見出しの下に、アカウント名・業種・ベーシックID(黒塗り済み)が並び、その下に認証バッジ・スマホのモックアップ・「友だち募集中」バナーのアイコンが並んでいる。
制作の裏側

LINE通知とAI返信下書きの仕組み

お問い合わせフォームに送信が来ると、LINEに通知が届き、AIが返信メールの下書きも作ります。その仕組みと、入口を自分のフォームに作り替えても書き直さずに済んだ理由を書きます。

記事のサムネイル:ブロックくずし3Dのプレイ中の画面から中央部分を切り出したもの。色の違うブロックの列とボール、手前のパドル、左右のグレーの壁
制作の裏側

ブロックくずし3Dのスマホ対応

Unity と C# で作った3Dのブロックくずしを、5回に分けて携帯でも動かしました。指がパドルを端まで届かなかった理由と、確かめたこと・確かめていないことの記録です。

記事のサムネイル:応募管理アプリの画面から、撮影用に作った架空の案件カードを1枚写したもの。案件名の右に「送信待ち」の札が付き、案件名と報酬・期限の行の下に、オススメ度・判定・罠・勝ち筋・何を書けば通るかが並ぶ案件分析の欄があり、その下に応募文の下書きが入った欄が続いている
制作の裏側

クラウドワークス応募管理ツール

クラウドワークスの応募でやっている3工程のうち、2つを自分のPCの中だけで動くアプリに移しました。作った順番と、間違えたこと・いまも直せていないことの記録です。

記事のサムネイル:ドット絵オフィスにAIエージェントのキャラクターが並んだ画面
制作の裏側

AIの働きぶりを可視化する道具

Claude Code のログを読み取り、AIの稼働状況をドット絵オフィスに映す道具を自作しました。材料3つ・5段階の作り方と、実機で気づいた4つのつまずきをそのまま書いています。

About

運営者について
運営者のアイコン

義巳 清広

新しい技術やAIツールを取り入れながら学ぶ時間そのものが楽しく、何もないところから少しずつ形になっていく過程に一番のやりがいを感じます。このサイトでは、作ったものを実際に触って確かめられる形で公開しています。

Contact

お問い合わせ

制作のご相談・ご質問はこちらからお願いします。お送りいただいた内容は、運営者本人が読んで返信します。

お問い合わせフォームへ