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ページだけのコーディングを行います。
料金目安
¥70,000/ PAGE
- ※ディレクション費込
- ※ソリッドレスポンシブ
- ※縦の長さが8,000pxを想定
- ※8,000pxを超える場合は¥20,000 (@4,000px)の追加費用が発生します。
トップページコーディング費用相場
コーポレートサイトや採用サイトなど、複数ページで構成されるホームページのトップページのコーディングを行います。
料金目安
¥40,000/ 5000px
- ※ディレクション費込
- ※ソリッドレスポンシブ
- ※縦の長さが5,000pxを超える場合 は、別途お見積りをさせていただきます。詳細はお問い合わせください。
下層ページコーディング費用相場
コーポレートサイトや採用サイトなどの下層ページのコーディング代行をご依頼いただく場合の金額です。
ページ数が増えるほどコストダウン
料金目安
1~10 PAGES
¥15,000/ 5000px
11~20 PAGES
¥13,000/ 5000px
21~30 PAGES
¥10,000/ 5000px
- ※ディレクション費込
- ※ソリッドレスポンシブ
- ※縦の長さが5,000pxを超える場合 は、別途お見積りをさせていただきます。詳細はお問い合わせください。
デザインカンプからのコーディングの代行・制作の流れ
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形式でご入稿の際は、アウトライン前と後の両方のデータをご送付ください。
- レイヤー・グループの整理、フォント・カラー・余白・マージンなどのルールの統一、アニメーションや動きの指示を明記いただくという点にご注意いただきますと、進行がスムーズです。
途中でデザインが変更になったのですが、対応は可能でしょうか?
デザインデータが重いのですが、入稿の際の注意点はありますか?
コーディングアーミーのコーディング代行サービス
