works

画像をクリックすると、各サイトが別タブで開きます。 ※サイトタイトルに(デモ)と表記しているサイトについて、企業名·ロゴ·画像·テキストは、ポートフォリオ用に作成したデモコンテンツです。
実在の団体・製品・サービスと関係がありません。デザイン・実装の参考としてご覧ください。

  • はなまる動物病院 コーポレートサイト(デモ) サイトを見てみる

    はなまる動物病院 コーポレートサイト(デモ)

    【担当範囲 (以下の工程を1人で担当)】
    企画(3C分析・ペルソナ設計・カスタマージャーニーマップ・USP設計)、ワイヤーフレーム、デザイン、コーディング(WordPress/PHP実装、ACF・CF7設定)、SEO対策、本番サーバー移行・公開まで

    【使用技術】
    WordPress / PHP / ACF / CF 7 + Cloudflare Turnstile / SEO / Vanilla JavaScript / CSS(レスポンシブ)


    ① 企画からSEO・公開まで一気通貫で担当
    3C分析・USP設計といった企画工程からコーディング・SEO対策・本番移行まで全工程を一人で担当。
    「爬虫類対応が伝わらない」という架空課題をUSPと情報設計に落とし込み、根拠に基づいたサイト構成を実現しました。
    ② ライブラリに頼らない自前JS実装
    ヒーロー背景のスライドショーや横スクロールカルーセルをライブラリに頼らずVanilla JSとWeb Animations APIで自前実装。
    読み込み時のちらつきが発生しないように、細かい動作にも配慮し制作しました。

  • 機器メーカー(デモ) サイトを見てみる

    機器メーカー(デモ)

    【担当範囲 (以下の工程を1人で担当)】
    企画、ワイヤーフレーム、デザイン、コーディング(WordPress/PHP実装、ACF・CF7設定)、SEO対策、本番サーバー移行・公開まで

    【使用技術】
    WordPress(オリジナルテーマ) / HTML / CSS / JavaScript / PHP

    機器メーカーのコーポレートサイトを想定し、製品情報の信頼性と比較のしやすさを意識して設計しました。

  • IT企業(デモ) サイトを見てみる

    IT企業(デモ)

    【担当範囲 (以下の工程を1人で担当)】
    企画、ワイヤーフレーム、デザイン、コーディング(WordPress/PHP実装、ACF・CF7設定)、SEO対策、本番サーバー移行・公開まで

    【使用技術】
    WordPress(オリジナルテーマ) / HTML / CSS / JavaScript / PHP

    ・スクロール体験を意識した動きのある演出
    各セクションはスクロールに応じて自然に表示されるアニメーションを実装しています。
    ・よくある質問では、カテゴリーで絞込機能を実装しました。