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で自前実装。
    読み込み時のちらつきが発生しないように、細かい動作にも配慮し制作しました。

  • LP焼肉(デモ) サイトを見てみる

    LP焼肉(デモ)

    【担当範囲 (以下の工程を1人で担当)】
    企画、ワイヤーフレーム、デザイン、公開まで

    【使用技術】
    Studio / CSS

    実装は、Studioで行いました。
    Studioの標準アニメーションで実装できないアニメーションは、CSSで実装しました。

  • エステサロン(デモ) サイトを見てみる

    エステサロン(デモ)

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

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

    エステサロンのホームページを想定し、ピンク×ブラウンの上品な配色で、静寂と贅沢を意識して高級感のある癒しの雰囲気をイメージ・設計しました。

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

    機器メーカー(デモ)

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

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

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