Web制作・フロントエンド開発に関連する制作物、技術記事、サンプル実装を掲載しています。

掲載している自主制作サンプルは、実際の案件や特定企業の業務内容をそのまま公開したものではありません。実務でよくある課題を一般化し、技術構成や画面設計の確認用として制作したものです。

React / TypeScriptを使った画面実装、業務管理画面、WordPressサイト構築など、対応できる内容の参考としてご覧ください。

自主制作ポートフォリオ

実務でよく使われる画面構成や業務課題を想定し、React / TypeScriptなどを使って自主制作したサンプルです。
一覧、検索、入力フォーム、ダッシュボード、CSV出力など、業務システムでよく使われる機能を確認できるようにしています。

仕入れ・請求管理ダッシュボード

React / TypeScript を使用して作成した、複数店舗の仕入れ・請求データを一元管理する業務システムサンプルです。

各店舗で登録した仕入れ・請求情報を、管理者側で店舗別・月別に確認できる構成を想定しています。Excelや紙で分散しがちな情報をWeb画面上で管理し、一覧表示、検索・絞り込み、月次集計、CSV出力まで行えるようにしています。

このアプリはポートフォリオ掲載用の架空サンプルであり、実在する企業・店舗・取引先の情報は含まれていません。

主な実装内容

  • React / TypeScript によるコンポーネント実装
  • Viteによるフロントエンド構成
  • 店舗別・月別の集計ダッシュボード
  • 仕入れ・請求データの一覧表示
  • キーワード検索
  • 店舗・取引先・ステータスによる絞り込み
  • 新規登録・編集フォーム
  • 入力バリデーション
  • CSV出力
  • 店舗管理
  • 取引先管理
  • レスポンシブ対応
デモを見る
GitHubを見る

Web制作相談管理ダッシュボード

React / TypeScript / Vite を使用して作成した、Web制作相談を管理する架空ダッシュボードサンプルです。

相談一覧、検索・絞り込み、ステータス管理、詳細モーダル、メモ編集、localStorage保存など、業務画面で使われる基本的なUIと状態管理を実装しています。

このアプリはポートフォリオ掲載用の架空サンプルであり、実在する顧客情報は含まれていません。

主な実装内容

  • React / TypeScript によるコンポーネント実装
  • Viteによるフロントエンド構成
  • 相談一覧表示
  • キーワード検索
  • ステータス・カテゴリ・優先度による絞り込み
  • 10件単位のページネーション
  • サマリー集計
  • 詳細モーダル
  • ステータス変更
  • メモ編集
  • localStorage保存
  • レスポンシブ対応
  • OGP / メタタグ設定
デモを見る
GitHubを見る

オンライン講座サービスLPサンプル

React / TypeScript / Vite を使用して作成した、架空の個人向けオンライン講座サービスLPサンプルです。

ファーストビュー、悩み訴求、サービス紹介、料金プラン、FAQ、お問い合わせCTAなど、サービス紹介ページに必要な基本構成を実装しています。

FAQの開閉表示や、CTAから開く簡易お問い合わせモーダルも実装しています。

このページはポートフォリオ掲載用の架空サービスであり、実在するサービスではありません。

主な実装内容

  • React / TypeScript によるコンポーネント実装
  • Viteによるフロントエンド構成
  • FAQの開閉表示
  • 簡易お問い合わせモーダル
  • ページ内リンク
  • レスポンシブ対応
  • OGP / メタタグ設定
デモを見る
GitHubを見る

このホームページについて

WordPressとLightningテーマを使用して作成した個人サイトです。

個人・中小企業の方に向けたWeb制作相談窓口として、トップページ、サービスページ、制作実績ページ、プロフィールページ、お問い合わせフォームなどを構成しています。

独自ドメイン・レンタルサーバー環境で公開し、スマホ表示やお問い合わせ導線も意識して作成しています。

主な対応内容

  • WordPressテーマを活用したサイト構成
  • トップページのメインビジュアル設定
  • サービスページの作成
  • 制作実績ページの整理
  • ご相談前のチェックリストページの作成
  • プロフィールページの作成
  • お問い合わせフォームの設置
  • スマホ表示を意識したレイアウト調整
  • 追加CSSの設定によるスタイル調整
  • 独自ドメイン・サーバー環境での公開

技術記事・検証記録

React / Next.js / Vue / Nuxt.js / NestJS / Prisma / AWS など、学習・検証した内容を技術記事として公開しています。

実際にコードを書いて確認した内容をもとに、開発時につまずきやすい点や実装時の考え方を整理しています。

主な記事テーマ

  • Next.js App Router の基本構成
  • React / TypeScript の画面実装
  • NestJS と Prisma を使ったAPI実装
  • バリデーションやエラーハンドリング
  • AWSを使ったサーバーレス構成の検証
  • 業務開発でAIを使う際の注意点

主な記事

GitHub・サンプル実装

技術記事や学習内容に関連するサンプルコードを公開しています。

画面実装、API連携、フォーム処理、バックエンド連携など、実務で使う場面を意識しながら検証しています。

主な検証内容

  • React / TypeScript による画面実装
  • Next.js App Router のルーティング・API Routes
  • NestJS によるバックエンドAPI実装
  • Prismaを使ったデータベース操作
  • AWS S3 / CloudFront / Cognito などを使った構成検証

主なリポジトリ

制作・修正のご相談

ホームページ制作、既存サイトの修正・改善、機能追加・画面実装など、目的に合わせて対応します。

WordPressサイトの作成・修正から、React / TypeScriptを使った業務画面の実装まで、状況に合わせてご相談いただけます。

まずは現在の状況やお困りごとをお聞かせください。

お問い合わせはこちら