本文へスキップ

カンプまでは、御社で。
実装は、こちらで。

コーディング・動きの実装・改修を、工程単位で。
デザインから公開までの、まるごとのご依頼もお受けします。

  • トップの実装28,000円〜
  • 納期の目安4営業日〜
  • お返事3営業日以内

税込・レスポンシブ込み。下層1枚 7,500円〜。横浜・神奈川なら伺います(横浜市内は交通費なし)。

エンドクライアント様とは、直接お取引しません。外部への再委託もしません。

ご依頼の形2つからお選びください

1カンプまでは御社で、実装はこちらでコーディング・動きの実装・改修。トップ28,000円から 2ホームページまるごとデザインから実装・公開まで一式。デザインは代表デザイナー。お見積り

どちらも、ラフな段階で送ってください。

よくいただくご相談

こんなとき、
声をかけてください。

制作会社・デザイン事務所の方から、実際によく伺うことです。

  1. カンプは社内で作れる。コーディングと実装の手が足りない紙やパッケージが本業で、Webの仕事が重なる時期だけ、手を借りたい。
  2. 動きの実装まで、社内の手が回らないスクロールで順に出す、線を描く、数字を数える。カンプの意図どおりに動かすところまで。
  3. 改修が細切れで、常に人を置くほどではない1ページの追加や、ボタン1つの修正から、工程ごとに出したい。
  4. 今の外注先が埋まっていて、別の受け皿がほしい繁忙期だけ、1件だけでも。
  5. 打ち合わせは、顔を合わせてしたい横浜・神奈川なら、事務所に来てほしい。
  6. nysデザイン工程の一部だけで、構いません。小さな仕事も、条件は同じです。横浜・神奈川なら伺います(横浜市内は交通費なし)。条件と仕様は、このページに先に全部書いています。単価と足し算を見る

お受けする形 ① ・動きの実装まで

カンプに書いた指示を、
そのまま動きに。

動きは、カンプだけでは伝わりにくいところです。この見本は、カンプに書き込んだ3つの指示を、そのまま組んだものです。「もう一度動かす」を押すと、最初から動きます。

組める動きの例

  • スクロールで、順に出す
  • 線を描く・道すじに沿って進む
  • 数字を数える・前と後を比べる
  • ピン留め・視差・コマ送り
  • WebGL の面(このページのいちばん上)

制作会社の案件では、GSAP(ScrollTrigger など)でも書きます。ご指定がなければ、素の JavaScript で軽く書きます。このサイトの動きは、自作の JavaScript だけで、gzip で実測 5KBです(表示のたびに実物を圧縮して測っています)。

作り込んだ動きの見本 5本(GSAP で組んでいます・お店と商品は架空です)

カンプ見本の焙煎所・トップ(架空のお店です)

朝の一杯を、港のそばで。

  • 浅煎り
  • 中煎り
  • 深煎り
駅 お店
ここから動かす
  1. 見出しは1行ずつ、下から
  2. 豆の3枚は、左から順に
  3. 見えたら、駅からお店へ線を描く
カンプの指示書きと、そのとおりに組んだ動きの見本です(お店は架空です)。

実物

どれも、公開中の
本物のサイトです。

サイトの制作と改修をあわせて、100件以上を手がけてきました。そのうち、いま公開中で、担当した範囲をはっきり書けるものを並べています。デザインだけ、コーディングだけの仕事は、そのとおりに書いています。

御社からお受けした案件は、許可をいただいたものだけをここに載せます。ご指示がなければ、載せません。

お受けする形 ②

ホームページを、
まるごとでも。

佐藤 のりこ(イラスト)

佐藤 のりこ代表・デザイナー

代表デザイナーの佐藤 のりこは、いまWebの制作に力を入れています。デザインから実装・公開まで、2人で一式お受けします。ECサイトの運営を7年経験してからWebデザイナーになったので、LP(1ページの紹介サイト)や通販の「買うまでの道すじ」を、運営する側の目で組みます。

Webの案件が重なる時期に、1件まるごとお預けいただけます。金額は、内容を伺ってお見積りします。

動画スクールのLPの最初の画面(パソコンとスマートフォン)
動画スクールのLP(最初の画面)デザイン・コーディング/コンペで選ばれました(2022年)
moazen様の通販サイトの最初の画面(パソコンとスマートフォン)
moazen様(化粧品の通販)デザイン
シンメトリーレボリューション合同会社様の化粧品のLPの最初の画面(パソコンとスマートフォン)
シンメトリーレボリューション合同会社様(化粧品のLP)デザイン・WordPress構築

お受けする単位

一部の工程だけで、
構いません。

お受けする単位と、いただくもの・お返しするもの
単位いただくものお返しするもの
実装のみ デザインデータと素材一式Figma/XD/Illustrator/Photoshop のどれでも HTML/CSS/JS 一式(レスポンシブ込み)19種類の検査の結果を添えます
動きの実装のみ どこで・何が・どう動くかのメモ参考のURL・手描きのラフ・カンプへの書き込みで構いません 組み込んだコード足したバイト数・レイアウトのずれ(CLS)の実測・確かめた端末を添えます
改修・追加 対象サイトのファイル一式またはサーバーの情報 変えたファイルと、変えた点の一覧差分が追える形で
まるごとデザインから公開まで 目的・原稿・参考のサイトラフや構成案があれば、それも 公開まで一式(デザインは代表デザイナーの佐藤 のりこ)デザインデータもお渡しします。金額はお見積り

WordPress のテーマ実装もお受けします(別途お見積り)。進行はメール・Chatwork・Slack のどれでも。納品の形は、ファイル一式・Git・サーバーへの反映からお選びください。

単価

見積りの前に、
足し算で分かります。

工程ごとの単価(税込)
トップページの実装28,000円から
下層ページ1枚7,500円から
LP 1本(最初の画面+5段)36,000円から
動きの追加 1か所6,000円から
  • レスポンシブ対応を含みます
  • WordPress のテーマ実装は別途お見積りします
  • 19種類の検査結果とレポートを添えます
  • 「から」は分量と仕様による幅です。デザインデータを拝見して、確定のお見積りを3営業日以内にお出しします(有効期限30日)。
納期の目安
LP 1本(最初の画面+5段)4営業日
トップページだけ4営業日
トップ+下層5枚6営業日
下層をさらに足す5枚ごとに+2営業日
動きを足す何か所でもまとめて+1営業日
修正(いただいた指摘の反映)3営業日
  • データがそろって着手してから、初回の納品までの目安です。土日祝は数えません。
  • 同時にお受けするのは2件までです。いまの空きは、お問い合わせのときにお答えします。

概算の足し算(例)

6ページ・動き7か所のサイト

トップページの実装28,000円 × 1 28,000円

下層ページ7,500円 × 5 37,500円

動きの追加6,000円 × 7 42,000円

合計107,500円から税込

すべて単価の「から」で足した、いちばん小さい額です。デザインデータを拝見してから確定します。

取引の条件

聞かれる前に、
先に書いておきます。

発注のご判断に要ることを、ここにまとめています。ここにないことは、案件の概要と一緒にお尋ねください。

秘密保持
ご依頼があること自体を含めて、口外しません。NDA のご用意があれば締結します。無い場合も同じ基準で扱います。
実績への掲載
ご指示がなければ、載せません。御社名・案件名・成果物は、許可をいただいたものだけを載せます。
直接のお取引
エンドクライアント様とは直接お取引しません。お問い合わせをいただいた場合も、御社をご案内します。
再委託
外部には出しません。作業するのは事務所の2人だけです(コーディング=吉田 力/デザイン=佐藤 のりこ)。
打ち合わせ
オンラインでも、対面でも。横浜・神奈川なら、事務所に伺います。横浜市内は交通費なし、それ以外の県内は実費です。事務所は神奈川県横浜市磯子区です。
お支払い
月末締め・翌月末払いでお願いしています。御社のお支払いの規定があれば、ご相談ください。
納品後の不具合
こちらのミスによる不具合は、納品後30日以内なら無償で直します。仕様の変更・追加は別にお見積りします。
請求書・見積書
書面(PDF)でお出しします。税抜の表記でも発行できます(社内の起票用)。適格請求書の登録番号 T3810256466908
続けられなくなったとき
着手済みの案件は、その時点までのデータと引き継ぎのメモをお渡しして精算します。御社の手元で、そのまま続けられる形にしてお返しします。
お受けしない案件
エンドクライアント様と直接のやり取りが要る案件/制作を伴わない保守だけの引き継ぎ/納期まで4営業日を切っている案件
19種類の検査の全項目と、レポートの実物を見る押すと開きます
  1. ページが開くか
  2. 文字コード・言語・viewport
  3. title と description
  4. title・description の重複
  5. h1
  6. 見出しの階層
  7. 画像の alt・寸法指定
  8. 画像の実寸と指定の照合(Retinaの2倍は正常)
  9. 内部リンク
  10. canonical
  11. OGP
  12. 構造化データ
  13. 検索避け(noindex)
  14. https の中の http
  15. 禁止語・書きかけの跡
  16. ページの重さ(転送量)
  17. 画像の改善余地(実際に変換して測る)
  18. コントラスト(CSSの色指定を機械的に見る)
  19. メールが届く形か(SPF / DKIM / DMARC)

下は、このサイトのトップページを検査した出力そのままです(手を入れていません)。末尾の「手でやること」まで含めて、この形でお渡しします。

webcheck  https://nys-d.com
  ページの集め方: --paths で指定(1件)

1. ページが開くか
  ✓ 1 / 1 ページが 200

2. 文字コード・言語・viewport
  ✓ lang / charset / viewport すべてあり

3. title と description
  ✓ title と description は全ページにあり

4. title・description の重複
  ✓ 重複なし

5. h1
  ✓ 全ページ h1 は1つ・文字あり

6. 見出しの階層
  ✓ 飛びなし

7. 画像の alt・寸法指定
  ✓ alt・width/height すべてあり

8. 画像の実寸と指定の照合(Retinaの2倍は正常)
  ✓ 照合した 6 枚は比率が一致

9. 内部リンク
  ✓ 内部リンク 14 本、切れなし

10. canonical
  ✓ canonical は全ページ自分自身を指している

11. OGP
  ✓ OGP の宣言と実体に食い違いなし

12. 構造化データ
  ✓ JSON-LD 1 件、すべて読める形

13. 検索避け(noindex)
  ✓ 本番で意図しない noindex は無し

14. https の中の http
  ✓ 混在なし

15. 禁止語・書きかけの跡
  ✓ 書きかけの跡は見つからず

16. ページの重さ(転送量)
  ✓ / 423 KB(HTML 8 / CSS 24 / JS 4 / 画像 386 KB)
  ! 上限を決めずに測っています(--budget=1500 のように付けると、超過を不合格にできます)

17. 画像の改善余地(実際に変換して測る)
  ✓ 6 枚を実際に変換して測定(いま 322 KB)
  ✓ 3割以上減らせる画像はありません(すでに最適化されています)

18. コントラスト(CSSの色指定を機械的に見る)
  ! body の色指定を CSS から読み取れませんでした(CSS変数や別の書き方の可能性。目視で確認してください)
  ✓ CSS 1 ファイルを読みました

19. メールが届く形か(SPF / DKIM / DMARC)
  ✓ 判定するドメイン: nys-d.com
  ✓ SPF あり
  ✓ DMARC あり(p=none = 様子見。まず1〜2週間レポートを見て、問題なければ quarantine へ)
  ✓ DKIM あり(セレクタ: default)

────────────────────────────────────────────────────
🔴 ここから先は手でやること(機械には見えません)
  □ 1. CLS を測る(動きを実装した案件は必須)
     Chrome で開く → DevTools → Performance タブ → リロードして記録 → CLS の値。0.1以下なら良好。1分
  □ 2. W3C の構文検証
     https://validator.w3.org/nu/ に URL を入れる。「実装のみ」の納品物として約束している項目
  □ 3. 実機で見る
     iPhone / Android の実機で1回。エミュレータでは出ない崩れがある
  □ 4. alt の中身が合っているか
     有無は機械が見ました。中身が画像と合っているかは人にしか分かりません
  □ 5. 文章の事実確認
     社名・電話番号・営業時間・金額。機械は「書いてあるか」しか見ていません
  □ 6. 🔴 フォームから1通、実際に送って受信箱に届くか
     項目19 は DNS を見ただけ。実際に届くかは送ってみないと分かりません。
     🔴 受信箱か迷惑メールかまで見ること(送信は成功するので、届かなくても失敗ログに残りません)
  □ 7. 🔴 迷惑メールフィルタのホワイトリスト
     問い合わせの通知メールは「サイトのアドレス→サイトのアドレス」=自分から自分へ送る形が多く、
     これはスパムの典型的な形なのでフィルタが真っ先に疑います。
     🔴 サーバー側のフィルタを有効にするなら、そのアドレスをホワイトリストに入れること。
     入れないと、お客様からの問い合わせが静かに消えます

────────────────────────────────────────────────────
検査 19 種類 / 対象 1 ページ / https://nys-d.com
見ていないもの: JS実行後の内容 / 表示速度そのもの / デザイン / 文章の正しさ / セキュリティ
✅ 合格(要確認 2 件)

進め方

ラフな段階で、
送ってください。

同時にお受けするのは2件までです。いまの空きは、お問い合わせのときにお答えします。納期の目安

  1. 案件の概要を送る種類・分量・希望の納期を。デザインデータがあれば、それも
  2. 可否とお見積り3営業日以内に、お受けできるか・金額・納期をお返しします
  3. 打ち合わせ要るときだけ。オンラインか、横浜・神奈川なら伺います(横浜市内は交通費なし)
  4. 制作・確認確認用のアドレスをお出しします。進行はメール・Chatwork・Slack のどれでも
  5. 納品・検収検査の結果を添えて。納品後30日は、こちらのミスなら無償で直します

よく確かめられること

見積りに要る情報は何ですか。

ページ数(またはデザインデータ)・レスポンシブの範囲・動きの有無・希望の納期の4つがあれば、概算をお出しできます。

Illustrator のデータからでも組めますか。

組めます。Figma・XD・Photoshop も同じです。書き出しの指定(画像の形式や大きさ)があれば、それに合わせます。

GSAP で書いてもらえますか。

はい。制作会社の案件では、ご指定があれば GSAP(ScrollTrigger など)で書きます。ご指定がなければ、素の JavaScript で書きます。あとから御社で直す前提なら、ふだんお使いのほうに合わせます。

検収はどのように進めますか。

確認用のアドレスをお出しします。ご指摘は回数ではなく期間(納品後30日)でお受けします。こちらのミスによる不具合は無償です。

WordPress は対応できますか。

テーマの実装をお受けします(別途お見積り)。それ以外の仕組みは、案件ごとにお返事します。

案件の概要を、
お送りください。

ラフな段階で構いません。可否とお見積りを、3営業日以内にお返しします。

フォームの「ご相談の内容」は「制作会社からのご依頼」を選んだ状態で開きます。
ホームページまるごとのご相談も、同じフォームからどうぞ。

神奈川県横浜市磯子区 / info@nys-d.com