Web開発を通じて、手作業や非効率を減らし、長く使える仕組みを作ることを重視しています。
デザインだけではなく、フォーム、管理画面、CSV連携、 カスタム投稿、簡単な業務効率化ツールまで、 「使える仕組み」を作ることが得意です。
Laravel・React・TypeScript・Next.jsを用いた開発にも取り組み、 業務改善につながるWebアプリ開発へ領域を広げています。
Services
技術が決まっていない段階でも、目的と現在の困りごとを整理し、 必要な実装と公開後の扱いやすさまで考えて形にします。
サイトを新しく作りたい、今あるWordPressを直したい
WordPressサイトやLPの制作、既存サイトの表示・機能改修に対応します。 フォームや更新機能も含め、あとから変更しやすい構造へ整理します。
必要な機能が動くだけでなく、公開後も更新・保守しやすい状態へつなげます。
使用技術 WordPress / PHP / HTML / CSS / JavaScript / TypeScript
情報収集やデータ整理を、毎回手で繰り返している
Web情報の取得、データ整理、重複判定などの定型作業を、繰り返し実行できる小さなツールやWebアプリへ置き換えます。
作業手順とデータの流れが見え、同じ処理を再実行できる状態を目指します。
使用技術 PHP / Laravel / JavaScript / TypeScript / API / Google Sheets
作ったものを公開し、あとから安全に変更したい
ローカル実装だけで終わらせず、ホスティング環境への公開とGitによる変更管理まで整えます。
公開後の修正履歴を追えて、必要な更新を反映しやすい状態へつなげます。
使用技術 Git / GitHub / GitHub Actions / Vite / Vercel / Xserver
Evidence
困りごとに対して何を作り、作業がどう変わるのかをまとめています。 詳しい実装は、それぞれのGitHubから確認できます。
Webサイトを作る・直す / 公開まで
GitHub / 公開運用
こう工夫した
画面、問い合わせ、記事管理を一つのテーマへまとめました。修正から公開までを、同じ流れで扱えるようにしています。
こう変わる
記事は管理画面から追加できます。サイトの修正はGitHubへ反映するとサーバーへ届けられるため、制作後の更新や公開までまとめて扱えます。
手作業を仕組みに変える
GitHub / MVP
こう工夫した
検索画面の商品と登録済みの一覧を自動で照らし合わせ、その場で重複が分かるようにしました。
こう変わる
スプレッドシートを別画面で探さなくても、検索結果を見たまま重複を判断できます。あとから表示された商品も確認の対象になります。
Webサイトを作る・直す / 公開まで
GitHub / Learning Lab
こう工夫した
案内ページは小さく作り、入力確認とメール送信だけを別の処理へ分けました。
こう変わる
表示するページは小さく保ち、問い合わせだけを別の処理として動かします。入力内容と自動送信を確認してからメールへ進む流れも用意しています。
WordPressの仕組みを残し、開発用のファイルだけをビルドする形に分けた。
LazyGenius V5 WordPress Theme
WordPress / PHP / Vite / Tailwind CSS / TypeScript / JavaScript / GitHub Actions / Xserver
GitHubで実装を見る求人の取得、重複確認、保存、管理画面での確認までをWordPressへまとめた。
WordPressから公開済み記事を読み、別のWeb画面へ表示するMVPで確認した。
WordPress × Next.js ヘッドレスCMS表示デモ
WordPress / REST API / Next.js / TypeScript / Tailwind CSS / Vercel
公開画面を見るCSVから会員情報を取り込み、ログインした人を起点に組織のつながりを表示した。
送信、セッション、リダイレクト、表示までをテストコードで順番に確かめた。
出題時は正解を渡さず、10問分の回答をサーバー側でまとめて確認する形にした。
経歴はスプレッドシートで管理し、Web表示、印刷、選考結果の返信へ使い回せるようにした。
よく使うUIを、HTMLの属性から初期化できる部品としてまとめた。
問題、回答、結果の状態を分け、10問目だけ回答をまとめて送る流れにした。
デザイナーからの依頼をもとに、既存サイトの修正、LP制作、フォーム改修、CSS調整、公開対応などを行っています。
既存テーマやサイトの修正、表示調整、機能追加に対応。
HTML / CSS / JavaScript を用いたランディングページ制作。
問い合わせフォームの調査、エラー対応、送信改善。
デザイナーからの実装相談、仕様整理、対応方針の提案。
レイアウト崩れ、余白、レスポンシブ、デザイン再現の調整。
サイト内コンテンツとしての画像・動画の配置、表示調整。
サーバー・ドメイン・DNS・SSLなどの公開設定を含め、Webサイトを本番環境で閲覧できる状態まで対応。
How to start
完成した依頼内容は必要ありません。困っていることを聞き、触る範囲を整理してから進めます。
「ここが面倒」「この表示を直したい」から始められます。URLがあれば、あわせて確認します。
今の状態を見て、変える場所・対応する範囲・触らない場所を整理します。この時点で費用と進め方を確認します。
小さく作って確認し、必要な修正を反映します。依頼内容に応じて公開後の更新にもつなげます。
相談後の工程を確認したい場合は、各項目を開いてください。
内容が固まっていなくても大丈夫です。分かる範囲で、困っていることや対象のURLをお送りください。
画面や作業手順を見ながら、何が問題か、どこまで直す必要があるかを確認します。
変える場所と触らない場所、確認方法、費用、予定をお伝えします。合意する前に作業は始めません。
決めた範囲から作り始めます。途中で確認が必要な点は、その都度共有します。
実際の画面や動きを確認していただき、決めた範囲に沿って必要な修正を反映します。
最終確認後に納品または公開します。公開後の更新や小さな修正も、必要に応じてご相談いただけます。
Before contact
相談を送る前に止まりやすい点だけ、先に回答します。
はい。困っていることだけでも大丈夫です。 対象の画面や作業を確認し、何を変えるか、どこまで対応するかを整理します。
はい。「表示が崩れた」「フォームの一部を直したい」といった、一か所の修正から相談できます。
作業範囲と現在の状態を確認して決めます。 何をするか、どこまで対応するか、費用を先にお伝えし、合意後に作業を始めます。
はい。HTML・CSS・JavaScriptの画面修正や、PHP・Laravelを使った小さな業務ツールも相談できます。
はい。公開後の表示修正、機能の追加、更新作業についても相談できます。
Next step
内容が固まっていなくても構いません。「ここが面倒」「この表示を直したい」と、分かる範囲でお書きください。
対象のWebサイトや画面がある場合は、相談内容にURLを添えてください。
お名前
メールアドレス
ご依頼・ご相談の種別
ご依頼・ご相談の詳細
個人情報の取り扱い
お問い合わせありがとうございます。
内容を確認後、ご連絡いたします。