×

山本剛工務店HP

WordPress 実案件

概要

山本剛工務店の公式サイトを新規構築。FLOCSSベースでコンポーネント化し、保守性と再利用性を確保。スライダー／モーダル／ドロップダウンなどのインタラクションをJavaScriptで実装し、最終的にWordPress化して更新運用を容易にしました。

目的

採用母集団を増やし、応募→面談までの転換率を高める。

使用スキル

HTML / CSS（Sass）/ JavaScript / PHP

工夫・こだわり

• ドロップダウンメニュー
• ブログページの実装

サイトURL

https://www.yamamoto-tsuyoshi.com/

担当

コーディング/一部デザイン

制作期間

27日間

×

TETOTE

WordPress

概要

オンラインの上級課題として制作。 トップページはファーストビューを過ぎた時点でヘッダーを下層用に切り替えるなど細かな指定が多く、静的コーディングからWordPress化する際に大きな壁がありました。加えて、追従する目次（Table of Contents）など初実装の要素にも取り組みました。

使用スキル

HTML / CSS（Sass）/ JavaScript / PHP

工夫・こだわり

• 追従目次（TOC）の実装
• ヘッダーの切り替え

サイトURL

https://gainzu1006.com/tetote/

担当

コーディング／一部デザイン

制作期間

18日間

×

Onomichi

LP

概要

オンラインスクールの中級課題としてLPを制作。スライダー・モーダル・フォームのバリデーションなど、JavaScript中心で構築しました。疑問点はまず自走で検証し、要点のみメンターに確認。最終レビューは修正1点で合格。制作期間は30日で、このとき確立したCSS設計とコンポーネント分割が現在の実装スタイルの基盤になっています。

使用スキル

HTML / CSS（Sass）/ JavaScript

工夫・こだわり

• オーバーレイ・フェード/スケールの細かなアニメーション
• 必須／形式チェック、エラー表示の明確化、送信ブロックなどを実装

サイトURL

https://gainzu1006.com/works/onomichi/

担当

コーディング

制作期間

30日間

×

Caresend

LP

概要

オンラインスクールの中級課題としてLPを制作。事前学習した FLOCSS に基づき命名と構造を統一し、共通クラスを先に設計してから実装することで、再利用性と保守性を高めつつコーディング時間を短縮しました。

使用スキル

HTML / CSS（Sass）/ JavaScript

工夫・こだわり

• <picture> + srcset、width/height 明示と loading="lazy" でLCP改善-
• -color などCSSカスタムプロパティで色・余白・フォントを一元管理

サイトURL

https://gainzu1006.com/works/caresend/

担当

コーディング

制作期間

5日間