デザインデータやワイヤーフレームを、HTML と CSS で実装します。フレームワークは使わず、素のHTML・CSSで書きます。
■ こんな方へ
・デザインはあるが、コードにする人がいない
・既存ページをスマホ対応・ダークモード対応にしたい
・作ってもらったページの中身が読めず、後から自分で直せない
■ プラン
【ベーシック 12,000円】
1ページのコーディング。レスポンシブ対応(PC・タブレット・スマホ)込み。
【スタンダード 25,000円】
3ページまで。共通パーツ(ヘッダー・フッター・ボタン等)を整理し、配色をCSS変数にまとめてお渡しします。
【プレミアム 45,000円】
5ページまで。上記に加えて、OSの設定に追従するダークモード対応と、検索エンジン向けの基本設定(canonical・meta description・OGP・構造化データ・robots.txt・sitemap.xml)を実装します。
■ 書き方について
配色はCSS変数にまとめます。後から色を1か所変えれば全体に反映される状態でお渡しするので、納品後にご自身で調整できます。文字サイズと余白も、ご希望があれば同じように変数化します。
クラス名は役割で付け、何をしている箇所かコメントを残します。読めないコードは渡しません。
■ 実績
・独自ドメインのサイトを3つ、フレームワークを使わず制作し、Cloudflare Pages で運用しています。canonical・meta description・OGP・robots.txt・sitemap.xml は3サイトすべてに、構造化データは2サイトに、OSの設定に追従するダークモードは1サイトに実装しています。
・ブラウザ拡張の画面を React 19 / TypeScript で実装し、Chrome ウェブストアと Microsoft Edge アドオンで公開・運用しています。CSSは手書きで約1,800行、配色のCSS変数41個を定義し、ライトとダークの両方に対応しています。
・セマンティックHTML、ARIA属性(role / aria-label / aria-expanded など)、キーボード操作、prefers-reduced-motion への配慮を、上記の実装で行っています。
■ お受けできないこと
・デザイン自体の制作(デザインデータからの実装を承ります)
・WordPress / Shopify などのCMS・ECプラットフォームへの組み込み
・Next.js / Nuxt / Astro などのフレームワークを使った実装
・Tailwind CSS / Sass / CSS Modules / styled-components の指定
・React / Vue を使ったSPAの実装(このサービスは素のHTML・CSSです)
・検索順位の改善そのもの(上記の設定は実装しますが、順位の保証はできません)
・アクセシビリティ監査、WCAG準拠の保証
■ ご注意
・受託の実務経験はまだありません。上記はすべて自分のサービスでの実績です。
・IE(Internet Explorer)には対応しません。
・開発にAIツール(Claude Code)を使用します。仕様の判断と最終確認は自分で行います。
・デザインデータ(Figma・XD・PSD・画像・PDFなど)またはワイヤーフレームをご用意ください。手描きのラフからでも対応しますが、その場合は文字と色をテキストでいただけると正確に再現できます。
・画像・アイコン・フォントの素材はお客様側でご用意をお願いします。商用利用の可否が確認できない素材は使用できません。
・対応ブラウザは Chrome・Edge・Safari・Firefox の最新版です。IE には対応しません。
・納品はココナラのトークルームへのzip添付(HTML・CSS・画像を含む一式)で行います。GitHubやGoogleドライブはココナラの規約で使用できないため、そちらでの受け渡しには対応できません。
・サーバーへのアップロードと公開作業はお客様側でお願いします。手順のご案内は行います。
・納品したコードは、お客様のサイトでの商用利用・改変・二次利用を制限なくお認めします。著作権そのものの譲渡をご希望の場合は購入前にご相談ください。なお汎用的な実装パターン(レイアウトやCSS変数の雛形など)を、他のお客様向けの制作に再利用する場合があります。
・ページ数を超えるご要望は、事前にお見積もりのうえ対応します。着手後に範囲が広がった場合も同様です。
・受託の実務経験はまだありません。実績はすべて自分のサービスでの制作と運用です。
・平日夜間と土日祝の稼働です。返信が翌日になる場合があります。
・作業には生成AIツールを使用します。いただいた情報のうち機密にあたるものをAIツールへ入力する場合は、事前にご相談し、ご承諾をいただいてから行います。