01 / HTML / CSS
静的ページをコーディング
完成したFigmaから1ページを実装。レスポンシブ表示、指定リンク、合意した簡単な動きまで整えます。
ソース一式・確認画像・編集手順
本文6区画まで＋ヘッダー/フッター。フォーム送信やCMS機能は別途ご相談。
サービス一覧へ
Figmaのデザインを、
WEB / FIGMA IMPLEMENTATION
Figmaのデザインを、
使えるWebサイトへ。
制作会社・デザイナーの方、完成デザインをお持ちの事業者の方へ。HTML/CSS・WordPress・Shopifyに実装し、合意した更新機能と編集手順までお渡しします。
初回のご相談・お見積もりは無料です。契約前に対応範囲と費用をご案内します。
FIGMA TO CODE
納品先に合わせた、3つの実装。
支給デザインをどこで公開し、どの内容を更新するかに合わせて、納品物と確認環境を決めます。各メニューの対応範囲をご確認ください。
02 / WORDPRESS
お知らせと更新機能を組み込む
トップの実装に、標準投稿によるお知らせ一覧・詳細を追加。見出しや画像など、更新する箇所を決めて組み込みます。
テーマZIP・ステージングでの確認・更新手順
トップ＋お知らせ一覧/詳細。既存サイトの移行・障害復旧・WooCommerceは対象外。
03 / SHOPIFY
既存テーマへページを実装
既存のOnline Store 2.0テーマに、Figmaをもとにした固定ページテンプレートを追加。合意した文章や画像をテーマエディターで更新できます。
未公開テーマ・差分・更新手順
固定ページテンプレート1種、最大6セクション。全ストア構築やアプリ開発とは別のサービスです。
WEB IMPLEMENTATION
デザインを、更新できるサイトへ。
完成FigmaからWordPressへ実装した自主制作です。管理画面からの更新方法と、検証した環境をご確認いただけます。
Colorful Weekend / WordPress
デザインを、更新できるサイトへ
Figmaのトップページを、WordPressで実装。お知らせの一覧・詳細ページを追加し、お知らせは投稿画面から、トップの見出し・説明・メイン画像（1点）はカスタマイザー（外観設定）から更新できます。
ローカル検証の自主制作です。WordPressの公開デモはありません。制作画像と下の実装記録をご覧いただけます。
実装内容・確認範囲を見る
使う人のために考えたこと
Figmaで決まった配色・文字組み・PC/スマホの配置を再現しながら、お知らせやトップの文章・画像を運用者が更新できることを目指しました。
実装したこと
クラシックPHPテーマ、トップ、お知らせ一覧・詳細、記事検索、ページ送りを実装。標準投稿から記事を、カスタマイザー（管理画面の外観設定）からトップの見出し・説明・主画像を編集できます。お知らせとフッターは追加設計です。元Figmaのカートは非販売の案内に変更し、決済・注文機能は含めていません。
確認したこと
2026年10月17日、WordPress Playground（WordPress 7.1.3 / PHP 8.3.33 / SQLite）でPC・スマホの表示、管理画面の保存・表示反映、再起動後の保持、テーマZIPの新規インストールを確認しました。通常サーバー・MySQL、iOS/Android実機は未検証です。受託案件ではなく、掲載画像はAI生成のコンセプト画像です。
掲載例は自主制作です。WordPressの公開デモはなく、通常サーバー・MySQL、iOS/Android実機は未検証です。
ご用意いただくものと、進め方。
完成したPC・スマートフォンのFigma、原稿・画像をご支給ください。ゼロからの企画・デザイン・撮影を一式でお引き受けするサービスではありません。
1. 素材と更新箇所を確認
Figma、原稿・画像、実装するページと納品先を確認します。運用中に誰が、どの文章や画像を更新するかも先に伺います。
2. 範囲・費用・日程に合意
ページ量、検証環境、制作開始日・納期・確認ブラウザー・公開担当を確認し、個別にお見積もりします。公開作業と継続保守は別途合意します。
3. 実装と表示・更新の確認
合意したデザインと機能を実装し、対象環境で表示や操作を確認します。WordPressはご依頼に合わせたステージングでの確認を納品条件に含めます。
4. 納品と編集手順の受け渡し
納品先に合わせてソースやテーマ、確認記録、更新手順をお渡しします。正式納品前の仕様内修正はまとめて1回。納品後7日間は合意仕様の不具合申告を受け付けます。
FAQ
よくあるご質問
必要な素材、納品先、費用、納品後の対応についてまとめました。
完成したデザインがなくても依頼できますか？
このサービスは、完成したPC・スマートフォンのFigmaと原稿・画像をご支給いただく実装サービスです。必要な素材や未確定箇所を伺い、着手できる範囲を確認します。
WordPressでは、どこを更新できますか？
標準投稿によるお知らせと、合意したトップの見出し・文章・画像などを更新できるようにします。更新箇所を先に決め、編集手順とともにお渡しします。既存サイトの移行・障害復旧・WooCommerceは対象外です。
Shopifyストアの新規構築も含まれますか？
Figma実装は、既存のOnline Store 2.0テーマに固定ページテンプレート1種・最大6セクションを追加するサービスです。ストア全体の新規構築やアプリ開発は含みません。新規構築はECサイト制作・改善でご相談いただけます。
料金と納期はどのように決まりますか？
納品先、ページ量、素材の準備状況、検証環境を確認して個別にお見積もりします。制作開始日・納期・お支払い条件は着手前にご案内し、合意したうえで進めます。
納品後の修正や本番公開は含まれますか？
正式納品前の仕様内修正はまとめて1回、納品後7日間は合意仕様の不具合申告を受け付けます。内容の追加・変更、本番公開、継続保守は別途合意します。Shopifyの一般改修とは別のサービス条件です。
掲載しているWordPress事例は実案件ですか？
自主制作です。Playground環境での表示・管理画面更新・保持などを確認しました。通常サーバー・MySQL、iOS/Android実機で検証済みの実案件としては掲載していません。ご依頼の環境では別途確認します。
Figmaとご希望の納品先を、お聞かせください。
完成したデザイン、必要なページ、更新したい箇所を分かる範囲でお知らせください。素材と環境を確認し、対応範囲・費用・日程をご案内します。