デザイン持ち込みのコーディング代行
CODING SERVICES
お手元のデザインデータを、Webサイトとして公開できる形に仕上げるコーディング専門サービスです。
コーディング内容やご予算に応じて柔軟に対応いたします。まずはお気軽にご相談ください。
料金表
PRICE
要件に応じてお見積もりいたします。お気軽にご相談ください。
基本料金
HTML／CSS／JavaScriptを用いて、静的なWebページをコーディングする場合の、1ページあたりの基本料金です。
| トップページ | Webサイトの顔となるページ | 40,000円～ |
|---|---|---|
| 下層ページ(固有デザイン) | 独自のレイアウトで構成されたデザイン | 18,000円～ |
| 下層ページ(汎用デザイン) | 複数のページで使い回せる汎用的なデザイン | 12,000円～ |
| 下層ページ流し込み | 汎用デザインと同じレイアウトで作成する、2枚目以降のページ追加 一般的なテキスト中心のページを想定し、1ページにつき画像3枚までの配置を含みます。 文章量・画像枚数が多い場合、またはCSSによるレイアウト調整が必要な場合は別途お見積もりいたします。 | 3,300円～ |
| LP（ランディングページ） | 1ページ構成のWebサイト | 60,000円～ |
トップページ・下層ページは、PCデザインの高さを基準とし、縦4,000pxまでが基本料金内です。
LP（ランディングページ）は、PCデザインの高さを基準とし、縦10,000pxまでが基本料金内です。
デザインや仕様により、価格は変動します。
WordPress導入・カスタマイズ
ブログやお知らせを自分で更新したい人向けに、WordPressの導入・設定・テーマ制作を行います。
| WordPress基本設定のみ | WordPressインストール・初期設定、サーバー設定、プラグイン導入 | 33,000円～ |
|---|---|---|
| オリジナルテーマ作成 | 独自のデザインをWordPressに最適化し、管理・運用しやすいオリジナルのテーマを作成（WordPress基本設定を含む） サイトの規模や機能の数によって価格は変動します。 | 110,000円～ |
| 既存テーマのカスタマイズ | 既存テーマのレイアウト変更やデザイン調整 元のテーマの構造に依存するため、要件によりお見積もりいたします。 | 33,000円～ |
| 既存WPサイトへのページ組み込み | 運営中のWordPressサイトに、新たな固定ページやLPを1枚組み込みます。 | 22,000円～ |
| カスタム投稿タイプ追加 | カスタム投稿タイプを追加して、施工事例や実績などの投稿機能を拡張します。 | 16,500円～／1件 |
| カスタムフィールド実装 | 入力欄のカスタマイズ | 11,000円～ |
コーディング料は別途必要です。
アニメーション実装
Webサイトに動きを加え、ユーザー体験を向上させるための実装です。
| スライダー（カルーセル） | 複数の画像やコンテンツを、スライドやフェードなどの演出で切り替え | 11,000円～ |
|---|---|---|
| メガメニュー | 多くの項目を一覧で表示できる大規模なナビゲーションメニュー メガメニューや、複雑なアニメーションを伴うメニューについて、仕様によりお見積もりいたします。 標準的なハンバーガーメニューやドロップダウンメニューは、コーディング料金に含みます。 | 11,000円～ |
| アコーディオン／タブ切り替え | クリック操作で情報の表示・非表示を切り替えるUI （開閉する「よくある質問」や、内容の表示切り替えなど） |
11,000円～ |
| モーダルウィンドウ | クリックで表示されるポップアップウィンドウ（画像拡大や解説表示など） | 11,000円～ |
| 軽微なアニメーション | ボタンやリンクのホバー時の挙動、ふわっと浮き上がる出現演出など | 3,300円～ |
表示価格は1点あたりの料金です。
アニメーションの動きや仕様により、価格は変動します。
記載のないもの、ご不明な点はお問い合わせください。
標準対応項目
基本料金内で対応する項目です。
| PC／スマホ／タブレットレスポンシブ対応 | デザインデータはPC・スマホの2種をご用意ください。タブレット表示は当工房にて調整いたします。 スマホ版のデザインデータがない場合はご相談ください。別途デザイン調整費にて調整を承ります。 |
|---|---|
| 主要ブラウザ対応 | Chrome／Safari／Edge／Firefox最新版 |
| 基本的なページ内動作 | スムーススクロール等 |
| 画像最適化 | 1ページあたり20枚までの画像圧縮・サイズ調整・次世代フォーマット対応。 （21枚目～の画像処理や、トリミングなど個別最適化が必要な場合は別途見積もり） |
| デザインカンプに忠実な実装 | ピクセルパーフェクト等、ご指定の基準に合わせます。 |
| SEO内部対策 | HTML構造・meta情報・OGP設定・基本的な構造化データ〈JSON-LD〉など、検索エンジンに正しく内容を伝えるための基本的な対策を行います。（高度な設計が必要なJSON-LDは別途見積もり） |
その他のオプション
| フォーム設置 | お問い合わせフォームや資料請求フォームなどの設置 確認画面やサンクスページの有無で料金が変わります。 | 11,000円～／1点 |
|---|---|---|
| 計測タグ設置 | GA4、GTM、広告タグなどの計測タグを設置 | 3,300円～／1点 |
| 画像最適化 | 画像の圧縮やサイズ調整など、表示速度向上のための最適化 基本的な画像最適化はコーディング料金に含まれます。1ページあたり20枚を超える画像処理や、トリミングなど個別最適化が必要な場合は追加料金となります。 | 3,300円～／1ページ |
| 表示速度最適化（PSI） | Googleの評価指標に基づくPageSpeed Insightsのスコアを向上させるための最適化 改善幅は環境により異なるため、調査後の個別見積もりとなります。 | 33,000円～ |
| ディレクション費（進行管理費） | デザインデータと仕様（指示）が揃っている通常のご依頼では不要です。 動作や表示の細かなルールが決まっておらず、最適な実装方法のご提案や仕様整理からサポートが必要な場合や、代理店・制作会社様からのご依頼で、エンドクライアント様と直接の打ち合わせが発生する場合などにお見積もりいたします。 | 制作費全体の20%（最低単価30,000円） |
| 特急料金 | 短納期を希望される場合の追加料金です。 | 制作費全体の20%～30% |
記載のないもの、ご不明な点はお問い合わせください。
ご相談・お見積もり依頼はこちら
「どの項目が必要かわからない」といった場合でも大丈夫です。どうぞお気軽にご相談ください。
入稿データについて
SUBMISSION DATA
コーディング作業に必要なデータをご案内します。
ご不明な点は、お気軽にお問い合わせください。
| 必要なデータ |
|
|---|---|
| 対応可能データ | Figma／Adobe XD／Photoshop／Illustrator／Canva その他のデザインツールもご相談ください。 「手書きラフ」「画像1枚」「Canva」などは、デザイン調整費として追加料金を頂戴いたします。 |
修正対応について
REVISIONS
安心して運用を開始していただけるよう、修正対応の範囲と保証期間についてご案内します。
| 納品後の保証期間 | 納品（検収）後、30日間の保証期間を設けております。 |
|---|---|
| 無償対応の範囲 | 保証期間内にご連絡いただいた制作上の不具合や、軽微なテキスト変更については、無償で修正いたします。納品後は、デザインデータとの相違やコーディングミス等の不具合がないか、必ずご確認ください。 |
| 有償対応 |
|
実装品質への取り組み
OUR APPROACH TO QUALITY
制作の土台となる「仕様を正確に読み取り、再現する力」について、コーディング実務検定に合格しています。
実際の制作では、コミュニケーションを通じて意図を汲み取り、仕様書だけでは見えない使い心地やSEO・アクセシビリティに配慮した実装を心がけています。
コーディングの流れ
FLOW
-
STEP 01
ご依頼・ご相談
まずはメールフォームよりお気軽にご相談ください。お見積もりが必要な場合は、ご希望の納期と、確定したデザインの見本（jpg、pngなどの画像でもOK）の共有をお願いしております。
-
STEP 02
内容確認・お見積もり
デザインや仕様を確認し、お見積書と納期の目安をご案内いたします。正確なお見積もりのため、内容に不明点がある場合は、ヒアリングにご協力をお願いいたします。
-
STEP 03
ご契約
内容にご同意いただけましたら契約を締結します。
制作ボリュームにより、着手金（制作費の50％）を頂戴する場合がございます。
-
STEP 04
デザインデータ・素材のご提供
デザインデータ、指示書、仕様書、その他コーディングに必要な資料をご共有ください。
-
STEP 05
コーディング
すべてのデータが揃った時点で正式にスケジュールを確定し、着手いたします。進捗は必要に応じて随時ご報告いたします。
-
STEP 06
確認・修正
当工房のテスト環境にアップロードし、ブラウザでの動作確認やデバイス実機でのチェックを行ったうえで、テスト環境をご案内します。サイトをご確認いただき、必要に応じて修正・調整を行います。
-
STEP 07
納品・公開
最終確認後、残金のお支払いをお願いいたします。ご入金を確認次第、ファイル一式の納品、または本番環境へのアップロード作業を行います。
法人のお客さまでお支払いサイクルの規定がある場合は、事前にご相談ください。
-
STEP 08
30日間保証
納品から30日間を保証期間として設けております。期間内にご連絡いただいたコーディングミス等の制作不備は、無償で迅速に修正いたします。軽微なテキスト変更も可能です。
