Works
LP-Sample
英語学習サービスのランディングページ
担当範囲
使用技術
実装内容
- SEOを意識したセマンティックHTML
- PHPによるヘッダー・フッターの共通化
- UI実装（固定ヘッダー / ハンバーガーメニュー / スムーススクロール / アコーディオン / 追従バナー）
- フォーム実装（お問い合わせフォーム）
- 外部連携（WordPress REST APIによるブログ一覧表示）
- 基本設定（favicon設定）
WordPress-Sample1
オンライン英会話の運営会社
担当範囲
使用技術
実装内容
- SEOを意識したセマンティックHTML設計
- WordPressテーマ（Blocksy）のカスタマイズ
- オリジナルデザイン実装（コーポレートサイト想定）
- 投稿機能を利用した英語学習コラム一覧の表示
- プラグインContact Form 7を利用した問合せフォームの設置
- スライダー / アニメーション実装 / Google Maps埋め込みによるアクセス情報表示
- 固定ヘッダー / favicon設定
WordPress-Sample2
オンライン英会話サービスのブログサイト
担当範囲
使用技術
実装内容
- SEOを意識したセマンティックHTML設計
- WordPressテーマ（Astra）のカスタマイズ
- 投稿機能を利用したカテゴリー・記事一覧表示
- favicon設定
- プラグインHooksを利用したカスタマイズ
Coding
System UI-1
担当範囲
使用技術
実装内容
- UI/UXを意識した管理画面レイアウト設計
- AdminLTE 4をベースとしたオリジナルデザインへのカスタマイズ
- ダッシュボード実装（残ポイント / 予約レッスン / 受講時間 / 学習時間の表示）
- 会員機能（プロフィール編集 / 予約レッスン一覧 / お知らせ一覧）
- PHPによるログイン・ログアウト・セッション認証機能
- 共通レイアウト設計による管理画面のUI統一
- UI実装（ページネーション / 検索フォーム / ボタンアニメーション / ホバーエフェクト）
System UI-2
担当範囲
使用技術
実装内容
- 想定要件に基づいた管理画面設計・UIデザインを実施
- 会員管理・講師管理・レッスン管理機能を備えたダッシュボードを構築
- KPI表示・運営ログ表示・一覧検索・テーブルレイアウト・ページネーション実装
- 共通レイアウト設計による管理画面のUI統一
Skills
セマンティックなHTML、保守性を意識したCSS設計、レスポンシブ対応、SEOを考慮したマークアップを心がけています。
フロントエンド
HTML5 / CSS3（実務9年）, レスポンシブデザイン, Bootstrap 5（レスポンシブUI構築）, JavaScript（UI実装・アニメーション・Ajax・DOM操作）
プログラミング
PHP（WordPressカスタマイズ・共通パーツ化・簡易機能実装）
CMS
WordPress（オリジナルテーマ構築 / 投稿管理 / テーマ編集 / カスタマイズ / REST API対応）, BindUP
計測タグ・マーケティング
Google Tag Manager, Google Analytics, gtag.js 設置
デザインツール
Photoshop（カンプ制作・バナー・画像加工）
Figma / XD（UI設計・ワイヤーフレーム）
Canva（簡易デザイン制作）
Illustrator（基本操作）
開発環境
Visual Studio Code / Git / GitHubを用いた制作物のバージョン管理（AI生成コンテンツ含む） / WordPress / FTP / RLogin
その他
ECサイト運営（Amazon / 楽天市場 / Yahoo!ショッピング）
About
ポートフォリオサイトやコーポレートサイト、
ECサイトの制作・運用に携わってきました。
デザインからコーディング、WordPress構築、公開後の更新・運用まで
一貫して対応可能です。
直近6年間はオンライン英会話サービスの制作・運用を担当し、
HTML/CSS、JavaScript、PHPを用いた機能改修やページ更新、
フォーム調整など幅広い業務に従事してきました。
既存システムや運用フローを理解しながら、
ユーザーにとって分かりやすく使いやすいWebサイト制作を心掛けています。
子育て期間中は、子育てサロンにおける
クラフト企画など、アートを軸とした活動に取り組んできました。
身近な素材を使い、季節感を取り入れた企画を通して
親子で楽しめる時間づくりを大切にしてきました。
Portfolio Site
E-commerce site - Missh Kissh
Corporate Website - ワイエムオフィス株式会社
