デザインカンプの実装
ご支給のデザインを、PC・タブレット・スマホで動くサイトにします。
ただし、他社のデザインを再現した実績はまだありません。精度は、小さな試作で確かめてください。
◐一部だけ
実績の代わりに、
確かめられるものを、渡します。
Web制作会社・広告代理店の、外部の制作パートナーです。Novaia Labsには、商用の納品実績が、まだありません。だから、できることと、まだできないことを、確かめられる形で並べました。
First, the weak points
先に、弱みから書きます。
まだ、ありません
- 商用の納品実績
- 取引先のロゴ
- お客様の声
あります
- 自主制作の作品。すべて公開していて、触れます
- それぞれの担当範囲（すべて、Novaia Labsです）
- 確認の結果と、確認できていないこと
だから
- 案件の大きさは、問いません。概要だけでも、ご相談ください
- 最初の見積もりは、無料です
- 確認の方法は、お互いに決めましょう
Scope
任せられること対応できる業務
それぞれに、いまの確かさを、書きました。
サイト制作一式
構成・デザイン・文章・実装・素材・検証までを、まとめて担当します。
4ページの歯科、3ページ構成のファッション、1ページの写真館を、自主制作でつくりました。
●確かめられる
インタラクション・動きの実装
スクロール、タップ、ドラッグ、長押し、カーソル。入力に反応する動きを、軽く、止められる形でつくります。
触れる作品を7点、公開しています。動かさずに見ても成り立つように、動きを減らす設定にも対応しています。
●確かめられる
LP・キャンペーンの1ページ
ファーストビューに力を入れた、1ページ完結の制作に向いています。
写真館あかりは、1ページで、シャッターが開くような見せ方をつくった例です。
●確かめられる
一部だけの実装
ヘッダーの動き、ファーストビューだけ、といった部分的なご依頼も受けられます。
既存サイトへの組み込みは、環境によって難しさが違います。事前にご相談ください。
◐一部だけ
Proof
確かめられること能力と、その確認方法
言い切れるものと、言い切れないものを、分けています。確かめる場所を、あわせて書きました。
●確かめられる◐一部だけ○まだ、できません
できること
確かめる場所・根拠
いまの状態
PC・タブレット・スマホの表示
公開サンプルのすべて。幅を変えて確かめられます。
撮影での確認は、PCとスマホ幅の2種類。
●確かめられる
スクロールに連動する演出
LAPSE、はなべ歯科医院。
●確かめられる
タップ・ドラッグ・長押し・カーソル操作
GABU、ATSU、NUGUI、SHOEI、トップの体験セクション。
●確かめられる
映像から、操作できる画面への切り替え
トップの体験セクション（映像の最後と、操作画面の瓶が、同じ位置・大きさで重なります）。
●確かめられる
Canvasによる描画（連続画像の操作）
トップの体験セクション（360°の回転）。
●確かめられる
動きを減らす設定・キーボード操作への配慮
主要な動きは、動きを減らす設定で止まります。矢印キーで操作できるものがあります。
すべての作品で確認したわけではありません。
◐一部だけ
自動検査（axe）の結果
Official本体の各ページと、主要サンプル3つで、自動検査の違反は0でした（2026年10月22日）。
自動検査で見つかる範囲に限ります。支援技術での確認は、行っていません。
●確かめられる
スクロールの滑らかさ
トップの体験セクションでの計測は、フレーム間隔が約16.7ms（60fps）でした。
Chromeの自動ブラウザでの計測です。実機の値ではありません。
◐一部だけ
WebGL
自主制作の試作で使いました。公開しているサンプルでは、使っていません。
◐一部だけ
Safari・iPhone/Androidの実機での確認
これまでの自主制作では、行っていません。
案件では、貴社が指定する環境で確認します。
○まだ、できません
WordPressなどのCMSへの組み込み
実績がありません。
可否は、案件ごとにご相談します。
○まだ、できません
EC・会員機能・予約システム
実績がありません。
○まだ、できません
React・Vueなどのフレームワーク
自主制作では、使っていません（素のHTML・CSS・JavaScriptです）。
必要な場合は、可否を先にお伝えします。
○まだ、できません
Works
自主制作作品と、担当範囲
どれも、架空のブランドを題材にした自主制作です。実在の企業とは、関係ありません。
DESIGNS を見る
PREMIUMの見本
OSTREL（コートとジャケット）
冒頭の扉が開く演出。三人を選ぶと、その人の章が全幅に開く。
担当 企画・デザイン・文章・実装・素材・確認（すべて Novaia Labs）
SIGNATUREの見本
はなべ歯科医院
スクロールで、アーチの窓が画面いっぱいに開く。4ページ。
担当 企画・デザイン・文章・実装・素材・確認（すべて Novaia Labs）
ESSENTIALの見本
写真館あかり
シャッターが開くように、写真があらわれる。1ページ。
担当 企画・デザイン・文章・実装・素材・確認（すべて Novaia Labs）
動きの作品
GABU
タップで、かじる。
担当 企画・デザイン・文章・実装・素材・確認（すべて Novaia Labs）
動きの作品
LAPSE
スクロールで、一歩。
担当 企画・デザイン・文章・実装・素材・確認（すべて Novaia Labs）
動きの作品
SHOEI
カーソルで、太陽が動く。
担当 企画・デザイン・文章・実装・素材・確認（すべて Novaia Labs）
Process
進め方と、確かめ方制作の流れ
動きは、言葉にしないと、ずれます。先に書いて、合意してから、つくります。
- 01
受け取る
デザインカンプ、仕様、動きの指示をいただきます。着手前に、不明点を質問リストにしてお返しします。
- 02
動きを、書き起こす
動きを「何をしたら・どう反応し・何秒で・止めたらどう見えるか」の4点で書き、合意してから実装します。
- 03
実装する
素のHTML・CSS・JavaScriptが基本です。軽さと、動きを止めたときの見え方を優先します。
- 04
検証する
自動検査（axe）、フレーム間隔の計測、PC・スマホ幅の撮影、キーボード操作、動きを減らす設定を、確認します。
- 05
別の目で見て、納品する
つくった本人とは別の目で確認します。確認した項目と結果を、納品物に添えます。
検証は、現在、Chromeの自動ブラウザと自動検査が中心です。Safariや実機での確認は、貴社が指定する環境で行います。
Terms
取引の条件取引にあたって
未確定のことは、未確定と書きました。
納品するもの
- HTML・CSS・JavaScript のソース一式（ビルド不要）
- 画像（WebP）・動画（mp4）などの素材
- 動きの仕様メモと、確認した項目の記録
既存の環境（CMSなど）への組み込みは、案件ごとに、可否をお伝えします。
AIの利用
- 案件でAI生成の素材を納めるときは、事前にお知らせし、ご承諾をいただいてから進めます。
- 最終の確認と責任は、人が負います。
貴社の非公開資料の扱いは、取引の前に、書面でお取り決めします。
契約・守秘
- 秘密保持契約は、貴社の書式を優先して検討します。
- 権利の帰属、再委託、クレジットの表記（匿名での納品を含む）は、契約で個別に取り決めます。
- 請求・支払いの条件は、貴社の取引条件に合わせられるか、ご相談ください。
お見積もり
- 案件ごとに、お見積もりします。固定の料金表は、ありません。
- 見積もりは、対応範囲・画面やページの数・動きの数・修正の回数・納期で組み立てます。
- 見積もりまでは、無料です。
Talk
まず、ご相談ください。
まだ形になっていなくても、構いません。案件の概要と、お困りのことを、教えてください。進め方は、内容に合わせて、一緒に決めます。
お返事は、原則として2営業日以内にメールで。お急ぎの場合は、novaia.labs@gmail.com へ。