Daichi's Portfolio

WEB CODER / FOR PRODUCTION STUDIOS

ズレない実装、崩れないサイト

「渡したら、そのまま返ってくる」コーディング

実績を見る
料金表
作業風景

Works

制作実績

VIEW ALL WORKS
  • Ankf of Eternityのコーポレートサイト

    架空サイト

    Ankh of Eternity

    担当：Figmaのデザインカンプをもとに静的コーディング
    HTML / CSS(Sass) / JavaScript

    架空サイト

    Ankh of Eternity

    担当
    コーディング（全1ページ）
    仕様技術
    HTML / CSS(Sass) / JavaScript
    制作期間
    1週間
    制作のポイント
    • Figmaのデザインから仕様を読み取り、必要な機能を自ら整理して開発を進行しました。
    • コンポーネントごとにコードを切り出し、再利用性・保守性の高い構造を実現。
    • スクロールボタンでページの一番下まで行き再度スクロールボタンを押すとページ最上部に行くようにコーディング。
    サイトを見る
  • MORISHITA CORPORATIONのコーポレートサイト

    架空サイト

    MORISHITA CORPORATION

    担当：Figmaのデザインカンプをもとに静的コーディング
    HTML/ CSS / JavaScript

    架空サイト

    MORISHITA CORPORATION

    担当
    コーディング（全10ページ）
    仕様技術
    HTML / CSS(Sass) / JavaScript
    制作期間
    2週間
    制作のポイント
    • Figmaのデザインから仕様を読み取り、必要な機能を自ら整理して開発を進行しました。
    • JavaScriptでは、ドロップダウン、サムネイル画像切替などを実装しました。
    サイトを見る
  • SUPPLEの架空サイト

    架空サイト

    SUPPLE

    担当：Figmaのデザインカンプをもとに静的コーディング、オリジナルのWordPressテーマ構築
    HTML / CSS(Sass) / JavaScript / WordPress

    架空のサイト

    SUPPLE

    担当
    コーディング（全7ページ）オリジナルのWordPressテーマ構築
    仕様技術
    HTML / CSS(Sass) / JavaScript / WordPress
    制作期間
    2週間
    制作のポイント
    • 静的 HTML を WordPress テンプレートへ置き換え、テーマとして正しく動作する構造を意識。
    • カスタム投稿タイプ・タクソノミーを用いた 絞り込み検索（キーワード × エリア） を導入。
    • WordPress標準関数を積極的に活用し、拡張しやすいテーマ構造を学ぶことを目的に制作しました。
    サイトを見る
  • MATSUYAMA CLINICのコーポレートサイト

    架空サイト

    MATSUYAMA CLINIC

    担当：Figmaのデザインカンプをもとに静的コーディング
    HTML / CSS(Sass) / JavaScript

    架空サイト

    MATSUYAMA CLINIC

    担当
    コーディング（全6ページ）
    仕様技術
    HTML / CSS(Sass) / JavaScript
    制作期間
    1週間
    制作のポイント
    • Figma デザインに忠実でありながら、構造が分かりやすいコーディングを意識。
    • 可読性・再利用性を高めるため、SCSS を導入し設計を学習。
    • 初学者課題ながら、長期運用を想定した CSS 設計を意識して制作しました。
    サイトを見る
  • Café Lumière のコーポレートサイト

    架空サイト

    武者への道

    担当：Figmaのデザインカンプをもとに静的コーディング、オリジナルのWordPressテーマ構築
    HTML / CSS(Sass) / JavaScript / WordPress

    架空サイト

    武者への道

    担当
    コーディング(6ページ)オリジナルのWordPressテーマ構築
    仕様技術
    HTML / Sass / JavaScript / WordPress
    制作期間
    2週間
    制作のポイント
    • 静的 HTML から WordPress テーマへ変換し、運用を見据えたテンプレート構造を学習。
    • カスタムフィールド・検索機能・おすすめ記事管理など、実務で頻出する要素を取り入れました。
    • 既存コードを参考にしつつ、実装意図を理解しながら構築することを重視しました。
    サイトを見る

Service

対応業務

コーディング代行

Figma・XD・PSD などのカンプをお預かりし、余白と文字組みを崩さずに実装します。レスポンシブ対応、表示速度、SEO の基本構造まで含めて対応いたします。

WordPress構築

自作テーマでの構築、既存テーマのカスタマイズ、カスタム投稿やカスタムフィールドの設計に対応します。クライアントさまが更新しやすい管理画面に整えます。

アニメーション実装

GSAPを中心に、スクロール連動やページ遷移の演出を実装します。動きの意図をご共有いただければ、参考サイトからの再現もいたします。

※上記以外のご相談、既存サイトの修正や表示崩れの調査なども承っております。まずは対応可否だけでもお気軽にお問い合わせください。

About

自己紹介

2024年4月から2026年4月までWeb制作会社が運営する「HELLO MENTOR」にて、現役の製作者からフィードバックを受けながら、実務を想定した制作を行なっていました。レスポンシブ対応やWordPressのオリジナルテーマの作成などを習得。 2026年5月からはアパレル系の企業にて新規ページの制作、既存ページの修正などを担当しています。 現在は企業に勤め、日々の業務を通じて技術力向上に努めております。 ご依頼いただいた際は、ご満足いただけるよう責任を持ってご対応させていただきます。

Skill

  • GSAP
  • Splide
  • figma
  • Git

CODING POLICY

デザイナーさまの意図を汲みとり、1px の判断を勝手に変えないこと。迷ったら確認し、確認の回数は少なくすること。

Price

料金表

トップページ コーディング（レスポンシブ対応込）
¥50,000〜
下層ページ（1ページ）
¥10,000〜
LP コーディング
¥50,000〜
WordPress 化（自作テーマ実装）
¥50,000〜
アニメーション実装（1箇所につき）
¥10,000〜
お問い合わせフォーム設置
¥5,000〜
既存サイトの修正・表示崩れ対応
¥5,000〜

※ 上記は目安の料金です。ページ数・実装内容・CMSの有無・使用テーマやプラグインにより前後いたします。ご予算に合わせたご提案も可能ですので、まずはお気軽にご相談ください。

Flow

ご依頼の流れ

  1. STEP 01

    お問い合わせ

    本サイトのフォームよりご連絡ください。ご予定の内容・ページ数・希望納期をお知らせいただけると、初回の返信で概算までお伝えできます。

  2. STEP 02

    お見積り・内容確認

    デザインデータを拝見し、実装範囲・アニメーションの有無・CMS の要否を確認のうえ、正式なお見積りと納期をご提示いたします。

  3. STEP 03

    コーディング

    着手後は進捗を随時ご共有します。判断に迷う箇所はまとめてご確認し、やり取りの往復を最小限に抑えます。

  4. STEP 04

    ご確認・修正

    確認用 URL をお送りします。デザインとの差異やご要望をまとめてお知らせいただき、修正対応いたします。

  5. STEP 05

    納品

    データ一式を納品いたします。サーバーへのアップロードや公開後の軽微な調整も、ご希望に応じて対応可能です。

Contact

お問い合わせ

お仕事のご依頼、対応可否のご確認、概算のご相談などお気軽にどうぞ。2営業日以内にご返信いたします。

ご依頼の種類