S h o   T s u k a m o t o

【開発背景・課題解決】
保守運用契約を結んでいる不動産会社（ひまわり建宅様）より、「顧客ごとに手作業でExcel作成・管理している契約書類の作成業務を自動化したい」という要望を受け開発。 手入力による転記ミスやフォーマット不備を防止し、契約書類作成にかかる業務工数の大幅な削減を実現しました。

【担当領域】
フルスタック開発（要件定義 / DB設計 / UI・UXデザイン / バックエンド・フロントエンド実装 / テスト / 導入・運用支援）

Postagram（ポスタグラム）は、「SNSに我が子の写真は載せたいけれど直接の顔出しは避けたい。でもInstagramに投稿されているようなおしゃれな雰囲気に仕上げたい」という家族のリアルな悩みから生まれたWebアプリケーションです。

InstagramのUIデザインを忠実に再現しており、ヘッダーロゴ（「Postagram」や赤ちゃんのお名前などへ変更可能）やプロフィール画像、投稿テキスト、生年月日、ハッシュタグまで自由にカスタマイズ可能。世界に一つだけの特別な出産報告カードを簡単に作成・ダウンロードできます。

【技術的こだわり】
近年のスマホで撮影された高解像度写真でもストレスなく快適に利用できるよう、Laravel 13 + Intervention Image v4 によるサーバーサイド画像合成を採用。フォントの描画やレイアウトをミリ単位で調整し、モバイル端末でも素早く高品質な画像を生成できる環境を整えました。

WebサイトへのInstagramフィード埋め込みに必要な「無期限アクセストークン（Token 3）」および「Instagram Business Account ID」の取得・交換プロセスを自動化するWebアプリケーション。

手動では非常に煩雑な複数段階のMeta API手続きを解消すること、およびPHP（Laravel）の実装スキル向上と英語学習を目的として個人開発・運用しています。

保育園選び（保活）における「自治体HPに情報が散らばっている」「PDFの入園案内や持ち物リストがスマートフォンから読みづらい」という保護者の悩みを解決する地域特化型検索・比較アプリ。奥様やご友人からも大好評を得ている実用性の高いツールです。

【開発背景・ユーザーの課題解消】
「頭が割れそうな時に複雑な操作をさせないでほしい。医師に見せる体調データ出力にお金を取らないでほしい。」 いち頭痛持ちとしての切実な不満から開発した頭痛管理アプリ。既存アプリの「服薬データの紐付け表示バグ」や「PDFエクスポートの有料制限」を根本から解消し、痛い時でも1〜2タップで記録が完了する完全無料のツールを自律開発しました。

【技術スタック＆アーキテクチャ】
Laravel 12 + Inertia.js + React + Tailwind CSS + shadcn/ui によるモダンモノリス構成（PWA対応）。headache_logs と medication_logs をDBレベルで厳格に分離することで表示バグを構造的に排除し、将来のReact Native（iOS/Android）アプリ化も見据えた拡張性の高い設計を採用しています。

岡山市北区の不動産会社「有限会社ひまわり建宅」様のコーポレートサイトリニューアル案件。副業案件として、お客様との打ち合わせ・要件定義からデータベース設計、WordPress構築、フロントエンド＆バックエンド実装まで一気通貫で対応しました。

【課題解決とオーダーメイド開発】
「デザインの古さ」と「物件情報の更新作業の煩雑さ」という課題に対し、WordPressのカスタム投稿タイプとカスタムフィールドを組み合わせた完全オーダーメイドの物件管理システムを構築。専門知識がなくても直感的に物件情報を登録・更新できる環境を整えました。

【ビジネス成果と業務DXへの貢献】
リニューアル後はお問合せ数が大幅に増加し、クライアント様より高い評価を獲得。さらにサイト運用の信頼から業務改善の提案にもつながり、従来手作業だった「退去申し込み」のWebフォーム化も実現するなど、不動産業務のデジタル化（DX）を推進しました。

【技術スタックとアーキテクチャ】
WordPressを採用し、MVC設計に基づく保守性の高いコードベースを構築。View層にはTailwind CSSを使用し、高速描画と将来の仕様変更にも柔軟に対応できるマークアップを行っています。

【授業概要・登壇実績】
岡山科学技術専門学校（岡山市）の情報システム学科にて、企業連携授業の一環として年3回にわたり「Webプログラミングとセキュリティ」の講義を担当。現役Webエンジニアの視点から、現場で求められる実務知識とセキュリティ意識を未来のエンジニアへ届ける登壇実績です。

【講義・資料作成における工夫】
学生の集中力を持続させるため、スライド1ページあたりの情報量を最小限に絞り込み、インパクトと視認性を重視した教材を独自作成。理論だけでなく「実際の現場でどう使われ、どう攻撃を防ぐか」を視覚的に解説し、学生が退屈せず自発的に学べる授業設計を徹底しました。

【アピールポイント】
複雑な技術概念やセキュリティの脅威を、相手の目線に合わせて直感的に言語化・図解化する「プレゼンテーション能力」と「アウトプットスキル」を証明する実績です。

【開発背景・課題解消】
釣行計画時に「潮汐サイト」「天気予報」「風速データ」など複数のWebサイトを行き来するストレスを解消するために自作した個人開発ツール。 自身がよく訪れる兵庫・鳥取・島根・岡山・香川などの主要20港のデータを1画面で即座に把握・比較できるように構築しました。

【技術的アプローチ】
プロダクトの規模感に合わせ、あえて重いフレームワークを使わずプレーンなPHP 8.0単体で開発。Requests / Services / UseCases のレイヤード構造を自力で組み立て、依存関係が少なく動作が極めて軽量なコードベースを実現しています。

有志で企画・運営する釣り大会「前田杯」の公式サイト兼エントリー管理システム。 従来はLINEやTwitter（X）のDMで個別に募集を行っており、「参加者の把握が困難」「緊急連絡先の収集漏れ」「当日受付の手間」といった運用面・安全面の課題がありました。自身が運営に加わったことを機に、大会運営をスムーズにするWebシステムを個人で開発・導入しました。

転職先でTailwind CSSをチームに浸透させる際、フォントサイズに続き「余白クラス（p-4 や m-6 等）と具体的なピクセル数値の相互変換」も開発スピードを左右する課題でした。その脳内変換オーバーヘッドをゼロにし、チーム全員がスムーズに実装できるよう開発したChrome拡張機能シリーズの第2弾です。

【組織への影響・開発効率の向上】
余白数値（px / rem）の即座な参照に加え、クラス名のワンクリックコピー機能を搭載。エンジニアチーム内のコーディングスピード向上と、デザイナーとの余白指定におけるコミュニケーションコスト大幅削減に貢献しました。

転職先でTailwind CSSを組織に導入・浸透させる際、メンバーにとって「ユーティリティクラス（text-sm 等）と実際のピクセル数値のイメージが一致しづらい」という課題がありました。その普及ハードルを下げ、スムーズなキャッチアップを支援するために自作したChrome拡張機能です。

【組織への影響・成果】
エンジニアチーム全体へ導入を促すだけでなく、デザイナーにもFigmaやXDでのデザイン作成時にTailwind CSSのフォント定義に準拠してもらうアプローチを実施。デザイナーとエンジニア間の「フォントサイズの共通言語」を確立し、デザインレビューのコミュニケーションコスト削減と組織全体の開発スピード向上に貢献しました。

【立ち上げの背景・デザイン学習】
ガジェット好きが高じて購入したGoProをきっかけに、動画編集・画像デザインのスキル習得と趣味の釣りを掛け合わせてスタートした個人YouTubeチャンネル。 撮影から動画構成・サムネイル制作まで一貫して自学自習し、モノづくりの楽しさを実践しながら追求しました。

【顧客折衝スキルを活かしたコミュニティ形成】
得意とする「顧客折衝スキル（対話・コミュニケーション力）」を動画制作やコメント返信へ活かし、視聴者とのリアルな繋がりや温かいコミュニティ形成を重視。

【データ分析とグロース成果】
視聴維持率やサムネイルのクリック率（CTR）といったアナリティクスデータを分析し、改善サイクルを回すことで、チャンネル開設から約半年で登録者数1,000人突破および収益化要件を達成。ゼロからのメディア立ち上げ力とユーザーエンゲージメント構築力を実証しました。