広告 Sponsored
Portfolio

GameWidth Portfolio

WordPress × React（Headless/SPA） / Flutter Webデモ / 計測（GA4/Firebase）

React/テーマを見る（別タブ） Flutterデモを見る（別タブ）
※ 埋め込み表示が不可（CSP / X-Frame-Options）の場合は「別タブ」で確認してください。

WordPress × React（Headless / SPA）

WordPressのコンテンツをAPIで利用しつつ、React/Next側でUIを高速に描画する構成を検証・実装しています。 テーマ設計（レイアウト/導線/パフォーマンス）と連動した改善サイクルを前提にしています。

技術
  • WordPress
  • REST API
  • React / Next
  • Vercel
  • GitHub
テーマ（設計ポイント）
  • レスポンシブ前提の余白設計・可読性
  • 一覧→詳細→検索の回遊導線
  • 表示最適化（速度/UX）
文書（説明）
  • 構成：WordPress + React（Headless/SPA検証）
  • 運用：GitHub管理 / Vercelデプロイ
  • 改善：計測を踏まえたUI/導線最適化
デモ（別タブ） GitHub

画面（テーマ / React）

※ 埋め込み不可の場合は別タブで確認してください。

画面（Flutter）

※ 動作が重い場合は別タブで確認してください。

Flutter App（Webデモ）

WordPress REST API と連携したモバイルUIをFlutterで実装し、Webデモとして公開しています。 Firebase/GA4の計測を踏まえ、改善サイクルに繋がる設計で検証しています。

技術
  • Flutter / Dart
  • WordPress REST API
  • Firebase Analytics（GA4）
  • Vercel（Webデモ）
テーマ（設計ポイント）
  • 一覧→詳細→検索の導線
  • カードUI/余白で可読性を担保
  • 画面遷移・計測イベントの設計
文書（説明）
  • API連携を前提に画面設計→UI実装
  • 計測（screen_view等）を踏まえ改善
  • 運用：GitHub管理 / デモ公開
デモ（別タブ） GitHub

テーマ全体：レスポンシブプレビュー

Mobile / Tablet / PC の幅で、https://next.gamewidth.net/ を表示します。

※ iframeで表示できない場合は、CSP / X-Frame-Options の制限です。別タブで確認してください。