制作実績
多言語のWebページを、
公開まで作ります。
構成・デザイン・実装・公開の設定まで、一人で担当しています。 翻訳して終わりにせず、言語ごとの表示崩れ・切り替え・SNSに貼った時のカード・ 検索エンジンへの申告までを確認してから公開します。 下は、実際に公開して運用しているものと、題材を架空にして作った制作デモ、そして組み込める動きの部品の見本です。 どれも、その場で開いて触れます。
01 — Shipped
公開して、運用しているもの
自分の製品のサイトと、自分の仕事のために組んで毎日動かしている自動化です。作って終わりではなく、値段・文言・言語や処理の中身を実際に足しながら運用しています。
Kotocast — 音声入力ツールの製品ページ
日本語を基準に、英・仏・独・西の 5 言語を別ページとして公開。 言語ごとにURL・SNSカード・hreflang を分けてあります。買い切りの購入導線まで動いています。
MAGTEXT — アプリの製品ページ
1 枚のページの中で 5 言語を切り替える型。 訳の抜けと古い文言は、全言語を突き合わせる検査を公開前に機械で通しています。
xinogi.com — この工房のサイト
いま見ていただいているサイトです。5 言語・ダークモード・構造化データ・ 存在しないURL用のページまで、公開後に効いてくる部分を含めて自分で組んでいます。
業務の自動化 — 自分の仕事のために組んで、毎日動かしているもの
録画をノートにする・中古品の新着を一次選別する・業界ニュースを朝夕に配る・音声入力の辞書を育てる。 AIを呼ばない作りなので、何本流しても利用料は 0 円です。 測った数字をそのまま載せています。
02 — Studies
引き出しを見ていただくための、制作デモ
業種と見せ方の幅を確かめていただくために、題材を自分で用意して作ったものです。すべて実際に動きます。
BtoB・製造業 ｜ 日英切替つき
図面や公差のように、数字が主役になる業種の型。ボタン 1 つで英語に切り替わります。 写真は使わず、断面図はページの中で描いています（画像ファイル 0）。
写真が主役の企業サイト ｜ 日英切替つき
良い写真をお持ちの会社向けの型。写真の上に文字を置いても潰れないよう、濃度を 1 枚かぶせています。 ゆっくり寄っていく動きつき（動きを減らす設定の方には止めて出します）。
高級車のブランドサイト ｜ 回る・分解する 3D
架空の電動ハイパーカーの車体を Blender で一から作り、ブラウザの中で動かしています。 スクロールで横顔・分解・加速と場面が変わり、ボディの色を 5 色から選んでドラッグで回せます。
製品を回して、分解して見せる 3D
機械式腕時計を 6 つの層に分解し、歯車とテンプまで寄って見せます。ドラッグで回せます。 3Dモデルのファイルも写真も使わず、形も質感もページの中で作っています。
写真4枚で作る、季節の立体世界 ｜ 3D
同じ小屋を撮った 4 枚の絵と、奥行きの地図 1 枚だけで 6 つの章を作りました。スクロールで夜から冬まで光が移り、ドラッグで視点が傾きます。 3Dモデルのファイルは使っていません。
写真1枚が立体に動くトップ ｜ 工房・店舗・宿
お店の写真を 1 枚お預かりすれば、そのまま立体に動くトップになります。 マウスの位置が光源で、つまみで朝・昼・夕・夜に変わります。 撮り直しも、3Dモデルの発注も要りません。
観光・地域PR ｜ 瓶の中の街が灯る立体トップ
硝子の面を光の帯が 1 本ゆっくり横切り、街の窓は ひとつずつ、別々の時間に灯ります。 つまみを夕から夜へ回すと、外が暗くなるほど街のほうが明るくなります。
歯科医院 ｜ 外来と往診を、入口から分ける
通える人と、通えなくなった人。同じ1枚に両方を載せると、 どちらの人も自分の行き先が分からなくなります。この案は 電話番号・色・ボタンを最初の画面から2本に割って、最後まで混ぜません （外来＝金、往診＝朱）。縦組みの明朝、写真8枚（うち人物2枚はAI生成の架空の人物）。
整骨院・鍼灸院 ｜ 初めての人の不安を工程で解く
受付から会計までの 7 工程を、分数つきで先に出す型。 この業種は法令で効果をうたえないので、「何をするか」だけで信用を作ります。 予約と電話への導線つき。
学習塾（個別指導） ｜ 90分の内訳と年間の総額
保護者がいちばん知りたい 2 つ——1回の授業の中身と 1年で払う総額——を隠さずに置く型。授業の 90 分を帯で、 料金を年額の合計で出しています。
電気工事店 ｜ 見積もりの内訳と、来る人が見える
「工事一式」と書かない見積書を 2 件、明細のまま載せる型。 当日伺う担当者・資格・車まで先に出します。電話を押させるための寸法で組んでいます。
家族葬・葬儀社 ｜ 深夜の3手順と、総額の内訳
夜中に見る人へ向けて、いますることを 3 つだけに絞った型。 料金はプラン価格より先に 「プランに入っていないもの」 を出し、 総額の例を 2 件そのまま置いています。
士業（社労士） ｜ 持って来る物と、料金の決まり方
相談が気重になる 2 つの理由——何を持っていけばいいかと いくら請求されるか——をサイトで先に解く型。料金は 着手金・報酬・実費に分け、金額が動く条件まで書いています。
薬局（調剤・在宅） ｜ 待ち時間の目安と、訪問の流れ
曜日 × 時間帯の待ち時間を色分けの表で出し、混む時間を避けてもらう型。 在宅訪問は申し込みからやめ方まで 6 段階。 薬機法に触れないよう、薬の効き目は一行も書いていません。
クリニック（内科・小児科） ｜ 発熱の日の入口と、38分の内訳
熱のある方とそうでない方の動線を左右に並べた型。受付から会計までの 38 分を工程ごとの帯に分けて出しています。 医療広告ガイドラインに触れないよう、効果も体験談も一行も書いていません。
弁護士事務所 ｜ 費用を「いつ払うか」の順に並べる
相談しない理由の1位が「いくらかかるか分からない」なので、 相談料・着手金・報酬・実費を支払う順に並べた型。 初回 30 分で決まること／決まらないことも分けて書いています。
会計事務所・税理士 ｜ 顧問料の内訳表と、乗り換えの3手順
プラン × 業務の表に、○×ではなく回数と「やらないこと」を書いた型。 いまの税理士から替える手順は 3 つだけ。 節税額を断定する表現は使っていません。
美容室・ヘアサロン ｜ 初回90分の分刻みと、担当者ごとの料金
初めての 90 分を「あなたがすること／こちらがすること」の 2 列で分刻みに出した型。担当者は得意と苦手を並べて載せています。 「髪が生える・治る」は書いていません（書かない理由も本文に置きました）。
工務店・注文住宅 ｜ 坪単価でなく総額の内訳と、14か月の工程表
総額を本体・付帯・諸費用に割った内訳書を紙色のカードで置き、 着工から引渡しまでを月単位の帯にした型。 同じ家でも割り方で坪単価が 1.6 倍違うことを、そのまま書いています。
カフェ・喫茶店 ｜ 席と電源と滞在の目安、混む時間の表
席ごとに人数・電源・Wi-Fi・長居していい時間を並べ、 曜日 × 時間帯の待ち時間を色と数字で出した型。 メニューは写真をやめて量（ml・g）と価格にしています。
小さな宿・民宿 ｜ 15時から10時までの時刻表と、部屋に入っていない物
チェックインから翌朝までの 19 時間を 1 本の時刻表にし、 部屋ごとの「入っていない物」を料金より先に置いた型。 駅からの道順は分数と、街灯の無い区間まで書いています。
不動産・住宅販売 ｜ 地図の上に、担当者を置く
物件一覧の前に地図を出し、市ごとの担当者をその街の上に置きました。 押せば地域の物件一覧へ。新着・スマートハウス・内見の3方法・資金・アフターまで 1枚に収めた、情報量の多い会社サイトの型です。
不動産仲介 ｜ 払う順に並べた総額表と、内見当日の90分
費目を安い順ではなく申込・契約・入居前・毎月の順に並べ、支払先まで書いた型。 内見の日は 90 分で 3 件を時刻つきで。 「格安」「掘り出し物」は使っていません（不動産の表示に関する公正競争規約）。
訪問診療・訪問看護 ｜ 初回訪問までの日数と、夜の電話の行き先
ご家族が最初に知りたい2つ——申し込みから初回訪問までの日数を入り口 4 通りの帯にし、 夜 21 時の電話が誰に繋がるかを 3 段で書いた型。 医療広告ガイドラインに触れないよう、効果も体験談も一行も書いていません。
家事代行 ｜ 来る人は固定か、やらないことは何か
料金より先に「担当が替わる3つの場合」とやらないこと 11 件を出した型。 料金は時給ではなく 時間 × 回数の月額総額（税込・交通費込み）で。 「最安」など根拠を示せない表現は使っていません（景品表示法）。
運送・軽貨物 ｜ 便ごとの締切・集荷・到着と、追加料金の4条件
「即日対応」ではなく何時までに電話すればいいかを表の左端に置いた型。 走った後に金額が変わらないよう、追加料金が出る 4 条件を先に出しています。 ヘッダー最大の部品は電話番号そのもの（同業の実測に合わせました）。
求人・採用（製造業） ｜ 1日のタイムラインと、手取りの内訳
8 時から 17 時までを時刻と分数で出し、 月給 21 万円の引かれたあとの金額まで並べた型。 「アットホームな職場」は書いていません。
中古車販売店 ｜ 支払総額の内訳と、納車までの7手順
車両本体・法定費用・販売諸費用を分けて最後に支払う総額を出す型。 納車までを 7 手順で日数つきに、 保証に「入っていない物」を先に並べています。
水の演出 ｜ 化粧品・飲料・観光
画面のどこでも、指やマウスに水面が応えます。素材の写真ではなく計算で描いているので、 色をブランドに合わせて引き直せます。
広告の着地用・縦長LP ｜ 短納期
雑誌広告のように、本文まで画像の中に組む型。速く出せて、見た目の自由が利きます。 代わりに 本文が検索に読まれず、文言の修正には作り直しが要ります——先に申し上げます。
03 — Parts
動きを選んで足す、部品の見本
背景・第一画面・部品・道具。お客様のページに組み込める動きを、自作で9本そろえました。すべて画面の中で触れます。 同じ動きでも、色と言葉を替えるだけか、お客様のページに組み込むかで作業量（S・M）が変わります。
一点の例外 ｜ 背景
余白を活かしたい士業・工房・ブランドの表紙に。目を集めたい場所を1つに絞ります。画面をクリックすると火の粉が弾けます。
焼け野原 ｜ 背景＋参加
来訪者に触ってもらいたいキャンペーンや体験型のトップに。押した所が燃えて、跡が地図のように残ります。
流れ線 ｜ 背景
流れ・風・水・流通・データを見せたいトップに。ポインタをよけて筋が割れ、回り込みます。
粒が形に ｜ 背景
屋号・ロゴ・一文字を印象づけるオープニングに。近づけるとほどけ、離れると形に戻ります。
水底の光 ｜ 背景
化粧品・飲料・旅行・水まわりのブランドに。画像を使わず計算で描くので軽く、色も変えられます。
襞ガラス ｜ 背景
建築・インテリア・工房など、向こう側にある世界を見せたい時に。ガラスを覗く角度で、部屋が少しずつずれます。
弧のカード ｜ 部品
作品・商品・スタッフ・事例の一覧に。カードを1回押すと中央に来て光り、他は暗くなって引き立ちます。
割って立つヒーロー ｜ 第一画面
2つの価値を対比したい第一画面に。「風上｜風下」のような2語が、中央の主役を割って開きます。
組み合わせて画像保存 ｜ 道具
言葉・背景・色を選んで、名刺やSNS用の画像を持ち帰れる道具に。サイトを「触って残るもの」にします。
04 — Scope
できること、お請けしないこと
できること
- 多言語化：言語の切り替え、URLの分け方、hreflang、言語ごとのSNSカード
- 訳の抜け・古い文言の検査を、公開前に機械で通す
- 公開の設定：独自ドメイン、sitemap、robots、存在しないURL用のページ、構造化データ
- 実装：静的なHTML中心（速く、壊れにくい）。3D（Three.js）と動きのある表現
- 公開前の確認：スマートフォンの幅、表示速度、エラーの有無、リンク切れ
お請けしないこと
- 常駐・作業時間の拘束（一人で作っているため、掛け持ちができません）
- 修正の無制限対応（回数を決めてお受けします）
- 長期の保守契約（納品後に自分で直せる形でお渡しします）
- WordPress など指定のCMSでの構築（静的サイトが専門のため、力を出せません）
このページは制作実績の一覧です。ご依頼・ご相談は、このページをご覧になった経路 （各サービスのメッセージ）からお願いしています。
掲載している制作物（デザイン・動き・コード・画像・文章）の無断転載・複製・再配布はお断りします。
© 2026 Xinogi