LP制作 STANDARD スタンダードプラン
¥65,000〜 約 10〜14 営業日
テスト美容サロン LP制作
CLIENT: UI/UX Showcase
SCOPE: デザイン / コーディング
お客様のビジネス課題を解決するためのWeb制作・LP制作を行いました。
#ショーケース
#レスポンシブ
UI/UX & Modern Web Showcase
遊び心を、
Webの力に。
「ありきたりなテンプレート」から脱却し、訪問者の心を掴むビジュアルと快適な動きを。
リッチなUIデザイン、ヘッドレスCMSによる動的運用、爆速表示まで、**play.dy design** が具現化するWeb技術のショーケースです。
⚡ SSG爆速レンダリング
✦ ヘッドレスCMS動的配信
📱 レスポンシブ完全対応
INTERACTIVE DESIGN LAB
60 FPS
SELECT TYPOGRAPHY Poppins (Extrabold)
ACCENT THEME
✦ LIVE PREVIEW
DYNAMIC UI
CRAFTING
EMOTIONAL DESIGN.
文字と余白、色彩の調和でビジネスの魅力を最大限に引き出します。
Realtime CSS
✨
STACK & PERFORMANCE
Astro × Cloudflare × ヘッドレスCMS
WHAT WE CAN DO
play.dy design が実現できること
デザインの美しさと最新のフロントエンド技術を掛け合わせ、ビジネスの成果を最大化するWebを構築します。
VISUAL & MOTION
感情を動かす、モダンUI & マイクロインタラクション
ただ情報を並べるだけでなく、スクロールに合わせた心地よいフェードやホバーアニメーションを実装。訪れたユーザーを惹きつけ、離脱を防ぐ洗練されたWeb体験を創り出します。
HEADLESS CMS
ヘッドレスCMS連携による「自分で更新できる」快適運用
お知らせや制作実績、料金表をご自身で手軽に追加・修正可能に。WordPressのように重くならず、セキュリティの脆弱性もゼロ。スマホの専用画面からブログ感覚で手軽に更新できます。
SPEED & SEO
PageSpeed 95〜100点台の超高速表示
Astroによる静的サイト生成（SSG）とCloudflareのグローバルCDNを活用し、ページを開いた瞬間に表示される爆速レスポンスを実現。広告の離脱率低減とSEO順位向上に直結します。
RESPONSIVE UI
スマホ閲覧に特化した緻密なレスポンシブ設計
閲覧の8割以上を占めるスマートフォンで最大の成果を出すため、親指で押しやすいボタン配置やフォント可読性を徹底追求。PC・タブレット・スマホすべてで美しく整ったレイアウトを提供します。
TYPOGRAPHY & BRAND LAB
フォントで変わる、Webの世界観
Webサイトの第一印象の8割はタイポグラフィで決まります。
ブランドの個性に合わせて最適なフォントをご提案。実際に切り替えて雰囲気の違いをご体験ください。
1. SELECT FONT FAMILY (8 STYLES)
文字間隔:
Poppins
幾何学サンセリフ親しみやすさ × モダン洗練
RECOMMENDED FOR
USER INPUT LIVE PREVIEW
play.dy design — 遊び心を、Webの力に。
ENGLISH HEADLINE SPECIMEN
Crafting Modern Digital Experiences.
JAPANESE SPECIMEN
遊び心とテクノロジーで、ビジネスを加速させる。
CHARACTERS & NUMBERS
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789 &?!@#%
正円に近い美しい幾何学構造を持ち、視認性の高さと親しみやすい清潔感を両立する王道モダンフォント。
SHOWCASE LAB (16 SAMPLES)
デザイン＆技術ショーケース
業種や目的に合わせたUI設計・アニメーション・レスポンシブ表現のサンプルです。
各カードから**実際のライブデモページ**を操作して仕上がりをご確認いただけます。
LP制作 
高転換LP設計 LIGHT ライトプラン
¥38,000〜 約 5〜7 営業日
プライベートオーガニックスパ 公式集客LP
CLIENT: エステ・美容サロン
SCOPE: 構成設計 / UIデザイン / 高速コーディング
上質な静寂と癒やしを伝えるフルスクリーンビジュアル設計。スマホ閲覧時のWEB予約率向上を狙った導線配置。
#サロンLP
#フルスクリーン
#レスポンシブ
リッチ演出 & UI CUSTOM フルカスタムプラン
¥110,000〜 約 14〜18 営業日
次世代AI業務自動化プラットフォーム プロダクトLP
CLIENT: ITスタートアップ企業
SCOPE: UI/UXデザイン / フロントエンド実装 / ダッシュボード
Linear/Stripe水準のクリーンホワイトモダンUI。知性とエンタープライズの信頼感を伝えるプロダクトLP。
#BtoB SaaS
#クリーンホワイト
#ダッシュボードUI
リッチ演出 & UI LIGHT ライトプラン
¥45,000〜 約 5〜7 営業日
クリエイティブWebデザインスタジオ コーポレートサイト
CLIENT: デザイン制作会社
SCOPE: ブランド戦略 / アートディレクション / 実装
遊び心と緻密なグリッドシステムを融合させた、クリエイティブスタジオの理念と実績を魅せるモノトーンWebサイト。
#ブランディング
#ミニマル
#モノトーン
CMS動的構築 CUSTOM フルカスタムプラン (CMS連動)
¥105,000〜 約 14〜18 営業日
急成長テック企業 エンジニア＆デザイナー採用特化LP
CLIENT: Webテクノロジー企業
SCOPE: 構成企画 / コピーライティング / ヘッドレスCMS実装
ミスマッチを防ぎ意欲ある優秀層を惹きつける採用特化LP。社員インタビュー記事を手軽に更新できるCMSを完全構築。
#採用サイト
#CMS動的更新
#社員インタビュー
CMS動的構築 STANDARD スタンダードプラン
¥65,000〜 約 10〜12 営業日
総合法律事務所 信頼感を高めるコーポレートサイト
CLIENT: 総合法律事務所・士業
SCOPE: UIリニューアル / フロントエンド実装
初めて法律相談を希望するユーザーが安心感を持てるクリーンで誠実なデザインにフルリニューアル。
#士業
#信頼性
#料金シミュレーション
高転換LP設計 STANDARD スタンダードプラン
¥70,000〜 約 10〜14 営業日
完全オンラインプログラミングスクール 無料体験獲得LP
CLIENT: オンライン教育事業者
SCOPE: 構成企画 / デザイン / インタラクティブ診断実装
リアルタイム適性年収診断シミュレーターを搭載。国の給付金最大70%訴求で無料カウンセリング成約率を最大化。
#スクールLP
#CVR最適化
#適性診断
高転換LP設計 STANDARD スタンダードプラン
¥68,000〜 約 10〜14 営業日
最新設備と安心感を届ける 美容皮膚科クリニックLP
CLIENT: 美容皮膚科・医療法人
SCOPE: デザイン設計 / レスポンシブ実装
アーチ型ウィンドウとアシンメトリーな雑誌風レイアウト。ペールグレージュ基調の圧倒的な透明感と清潔感。
#医療・クリニック
#エディトリアル
#アーチ型UI
ブランド世界観 STANDARD スタンダードプラン
¥75,000〜 約 10〜14 営業日
建築家と創るデザイナーズ注文住宅 施工事例LP
CLIENT: 建築設計事務所・工務店
SCOPE: 構成提案 / UIデザイン / コーディング
洗練されたフルスクリーンパノラマ写真と美しいタイポグラフィで、建築美と完成見学会の予約を最大化。
#住宅・建築
#写真ギャラリー
#見学会予約
ブランド世界観 STANDARD スタンダードプラン
¥68,000〜 約 10〜14 営業日
ボタニカルコスメ D2CブランドプロモーションLP
CLIENT: コスメ・スキンケアブランド
SCOPE: 世界観設計 / デザイン / 実装
透かし欧文タイポグラフィと立体浮遊バッジによるラグジュアリースプリット。初回65%OFFの特大オファー訴求。
#D2C・EC
#エディトリアル
#定期便オファー
高転換LP設計 STANDARD スタンダードプラン
¥65,000〜 約 10〜12 営業日
24時間完全個室パーソナルジム 無料体験予約LP
CLIENT: フィットネスクラブ・パーソナルジム
SCOPE: 構成企画 / デザイン / レスポンシブ実装
都会のウェルネスホテル風クリーンライトデザイン。動的なビフォーアフター切り替えUIと入会金¥0オファー。
#フィットネス
#ビフォーアフター
#ウェルネスホテル風
リッチ演出 & UI CUSTOM フルカスタムプラン (リッチ演出)
¥120,000〜 約 16〜20 営業日
NEO-CYBER 2088 次世代XR＆サイバーセキュリティLP
CLIENT: XR・Web3メタバース開発企業
SCOPE: 世界観設計 / サイバーUIデザイン / アニメーション実装
蛍光ネオンシアン×マゼンタ、CRT走査線、リアルタイムHUDターミナルを徹底実装した中途半端を排した近未来サイバーパンクLP。
#サイバーパンク
#ネオン演出
#HUDインターフェース
高転換LP設計 STANDARD スタンダードプラン
¥65,000〜 約 10〜14 営業日
伝統工芸と現代空間 結工房 ブランドポートフォリオ
CLIENT: 伝統工芸・老舗茶寮ブランド
SCOPE: 縦書きエディトリアル設計 / アートディレクション / 実装
musubimeに着想を得た、美しい縦書きタイポグラフィと和紙調の余白美。創業の理念と工芸品の息づかいを静謐に伝えるエディトリアルLP。
#和モダン
#縦書き組版
#エディトリアル
リッチ演出 & UI CUSTOM フルカスタムプラン (リッチ演出)
¥110,000〜 約 16〜20 営業日
KINETIC LAB 幾何学×インタラクティブアート展示
CLIENT: クリエイティブテック集団 / メディアアート
SCOPE: Canvas幾何学演出 / インタラクティブUI設計 / 実装
jojo designやS5 Studiosに着想を得た、同心円と幾何学線の有機的なインタラクション。マウス操作にリアルタイムで追従する数学的Webアート。
#幾何学モーション
#Canvasインタラクティブ
#WebGL
高転換LP設計 STANDARD スタンダードプラン
¥75,000〜 約 10〜12 営業日
RAW PHOTOGRAPHY 写真家・アシンメトリー写真展
CLIENT: プロフォトグラファー / 現代美術作家
SCOPE: ギャラリーレイアウト設計 / Lightbox実装 / パフォーマンス最適化
ヨシダナギ氏や松岡一哲氏に着想を得たアシンメトリー配置。写真の温度と空気感を最大限に引き出すフルスクリーンLightbox搭載の作品録。
#写真家ポートフォリオ
#アシンメトリー
#Lightbox拡大
リッチ演出 & UI STANDARD スタンダードプラン
¥70,000〜 約 10〜14 営業日
CODE IS DESIGN クリエイティブエンジニア ポートフォリオ
CLIENT: クリエイティブディレクター / テックアーキテクト
SCOPE: アートディレクション / フロントエンド設計 / パフォーマンス最適化
平尾誠氏（hiraomakoto.jp）の思想に着想を得た、画面を突き抜ける巨大タイポグラフィと横スクロール作品トラック。デザインの意図（Why）と技術（How）を深く言語化したポートフォリオ。
#CODE IS DESIGN
#横スクロール
#巨大タイポグラフィ
TRANSPARENT PRICING
わかりやすい制作料金プラン
ご予算やお持ちの素材（デザインや原稿の有無）に合わせて選べる3つの体系。
ココナラ・クラウドワークスでの安全な仮払い決済にも完全対応しております。
ライトプラン LIGHT
原稿・構成が決まっている方向けの高速＆低コスト制作
参考制作費用
¥35,000 円〜 (税別)
⏱ 標準納期: 最短 5〜7 営業日
対応ショーケース例 オーガニックスパ、ミニマルスタジオ等
プランに含まれる内容
支給いただいた原稿・構成に基づくスマートなデザイン制作
スマートフォン完全対応（レスポンシブコーディング）
PageSpeed 95点以上の爆速SSGレンダリング
SEO内部基礎対策 ＆ OGP SNSシェア設定
修正対応 1回無料（納品後7日間の不具合保証）
STANDARD ★ 一番人気 スタンダードプランで相談する →
スタンダードプラン
競合分析・構成企画・オリジナルデザインから実装まで丸ごとお任せ
参考制作費用
¥65,000 円〜 (税別)
⏱ 標準納期: 約 10〜14 営業日
対応ショーケース例 ジム、スクール、クリニック、コスメ、注文住宅、士業等
プランに含まれる内容
ターゲットの心理を動かすストーリー構成・コピーライティング支援
訪問者の心を掴むフルオリジナルUIデザイン
動きのあるマイクロインタラクション＆アニメーション演出
高いコンバージョン（CVR）を生むお問い合わせ・予約導線設計
修正対応 2回無料対応 ＆ サーバー公開・デプロイ代行
フルカスタムプラン FULL CUSTOM (厳選)
自社更新ヘッドレスCMS導入や、先鋭的リッチ演出・ブランド特化
参考制作費用
¥110,000 円〜 (税別)
⏱ 標準納期: 約 14〜20 営業日
対応ショーケース例 AI SaaS、サイバーパンク、CMS連動採用LP等
プランに含まれる内容
お知らせ・実績・記事をノーコード更新できるヘッドレスCMS完全構築
先進的なサイバーUI・3D演出・独自シミュレーター等の高度実装
Cloudflare Pages 世界最速エッジ配信 ＆ 独自ドメインSSL設定
修正対応 無制限（制作期間内） ＆ 納品後30日間の手厚い伴走サポート
Lighthouse 満点品質のパフォーマンス・アクセシビリティ追求
カスタマイズ・追加オプション
案件の規模や要件に応じて自由にお選びいただけます。
ヘッドレスCMS（microCMS等）導入
お知らせや事例、ブログをご自身でスマホ・PCから即時更新できる管理画面の構築
お問い合わせ・予約フォーム実装
自動返信メール・スパム防止（Cloudflare Turnstile）付きセキュアフォーム
特急納品対応（納期を約半減）
公開をお急ぎの方向けに最優先でスケジュールを確保し集中制作
独自ドメイン＆CDN設定代行
お名前.com等でのドメイン取得からCloudflareへのDNS設定・常時SSL化まで代行
FREQUENTLY ASKED QUESTIONS
よくあるご質問
ご相談・ご依頼にあたって気になる点があれば、お気軽にお尋ねください。
Q. 原稿や画像素材がまだ揃っていなくても依頼できますか？
A.
はい、全く問題ございません！ヒアリングをもとに必要な構成や文章の叩き台をご提案いたします。画像素材に関しても、商用利用可能な高品質フリー素材から当方で最適なものをピックアップして組み込むことが可能です。
Q. デザインの修正は何回まで対応してもらえますか？
A.
ご要望に合わせて柔軟に対応いたします。制作途中でも確認用URLにて細かくイメージをすり合わせながら進めますので、納品時のイメージ違いを防ぎます。
Q. ドメインやサーバーの設定に詳しくないのですが、公開まで任せられますか？
A.
はい、お任せください！Cloudflare Pagesへの無料公開設定や、すでにお持ちのエックスサーバー・ロリポップ等のサーバーへのアップロード作業、独自ドメイン接続まで一通り代行・サポート可能です。
Q. 納品後、自分でお知らせや実績・ブログを更新できますか？
A.
はい、ヘッドレスCMS連携をご利用いただくことで、プログラミング知識がなくても、スマホやPCの専用管理画面からブログ感覚で手軽にテキストや画像の追加・編集が可能です。
Q. ココナラやクラウドワークス経由での発注・決済は可能ですか？
A.
はい、大歓迎です！仮払い（エスクロー決済）による安全なお取引が可能です。各サービス上の専用メッセージからお気軽に見積もりをご依頼ください。
MODERN WEB ARCHITECTURE
採用技術スタック ＆ システムアーキテクチャ
Astro / TypeScript / Tailwind CSS / Cloudflare Pages / ヘッドレスCMS など、高パフォーマンスとセキュリティを両立する12の先端技術構成。
SYSTEM WORKFLOW
安心・高速・完全自動化の連携アーキテクチャ
JAMSTACK & ZERO-SERVER COST
01 Admin & Content
✍️
コンテンツ更新
直感的なCMS / Markdown
ブログや制作実績を管理画面からワンクリック入稿。直感的なUIで専門スキル不要。
→
02 Automation
⚙️
自動ビルド & CI/CD
GitHub Actions × Astro
更新をWebhookで検知。TypeScriptで型チェック後、最速SSGエンジンで静的HTMLを生成。
→
03 Global Edge
🌐
エッジ高速配信
Cloudflare Pages CDN
世界300箇所以上のエッジサーバーへ即時分散配置。0.1秒台の爆速レスポンスを実現。
→
04 User Experience
🏆
訪問者体験 & 成約
高CV率・最高パフォーマンス
表示待ちストレスゼロ・スマホ快適表示・魅力的な演出で離脱を防ぎ、高いコンバージョンを獲得。
💡
構成について相談する →
サーバー運用保守の手間・コストは完全ゼロ。 脆弱性によるサイト改ざんリスクや深夜のサーバー停止トラブルから完全に解放されます。
採用技術スタック詳細（12選）
プロジェクトの要件に合わせて最適な組み合わせをご提案します。
🚀 コアSSG
Astro
Core Framework爆速表示を叶える最新鋭SSG
不要なJavaScriptをブラウザに送らない「アイランドアーキテクチャ」により、極限の表示速度と卓越したSEO評価を実現。
導入メリット
初回描画速度の劇的向上
JS依存を削ぎ落とした高SEO評価
コンポーネント指向の高い拡張性
🛡️ 型安全性
TypeScript
Languageバグを未然に防ぐ厳格な型安全
コードの品質と保守性を飛躍的に高める静的型付け。将来の機能拡張やリニューアル時にも壊れにくい堅牢な基盤を提供。
導入メリット
本番エラーの未然防止
長期メンテナンス性の担保
チーム開発・引き継ぎの容易さ
⚡ 超高速ビルド
Vite
Build Engineミリ秒単位のビルド＆アセット最適化
最新のESモジュールネイティブによる超高速ビルド。CSSや画像の自動最適化・圧縮を行い、最軽量な配信アセットを生成。
導入メリット
高効率なファイル圧縮・バンドル
開発サイクルの劇的短縮
モダンブラウザ標準の最適化
🎨 デザインシステム
Tailwind CSS
Styling破綻しない統一デザイン設計
ユーティリティファーストによる厳密なスペーシング・タイポグラフィ設計。コードの肥大化を防ぎ、常にクリーンな状態を維持。
導入メリット
統一されたデザイントークン
CSSファイルサイズの極小化
スマホ・タブレット完全レスポンシブ
🔤 Webフォント
Google Fonts
Typography速度と美しさを両立する最適フォント
8種類以上のプレミアムWebフォントを非同期・事前接続（preconnect）で配信。フォント読み込みによるチラつきや遅延をゼロに。
導入メリット
ブランド世界観の直感的表現
表示速度を損なわない非同期ロード
日本語・欧文のハイブリッド調和
✨ UX演出
Micro-Interactions
UI / UX訪問者を惹きつける上質な操作感
スクロール連動アニメーション、ボタンのホバー演出など、心地よい操作体験を演出。離脱を防ぎ、滞在時間を向上させます。
導入メリット
直感的で楽しい操作感
ブランドの先進性・プロ感のアピール
コンバージョン導線への誘導率UP
📑 ノーコード運用
ヘッドレスCMS
Content API誰でも更新できる安全な管理画面
WordPressのような重いデータベースや脆弱性を排除。APIベースでブログ・事例・お知らせをスマホやPCから直感的に更新可能。
導入メリット
直感的な管理UIで専門知識不要
WordPress比でセキュリティリスク99%削減
データベース保守不要で低運用コスト
🗂️ 構造化データ
Content Collections
Data ManagementMarkdown / データ整合性の自動担保
静的コンテンツのフォーマットや型（スキーマ）を厳格にバリデーション。入稿時のタイポやリンク切れを自動で検知して防止。
導入メリット
Git連携によるバージョン履歴管理
入稿ミスの自動検知システム
超高速な静的コンテンツ配信
🌐 エッジCDN
Cloudflare Pages
Hosting & CDN世界300都市以上からの超低遅延配信
アクセス急増でもサーバーダウン皆無。エンタープライズ水準の高耐久インフラと強固なDDoS防御を標準搭載。
導入メリット
常時0.1秒台のエッジ高速レスポンス
アクセス集中時のサーバーダウン防止
SSL（HTTPS）暗号化通信の標準化
⚙️ 自動化パイプライン
GitHub CI/CD
DevOps / Automation入稿・更新と同時に本番へ即時反映
CMSでの記事公開やコード更新をトリガーに、自動テスト・ビルド・全世界へのCDNキャッシュクリアを完全自動で実行。
導入メリット
手動デプロイによる人的ミスの排除
更新後わずか数十秒で世界中に反映
万一のトラブル時の即座ロールバック
📈 集客・拡散
SEO & OGP / 構造化データ
Marketing検索上位表示とSNS拡散を最適化
Google検索エンジンに正しくサイト価値を伝えるJSON-LD構造化データ、X（旧Twitter）やFacebookで映えるOGPタグを網羅。
導入メリット
Google検索結果のリッチリザルト対応
SNSシェア時の高クリック率カード生成
メタディスクリプション・見出し最適化
💯 最高品質基準
Lighthouse 満点品質
Quality AssuranceGoogleが推奨する指標を徹底追求
Performance / Accessibility / Best Practices / SEO の4項目を徹底分析・改善。訪問者にも検索エンジンにも優しいWeb品質。
導入メリット
Core Web Vitals（表示速度指標）の完全準拠
多様なユーザーに届くアクセシビリティ
競合サイトに差をつける最高水準スコア
CONTACT & ORDER
制作のご相談・お見積り
「こんな動きのWebサイトを作りたい」「ココナラで見積もりを取りたい」など、些細なことでもお気軽にご相談ください。
通常、原則24時間以内にご返答いたします。
ココナラ出品中
即レス対応
ココナラで相談する
安心のエスクロー決済（仮払い）。出品中のサービスへのご質問や、カスタム要件のお見積もりを個別にお受けいたします。
クラウドワークス対応
本人確認済
クラウドワークスで相談する
クラウドワークス経由での発注をご希望の方はこちら。規約に沿った安心・安全なお取引フローで迅速に納品いたします。
※ 各プラットフォームご利用中のお客様へ：
ココナラやクラウドワークス経由でご覧いただいた場合は、利用規約遵守のため、直接取引を行わず各サービス内のメッセージよりお問い合わせください。