AGENCYCoding from design comps like XD and Figma.
XdやFigmaなどのデザインカンプからの
コーディング代行
Xd・Figma・Photoshop（フォトショップ）などのデザインカンプからのコーディングについて紹介します。
デザインカンプを忠実に再現したサイトを作成します。
コーディングアーミーによる
デザインカンプからのコーディングのメリット
CODING ARMYによるデザインカンプからのコーディングのメリットをご紹介します。
Xd・Figma・Photoshop(フォトショップ)・
Illustrator(イラストレーター)からのコーディングにも対応
コーディングアーミーはXd・Figma・Photoshop・Illustratorで制作されたデザインからのコーディングが可能です。どのデータからも基本プランでソリッドレスポンシブに対応しています。
再現度の高いデザインカンプからのコーディングを実現
入稿いただいたデザインカンプを忠実に再現し、精密なコーディングを実現。細部の動きやレイアウトにもこだわり、意図通りの美しいWebサイトを構築します。
レスポンシブコーディングを実現
多様なデバイスに最適化されたレスポンシブコーディングを実現。画面サイズに応じた柔軟なデザイン調整で、快適なユーザー体験を提供します。
レスポンシブコーディングのサービス詳細はこちら検索エンジンにもわかりやすいSEOを意識したコーディング
閲覧者に分かりやすいだけでなく、検索エンジンにわかりやすいコーディングを意識。タグを適切に配置し、ご納品データを作成します。
デザインカンプからのコーディングとは
デザインカンプからのコーディングに関する情報をご紹介します。
デザインカンプとは
デザインカンプはデザインの完成見本のことで、「Design Comprehensive Layout」を略したものです。
色やフォント、画像やテキストのレイアウトなどのビジュアル要素を詳細まで決定し、Webサイトの完成形をひと目で分かるように制作します。
ワイヤーフレームが線や図形を使ってページの構成や情報の配置を示す設計図であるのに対し、完成形のビジュアルがひと目で分かるようにXDなどのデザイン用ツールを使って作成するのがデザインカンプです。クライアントや制作担当者間でイメージを共有し、承認を得てからhtml/cssコーディングの工程に進むことで、認識のズレを防ぎます。
デザインカンプ作成に役立つツール
Adobe XD
UI/UXデザインに特化し、自動アニメーション機能による動きの検証まで対応可能
Figma
ブラウザベースのデザインツールで、リアルタイムの共同作業が可能
Adobe Photoshop
写真の加工や合成に特化した画像編集ツールで、イラストの作成も可能
Adobe Illustrator
ベクターグラフィックの作成に優れ、ロゴやアイコンのデザインに最適
デザインカンプからのコーディング代行・外注・依頼の際のポイント
デザインカンプからのコーディング代行・外注・依頼の際に気を付けておくべきポイントをご紹介します。
レスポンシブデザインで作成、またはPC/SP(スマホ)
コーディング用のデザインを用意する
レスポンシブデザインで制作することで、PC・スマホ両方に最適化されたサイトを実現。
デバイスごとにデザインを分ける場合は、それぞれの仕様に適したデザインカンプを用意しておくとスムーズに依頼することが可能です。
コーディングアニメーションを明確に伝える
CODING ARMYは対応できるアニメーションの種類が豊富。参考サイトやXDのプロトタイプを用いてコーディングアニメーションのイメージを明確に伝えることで、ご希望に沿ったサイト制作が可能です。
アニメーションのコーディングのサービス詳細はこちら
CMSコーディング実装の際の仕様を明確に伝える
CMSをWebサイトに実装する場合、希望する仕様を明確に伝えることで、認識のズレが起こらずサイト公開までスムーズに進行できます。
WordPressの構築を含むコーディングのサービス詳細はこちらデザインカンプからのコーディングの費用・相場
CODING ARMYにデザインカンプからのコーディングをご依頼いただいた場合の費用相場です。
ご依頼内容に応じて料金は異なりますので、詳細なお見積もりはお問い合わせください。
LP(ランディングページ)コーディング費用相場
Web広告やキャンペーン用のLP(ランディングページ)などの1ページだけのコーディングを行います。
料金目安
¥40,000～ / PAGE
- ※ソリッドレスポンシブ
- ※天地8,000pxを想定した目安金額です。
- ※想定の長さを超える場合は、別途お見積りとなります。詳細はお問い合わせください。
- ※デザインや仕様内容により金額は変動いたします
トップページのコーディング費用・相場
コーポレートサイトや採⽤サイトなど、複数ページで構成されるホームページのトップページのコーディングを⾏います。
料金目安
¥40,000～ / 5000px
- ※ソリッドレスポンシブ
- ※天地5,000pxを想定した目安金額です。
- ※想定の長さを超える場合は、別途お見積りとなります。詳細はお問い合わせください。
- ※デザインや仕様内容により金額は変動いたします
下層ページのコーディング費用・相場
コーポレートサイトや製品サイトなど、複数ページで構成されるホームページの下層ページのコーディング作業を代行します。
料金目安
ライトページ
¥5,000～/ 2000px
スタンダードページ
¥10,000～/ 4000px
フルページ
¥15,000～/ 6000px
既存モジュール適用対応
¥7,500～/ 5000px
ページ複製・差し替え対応
¥5,000～/ 5000px
- ※表示価格は、ヘッダー・フッターを除いた想定ページ長を基準とした目安金額です。
- ※ページの長さ・デザイン・仕様内容により金額は変動し、想定を超える場合は別途お見積りとなります。
- ※既存モジュール適用対応には、事前に構築済みのモジュールを使用し、スタイルガイドおよび指示書に記載された仕様どおりに実装する対応です。
新規モジュールの作成、既存モジュールの改修・亜種作成、デザイン調整・仕様検討等は含まれません。
該当する場合は、通常の1ページ制作費用として算出いたします。 - ※ページ複製・差し替え対応には、レイアウト変更・スタイル調整・構造変更・仕様追加等は含まれません。
該当する場合は、通常の1ページ制作費用として算出いたします。
デザインカンプからのコーディングの代行・制作の流れ
CODING ARMYにデザインカンプからのコーディングをご依頼いただいた場合の、制作のフローをご紹介します。詳細なフローはご依頼いただく内容によって異なりますので、詳しくはお問い合わせください。
-
STEP 1
お問い合わせ
お問い合わせフォームへコーディング依頼に必要な情報をご記入いただきご連絡ください。
-
STEP 2
お見積もり
必要に応じてコーディングに長年関わったコンシェルジュがWebサイトの詳細をヒアリング。
お見積もり価格・スケジュール(納期)をお伝えいたします。 -
STEP 3
ご発注手続き（シート入力・デザインデータ等のご提出）
弊社指定のシートにご入力いただき、デザインデータ（XD／Figma／PSD／AI）や指示書・仕様書などの資料をご提出ください。
内容確定後、確定見積書兼発注書にご署名またはご押印をいただき、ご返送をもって正式なご発注となります。 -
STEP 4
Webサイトのコーディング
実績あるコーダーがご依頼内容に合わせてコーディングに着手。
仕上がったデータはデザインカンプやご希望を再現できているか、品質チェックを行います。 -
STEP 5
お客様チェック・修正対応
コーディングが完了しましたら、お客様でテスト検証を実施いただきます。修正がございましたらご連絡ください。
(デザイン/仕様書や指示書からの変更の場合は、追加お見積もりをご提示した上での修正対応となることがございます。) -
STEP 6
Webサイトの納品・公開
修正・調整の完了後、納品データをご提出もしくは本番公開作業をいたします。
デザインカンプからのコーディング代行のよくある質問
デザインカンプからのコーディング代行に関するよくある質問とその回答をご紹介します。
デザインカンプデータを入稿する際の注意点はありますか?
ご入稿いただく際、下記の4点をご確認ください
- デザインデータのご入稿時は書き出したJPEG画像を必ずご送付ください。 (Adobe製品のバージョンにより、オブジェクトの配置にズレが生じる可能性があるため)
- 画像はリンクでなく、埋め込みをお願いします。
- Web用のサイズ(PC版の場合は横幅1000px前後)で作成してください。
- Adobe Illustrator形式でご入稿の際は、アウトライン前と後の両方のデータをご送付ください。
- レイヤー・グループの整理、フォント・カラー・余白・マージンなどのルールの統一、アニメーションや動きの指示を明記いただくという点にご注意いただきますと、進行がスムーズです。
途中でデザインが変更になったのですが、対応は可能でしょうか?
デザインデータが重いのですが、入稿の際の注意点はありますか?
