プロジェクトパートナーシップ
次のお客様案件のウェブ制作をお任せください。
ウェブ制作会社や技術系エージェンシーと、サイトのデザイン・開発で協業します。確定したデザイン、ブランド素材、既存サイト、具体的な開発要件をお聞かせください。案件ごとに範囲、役割、価格、時期、検収条件を確認します。
Quinta da Curva — Yonderwellによるデザインと開発のデモ。
この実装を見る01
個別プロジェクトの範囲を明確にする。
協業ごとに、ウェブ制作の範囲、役割、価格、時期、検収条件を記載した見積もりを作成します。
既存のデザインを実装する
合意したブランドシステム、ビジュアル方針、ページデザインをご提示ください。プロジェクトで定めたルート、コンテンツ、インタラクションを備えたサイトに仕上げます。
ブランドやコンテンツからデザインと開発を行う
ブランドガイド、写真、文章など、合意した素材をご提供ください。構成を考え、専用のデザインをつくり、その素材を軸にサイト全体を開発します。
既存サイトに必要な変更を加える
ページ、インタラクション、多言語対応など、変更したい内容をお知らせください。プラットフォームとリポジトリを確認し、案件に適した作業範囲を合意して実装します。
02 / 実装の抜粋
動き方までご覧ください。
2つのデモで、レスポンシブなコンテンツレイアウト、視覚的なトランジション、目的のあるモーションという協業の幅をご紹介します。実際の決済や予約につながるサービスではなく、デモ用インターフェースです。
デスクトップのスクリーンショットです。デモを開始するとレイアウトを確認できます。全体デモも引き続きご利用いただけます。
協業に持ち込む技術
レスポンシブCSS
390pxのモバイル表示から1280pxのデスクトップ表示まで、読みやすいコンテンツと明確な操作を保つレイアウトをつくります。
@media (max-width: 420px) {
.hero h1 { font-size: clamp(2.2rem, 9vw, 2.8rem); }
.hero-cta, .hero-cta-ghost { padding: 0.85rem 1.1rem; font-size: 0.92rem; }
.hero-status .row { font-size: 0.8rem; }
.hero-panel .moon-text { font-size: 0.78rem; }
.footer-mark { width: 56px; height: 56px; }
}AstroとReact
Astroの静的ルートで主要ページを静的HTMLとして読みやすく保ち、Reactアイランドで必要なインタラクションだけを加えます。この公式サイトが実例です。
export function getStaticPaths() {
return LOCALES.map((locale) => ({ params: { locale } }));
}
<AvailabilityChecker client:load strings={p.availability} locale={locale} />制御可能なWebGLモーション
動きが体験に役立つ場合は、モーションを減らす設定で静止フレームを表示し、画面外で描画ループを停止するWebGLシーンを制作できます。
window.addEventListener('message', function (event) {
if (event.origin !== window.location.origin) return;
if (event.data === 'yw-demo-pause') stopLoop();
else if (event.data === 'yw-demo-resume' && !reduceMotion && !document.hidden) startLoop();
});03
3つの協業方法
ウェブサイトを発注する
パートナー企業が合意したウェブ制作を発注・支払いし、ブランド素材を提供し、フィードバックと検収を取りまとめます。範囲、時期、引き渡しを文書で確認します。
役割を分担する
開始前に、各提供者の役割、納品物、費用を合意します。パートナーは専門領域を担当し、私たちは合意したウェブのデザインまたは開発を担当します。
お客様をご紹介いただく
見込みのお客様の同意を得て、ウェブの要望とともにご紹介ください。範囲と契約については、お客様と私たちが直接相談します。
ブリーフから引き渡しまでを書面で進める
ブリーフと適合性
お客様の背景、目的、素材、既存のプラットフォームやリポジトリ、依頼したい部分をお知らせください。質問と、提案内容への適合性をお返しします。
範囲と見積もり
案件ごとの見積もりに、ウェブの納品物、役割、価格、時期、検収条件を定めます。
デザインと開発
合意した開始後に案件に合わせたデザインと開発を行い、指定した窓口が合意した確認時点でフィードバックを取りまとめます。
検収と公開
指定した窓口が書面の検収条件に沿って確認します。その後、公開、移管、次の納品に向けて、合意した引き渡し方法に従います。
引き渡しには、合意したソース、デプロイ環境、ドキュメント、サポートが含まれます。最終的なお客様への移管方法は案件ごとに確認します。
04
ともにつくる内容をお聞かせください。
スタジオ、エージェンシー、お客様の案件について数行お送りください。範囲、価格、時期のご相談は無料です。案件に合わせたデザインと開発は、合意した開始後に着手します。
brief@yonderwell.com1営業日以内に受領を確認し、5営業日以内に適合性についてお返事します。
お知らせいただきたいこと
- スタジオ・企業のウェブサイト：
- プロジェクトの目的と、サイトで実現したいこと：
- 現在のサイト、プラットフォーム、技術構成（あれば）：
- デザイン素材、ブランド資産、コンテンツのうち準備できているもの：
- 依頼したい作業と、希望する役割分担：
- 希望する時期または開始時期の目安：
まだ決まっていない点があっても構いません。分かる範囲の概要をお送りください。質問を一緒に整理します。
協業メールを開くお使いのメールアプリで下書きが開きます。内容を確認して送信してください。
宿泊客データ、決済情報、パスワード、機密性の高い添付ファイルは含めないでください。