デザインを忠実に再現し
公開後の修正・追加にも対応しやすい
HTML/CSSを制作します

スマホ対応・フォーム・JavaScriptまで
実案件を想定して実装します

Works

  • 建築会社
    コーポレートサイト（架空案件）

    建築会社コーポレートサイトのトップ画面 ※ 閲覧時にBasic認証がかかっています

    建築会社のサービス内容や施工事例が短時間で把握できる構成を意識し、訪問者が迷わず問い合わせへ進める導線設計を行いました。

    • HTML / CSS（レスポンシブ対応）
    • JavaScript（UI制御、フォーム動作）
    意識した点
    • SP・PC両環境でレイアウト崩れが起きないよう検証し、ハンバーガーメニュー開閉時のスクロール挙動を含めて調整しました。
    • PHP工房を用いてメール送信機能を実装。
      フォーカストラップやスクロール固定を組み込み、送信完了までのユーザー体験を意識しました。
    • iPhone実機での表示確認を行い、hover挙動や余白バランスなど細かな表示差異を調整しました。
    • 実案件での修正や機能追加を想定し、第三者が把握しやすいクラス設計・HTML構造を意識しました。

    本サイトは閲覧確認用のBasic認証を設定しています。 ID：portfolio / PW：portfolio

  • 人材派遣サービス向け
    ランディングページ（架空案件）

    人材派遣サービス向けLPのトップ画面 ※ 閲覧時にBasic認証がかかっています

    人手不足に悩む施設担当者が、サービス内容を短時間で理解し、問い合わせまで迷わず進める構成を想定しています。

    • HTML / CSS（レスポンシブ対応）
    • JavaScript（UI制御、フォーム動作）
    意識した点
    • スマートフォンからの閲覧・問い合わせが多いことを想定し、モバイル表示時でも入力しやすく、離脱しにくいフォーム動線を意識して実装しました。
    • 画面サイズごとのレイアウト調整に加え、JavaScriptで入力〜送信完了までの一連の動きを再現しています。
    • 実案件での修正や機能追加を前提に、クラス設計や構造が把握しやすいマークアップを意識しました。

    本サイトは閲覧確認用のBasic認証を設定しています。 ID：portfolio / PW：portfolio

  • 架空のコーポレートサイト
    （模擬案件）

    コーポレートサイトのトップ画面 ※ 非公開案件（学習用模擬制作）
    • HTML / CSS（レスポンシブ対応）
    • Git/GitHub(提出・修正を想定した運用)
    意識した点
    • デザインカンプをもとに、余白や要素の重なりを含めたレイアウト再現を重視してコーディングしました。
    • 実案件での修正や機能追加を前提に、クラス設計や構造が把握しやすいマークアップを意識しました。
    • Git/GitHubによるバージョン管理のもと、提出・レビューを想定した制作を行いました。
      後からの修正や確認がしやすいよう、変更内容が分かる単位でコミットしています。

    守秘義務・公開制限のため、詳細は面談時に説明可能

Skills

  • HTML / CSS（レスポンシブ対応）
  • vanilla JavaScript、jQuery
  • Git/GitHub（チーム開発・提出管理）
  • PHP（メールフォーム実装）

About

名古屋を拠点に活動しているWebコーダーの宮部です。 HTML / CSS / JavaScriptを中心に、デザインを忠実に再現するコーディングを学習・実践しています。

単に見た目を再現するだけでなく、 「更新しやすい構造」「修正しやすい設計」を意識したマークアップを心がけています。 実案件を想定し、Git / GitHubを用いたバージョン管理や、 レスポンシブ対応・UI挙動の確認まで丁寧に行っています。

まだ実績は多くありませんが、 一つ一つの制作を通じて着実にスキルを磨いています。 誠実な対応と継続力を強みとして、長く信頼いただけるコーダーを目指しています。

Contact

※ 本フォームはポートフォリオ用のデモです。送信は行われません。