STUDIOで作ったデザインをそのまま実装してもらう時の注意点

「Figmaで作ったデザインを、見た目そのままにSTUDIOで組んでほしい」「クライアントに提出したデザインがやっと確定したので、実装だけ外に出したい」。制作会社様やデザイナーの方から、こうしたご相談をいただくことが増えています。

ところが、デザインが固まっていても、いざ実装してみると「スマホで見たら思っていた並びと違う」「この動きはSTUDIOでは再現できないと後から言われた」「納品後にクライアントが更新できる範囲が想定と違った」といったズレが起きがちです。

結論から言うと、デザインをそのまま実装してもらうために大切なのは、デザインの精度そのものよりも「STUDIOの仕組みに合わせて、実装前に決めておくこと」を外注先と共有できているかどうかです。この記事では、デザイン通りの実装を目指すときに事前に確認しておきたい注意点を、外注する側の目線でまとめました。

なぜ「デザイン通り」にならないことがあるのか

STUDIOは、コードを書かずに見た目を自由に組めるのが大きな魅力です。一方で、デザインツールとは「ものの並べ方」の考え方が少し違います。

デザインツールでは、要素を画面上の好きな位置に置けます。STUDIOでも自由な配置はできますが、実際のサイトとして崩れにくく作るには、要素を「箱」に入れて、縦並び・横並びのルールで組み立てていくのが基本です。この組み立て方を決めるのは実装する側なので、デザインデータに表れていない部分は、実装者の判断で補うことになります。

ズレが起きやすいのは、主に次のような部分です。

・PC用のデザインしかなく、タブレットやスマホでの並び方が決まっていない

・文字量が変わったとき（見出しが2行になったときなど）の振る舞いが決まっていない

・デザインツール上の動きのイメージが、STUDIOの標準機能で再現できる範囲を超えている

・デザインで使っている書体が、STUDIOで使えるWebフォントにない

・納品後に、どこをクライアントが更新するのかが決まっていない

どれも、デザインの良し悪しではなく「実装前の取り決め」の問題です。裏を返せば、ここを事前にすり合わせておけば、手戻りの多くは防げます。

注意点①：レスポンシブの仕様を先に決めておく

最もズレが起きやすいのが、画面幅ごとの見え方です。STUDIOでは、PC・タブレット・スマホなど画面幅の区切りごとにレイアウトを調整できますが、デザインデータにスマホ版がない場合、並び順や文字サイズは実装者が判断することになります。

依頼の前に、次のどれにあたるかを決めておくとスムーズです。

・PC版とスマホ版の両方のデザインがあり、両方を忠実に再現してほしい

・PC版のみあり、スマホ版は実装者に任せる（あとで確認して調整する）

・主要なページだけスマホ版のデザインがあり、残りは主要ページに準じて任せる

あわせて、「スマホで横並びのカードを縦に並べ替えてよいか」「スマホでは非表示にしてよい要素はあるか」といった方針も一言添えておくと、実装後の修正がぐっと減ります。

注意点②：フォント・画像・動きは「STUDIOで再現できるか」を確認する

デザインツール上では問題なく見えていても、STUDIOにそのまま持ち込めない要素があります。

フォント

STUDIOで使える書体は、STUDIO上で選べるWebフォントが中心です。デザインで使っている書体が選べない場合は、近い書体に置き換えるか、見出しなどの一部だけを画像にするかを決める必要があります。見出しを画像にすると検索エンジンや読み上げに文字が伝わりにくくなるため、どこまで許容するかもあわせて確認しておくと安心です。

画像

画像は、書き出しのサイズと形式をそろえて渡していただくと、表示の速さと見た目の両方を保ちやすくなります。写真の上に文字を重ねるデザインの場合は、文字と写真を別々に渡していただくと、スマホでの調整がしやすくなります。

動き（アニメーション）

スクロールに合わせて表示される動きや、マウスを重ねたときの変化など、STUDIOの標準機能でできる動きは多くあります。ただし、複雑な連動や細かいタイミングの演出は、標準機能では再現が難しい場合があります。動きのイメージは、参考になる動画や言葉での説明を添えて共有し、「再現できない場合はどこまで簡略化してよいか」も決めておくと、後からのすれ違いを防げます。

注意点③：CMS・フォームなど「納品後に動かす部分」を整理する

見た目の再現と同じくらい大切なのが、納品後にクライアントが触る部分の設計です。

・お知らせや実績紹介など、クライアントが自分で更新したい部分はどこか（STUDIOのCMS機能を使うかどうか）

・お問い合わせフォームの項目と、送信後に表示するページ（例：/thanks/ のような完了ページ）を用意するか

・ページごとのタイトルや説明文、SNSで共有されたときの画像などのSEO設定を、誰が用意するか

・独自ドメインの設定や公開作業を、どちらが担当するか

特にCMSは、「どの項目を入力できるようにするか」で作り方が変わります。デザイン上は同じ見た目でも、更新しやすさを優先するか、デザインの自由度を優先するかで実装方法が変わるため、事前に方針を決めておくのがおすすめです。

依頼前にそろえておくとスムーズなもの

ここまでの注意点を踏まえて、依頼の前に次のものをそろえておくと、見積もりも実装も早く進みます。

1. デザインデータ（レイヤー構造が見える状態で共有。画像1枚のカンプより、余白や文字サイズの再現精度が上がります）

2. ページ一覧と、それぞれのページ数・おおよその文字量

3. レスポンシブの方針（スマホ版のデザインの有無、任せてよい範囲）

4. 使用フォントと、置き換えを許容できるかどうか

5. 動きのイメージ（参考動画や説明）と、簡略化してよい範囲

6. CMSで更新したい項目、フォームの項目

7. 納期と、確認・修正のスケジュール

8. STUDIOのプロジェクトをどちらのアカウントで作るか、納品時の引き渡し方法

すべてが決まっていなくても構いません。「ここはまだ決まっていない」とわかっているだけで、外注先は確認すべき点を先回りして質問できます。

STUDIOでの実装をまとめてお任せいただく場合は、上の項目のうち決まっているものだけでもお知らせください。デザインデータを拝見したうえで、STUDIOで再現が難しい箇所があれば実装前にお伝えし、代わりの方法をご提案します。

https://coconala.com/services/3480816

外注先を選ぶときに確認したいポイント

デザイン通りの実装を任せられるかどうかは、実装のスキルだけでなく、やり取りの進め方でも大きく変わります。外注先を選ぶときは、次の点を確認しておくと安心です。

・実装前に「再現が難しい箇所」を洗い出して伝えてくれるか

・スマホ版を任せる場合に、どんな方針で組むかを事前に説明してくれるか

・確認や修正のルール（回数や範囲）を最初に提示してくれるか

・NDA（秘密保持契約）に対応しているか、クライアント名を伏せた黒子としての対応ができるか

・連絡の返信がどのくらいの速さで来るか

特に制作会社様の案件では、クライアントとの間に入って進めることが多いため、「後から言われる」よりも「先に言ってくれる」外注先のほうが、スケジュール全体のリスクを下げられます。

私自身が外注先としてお受けするときに意識していること

私はWeb制作歴6年で、HP・LP・ECサイトの制作を100件以上手がけてきました。STUDIO実装では、デザインを忠実に再現することを前提に、実装前に再現が難しい箇所や、スマホ版で判断が必要な箇所を洗い出してお伝えするようにしています。STUDIOだけでなくHTML・CSSでのコーディングにも対応できるため、案件の内容によっては、どちらで実装するのが適しているかもご提案できます。

NDA対応・本人確認済みで、制作会社様の黒子としての対応も可能です。平日日中は1時間以内の返信を目安にしています。

まとめ：デザインを渡す前に「決めておくこと」を共有する

STUDIOで作ったデザインをそのまま実装してもらうためには、デザインデータを渡すだけでなく、レスポンシブの方針、フォント・画像・動きの扱い、CMSやフォームなど納品後に動かす部分を、実装前に外注先と共有しておくことが大切です。

「デザインは確定しているが、STUDIOで組む手が足りない」「スマホ版まで含めて任せたい」という場合は、お気軽にご相談ください。デザインデータを拝見し、対応できる範囲と概算のお見積りをお伝えします。

https://coconala.com/services/3480816

まだ内容が固まっていない段階のご相談は、プロフィールからどうぞ。

https://coconala.com/users/4536617