実務案件
◆東京都文京区根津のお花の教室 花音
※実務案件として担当したWebサイトのトップページキャプチャです。
制作時期
2025年7月
サイト概要
東京都文京区根津にあるお花の教室の公式サイト
担当範囲
ホームページリニューアル（WordPress）
制作内容・使用技術
- WordPressを使用した既存サイトのリニューアル対応
- デザインおよび構成を見直し、情報を整理
- 固定ページを中心としたページ構成の調整
- HTML / CSSによるレイアウト調整、レスポンシブ対応（PC / SP）
- クライアントが更新しやすいよう、WordPress管理画面を意識した構成で実装
補足
実務案件として、クライアント要望をもとに
サイト全体のリニューアル対応を行いました。
◆PaperS
制作時期
2024年11月
URL
クライアント都合により現在は非公開
サイト概要
日本各地のフリーペーパーを紹介するWebメディアサイト
担当範囲
コーディング
制作内容・使用技術
- デザインカンプをもとにしたHTML / CSS / Sassでのコーディング
- トップページおよび下層ページを含む複数ページ構成に対応
- レスポンシブデザイン（PC / SP）対応
- 共通パーツのスタイル管理、クラス設計を意識した実装
- 指示書・マニュアルに沿った修正対応を経験
補足
実務案件として初めてコーディングを担当し、
制作フローや修正対応など、実案件ならではの進行を経験しました。
架空サイト作成（しょーごログコーディング課題）
※PC / スマートフォンでのレスポンシブ表示を確認できるキャプチャです。
※本画像は全て「しょーごログ」コーディング課題用に提供された
デザインカンプ・素材を使用しています。
※ポートフォリオページには全て個別にBasic認証を設定しています。
◆架空のサービスサイト（コーディング課題中級）
制作時期 2026年1月8日
URL https://wp-portfolio.online/portfolio/caresend/
※Basic認証を設定しています。
閲覧用ID・パスワードはお問い合わせ時にお伝えします。
サイト概要
架空の介護派遣サービス「CareSend」を想定した、サービス紹介用のトップページです。
デザインカンプをもとに、レイアウトや余白、文字組みの再現性を意識してコーディングを行いました。
制作内容・使用技術
- HTML / CSSによるコーディング（デザインカンプベース）
- トップページを中心としたページ構成の実装
- レスポンシブ対応（PC / スマートフォン）
- アコーディオン、ハンバーガーメニュー、スライドショーの実装（JavaScript / jQuery）
- レイアウトバランスや視認性を意識した調整
取り組みの目的
中級レベルのコーディング課題として、
デザインカンプからの忠実な再現と基本的なUIパーツの実装を一通り行えるかを確認することを目的に制作しました。
特に以下の点を意識して取り組んでいます。
デザイン意図を汲み取った余白・配置の調整
レスポンシブ時の見え方を考慮したレイアウト設計
アコーディオンやハンバーガーメニューなど、実務でも使用頻度の高いUIの実装
種別：しょーごログ コーディング課題（中級）
◆架空の内科医院サイト（コーディング課題初級EX）
デザインカンプをもとに、レスポンシブ対応を行った
架空の内科医院サイトのコーディング課題です。
制作時期 2025年7月22日
URL https://wp-portfolio.online/portfolio/ishii-clinic/
※Basic認証を設定しています。
閲覧用ID・パスワードはお問い合わせ時にお伝えします。
テーマ
架空の内科医院のWebサイト
制作内容・使用技術
- デザインカンプをもとにしたHTML / CSSによるコーディング
- トップページを中心としたページ構成の実装
- レスポンシブ対応（PC / スマートフォン）
- レイアウトや余白、文字組みなどの再現性を意識した実装
取り組みの目的
コーディング力向上を目的に、
実務を想定したレイアウト構成やスタイル調整に取り組みました。
種別：しょーごログ コーディング課題（初級EX）