AIでこのサイトを作った話——Claude Code 活用記

Works — Portfolio

AIと一緒にこのサイトを作った話

このサイト自体を、AIアシスタント「Claude Code」と対話しながらゼロから作りました。その体験と、中小企業・個人事業主の方へのご提案をまとめています。

WordPress テーマ開発 AI活用 2026年3月

このサイトについて

このサイトは、AIアシスタントである「Claude Code」との対話を通じて、デザインの考え方から実際のコーディングまで、すべてを一から構築したWordPressオリジナルテーマです。制作にあたってテンプレートや既製テーマは一切使用していません。

制作期間2026年3月
種別WordPressオリジナルテーマ開発
使用技術PHP / CSS / WordPress標準機能
AI活用ツールClaude Code(Anthropic)
対応デバイスPC・スマートフォン・タブレット

Claude Code とは

「Claude Code」は、Anthropicが開発したAIアシスタントをターミナル(コマンド操作画面)から使えるツールです。「こんな機能を作りたい」「このデザインにしたい」と日本語で伝えると、AIがコードを書いたり、修正案を提案したりしてくれます。

プログラマーやエンジニアでなくても使えるわけではありませんが、開発スピードが大幅に上がることが最大の特徴です。「1人でやると数日かかる作業が、AIとの対話で数時間に短縮される」という感覚が何度もありました。


実際に使ってみた体験と感想

よかったこと

もっとも助かったのは、「どうすれば実現できるか」を自分だけで悩まなくていい点です。「カード一覧をグリッド表示にして、1枚目だけ大きくしたい」と伝えると、具体的なコードと一緒に理由も説明してくれます。実装しながら学べる感覚がありました。

また、デザインの一貫性を保ちやすい点も印象的でした。テーマ全体の色やフォントを設計トークンとして定義しておくと、AIもその設計に沿った提案をしてくれます。「なんとなくバラバラになってきた」という問題が起きにくくなりました。

特に印象に残った場面

カスタマイザーから色を自由に変更できる機能を作ってほしいと依頼したところ、設定画面の追加・CSSへの反映・リアルタイムプレビュー対応の3点をまとめて実装してくれました。自分で一から調べたら半日以上かかっていたと思います。

難しかったこと・気をつけた点

AIはとても優秀ですが、「何を作りたいか」を明確に伝える力は人間側に必要です。曖昧な指示だと的外れな提案が返ってくることもありました。「誰に向けて」「どんな印象を持ってほしいか」を言語化してから依頼するのが、うまく使うコツだと感じています。

また、AIが生成したコードをそのまま使うのではなく、内容を理解してから採用する習慣が大切です。意図せず不要な処理が含まれていることもあるため、最終的な判断は人間が行う前提で使う必要があります。


制作したサイトの特徴

デザインコンセプト「白いターミナル」

白を基調にしながら、テック感をさりげなく取り入れたデザインです。派手にしすぎず、かつ「ただの白いサイト」にならないよう、色使いと余白のバランスを何度も調整しました。アクセントカラーはターミナル(コマンド画面)を連想させる緑を採用しています。

管理画面から色・文章を自由に変更できる

WordPressの「カスタマイズ」機能と連携しており、プログラムの知識がなくても管理画面から以下の項目を変更できます。

  • サイト全体のカラーパレット(背景色・アクセントカラー・テキスト色など)
  • トップページのキャッチコピー・自己紹介文
  • プロフィール情報・スキル・SNSリンク
  • お問い合わせセクションの説明文

スマートフォンにも完全対応

PC・スマートフォン・タブレットのいずれでも快適に閲覧できるよう設計しています。現在、Webサイトへのアクセスの半数以上がスマートフォンからという統計もあり、スマホ対応は必須です。

表示速度を意識した軽量設計

余計なプラグインや外部ライブラリを使わず、必要な機能だけをコンパクトに実装しています。表示が遅いサイトは検索順位にも影響するため、速度の最適化は最初から考慮しました。


この経験があなたのビジネスに活かせること

このサイト制作を通じて実感したのは、AIを使いこなすことで、個人でもかなりの品質・機能のWebサイトやシステムを短期間で作れるということです。

大手のWeb制作会社に頼むほどではないけれど、「ちゃんとしたサイトが欲しい」「業務を楽にするツールが欲しい」——そんなニーズに、AI活用を取り入れた柔軟な開発でお応えします。

こんなお悩みがある方へできること
お店のサイトが古くてスマホで見づらいスマホ対応サイトのリニューアル・新規制作
Excelやメールで管理している業務を楽にしたい業務に合わせた簡易Webシステムの開発
ネット予約・問い合わせフォームを設置したい予約システム・フォーム導入・既存サイトへの追加
チラシや名刺のデザインも相談したい印刷物のデザイン作成・ロゴ制作
何から始めればいいかわからない現状のヒアリングから一緒に考えます

「IT・Webのことは苦手で…」という方ほど、遠慮なくご相談ください。専門用語を使わず、現状の課題からいっしょに整理するところから始めます。


振り返り

AIと一緒に作業することで、「作れるものの幅」と「作るスピード」の両方が広がりました。一方で、AIはあくまでも道具であり、何を作りたいか・誰のために作るかという方向性を決めるのは人間だと改めて感じています。

技術は手段であって目的ではありません。このサイトも、「こういう人に見てほしい・こういうことを伝えたい」というゴールを先に決めてから、それに合わせて技術を選んでいます。お客様のビジネスへのご支援でも、同じ考え方で取り組んでいます。

Contact

まずは気軽にご相談ください

Webサイトの新規制作・リニューアル・業務改善ツールの開発など、
小さなことでもお気軽にご連絡ください。

お問い合わせはこちら

返信は通常2営業日以内を目安にしています

【画面付き完全マニュアル】立替経費管理システムの機能を解説

Operation Manual — Complete Guide

立替経費管理システム
操作マニュアル完全ガイド

出張や接待など、仕事で立て替えた経費の精算は、多くの企業で手間のかかる業務のひとつです。領収書の管理から申請・承認フローまで、紙やExcelで運用している場合、処理に時間がかかるだけでなく、ミスや抜け漏れが発生しやすくなります。 本記事では、こうした課題を解決する「立替経費管理システム」について、主な機能とあわせてわかりやすく解説します。経費精算の効率化を検討している方は、ぜひ参考にしてください。 アカウント登録から経費申請・承認・レポート出力まで、実際の画面をもとに全ステップをわかりやすく解説します。

無料配布中 商用利用可 ブラウザのみで動作

この記事の目次

  1. ダッシュボードの概要
  2. 初期設定の手順
  3. アカウント登録(4ステップ)
  4. メンバー管理
  5. 経費申請の作成
  6. 新規勘定科目での経費申請
  7. 申請の送信
  8. 申請の承認フロー
  9. 締め日の設定と管理
  10. レポート出力

1. ダッシュボードの概要

ログイン後に最初に表示されるのがダッシュボードです。未承認の申請件数・今月の経費合計・メンバーへの通知件数など、業務に必要な情報が一目で確認できます。管理者と一般メンバーでは表示内容が自動的に切り替わります。

ダッシュボード画面
ダッシュボード — ログイン直後のトップ画面

2. 初期設定の手順

初めてシステムを起動したら、まず初期設定を行います。会社名・会計年度・通貨・承認ルートの基本構成を入力してください。ここで設定した内容はあとから変更することも可能です。

ポイント: 初期設定は管理者アカウントでのみ操作できます。設定が完了するまでメンバーはシステムを利用できません。

初期設定画面
初期設定画面 — システム起動後に最初に行う設定

3. アカウント登録(4ステップ)

新しいメンバーをシステムに追加するにはアカウント登録を行います。登録は以下の4ステップで完了します。

Step 1 — メールアドレスの入力

登録フォームにメールアドレスを入力します。このアドレス宛に確認メールが送信されます。

アカウント登録 Step 1
Step 1 — メールアドレスの入力

Step 2 — プロフィール情報の入力

氏名・所属部署・役職を入力します。この情報は申請書や承認フローで参照されます。

アカウント登録 Step 2
Step 2 — プロフィール情報の入力

Step 3 — パスワードの設定

8文字以上のパスワードを設定します。英字・数字・記号を組み合わせることを推奨します。

アカウント登録 Step 3
Step 3 — パスワードの設定

Step 4 — 登録完了の確認

入力内容を確認して「登録する」ボタンを押します。登録完了後はそのままログインできます。

アカウント登録 Step 4
Step 4 — 登録完了の確認

4. メンバー管理

管理者はメンバー管理画面から、登録済みのユーザー一覧を確認・編集できます。権限の変更(管理者 ⇔ 一般)や、退職者のアカウント無効化もここで行います。

操作管理者一般メンバー
メンバー一覧の閲覧
権限の変更
アカウント無効化
メンバー管理画面
メンバー管理画面 — ユーザー一覧と権限設定

5. 経費申請の作成

経費申請は「新規申請」ボタンから作成します。日付・金額・用途・勘定科目・プロジェクトコードなどを入力して明細を追加していきます。複数の明細を1件の申請にまとめることが可能です。

入力項目:日付 / 金額 / 用途(摘要)/ 勘定科目 / プロジェクトコード / 部署コード / 領収書添付(任意)

経費申請作成 画面1
明細の入力フォーム
経費申請作成 画面2
明細一覧と金額合計

6. 新規勘定科目での経費申請

登録済みの勘定科目にない費用が発生した場合は、申請と同時に新しい勘定科目を登録できます。管理者の確認後、次回以降は選択肢に表示されるようになります。

新規勘定科目での申請 画面1
新規勘定科目の入力
新規勘定科目での申請 画面2
確認・保存画面

7. 申請の送信

明細の入力が完了したら「申請する」ボタンで送信します。送信後は承認者に通知が届き、承認ステータスが「承認待ち」に変わります。送信前に内容を確認する「プレビュー」機能も利用できます。

申請送信画面
申請送信確認画面

送信後に内容の誤りに気づいた場合は、承認者が未処理の間のみ「取り消し」が可能です。承認処理が始まった後は取り消しできませんので、送信前に必ず内容を確認してください。

8. 申請の承認フロー

承認者はダッシュボードまたは通知から申請内容を確認し、「承認」または「却下」を選択します。承認フローは複数ステップに対応しており、「直属の上司 → 経理部」のような多段階承認も設定できます。却下時はコメントを添えて申請者に差し戻すことが可能です。

申請承認画面
承認フロー画面 — 承認 / 却下の選択とコメント入力
  • 承認した場合:次のステップの承認者へ通知、または最終承認として経費を確定します。
  • 却下した場合:申請者へ差し戻し通知が届き、修正・再申請が可能になります。

9. 締め日の設定と管理

管理者は月次の経費締め日を設定できます。締め日を過ぎた申請は自動的にロックされ、修正や新規申請が制限されます。締め処理後はレポートへの集計が確定します。

締め処理の流れ:締め日設定 → 未申請者へのリマインド通知 → 締め実行 → 確定済みデータのレポート出力

締め日設定画面
締め日設定・管理画面

10. レポート出力

締め処理が完了したデータはレポート画面から確認・出力できます。部署別・メンバー別・勘定科目別など複数の切り口で集計でき、Excel(.xlsx)またはCSV形式でダウンロードも可能です。

レポート出力画面
レポート出力画面 — 月次集計とデータエクスポート
  • 部署別集計:部署ごとの経費合計を一覧表示
  • 個人別集計:メンバーごとの申請履歴と合計
  • エクスポート:Excel / CSV 形式でダウンロード

Free Distribution

このシステムを無料で受け取れます

本記事で紹介したシステムはポートフォリオ作品として無料で配布しています。導入・カスタマイズに関するご相談もお気軽にどうぞ。

お問い合わせ・配布申請はこちら

※ 商用利用可 / 無料 / ご自身の環境への導入が必要です