Works
-
建築会社
コーポレートサイト（架空案件）
※ 閲覧時にBasic認証がかかっています
- HTML / CSS（レスポンシブ対応）
- JavaScript（UI制御）
- PHP（フォーム処理）
建築会社のコーポレートサイトを想定したコーディング作品です。
デザインカンプをもとにHTML/CSS/JavaScriptで実装し、サービス内容や施工事例が短時間で把握できる構成を意識しました。
（参考教材：しょーごログ 中級EX）本サイトは閲覧確認用のBasic認証を設定しています。 ID：portfolio / PW：portfolio
意識した点
- SP・PC両環境でレイアウト崩れが起きないよう検証し、ハンバーガーメニュー開閉時のスクロール挙動を含めて調整しました。
- ローディングアニメーションを実装。
- フォーカストラップやスクロール固定を組み込み、送信完了までのユーザー体験を意識しました。
- PHP工房を用いてメール送信機能を実装。
- iPhone実機での表示確認を行い、hover挙動や余白バランスなど細かな表示差異を調整しました。
- 実案件での修正や機能追加を想定し、第三者が把握しやすいクラス設計・HTML構造を意識しました。
-
人材派遣サービス向け
ランディングページ（架空案件）
※ 閲覧時にBasic認証がかかっています
- HTML / CSS（レスポンシブ対応）
- JavaScript（UI制御、フォームUI）
人材派遣サービス向けLPを想定したコーディング作品です。
フォーム入力から送信完了までの導線や、ユーザーが迷わず操作できるUI設計を意識して実装しました。
（参考教材：しょーごログ 中級）本サイトは閲覧確認用のBasic認証を設定しています。 ID：portfolio / PW：portfolio
意識した点
- スマートフォンからの閲覧・問い合わせが多いことを想定し、モバイル表示時でも入力しやすく、離脱しにくいフォーム動線を意識して実装しました。
- 画面サイズごとのレイアウト調整に加え、JavaScriptで入力〜送信完了までの一連の動きを再現しています。
- 実案件での修正や機能追加を前提に、クラス設計や構造が把握しやすいマークアップを意識しました。
-
架空のコーポレートサイト
（模擬案件）
※ 非公開案件（学習用模擬制作）
- HTML / CSS（レスポンシブ対応）
- Git/GitHub(提出・修正を想定した運用)
※クライアント案件を想定した模擬課題のため成果物の公開は控えています。
意識した点
- デザインカンプをもとにピクセル単位で再現し、レスポンシブ対応まで含めて実装しています。
- 実案件での修正や機能追加を前提に、クラス設計や構造が把握しやすいマークアップを意識しました。
-
Git/GitHubによるバージョン管理のもと、提出・レビューを想定した制作を行いました。
後からの修正や確認がしやすいよう、変更内容が分かる単位でコミットしています。