山本剛工務店HP

山本剛工務店HP

WordPress 実案件
概要
山本剛工務店の公式サイトを新規構築。FLOCSSベースでコンポーネント化し、保守性と再利用性を確保。スライダー／モーダル／ドロップダウンなどのインタラクションをJavaScriptで実装し、最終的にWordPress化して更新運用を容易にしました。
目的
採用母集団を増やし、応募→面談までの転換率を高める。
使用スキル
HTML / CSS（Sass）/ JavaScript / PHP
工夫・こだわり
  • ドロップダウンメニュー
  • ブログページの実装
サイトURL
https://www.yamamoto-tsuyoshi.com/
担当
コーディング/一部デザイン
制作期間
27日間
TETOTE

TETOTE

WordPress
概要
オンラインの上級課題として制作。 トップページはファーストビューを過ぎた時点でヘッダーを下層用に切り替えるなど細かな指定が多く、静的コーディングからWordPress化する際に大きな壁がありました。加えて、追従する目次（Table of Contents）など初実装の要素にも取り組みました。
使用スキル
HTML / CSS（Sass）/ JavaScript / PHP
工夫・こだわり
  • 追従目次（TOC）の実装
  • ヘッダーの切り替え
サイトURL
https://gainzu1006.com/tetote/
担当
コーディング／一部デザイン
制作期間
18日間
Onomichi

Onomichi

LP
概要
オンラインスクールの中級課題としてLPを制作。スライダー・モーダル・フォームのバリデーションなど、JavaScript中心で構築しました。疑問点はまず自走で検証し、要点のみメンターに確認。最終レビューは修正1点で合格。制作期間は30日で、このとき確立したCSS設計とコンポーネント分割が現在の実装スタイルの基盤になっています。
使用スキル
HTML / CSS（Sass）/ JavaScript
工夫・こだわり
  • オーバーレイ・フェード/スケールの細かなアニメーション
  • 必須／形式チェック、エラー表示の明確化、送信ブロックなどを実装
サイトURL
https://gainzu1006.com/works/onomichi/
担当
コーディング
制作期間
30日間
Caresend

Caresend

LP
概要
オンラインスクールの中級課題としてLPを制作。事前学習した FLOCSS に基づき命名と構造を統一し、共通クラスを先に設計してから実装することで、再利用性と保守性を高めつつコーディング時間を短縮しました。
使用スキル
HTML / CSS（Sass）/ JavaScript
工夫・こだわり
  • <picture> + srcset、width/height 明示と loading="lazy" でLCP改善-
  • -color などCSSカスタムプロパティで色・余白・フォントを一元管理
サイトURL
https://gainzu1006.com/works/caresend/
担当
コーディング
制作期間
5日間

縁の下から、
コードで成果を支える

デザインカンプを忠実に、
BEM×モバイルで手戻り最小化

ご覧いただきありがとうございます
フロントエンドエンジニアを目指す
山本康平のポートフォリオです
制作実績一覧
スクロールダウンの下矢印ボタン

skills

丁寧に、速く、長く使える実装を
カンプ再現とCSS設計で土台を固め、
レスポンシブで心地よい表示に

WordPressは編集しやすい
仕組みまで整えます

01
コーディング

コーディング

デザインカンプを高精度に再現。BEMなどのCSS設計で保守性を担保し、読みやすいHTML/CSSと軽量JSで拡張しやすいコーディングを行います。

02
レスポンシブ対応

レスポンシブ対応

モバイルファーストで流動性の高いレイアウトを設計。適切なブレークポイントと画像最適化で、各画面幅の可読性と操作性を最適化します。

03
WordPress構築

WordPress構築

WordPress構築は基礎を習得し、実装領域を拡張中です。テーマ階層とテンプレートタグを中心に、運用しやすいサイト実装を目指します。

about

プロフィール画像
  • 山本 康平｜未経験からWebコーダー志望
  • HTML/CSS(SCSS)とJavaScriptでデザイン再現性とFLOCSSによる設計に強み
  • WordPressのテーマ開発を習得中 Gulp+npmでビルド環境を整備、Figmaからの実装が得意
  • 使える技術： HTML / CSS(SCSS) / JavaScript / PHP / WordPress / jQuery / Gulp / VS Code / Figma
  • いま取り組んでいること： WordPressテーマ化（テンプレート階層・カスタム投稿）／アクセシビリティ
詳しいプロフィール

vision

確かな実装と報連相で
任せて安心なエンジニアになる

※知識を深めるため、
業務外での学習は毎日継続します！！
カレンダーのアイコン

1 - 3ヶ月目

現場に慣れ、基礎を固める

目的：

制作フローに慣れ、ミスなく作業できる状態になる

  • 既存コードの読解と簡単な修正で、HTML/CSS・WordPressの基礎理解
  • タスク管理と報連相を徹底し、進捗と課題をこまめに共有
カレンダーのアイコン

4 - 6ヶ月目

任された作業を一人でやり切る

目的：

自分担当のタスクを、品質と納期を守って完了させる

  • LP・下層ページのコーディングや簡単なWordPressカスタマイズを担当
  • レビュー指摘を整理し、同じミスを減らすコード改善
カレンダーのアイコン

7 - 9ヶ月目

小規模ページ〜LPの実装を任される

目的：

ページ単位の制作を通しで任せてもらえるレベルになる

  • LPや少数ページサイトを、レスポンシブ対応込みで実装
  • 表示崩れ・速度を自分でチェックし、画像最適化などで改善
カレンダーのアイコン

10 - 12ヶ月目

複数タスクをさばける安定した作業者になる

目的：

複数案件を並行しながらも、安定して成果物を出す。

  • 複数案件のタスクを整理し、優先順位をつけて進行
  • 共通パーツやコンポーネントのテンプレ化など、効率化を提案・実行
3年間の成長プランと将来像

contact

最後までご覧いただきありがとうございます
何かご質問などございましたら、お気軽にご連絡お待ちしております

    必須
    必須
    必須
    必須
    送信する

    上矢印のアイコン