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
スタートアップ クリエイティブ サービス紹介 D2C
USER INPUT LIVE PREVIEW
play.dy design — 遊び心を、Webの力に。
ENGLISH HEADLINE SPECIMEN

Crafting Modern Digital Experiences.

JAPANESE SPECIMEN

遊び心とテクノロジーで、ビジネスを加速させる。

CHARACTERS & NUMBERS
ABCDEFGHIJKLMNOPQRSTUVWXYZ
abcdefghijklmnopqrstuvwxyz 0123456789 &?!@#%

正円に近い美しい幾何学構造を持ち、視認性の高さと親しみやすい清潔感を両立する王道モダンフォント。

SHOWCASE LAB (18 SAMPLES)

デザイン&技術ショーケース

業種や目的に合わせたUI設計・アニメーション・レスポンシブ表現のサンプルです。 各カードから**実際のライブデモページ**を操作して仕上がりをご確認いただけます。

テスト美容サロン LP制作 LP制作
STANDARD スタンダードプラン
¥65,000〜 約 10〜14 営業日

テスト美容サロン LP制作

CLIENT: UI/UX Showcase
SCOPE: デザイン / コーディング

お客様のビジネス課題を解決するためのWeb制作・LP制作を行いました。

#ショーケース #レスポンシブ
デモを開く
プライベートオーガニックスパ 公式集客LP 高転換LP設計
LIGHT ライトプラン
¥38,000〜 約 5〜7 営業日

プライベートオーガニックスパ 公式集客LP

CLIENT: エステ・美容サロン
SCOPE: 構成設計 / UIデザイン / 高速コーディング

上質な静寂と癒やしを伝えるフルスクリーンビジュアル設計。スマホ閲覧時のWEB予約率向上を狙った導線配置。

#サロンLP #フルスクリーン #レスポンシブ
デモを開く
次世代AI業務自動化プラットフォーム プロダクトLP リッチ演出 & UI
CUSTOM フルカスタムプラン
¥110,000〜 約 14〜18 営業日

次世代AI業務自動化プラットフォーム プロダクトLP

CLIENT: ITスタートアップ企業
SCOPE: UI/UXデザイン / フロントエンド実装 / ダッシュボード

Linear/Stripe水準のクリーンホワイトモダンUI。知性とエンタープライズの信頼感を伝えるプロダクトLP。

#BtoB SaaS #クリーンホワイト #ダッシュボードUI
デモを開く
クリエイティブWebデザインスタジオ コーポレートサイト リッチ演出 & UI
LIGHT ライトプラン
¥45,000〜 約 5〜7 営業日

クリエイティブWebデザインスタジオ コーポレートサイト

CLIENT: デザイン制作会社
SCOPE: ブランド戦略 / アートディレクション / 実装

遊び心と緻密なグリッドシステムを融合させた、クリエイティブスタジオの理念と実績を魅せるモノトーンWebサイト。

#ブランディング #ミニマル #モノトーン
デモを開く
急成長テック企業 エンジニア&デザイナー採用特化LP 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 高転換LP設計
STANDARD スタンダードプラン
¥70,000〜 約 10〜14 営業日

完全オンラインプログラミングスクール 無料体験獲得LP

CLIENT: オンライン教育事業者
SCOPE: 構成企画 / デザイン / インタラクティブ診断実装

リアルタイム適性年収診断シミュレーターを搭載。国の給付金最大70%訴求で無料カウンセリング成約率を最大化。

#スクールLP #CVR最適化 #適性診断
デモを開く
最新設備と安心感を届ける 美容皮膚科クリニックLP 高転換LP設計
STANDARD スタンダードプラン
¥68,000〜 約 10〜14 営業日

最新設備と安心感を届ける 美容皮膚科クリニックLP

CLIENT: 美容皮膚科・医療法人
SCOPE: デザイン設計 / レスポンシブ実装

アーチ型ウィンドウとアシンメトリーな雑誌風レイアウト。ペールグレージュ基調の圧倒的な透明感と清潔感。

#医療・クリニック #エディトリアル #アーチ型UI
デモを開く
建築家と創るデザイナーズ注文住宅 施工事例LP ブランド世界観
STANDARD スタンダードプラン
¥75,000〜 約 10〜14 営業日

建築家と創るデザイナーズ注文住宅 施工事例LP

CLIENT: 建築設計事務所・工務店
SCOPE: 構成提案 / UIデザイン / コーディング

洗練されたフルスクリーンパノラマ写真と美しいタイポグラフィで、建築美と完成見学会の予約を最大化。

#住宅・建築 #写真ギャラリー #見学会予約
デモを開く
ボタニカルコスメ D2CブランドプロモーションLP ブランド世界観
STANDARD スタンダードプラン
¥68,000〜 約 10〜14 営業日

ボタニカルコスメ D2CブランドプロモーションLP

CLIENT: コスメ・スキンケアブランド
SCOPE: 世界観設計 / デザイン / 実装

透かし欧文タイポグラフィと立体浮遊バッジによるラグジュアリースプリット。初回65%OFFの特大オファー訴求。

#D2C・EC #エディトリアル #定期便オファー
デモを開く
24時間完全個室パーソナルジム 無料体験予約LP 高転換LP設計
STANDARD スタンダードプラン
¥65,000〜 約 10〜12 営業日

24時間完全個室パーソナルジム 無料体験予約LP

CLIENT: フィットネスクラブ・パーソナルジム
SCOPE: 構成企画 / デザイン / レスポンシブ実装

都会のウェルネスホテル風クリーンライトデザイン。動的なビフォーアフター切り替えUIと入会金¥0オファー。

#フィットネス #ビフォーアフター #ウェルネスホテル風
デモを開く
NEO-CYBER 2088 次世代XR&サイバーセキュリティLP リッチ演出 & UI
CUSTOM フルカスタムプラン (リッチ演出)
¥120,000〜 約 16〜20 営業日

NEO-CYBER 2088 次世代XR&サイバーセキュリティLP

CLIENT: XR・Web3メタバース開発企業
SCOPE: 世界観設計 / サイバーUIデザイン / アニメーション実装

蛍光ネオンシアン×マゼンタ、CRT走査線、リアルタイムHUDターミナルを徹底実装した中途半端を排した近未来サイバーパンクLP。

#サイバーパンク #ネオン演出 #HUDインターフェース
デモを開く
間 - AIDA 建築と工芸の余白美 エディトリアルLP 高転換LP設計
STANDARD スタンダードプラン
¥65,000〜 約 10〜14 営業日

間 - AIDA 建築と工芸の余白美 エディトリアルLP

CLIENT: 建築設計事務所 / 現代工芸アトリエ
SCOPE: 縦書きエディトリアル設計 / アートディレクション / 実装

「余白に、呼吸を宿す。」をコンセプトにした縦書きエディトリアルLP。自然素材の陰影や光の移ろいを静謐に伝えるアースモダンデザイン。

#間 AIDA #縦書き組版 #余白美
デモを開く
PULSE.DYNA 音響数理&アルゴリズムメディアスタジオ リッチ演出 & UI
CUSTOM フルカスタムプラン (リッチ演出)
¥110,000〜 約 16〜20 営業日

PULSE.DYNA 音響数理&アルゴリズムメディアスタジオ

CLIENT: 先端メディアアート / 音響エンジニアリング集団
SCOPE: Canvas幾何学演出 / インタラクティブUI設計 / 実装

音響周波数と空間幾何学をブラウザ上で有機的に合成。エレクトリックライムとヴァイオレットの光彩がカーソルに連動する先鋭的Webメディア。

#PULSE.DYNA #ジェネレーティブ #音響数理
デモを開く
SILENT VOYAGE 極地と現代建築のドキュメンタリー写真録 高転換LP設計
STANDARD スタンダードプラン
¥75,000〜 約 10〜12 営業日

SILENT VOYAGE 極地と現代建築のドキュメンタリー写真録

CLIENT: エクスペディション写真家 / 現代美術作家
SCOPE: ギャラリーレイアウト設計 / Lightbox実装 / パフォーマンス最適化

極地探検と現代建築の光と影を記録したドキュメンタリー写真録。規則的な枠を解き放ち、写真そのものが呼吸するアシンメトリー空間配置。

#SILENT VOYAGE #アシンメトリー #Lightbox拡大
デモを開く
DIGITAL KINETICS 数理と美意識のスクロールアーキテクチャ リッチ演出 & UI
STANDARD スタンダードプラン
¥70,000〜 約 10〜14 営業日

DIGITAL KINETICS 数理と美意識のスクロールアーキテクチャ

CLIENT: クリエイティブディレクター / テックアーキテクト
SCOPE: スクロール連動設計 / フロントエンド実装 / パフォーマンス最適化

「美意識を、数理とコードで駆動する。」を体現したスクロール完全同期型ポートフォリオ。縦スクロール量と同期して画像がズーム&横スライドする圧倒的な没入感。

#DIGITAL KINETICS #スクロール完全連動 #Stickyズーム
デモを開く
SPATIAL SQUARES 空間パララックス&スクエアポートフォリオ リッチ演出 & UI
STANDARD スタンダードプラン
¥72,000〜 約 10〜14 営業日

SPATIAL SQUARES 空間パララックス&スクエアポートフォリオ

CLIENT: 建築設計事務所 / アートディレクター / 先端デザインスタジオ
SCOPE: 世界観構築 / 多層パララックス実装 / インタラクション設計

手前のコンテンツと奥の背景でスクロール速度に差をつける多層パララックス(視差効果)と、ホバー時に中央から浮かび上がる正円サークルマスクを搭載したミニマル・エディトリアルポートフォリオ。

#パララックス視差 #スクエアグリッド #正円サークルマスク
デモを開く
ATELIER FONDANT シネマティック動画オープナー&動的クラフトスイーツLP (全部入り) リッチ演出 & UI
CUSTOM フルカスタムプラン (全部入り)
¥120,000〜 約 14〜18 営業日

ATELIER FONDANT シネマティック動画オープナー&動的クラフトスイーツLP (全部入り)

CLIENT: クラフトスイーツブランド / D2C食品 / プレミアム洋菓子
SCOPE: シネマティック映像連携 / 有機的モーフィング実装 / フルスタックUI

アクセス直後の全画面シネマティック動画から、とろける有機的ブロッブシェイプで本編へ展開。動的プロダクトスライダーやマグネティックホバーなど多彩な技術を凝縮した全部入りショーケース。

#全画面動画オープナー #有機的ブロッブ #動的スライダー
デモを開く
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 満点品質のパフォーマンス・アクセシビリティ追求
フルカスタムプランで相談する
WORKFLOW & AFTER-SUPPORT

受注から納品・アフターフォローまでの流れ

ご発注からヒアリング、試作プレビュー、修正、本番公開、納品後のサポート期間までをプランごとに可視化。初めてのご依頼でも迷わず安心して進めていただけます。

★ STANDARD PLAN WORKFLOW (一番人気)

完全オリジナル設計 & 納得の伴走プロセス

目安やり取り: 5〜8往復 修正対応: 2回無料対応 サポート: 納品後14日間
STEP 01 1〜3日目
企画ヒアリング & 構成支援

ターゲット心理・競合リサーチを実施。成約率を高めるストーリー構成とコピーライティングをご提案。

オンライン / チャット
STEP 02 4〜6日目
オリジナルUI試作 & すり合わせ

ファーストビューやキービジュアルの試作を提示。デザインの方向性・配色を合意(※この段階は修正カウント外)。

方向性の完全すり合わせ
STEP 03 7〜10日目
高速実装 & テストURL発行

アニメーション演出・スマホ最適化・フォーム連携を完全実装。実際にスマホで触れるプレビューをご共有。

触れる実機環境
STEP 04 11〜12日目
第1回 まとめ修正 (全体レビュー)

実機を操作いただき、文章の言い回しや写真配置など気になる点を箇条書きでまとめて一括反映。

第1回 まとめ修正
STEP 05 13日目
第2回 まとめ修正 & 最終仕上げ

修正箇所の確認、誤字脱字・リンク導線・SEO/OGP設定の最終点検。納得のいく完成形へと仕上げます。

第2回 最終仕上げ
STEP 06 14日目〜
本番公開 & 14日間伴走サポート

世界最速エッジ配信で公開完了!納品後14日間は軽微な文言差し替えや操作サポートを無償で手厚く伴走。

14日間安心サポート
💡

修正対応とキャッチボールについての安心のお約束 PEACE OF MIND

「修正1回・2回」とは、単発のメッセージ1通のことではなく、複数箇所の修正要望を箇条書きでまとめてご指示いただける「まとめ修正フェーズ(ラウンド)」のことです。

✔ 制作初期のヒアリングや試作段階での「方向性のすり合わせ」は修正回数に含みません。
✔ 実際にスマホで触れるテスト画面を見ながら、納得いくまで丁寧にキャッチボールいたします。
✔ 公開後もプランに応じた無料サポート期間(7〜30日間)が付帯するため安心です。

カスタマイズ・追加オプション

案件の規模や要件に応じて自由にお選びいただけます。

ヘッドレスCMS(microCMS等)導入

お知らせや事例、ブログをご自身でスマホ・PCから即時更新できる管理画面の構築

+25,000円〜
お問い合わせ・予約フォーム実装

自動返信メール・スパム防止(Cloudflare Turnstile)付きセキュアフォーム

+10,000円〜
特急納品対応(納期を約半減)

公開をお急ぎの方向けに最優先でスケジュールを確保し集中制作

+20,000円〜
独自ドメイン&CDN設定代行

お名前.com等でのドメイン取得からCloudflareへのDNS設定・常時SSL化まで代行

+5,000円〜
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の先端技術構成。

CONTACT & ORDER

制作のご相談・お見積り

「こんな動きのWebサイトを作りたい」「ココナラで見積もりを取りたい」など、些細なことでもお気軽にご相談ください。
通常、原則24時間以内にご返答いたします。

ココナラ出品中 即レス対応

ココナラで相談する

安心のエスクロー決済(仮払い)。出品中のサービスへのご質問や、カスタム要件のお見積もりを個別にお受けいたします。

ココナラ プロフィールを開く
クラウドワークス対応 本人確認済

クラウドワークスで相談する

クラウドワークス経由での発注をご希望の方はこちら。規約に沿った安心・安全なお取引フローで迅速に納品いたします。

クラウドワークス プロフィールを開く

※ 各プラットフォームご利用中のお客様へ:
ココナラやクラウドワークス経由でご覧いただいた場合は、利用規約遵守のため、直接取引を行わず各サービス内のメッセージよりお問い合わせください。