• 私たちが選ばれる理由（3つの安心）
• 対応ツールと入稿ガイド
• 再現性の高いコーディング方針
• 制作フロー（発注〜公開まで）
• 動きの再現：アニメーションとインタラクション
• レスポンシブ最適化とアクセシビリティ
• WordPress構築・更新しやすさへの配慮
• 品質チェックと納品物
• 料金目安・スケジュール
• よくあるご質問（FAQ）
• お問い合わせ

私たちが選ばれる理由（3つの安心）

1. デザイン意図の共有がしやすい：専門用語を極力使わず、画面キャプチャや短い動画で確認。「ここを少しゆっくり」「余白をもう一段」など感覚的な指示でOK。
2. ズレない・崩れない仕上がり：余白・文字組・画像の見え方を丁寧に整え、複数デバイスでも自然に再現。
3. 進行が透明：タスクと期日を可視化。中間プレビューで早めにすり合わせ、手戻りを最小化します。

対応ツールと入稿ガイド

対応ツール： Figma（.fig / 共有リンク）／ Adobe XD（.xd）／ Illustrator（.ai）／ Photoshop（.psd）

入稿ガイド（お願い）

• レイヤー名・コンポーネント名は大まかでOK（例：Hero、Card、CTAなど）。
• モバイル／PCの基準幅（例：375 / 1440）を明記。
• 動きの意図はテキストで十分（例：「フェードで0.4秒」「遅れて登場」）。可能ならGIFや短尺動画も歓迎。
• 画像はそのままでもOK。書き出しが必要ならこちらで最適化して対応します。

再現性の高いコーディング方針

• 文字組・余白：見出しと本文の差、行間、段落間をルール化し、ページ全体のリズムを整えます。
• 色と画像：ブランドカラーの再現と、画像の比率・切り抜き位置を丁寧に確認。
• “自然な再現”：1pxに固執せず、複数端末で最も美しく見える最適値を採用。
• 読み込み体験：初回表示に配慮し、重さを感じさせない設計を心がけます。

制作フロー（発注〜公開まで）

1. 要件確認：ページ構成、対応デバイス、動きの有無、納期を共有。
2. 試作プレビュー：キービジュアルや1セクションを先行実装し、方向性を合わせます。
3. 本実装：テンプレート化・パーツ化を進め、並行してスマホ最適化。
4. 検証：主要ブラウザ・実機で表示や動きを確認。差異があれば短サイクルで調整。
5. 納品・公開：静的ファイル納品／WordPress組み込み／編集方法の共有まで一貫対応。

動きの再現：アニメーションとインタラクション

動きは“量より質”。気持ちよさと情報理解のしやすさを優先します。

• スピード感：体感300〜500msを基準に、要素の重さで微調整。
• 出現の順番：同時ではなく、わずかな時間差で階段状に。
• ユーザー主導：ホバー・スクロール・タップなど操作に応じて反応。
• 繰り返しに耐える：何度見ても邪魔にならない控えめ設計。

レスポンシブ最適化とアクセシビリティ

• 可読性：スマホでの文字サイズ・行間・余白を見直し、読みやすさを確保。
• タップしやすさ：ボタンやリンク間隔を最適化。
• コントラスト：背景と文字色の差を確保し、重要要素を見落とさせない。
• 代替テキスト：主要画像に意味のある説明を付与（運用担当者向けに簡易ガイドも添付）。

Word