V0 Vercelをデザイナー視点で実際に使ってみた！活用例4選ご紹介

【依頼】
以下のスライド構成案をもとに10ページのスライド資料を作成してください。画像が入るスペースを確保してください。作図の方が見やすい場所は作図してください。アクセントカラーは”#95BB55″、背景色は”#EEFED3″で作ってください。

スライド構成案
1. 表紙
タイトル：「WordPress STUDIO サービス紹介」
サブタイトル：「ノーコード＆ローコストで実現するWebサイト運営」
ロゴ：株式会社トラムのロゴ（公式サイトより）
背景画像：公式サイトのメインビジュアル（https://t-r-a-m.jp/）

2. 会社概要
会社名：株式会社トラム
所在地：東京都渋谷区恵比寿南1-1-1（例）
設立：2010年（例）
代表者：田中 太郎（例）
事業内容：Webサイト制作、WordPress開発、マーケティング支援

3. サービス概要
サービス名：WordPress STUDIO
特徴：ノーコードでのサイト運営、ローコスト、SEO最適化
対象：中小企業、スタートアップ、個人事業主

4. サービスの特徴
ノーコードエディターによる簡単更新
LP型トップページでの高い接客力
下層ページの自由な編集
SEOに強い構造

5. 提供する機能
ドメイン取得・管理
サーバー設定
セキュリティ対策
マーケティング支援（オプション）

6. 制作実績
学校法人あいうえお専門学校：学校サイト制作
かきくけこ：とんかつ屋さんサイト制作
さしすせそ株式会社：製品サイト制作
株式会社たちつてと：サービスサイト制作

7. お客様の声
株式会社なにぬねの：「ブランディング強化、UI/UX向上のためにサイトリニューアルを実施」
はひふへほ商事：「20以上の海外菓子・食品ブランドを表現するためLPデザイナーを採用」
株式会社まみむめも：「使いやすいカートシステム・タイムリーなコンテンツ配信のためShopifyを採用」

8. サポート体制
ヒアリング力：お客様の要望を的確に把握
提案型進行：論理的かつ提案型でのプロジェクト進行
PMシート：進行状況の可視化と共有

9. 制作の流れ
無料相談
ヒアリング
提案・見積もり
制作・開発
公開・運用開始

10. お問い合わせ
電話番号：03-1234-5678（例）
メール： informationt-r-a-m.jp

トラムくんというキャラクターを主人公にしたインタラクティブなノベルゲームを作ってください。始まりのストーリーは以下に記載します。分岐を用意してエンディングを5つ用意してください。「」で囲ってあるセリフはアップロードするキャラクターに読ませたいので抽出してください。UI、UXは”#95BB55″をアクセントカラーとしポップで可愛らしい印象にしてください。

1. プロローグ：出発進行！トラムくん
   • プレイヤーはトラムくんとして旅に出ることを決意。
   • 音楽：わくわくするような出発BGM。
2. 第1章：ロンドン編「霧と歴史の街」
   • バッキンガム宮殿やビッグ・ベン、ロンドン塔などが登場。
   • 選択肢により「知識を深める」or「仲間を増やす」ルートが展開。
3. 第2章：イタリア編「愛の水路ヴェネチア」
   • ゴンドラに乗って迷路のような水路を巡る。
   • サウンド：水音とアコーディオンの柔らかいBGM。
4. 第3章：日本編「未来と伝統の国」
   • 京都の街並みや新幹線との出会い。
   • 和風サウンドと現代的なテクノの融合。
5. 最終章：ふるさとの街へ
   • 世界を巡って得たものとは？
   • プレイヤーの選択によってエンディングが変化。

🚋 第1章：霧と歴史の街（ロンドン編）
シーン1：霧の街への到着
（BGM：ロンドン風クラシック＋霧の環境音）
セリフ一覧：
01_トラムくん”わあ〜！ ここがロンドンだね！ちょっぴり霧がかかってて、なんだかミステリアス〜！”
02_ロンドンバス”やあ、君がトラムくんだね？はじめまして、僕はロンドンバスのバスティー。この街のことなら何でも聞いてくれ！”
03_トラムくん”よろしくバスティー！いろんな場所を案内してくれる？”
04_バスティー”もちろんさ。まずは——”
分岐：どこに行こう？
選択肢①
「歴史を学びたい！」（知識を深めるルート）
「街の友達に会いたい！」（仲間を増やすルート）

@tailwind base;

@tailwind components;

@tailwind utilities;

body {

color: #222222;

}

input[type=”radio”],

input[type=”checkbox”] {

accent-color: #95bb55;

}

@layer utilities {

.text-balance {

text-wrap: balance;

}

}

@layer base {

:root {

–background: 0 0% 100%;

–foreground: 0 0% 3.9%;

–card: 0 0% 100%;

–card-foreground: 0 0% 3.9%;

–popover: 0 0% 100%;

–popover-foreground: 0 0% 3.9%;

–primary: 84 37% 53%; /* #95BB55のHSL値 */

–primary-foreground: 0 0% 100%;

–secondary: 0 0% 96.1%;

–secondary-foreground: 0 0% 9%;

–muted: 0 0% 96.1%;

–muted-foreground: 0 0% 45.1%;

–accent: 0 0% 96.1%;

–accent-foreground: 0 0% 9%;

–destructive: 0 84.2% 60.2%;

–destructive-foreground: 0 0% 98%;

–border: 0 0% 89.8%;

–input: 0 0% 89.8%;

–ring: 0 0% 3.9%;

–chart-1: 12 76% 61%;

–chart-2: 173 58% 39%;

–chart-3: 197 37% 24%;

–chart-4: 43 74% 66%;

–chart-5: 27 87% 67%;

–radius: 0.5rem;

–sidebar-background: 0 0% 98%;

–sidebar-foreground: 240 5.3% 26.1%;

–sidebar-primary: 240 5.9% 10%;

–sidebar-primary-foreground: 0 0% 98%;

–sidebar-accent: 240 4.8% 95.9%;

–sidebar-accent-foreground: 240 5.9% 10%;

–sidebar-border: 220 13% 91%;

–sidebar-ring: 217.2 91.2% 59.8%;

}

.dark {

–background: 0 0% 3.9%;

–foreground: 0 0% 98%;

–card: 0 0% 3.9%;

–card-foreground: 0 0% 98%;

–popover: 0 0% 3.9%;

–popover-foreground: 0 0% 98%;

–primary: 0 0% 98%;

–primary-foreground: 0 0% 9%;

–secondary: 0 0% 14.9%;

–secondary-foreground: 0 0% 98%;

–muted: 0 0% 14.9%;

–muted-foreground: 0 0% 63.9%;

–accent: 0 0% 14.9%;

–accent-foreground: 0 0% 98%;

–destructive: 0 62.8% 30.6%;

–destructive-foreground: 0 0% 98%;

–border: 0 0% 14.9%;

–input: 0 0% 14.9%;

–ring: 0 0% 83.1%;

–chart-1: 220 70% 50%;

–chart-2: 160 60% 45%;

–chart-3: 30 80% 55%;

–chart-4: 280 65% 60%;

–chart-5: 340 75% 55%;

–sidebar-background: 240 5.9% 10%;

–sidebar-foreground: 240 4.8% 95.9%;

–sidebar-primary: 224.3 76.3% 48%;

–sidebar-primary-foreground: 0 0% 100%;

–sidebar-accent: 240 3.7% 15.9%;

–sidebar-accent-foreground: 240 4.8% 95.9%;

–sidebar-border: 240 3.7% 15.9%;

–sidebar-ring: 217.2 91.2% 59.8%;

}

}

@layer base {

* {

@apply border-border;

}

body {

@apply bg-background text-foreground;

}

}

import Link from “next/link”

import ContactForm from “@/components/contact-form”

export default function Home() {

return (

<div className=”flex flex-col min-h-screen”>

<header className=”bg-primary text-white py-4 text-center”>header</header>

<main className=”flex-1 container mx-auto px-4 py-8″>

<div className=”flex items-center text-sm mb-8″>

<Link href=”/” className=”text-gray-500 hover:underline”>

TOP

</Link>

<span className=”mx-2 text-gray-500″>＞</span>

<span className=”text-gray-500″>お問い合わせ</span>

</div>

<h1 className=”text-2xl font-bold mb-8 text-center”>お問い合わせ</h1>

<ContactForm />

</main>

<footer className=”bg-primary text-white py-4 text-center mt-16″>footer</footer>

</div>

)

}

“use client”

import type React from “react”

import { useState } from “react”

import { ChevronRight } from “lucide-react”

export default function ContactForm() {

const [formData, setFormData] = useState({

name: “山田 太郎”,

furigana: “やまだ たろう”,

radioOption1: “項目名”,

checkOptions: [“項目名”],

company: “株式会社トラム”,

phone: “03-6324-5378”,

email: “info@t-r-a-m.jp”,

message: “”,

privacyPolicy: false,

})

const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {

const { name, value, type } = e.target

const checked = type === “checkbox” ? (e.target as HTMLInputElement).checked : undefined

if (type === “checkbox” && name === “privacyPolicy”) {

setFormData({

…formData,

[name]: checked,

})

} else if (type === “checkbox” && name.startsWith(“checkOptions”)) {

const option = value

const newCheckOptions = […formData.checkOptions]

if ((e.target as HTMLInputElement).checked) {

if (!newCheckOptions.includes(option)) {

newCheckOptions.push(option)

}

} else {

const index = newCheckOptions.indexOf(option)

if (index > -1) {

newCheckOptions.splice(index, 1)

}

}

setFormData({

…formData,

checkOptions: newCheckOptions,

})

} else if (type === “radio” && name === “radioOption1”) {

setFormData({

…formData,

[name]: value,

})

} else {

setFormData({

…formData,

[name]: value,

})

}

}

const handleSubmit = (e: React.FormEvent) => {

e.preventDefault()

// フォーム送信処理をここに実装

console.log(formData)

alert(“送信が完了しました”)

}

return (

<div className=”max-w-3xl mx-auto”>

{/* ステップインジケーター */}

<div className=”flex justify-between mb-12″>

<div className=”bg-primary text-white px-8 py-3 flex items-center”>

<span className=”font-bold mr-2″>01</span>

<span>必要事項のご入力</span>

</div>

<div className=”flex items-center”>

<ChevronRight className=”text-gray-300 mx-2″ />

</div>

<div className=”border border-gray-300 text-gray-500 px-8 py-3 flex items-center”>

<span className=”font-bold mr-2″>02</span>

<span>ご入力内容の確認</span>

</div>

<div className=”flex items-center”>

<ChevronRight className=”text-gray-300 mx-2″ />

</div>

<div className=”border border-gray-300 text-gray-500 px-8 py-3 flex items-center”>

<span className=”font-bold mr-2″>03</span>

<span>送信完了</span>

</div>

</div>

<form onSubmit={handleSubmit}>

<div className=”space-y-6″>

{/* お名前 */}

<div className=”flex”>

<div className=”w-1/4 pt-2″>

<label htmlFor=”name” className=”block”>

お名前

</label>

</div>

<div className=”w-16 text-center”>

<span className=”bg-required text-white text-xs px-2 py-1 rounded”>必須</span>

</div>

<div className=”flex-1″>

<input

type=”text”

id=”name”

name=”name”

value={formData.name}

onChange={handleChange}

placeholder=”例）山田 太郎”

className=”w-full border border-gray-300 p-2″

/>

</div>

</div>

{/* フリガナ */}

<div className=”flex”>

<div className=”w-1/4 pt-2″>

<label htmlFor=”furigana” className=”block”>

ふりがな

</label>

</div>

<div className=”w-16 text-center”>

<span className=”bg-gray-300 text-white text-xs px-2 py-1 rounded”>任意</span>

</div>

<div className=”flex-1″>

<input

type=”text”

id=”furigana”

name=”furigana”

value={formData.furigana}

onChange={handleChange}

placeholder=”例）やまだ たろう”

className=”w-full border border-gray-300 p-2″

/>

</div>

</div>

{/* 項目名ラジオボタン */}

<div className=”flex”>

<div className=”w-1/4 pt-2″>

<label className=”block”>ご項目名</label>

</div>

<div className=”w-16 text-center”>

<span className=”bg-required text-white text-xs px-2 py-1 rounded”>必須</span>

</div>

<div className=”flex-1″>

<div className=”flex space-x-6″>

<label className=”flex items-center”>

<input

type=”radio”

name=”radioOption1″

value=”項目名”

checked={formData.radioOption1 === “項目名”}

onChange={handleChange}

className=”mr-2″

/>

<span>項目名</span>

</label>

<label className=”flex items-center”>

<input

type=”radio”

name=”radioOption1″

value=”項目名2″

checked={formData.radioOption1 === “項目名2”}

onChange={handleChange}

className=”mr-2″

/>

<span>項目名</span>

</label>

<label className=”flex items-center”>

<input

type=”radio”

name=”radioOption1″

value=”項目名3″

checked={formData.radioOption1 === “項目名3”}

onChange={handleChange}

className=”mr-2″

/>

<span>項目名</span>

</label>

</div>

</div>

</div>

{/* 項目名チェックボックス */}

<div className=”flex”>

<div className=”w-1/4 pt-2″>

<label className=”block”>ご項目名</label>

</div>

<div className=”w-16 text-center”>

<span className=”bg-required text-white text-xs px-2 py-1 rounded”>必須</span>

</div>

<div className=”flex-1″>

<div className=”flex space-x-6″>

<label className=”flex items-center”>

<input

type=”checkbox”

name=”checkOptions”

value=”項目名”

checked={formData.checkOptions.includes(“項目名”)}

onChange={handleChange}

className=”mr-2″

/>

<span>項目名</span>

</label>

<label className=”flex items-center”>

<input

type=”checkbox”

name=”checkOptions”

value=”項目名2″

checked={formData.checkOptions.includes(“項目名2”)}

onChange={handleChange}

className=”mr-2″

/>

<span>項目名</span>

</label>

<label className=”flex items-center”>

<input

type=”checkbox”

name=”checkOptions”

value=”項目名3″

checked={formData.checkOptions.includes(“項目名3”)}

onChange={handleChange}

className=”mr-2″

/>

<span>項目名</span>

</label>

</div>

</div>

</div>

{/* 会社名 */}

<div className=”flex”>

<div className=”w-1/4 pt-2″>

<label htmlFor=”company” className=”block”>

会社名

</label>

</div>

<div className=”w-16 text-center”>

<span className=”bg-gray-300 text-white text-xs px-2 py-1 rounded”>任意</span>

</div>

<div className=”flex-1″>

<input

type=”text”

id=”company”

name=”company”

value={formData.company}

onChange={handleChange}

placeholder=”例）株式会社トラム”

className=”w-full border border-gray-300 p-2″

/>

</div>

</div>

{/* 電話番号 */}

<div className=”flex”>

<div className=”w-1/4 pt-2″>

<label htmlFor=”phone” className=”block”>

電話番号

</label>

</div>

<div className=”w-16 text-center”>

<span className=”bg-required text-white text-xs px-2 py-1 rounded”>必須</span>

</div>

<div className=”flex-1″>

<input

type=”tel”

id=”phone”

name=”phone”

value={formData.phone}

onChange={handleChange}

placeholder=”例）03-6324-5378″

className=”w-full border border-gray-300 p-2″

/>

</div>

</div>

{/* メールアドレス */}

<div className=”flex”>

<div className=”w-1/4 pt-2″>

<label htmlFor=”email” className=”block”>

メールアドレス

</label>

</div>

<div className=”w-16 text-center”>

<span className=”bg-required text-white text-xs px-2 py-1 rounded”>必須</span>

</div>

<div className=”flex-1″>

<input

type=”email”

id=”email”

name=”email”

value={formData.email}

onChange={handleChange}

placeholder=”例）info@t-r-a-m.jp”

className=”w-full border border-gray-300 p-2″

/>

</div>

</div>

{/* お問い合わせ内容 */}

<div className=”flex”>

<div className=”w-1/4 pt-2″>

<label htmlFor=”message” className=”block”>

お問い合わせ内容

</label>

</div>

<div className=”w-16 text-center”>

<span className=”bg-required text-white text-xs px-2 py-1 rounded”>必須</span>

</div>

<div className=”flex-1″>

<textarea

id=”message”

name=”message”

value={formData.message}

onChange={handleChange}

placeholder=”お問い合わせ内容を入力してください”

className=”w-full border border-gray-300 p-2 h-32″

/>

</div>

</div>

{/* プライバシーポリシー */}

<div className=”mt-8 text-center”>

<label className=”flex items-center justify-center”>

<input

type=”checkbox”

name=”privacyPolicy”

checked={formData.privacyPolicy}

onChange={handleChange}

className=”mr-2″

/>

<span>個人情報の取り扱いに同意します</span>

</label>

</div>

{/* 送信ボタン */}

<div className=”mt-8 text-center”>

<button

type=”submit”

disabled={!formData.privacyPolicy}

className={`px-12 py-3 rounded-full ${

formData.privacyPolicy

? “bg-primary text-white hover:bg-primary/90”

: “bg-gray-200 text-gray-500 cursor-not-allowed”

}`}

>

入力内容を確認する

</button>

</div>

</div>

</form>

</div>

)

}

import type { Config } from “tailwindcss”

const { shadcnPlugin } = require(“./lib/shadcn-plugin”)

const config = {

darkMode: [“class”],

content: [

“./pages/**/*.{ts,tsx}”,

“./components/**/*.{ts,tsx}”,

“./app/**/*.{ts,tsx}”,

“./src/**/*.{ts,tsx}”,

“*.{js,ts,jsx,tsx,mdx}”,

],

prefix: “”,

theme: {

container: {

center: true,

padding: “2rem”,

screens: {

“2xl”: “1400px”,

},

},

extend: {

colors: {

border: “hsl(var(–border))”,

input: “hsl(var(–input))”,

ring: “hsl(var(–ring))”,

background: “hsl(var(–background))”,

foreground: “hsl(var(–foreground))”,

primary: {

DEFAULT: “#95BB55”, // 直接HEXカラーコードを使用

foreground: “hsl(var(–primary-foreground))”,

},

secondary: {

DEFAULT: “hsl(var(–secondary))”,

foreground: “hsl(var(–secondary-foreground))”,

},

destructive: {

DEFAULT: “hsl(var(–destructive))”,

foreground: “hsl(var(–destructive-foreground))”,

},

muted: {

DEFAULT: “hsl(var(–muted))”,

foreground: “hsl(var(–muted-foreground))”,

},

accent: {

DEFAULT: “hsl(var(–accent))”,

foreground: “hsl(var(–accent-foreground))”,

},

popover: {

DEFAULT: “hsl(var(–popover))”,

foreground: “hsl(var(–popover-foreground))”,

},

card: {

DEFAULT: “hsl(var(–card))”,

foreground: “hsl(var(–card-foreground))”,

},

required: “#ea4832”,

},

borderRadius: {

lg: “var(–radius)”,

md: “calc(var(–radius) – 2px)”,

sm: “calc(var(–radius) – 4px)”,

},

keyframes: {

“accordion-down”: {

from: { height: “0” },

to: { height: “var(–radix-accordion-content-height)” },

},

“accordion-up”: {

from: { height: “var(–radix-accordion-content-height)” },

to: { height: “0” },

},

},

animation: {

“accordion-down”: “accordion-down 0.2s ease-out”,

“accordion-up”: “accordion-up 0.2s ease-out”,

},

},

},

plugins: [require(“tailwindcss-animate”)],

} satisfies Config

export default config