<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8" />
<title>疑似配信サイト - PC画面＆システム音声</title>
<style>
/* ベースリセット */
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
font-family: sans-serif;
background: #f5f5f5;
color: #333;
}
header, footer {
background: #333;
color: #fff;
padding: 15px;
text-align: center;
}
header h1 {
margin: 0;
font-size: 1.5rem;
letter-spacing: 0.05em;
}
footer p {
margin: 0;
font-size: 0.9rem;
}
main {
max-width: 1200px;
margin: 20px auto;
padding: 20px;
background: #fff;
box-shadow: 0 0 10px rgba(0,0,0,0.1);
}
.page-title {
text-align: center;
margin-bottom: 20px;
font-size: 1.4rem;
}
/* 2カラムレイアウト */
.container {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.video-section {
flex: 1 1 600px;
min-width: 300px;
}
.aside-section {
flex: 1 1 350px;
min-width: 300px;
background: #fafafa;
border-left: 1px solid #ccc;
padding: 10px;
}
/* 動画表示領域 */
.video-wrapper {
background: #000;
overflow: hidden;
}
.video-wrapper video {
display: block;
width: 100%;
height: auto;
background: #000;
}
.video-title {
margin: 10px 0;
font-weight: bold;
}
.video-controls {
text-align: center;
margin-top: 10px;
}
.video-controls button {
margin: 0 5px;
padding: 8px 16px;
font-size: 1rem;
cursor: pointer;
}
/* チャットUI */
.chat-section {
display: flex;
flex-direction: column;
height: 400px;
}
.chat-log {
flex: 1;
border: 1px solid #ccc;
padding: 10px;
overflow-y: auto;
margin-bottom: 10px;
background: #fff;
}
.chat-log p {
margin: 0 0 5px 0;
}
.chat-log p span.username {
font-weight: bold;
color: #3366cc;
margin-right: 5px;
}
.chat-input-area {
display: flex;
gap: 5px;
}
.chat-input-area input[type="text"] {
flex: 1;
padding: 8px;
font-size: 1rem;
}
.chat-input-area button {
padding: 8px 16px;
font-size: 1rem;
cursor: pointer;
}
/* スケジュール */
.schedule {
margin-top: 20px;
}
.schedule h2 {
font-size: 1.2rem;
margin-bottom: 10px;
}
.schedule table {
width: 100%;
border-collapse: collapse;
}
.schedule th, .schedule td {
border: 1px solid #ccc;
padding: 10px;
text-align: center;
}
.schedule th {
background: #f0f0f0;
}
.schedule tr:nth-child(even) {
background: #fafafa;
}
</style>
</head>
<body>
<!-- ヘッダー -->
<header>
<h1>My Advanced Live Streaming (Local Demo)</h1>
</header>
<!-- メインコンテンツ -->
<main>
<div class="page-title">PC画面＆システム音声をローカル再生するデモ</div>
<div class="container">
<!-- ▼ 動画エリア ▼ -->
<section class="video-section">
<div class="video-title">疑似ライブ映像</div>
<div class="video-wrapper">
<video id="liveVideo" controls autoplay></video>
</div>
<!-- ボタン類 -->
<div style="text-align: center; margin-top: 10px;">
<button id="screenShareBtn">画面共有(システム音声)</button>
<button id="cameraShareBtn">カメラ＆マイク</button>
<button id="stopBtn">停止</button>
</div>
<!-- 再生/一時停止/ミュート/全画面 -->
<div class="video-controls">
<button id="playBtn">再生</button>
<button id="pauseBtn">一時停止</button>
<button id="muteBtn">ミュート/解除</button>
<button id="fullscreenBtn">全画面</button>
</div>
<div class="schedule">
<h2>配信スケジュール（仮）</h2>
<table>
<thead>
<tr>
<th>日付</th>
<th>配信タイトル</th>
<th>開始時間</th>
<th>予定</th>
</tr>
</thead>
<tbody>
<tr>
<td>2/15</td>
<td>PC画面共有テスト</td>
<td>18:00</td>
<td>30分</td>
</tr>
<tr>
<td>2/18</td>
<td>音声ミキシング練習</td>
<td>20:00</td>
<td>1時間</td>
</tr>
<tr>
<td>2/20</td>
<td>週末雑談</td>
<td>21:30</td>
<td>2時間</td>
</tr>
</tbody>
</table>
</div>
</section>
<!-- ▼ チャットエリア ▼ -->
<aside class="aside-section">
<h2>チャット</h2>
<div class="chat-section">
<!-- チャットログ -->
<div id="chatLog" class="chat-log"></div>
<!-- 入力フォーム -->
<div class="chat-input-area">
<input type="text" id="usernameInput" placeholder="ユーザー名" />
<input type="text" id="messageInput" placeholder="メッセージを入力…" />
<button id="sendBtn">送信</button>
</div>
</div>
</aside>
</div><!-- /container -->
</main>
<!-- フッター -->
<footer>
<p>© 2025 My Advanced Live Streaming (Local Demo)</p>
</footer>
<script>
/*****************************************************************
* 1. PC画面＆システム音声 or カメラ＆マイクを取得
*****************************************************************/
const video = document.getElementById('liveVideo');
const screenShareBtn = document.getElementById('screenShareBtn');
const cameraShareBtn = document.getElementById('cameraShareBtn');
const stopBtn = document.getElementById('stopBtn');
let localStream = null;
// 画面共有 (PC画面 + システム音声)
async function startScreenShare() {
stopMedia(); // 既存ストリームを止めてから開始
try {
// getDisplayMediaで画面を共有
// audio:true -> Chromeの場合「システム音声を共有」オプションが表示される
localStream = await navigator.mediaDevices.getDisplayMedia({
video: true,
audio: true // ただしブラウザやOSによっては無視される可能性あり
});
video.srcObject = localStream;
// システム音声をモニタリングする場合、ミュートOFFにする
video.muted = false;
console.log('画面共有開始 (システム音声含む可能性)');
} catch (err) {
alert('画面共有を開始できませんでした: ' + err.message);
}
}
// カメラ＆マイク
async function startCameraShare() {
stopMedia();
try {
localStream = await navigator.mediaDevices.getUserMedia({video: true, audio: true});
video.srcObject = localStream;
// 自分のマイク音声がループしないようにしたい場合は video.muted = true;
video.muted = true;
console.log('カメラ＆マイク開始');
} catch (err) {
alert('カメラ/マイクを取得できませんでした: ' + err.message);
}
}
// 停止
function stopMedia() {
if (!localStream) return;
localStream.getTracks().forEach(track => track.stop());
localStream = null;
video.srcObject = null;
console.log('メディア停止');
}
screenShareBtn.addEventListener('click', startScreenShare);
cameraShareBtn.addEventListener('click', startCameraShare);
stopBtn.addEventListener('click', stopMedia);
/*****************************************************************
* 2. 再生/一時停止/ミュート/全画面など動画コントロール
*****************************************************************/
const playBtn = document.getElementById('playBtn');
const pauseBtn = document.getElementById('pauseBtn');
const muteBtn = document.getElementById('muteBtn');
const fullscreenBtn = document.getElementById('fullscreenBtn');
playBtn.addEventListener('click', () => {
video.play();
});
pauseBtn.addEventListener('click', () => {
video.pause();
});
muteBtn.addEventListener('click', () => {
video.muted = !video.muted;
});
fullscreenBtn.addEventListener('click', () => {
if (!document.fullscreenElement) {
video.requestFullscreen().catch(err => {
console.warn('フルスクリーンモードにできません:', err);
});
} else {
document.exitFullscreen();
}
});
/*****************************************************************
* 3. 簡易チャット機能（ローカルのみ）
*****************************************************************/
const chatLog = document.getElementById('chatLog');
const usernameInput = document.getElementById('usernameInput');
const messageInput = document.getElementById('messageInput');
const sendBtn = document.getElementById('sendBtn');
let messages = [];
function renderChatLog() {
chatLog.innerHTML = '';
messages.forEach(msg => {
const p = document.createElement('p');
const userSpan = document.createElement('span');
userSpan.className = 'username';
userSpan.textContent = msg.username + ': ';
const textNode = document.createTextNode(msg.text);
p.appendChild(userSpan);
p.appendChild(textNode);
chatLog.appendChild(p);
});
chatLog.scrollTop = chatLog.scrollHeight;
}
function sendMessage() {
const username = usernameInput.value.trim();
const text = messageInput.value.trim();
if (!username || !text) return;
messages.push({ username, text });
renderChatLog();
messageInput.value = '';
}
sendBtn.addEventListener('click', sendMessage);
messageInput.addEventListener('keydown', e => {
if (e.key === 'Enter') sendMessage();
});
// デモ用メッセージ
(function initDemoChat() {
messages.push(
{ username: 'Alice', text: 'こんにちは！' },
{ username: 'Bob', text: 'システム音声聞こえる？' },
{ username: 'Carol', text: 'タブの音は共有できてます〜' }
);
renderChatLog();
})();
</script>
</body>
</html>
ARTBOOK
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ARTBOOK - アートSNS</title>
<style>
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
margin: 0;
padding: 0;
background-color: #f9fafb;
color: #333;
}
header {
background-color: #4a5568;
color: white;
padding: 1.5rem;
text-align: center;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
header h1 {
margin: 0;
font-size: 2.5rem;
}
header p {
margin: 0.5rem 0;
font-size: 1.2rem;
}
header nav {
margin-top: 1rem;
}
header nav a {
color: white;
text-decoration: none;
margin: 0 1rem;
font-weight: bold;
font-size: 1.1rem;
padding: 0.5rem 1rem;
border-radius: 5px;
transition: background-color 0.3s;
}
header nav a:hover {
background-color: #2d3748;
}
.container {
max-width: 1200px;
margin: 2rem auto;
padding: 1rem;
}
.form-group {
margin-bottom: 1rem;
}
.form-group label {
display: block;
margin-bottom: 0.5rem;
font-weight: bold;
}
.form-group input, .form-group textarea {
width: 100%;
padding: 0.8rem;
border: 1px solid #d2d6dc;
border-radius: 6px;
background-color: #f7fafc;
font-size: 1rem;
}
.form-group button {
background-color: #3182ce;
color: white;
border: none;
padding: 0.8rem 1.5rem;
font-size: 1rem;
border-radius: 6px;
cursor: pointer;
transition: background-color 0.3s;
}
.form-group button:hover {
background-color: #2b6cb0;
}
.profile {
text-align: center;
}
.profile img {
width: 150px;
height: 150px;
border-radius: 50%;
object-fit: cover;
margin-bottom: 1rem;
}
footer {
text-align: center;
padding: 1.5rem;
background-color: #4a5568;
color: white;
margin-top: 2rem;
}
footer p {
margin: 0;
font-size: 1rem;
}
</style>
</head>
<body>
<header>
<h1>ARTBOOK</h1>
<p>あなたのアートをシェアしよう！</p>
<nav>
<a href="#home" onclick="navigateTo('home')">ホーム</a>
<a href="#gallery" onclick="navigateTo('gallery')">作品一覧</a>
<a href="#post" onclick="navigateTo('post')">投稿する</a>
<a href="#profile" onclick="navigateTo('profile')">プロフィール</a>
</nav>
</header>
<div id="content" class="container">
<!-- コンテンツがここに動的に挿入されます -->
</div>
<footer>
<p>© 2025 ARTBOOK. All Rights Reserved.</p>
</footer>
<script>
let posts = JSON.parse(localStorage.getItem('posts')) || [];
let profile = JSON.parse(localStorage.getItem('profile')) || {
name: "未設定",
bio: "ここに自己紹介が表示されます",
image: "https://via.placeholder.com/150"
};
function navigateTo(section) {
const content = document.getElementById('content');
content.innerHTML = '';
if (section === 'home') {
content.innerHTML = `<h2>ホーム</h2><p>ようこそ、ARTBOOKへ！最新のアート作品をご覧ください。</p>`;
} else if (section === 'gallery') {
content.innerHTML = `<h2>作品一覧</h2><div id='gallery'>${renderPosts()}</div>`;
} else if (section === 'post') {
content.innerHTML = `
<h2>投稿する</h2>
<form id="postForm">
<div class="form-group">
<label for="title">タイトル</label>
<input type="text" id="title" name="title" required>
</div>
<div class="form-group">
<label for="description">説明</label>
<textarea id="description" name="description" rows="4" required></textarea>
</div>
<div class="form-group">
<label for="upload">画像アップロード</label>
<input type="file" id="upload" name="upload" accept="image/*" required>
</div>
<div class="form-group">
<button type="button" onclick="submitPost()">投稿する</button>
</div>
</form>`;
} else if (section === 'profile') {
content.innerHTML = `
<h2>プロフィール</h2>
<div class="profile">
<img src="${profile.image}" alt="プロフィール画像">
<h3>${profile.name}</h3>
<p>${profile.bio}</p>
<form id="profileForm">
<div class="form-group">
<label for="name">名前</label>
<input type="text" id="name" value="${profile.name}" required>
</div>
<div class="form-group">
<label for="bio">自己紹介</label>
<textarea id="bio" rows="4" required>${profile.bio}</textarea>
</div>
<div class="form-group">
<label for="profileImage">プロフィール画像</label>
<input type="file" id="profileImage" accept="image/*">
</div>
<div class="form-group">
<button type="button" onclick="updateProfile()">更新する</button>
</div>
</form>
</div>`;
}
}
function submitPost() {
const title = document.getElementById('title').value;
const description = document.getElementById('description').value;
const upload = document.getElementById('upload').files[0];
if (title && description && upload) {
const reader = new FileReader();
reader.onload = function(event) {
posts.push({ title, description, image: event.target.result });
localStorage.setItem('posts', JSON.stringify(posts));
alert('投稿が完了しました！');
navigateTo('gallery');
};
reader.readAsDataURL(upload);
} else {
alert('すべてのフィールドを入力してください。');
}
}
function updateProfile() {
const name = document.getElementById('name').value;
const bio = document.getElementById('bio').value;
const profileImage = document.getElementById('profileImage').files[0];
if (name && bio) {
if (profileImage) {
const reader = new FileReader();
reader.onload = function(event) {
profile.image = event.target.result;
saveProfile(name, bio);
};
reader.readAsDataURL(profileImage);
} else {
saveProfile(name, bio);
}
} else {
alert('すべてのフィールドを入力してください。');
}
}
function saveProfile(name, bio) {
profile.name = name;
profile.bio = bio;
localStorage.setItem('profile', JSON.stringify(profile));
alert('プロフィールが更新されました！');
navigateTo('profile');
}
function renderPosts() {
if (posts.length === 0) {
return '<p>まだ投稿がありません。</p>';
}
return posts.map(post => `
<div class="art-card">
<img src="${post.image}" alt="${post.title}">
<h2>${post.title}</h2>
<p>${post.description}</p>
</div>`).join('');
}
// 初期表示
navigateTo('home');
</script>
</body>
</html>百科事典サイト
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Encyclopedia</title>
<style>
body {
font-family: Arial, sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
}
header {
background-color: #2c3e50;
color: white;
padding: 20px;
text-align: center;
}
nav {
display: flex;
justify-content: center;
background-color: #34495e;
padding: 10px;
}
nav a {
color: white;
text-decoration: none;
margin: 0 15px;
font-weight: bold;
}
nav a:hover {
text-decoration: underline;
}
.search-bar {
display: flex;
justify-content: center;
margin: 20px 0;
}
.search-bar input {
width: 60%;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
}
.search-bar button {
padding: 10px 20px;
background-color: #2c3e50;
color: white;
border: none;
border-radius: 5px;
margin-left: 5px;
cursor: pointer;
font-size: 16px;
}
.search-bar button:hover {
background-color: #34495e;
}
.categories, .articles, .about {
margin: 20px;
padding: 20px;
background-color: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.categories h2, .articles h2, .about h2 {
margin-bottom: 15px;
font-size: 24px;
}
.categories ul, .articles ul {
list-style: none;
padding: 0;
}
.categories li, .articles li {
margin-bottom: 10px;
}
.categories a, .articles a {
color: #2c3e50;
text-decoration: none;
font-size: 18px;
}
.categories a:hover, .articles a:hover {
text-decoration: underline;
}
.about p {
line-height: 1.6;
font-size: 18px;
color: #333;
}
.featured {
margin: 20px;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.featured-item {
background-color: white;
border-radius: 5px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
overflow: hidden;
}
.featured-item img {
width: 100%;
height: auto;
}
.featured-item h3 {
margin: 15px;
font-size: 20px;
color: #2c3e50;
}
.featured-item p {
margin: 15px;
line-height: 1.5;
color: #666;
}
.featured-item a {
display: block;
text-align: center;
padding: 10px;
margin: 15px;
background-color: #2c3e50;
color: white;
text-decoration: none;
border-radius: 5px;
}
.featured-item a:hover {
background-color: #34495e;
}
footer {
background-color: #2c3e50;
color: white;
text-align: center;
padding: 10px 0;
margin-top: 20px;
}
</style>
</head>
<body>
<header>
<h1>Welcome to the Encyclopedia</h1>
<p>Your go-to source for comprehensive knowledge</p>
</header>
<nav>
<a href="#">Home</a>
<a href="#categories">Categories</a>
<a href="#articles">Popular Articles</a>
<a href="#about">About</a>
</nav>
<div class="search-bar">
<input type="text" placeholder="Search articles...">
<button>Search</button>
</div>
<section id="categories" class="categories">
<h2>Categories</h2>
<ul>
<li><a href="#">Science</a></li>
<li><a href="#">Technology</a></li>
<li><a href="#">History</a></li>
<li><a href="#">Geography</a></li>
<li><a href="#">Culture</a></li>
</ul>
</section>
<section id="articles" class="articles">
<h2>Featured Articles</h2>
<ul>
<li><a href="#">The Wonders of Space Exploration</a></li>
<li><a href="#">The Rise and Fall of Ancient Civilizations</a></li>
<li><a href="#">Understanding Quantum Mechanics</a></li>
<li><a href="#">The Impact of AI on Modern Society</a></li>
<li><a href="#">World's Most Breathtaking Landscapes</a></li>
</ul>
</section>
<section class="featured">
<div class="featured-item">
<img src="https://via.placeholder.com/300" alt="Space Exploration">
<h3>The Wonders of Space Exploration</h3>
<p>Discover the mysteries of the universe and the advances in space technology that bring us closer to the stars.</p>
<a href="#">Read More</a>
</div>
<div class="featured-item">
<img src="https://via.placeholder.com/300" alt="Ancient Civilizations">
<h3>The Rise and Fall of Ancient Civilizations</h3>
<p>Explore the history of ancient empires and their lasting impact on the modern world.</p>
<a href="#">Read More</a>
</div>
<div class="featured-item">
<img src="https://via.placeholder.com/300" alt="Quantum Mechanics">
<h3>Understanding Quantum Mechanics</h3>
<p>Dive into the complex and fascinating world of quantum physics and its real-world applications.</p>
<a href="#">Read More</a>
</div>
</section>
<section id="about" class="about">
<h2>About This Encyclopedia</h2>
<p>This online encyclopedia is dedicated to providing reliable and well-researched information on a wide range of topics. From science and technology to history and culture, we aim to empower curious minds with knowledge.</p>
<p>Our content is curated by experts and enthusiasts from around the world, ensuring a comprehensive and engaging learning experience for all users.</p>
</section>
<footer>
<p>© 2025 Encyclopedia. All rights reserved.</p>
</footer>
</body>
</html>
ソースから Unreal Engine をビルドする
MyCarousel
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>My Carousel</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<section class="carousel">
<div class="container">
<ul>
<li><img src="img/pic1.png"></li>
<li><img src="img/pic2.png"></li>
<li><img src="img/pic3.png"></li>
<li><img src="img/pic4.png"></li>
</ul>
<button id="prev">«</button>
<button id="next">»</button>
</div>
<nav>
</nav>
</section>
<script src="js/main.js"></script>
</body>
</html>js/main.js
'use strict';
{
const next = document.getElementById('next');
const prev = document.getElementById('prev');
const ul = document.querySelector('ul');
const slides = ul.children;
const dots = [];
let currentIndex = 0;
function updateButtons() {
prev.classList.remove('hidden');
next.classList.remove('hidden');
if (currentIndex === 0) {
prev.classList.add('hidden');
}
if (currentIndex === slides.length - 1) {
next.classList.add('hidden');
}
}
function moveSlides() {
const slideWidth = slides[0].getBoundingClientRect().width;
ul.style.transform = `translateX(${-1 * slideWidth * currentIndex}px)`;
}
function setupDots() {
for (let i = 0; i < slides.length; i++) {
const button = document.createElement('button');
button.addEventListener('click', () => {
currentIndex = i;
updateDots();
updateButtons();
moveSlides();
});
dots.push(button);
document.querySelector('nav').appendChild(button);
}
dots[0].classList.add('current');
}
function updateDots() {
dots.forEach(dot => {
dot.classList.remove('current');
});
dots[currentIndex].classList.add('current');
}
updateButtons();
setupDots();
next.addEventListener('click', () => {
currentIndex++;
updateButtons();
updateDots();
moveSlides();
});
prev.addEventListener('click', () => {
currentIndex--;
updateButtons();
updateDots();
moveSlides();
});
window.addEventListener('resize', () => {
moveSlides();
});
}css/style.css
.carousel {
width: 80%;
margin: 16px auto;
}
.container {
width: 100%;
height: 220px;
overflow: hidden;
position: relative;
}
ul {
list-style: none;
margin: 0;
padding: 0;
height: 100%;
display: flex;
transition: transform .3s;
}
li {
height: 100%;
min-width: 100%;
}
li img {
width: 100%;
height: 100%;
object-fit: cover;
}
#prev,
#next {
position: absolute;
top: 50%;
transform: translateY(-50%);
border: none;
background: rgba(0, 0, 0, .8);
color: #fff;
font-size: 24px;
padding: 0 8px 4px;
cursor: pointer;
}
#prev:hover,
#next:hover {
opacity: .8;
}
#prev {
left: 0;
}
#next {
right: 0;
}
.hidden {
display: none;
}
nav {
margin-top: 16px;
text-align: center;
}
nav button+button {
margin-left: 8px;
}
nav button {
border: none;
width: 16px;
height: 16px;
background: #ddd;
border-radius: 50%;
cursor: pointer;
}
nav .current {
background: #999;
}ペルソナ6 企画書
ペルソナ6 企画書
1. プロジェクト概要
- プロジェクト名: ペルソナ6
- ジャンル: JRPG (Japanese Role-Playing Game)
- ターゲットプラットフォーム: PlayStation 5, PC (Steam/Epic Games Store)，その他次世代コンソール
- ターゲットユーザー: シリーズファン、RPG愛好者、新規ユーザー層（20代～40代）
2. プロジェクトの目的
- 「ペルソナ」シリーズの世界観を制断しつつ、復制的な要素を用いて新しいファン層にも反応するゲーム体験を提供する。
- 深い社会テーマや人間関係を詰め込んだストーリーテリングを実現。
- 新革的なゲームシステムとビジュアルで、シリーズの次の進化を提示。
3. コンセプト
- テーマ: 「選択と責任」
- キーワード: 多重人格、社会コンフリクト、幸福の定義
- ターゲット: 実世界と想像世界の分裂、個人のアイデンティティと社会のルールの衝突
4. ストーリー概要
- 若者達が、個人の問題や社会問題を中心に、ペルソナを駐らせ、想像世界での戦いを通して我々の社会の問題を問いかける。
- 主人公と不思議なペルソナ達との関係の構築。
- 大部分が新しい大部事件で構成される一方、これまでの作品の世界観の続きもさりげなく組み込み、シリーズファンの期待に対応。
5. ゲームシステム
- ダンジョンシステム
- コンフィグとストイリーベースの自由な選択を重要視。
- 毎日の生活と戦闘の構成のバランスを改善。
- ペルソナシステム
- 主人公の想像を反映する個性を持つペルソナを検索。
- ペルソナのカスタマイズ可能な進化、新たなスキルの実装。
- 世界設定システム
- 実世界の「社会」と想像世界の「サブワールド」の分裂を描く。
- 想像世界の裏に与えられた意味深い設定を検討。
6. ビジュアルスタイル
- アニメ風のキャラクターデザイン、実写風エフェクトとのバランスを持たせる。
- 光と影の表現を重視したビジュアル。
7. 開発スケジュール
- 開発期間: 3年規模
- 開発チーム: プロデューサー、ディレクター、アーティスト、シナリオライター、デバッグチーム
8. 予想売上高
- 日本内: 150万本
- 国外: 300万本
9. 総括とメッセージ
Persona 6は、新たな社会テーマを描き出し、それによって主人公たちが自分たちの存在意義を問う。これは現代社会を我々に問いかける作品として、新たな次元を提示する。
「ゴエモンリメイク」企画書
「ゴエモンリメイク」企画書
タイトル
ゴエモンリメイク (仮タイトル)
概要
「ゴエモン」シリーズを現代のゲームプレイ環境に合わせてリメイクする企画。原作の魅力を残しながら、グラフィックとゲームシステムを現代化し、新たなプレイヤーや世代に展開。
目的
- 原作ファンの幸福感を増大させる。
- 新たなファン層の開拓。
- シリーズのブランドリフィング。
ターゲットオーディエンス
- 原作のファン
- レトロゲーマー
- 若年層
- 和風世界観が好きな人
ゲームジャンル
- アクションゲーム ハイテンポの探索やダイナミックアクションを重視。
- ハイフンディエンスアクション テンポを駆使した手験性の高いアクション。
要素
- 新しいグラフィックデザイン 原作の和風感を残しながら、高解像度や現代的エッセンスを解釈。
- コオプレイモード ローカルマルチプレイとオンラインマルチプレイに対応。
- シリーズ企画
- 原作をフルリメイク。
- 新規ストーリーの追加。
- 付加要素 オリジナルゲーム音楽のリプリント。
スケジュール
- 開発階段とスケジュール
- 企画フェース
- デザインフェース
- 開発
- テスト
- リリース
- 予定開発期間 18ヶ月
カバーター
- ゴエモン 新たな3Dモデルで再現。
- エビゾン コミック作品やキャラを重視。
- 新キャラクターを追加
市場調査と要望
- 原作ファンからの強い要望。
- 和風ゲームの展開に希望。
計画予算
- 開発費
- マーケティング費
- オープンワールド開発費
結論
「ゴエモン」リメイクは、現代のゲームプレイやグラフィックデザインに適応させながら、原作の魅力を残す作品として展開。
アプリストア.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>アプリストア</title>
<style>
/* 全体のスタイル */
body {
font-family: 'Roboto', sans-serif;
margin: 0;
padding: 0;
box-sizing: border-box;
background-color: #f9f9f9;
color: #333;
}
a {
text-decoration: none;
color: inherit;
}
ul {
list-style: none;
padding: 0;
margin: 0;
}
/* ヘッダー */
header {
background-color: #0066cc;
color: white;
padding: 1rem 0;
position: sticky;
top: 0;
z-index: 1000;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}
header .container {
display: flex;
justify-content: space-between;
align-items: center;
max-width: 1200px;
margin: 0 auto;
padding: 0 1rem;
}
header h1 a {
color: white;
font-size: 1.5rem;
font-weight: bold;
}
header nav ul {
display: flex;
gap: 1rem;
}
header nav a {
color: white;
font-size: 1rem;
font-weight: 500;
transition: color 0.3s;
}
header nav a:hover {
color: #ffcc00;
}
/* ヒーローセクション */
.hero {
background: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url('hero-image.jpg') no-repeat center center/cover;
color: white;
text-align: center;
padding: 6rem 1rem;
}
.hero h2 {
font-size: 3rem;
margin-bottom: 1rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}
.hero p {
font-size: 1.5rem;
margin-bottom: 2rem;
text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.5);
}
.hero .btn-primary {
background-color: #ffcc00;
color: #333;
padding: 1rem 2rem;
border-radius: 5px;
font-weight: bold;
font-size: 1.25rem;
transition: background-color 0.3s, transform 0.3s;
}
.hero .btn-primary:hover {
background-color: #e6b800;
transform: scale(1.05);
}
/* カテゴリセクション */
.categories {
background-color: #f1f1f1;
padding: 3rem 1rem;
text-align: center;
}
.categories h2 {
font-size: 2.5rem;
margin-bottom: 1.5rem;
}
.categories .category-list {
display: flex;
justify-content: center;
gap: 1.5rem;
flex-wrap: wrap;
}
.categories .category-list a {
background-color: #0066cc;
color: white;
padding: 0.75rem 1.5rem;
border-radius: 5px;
font-size: 1.25rem;
font-weight: bold;
transition: background-color 0.3s, transform 0.3s;
}
.categories .category-list a:hover {
background-color: #004d99;
transform: scale(1.1);
}
/* アプリ一覧 */
.app-list {
padding: 3rem 1rem;
background-color: white;
}
.app-list h2 {
text-align: center;
font-size: 2.5rem;
margin-bottom: 2rem;
}
.apps-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
max-width: 1200px;
margin: 0 auto;
}
.app-card {
background-color: #f9f9f9;
border: 1px solid #ddd;
border-radius: 8px;
overflow: hidden;
transition: box-shadow 0.3s, transform 0.3s;
}
.app-card:hover {
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
transform: translateY(-5px);
}
.app-card img {
width: 100%;
height: 200px;
object-fit: cover;
}
.app-card h3 {
font-size: 1.5rem;
margin: 1rem;
}
.app-card p {
margin: 0 1rem 1.5rem;
font-size: 1.125rem;
}
.app-card .btn-secondary {
display: block;
text-align: center;
margin: 0 1rem 1.5rem;
padding: 0.75rem;
background-color: #0066cc;
color: white;
font-size: 1rem;
border-radius: 5px;
transition: background-color 0.3s;
}
.app-card .btn-secondary:hover {
background-color: #004d99;
}
/* フッター */
footer {
background-color: #333;
color: white;
padding: 2rem 0;
text-align: center;
font-size: 1rem;
}
footer nav a {
color: #ffcc00;
margin: 0 0.5rem;
transition: color 0.3s;
}
footer nav a:hover {
color: white;
}
</style>
</head>
<body>
<header>
<div class="container">
<h1><a href="#home">アプリストア</a></h1>
<nav>
<ul>
<li><a href="#home">ホーム</a></li>
<li><a href="#categories">カテゴリ</a></li>
<li><a href="#apps">アプリ一覧</a></li>
<li><a href="#about">このサイトについて</a></li>
<li><a href="#contact">お問い合わせ</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</nav>
</div>
</header>
<main>
<section id="home" class="hero">
<div class="hero-content">
<h2>お気に入りのアプリを見つけましょう！</h2>
<p>最新のアプリや便利なツールがここに揃っています。</p>
<a href="#apps" class="btn-primary">アプリを探す</a>
</div>
</section>
<section id="categories" class="categories">
<h2>カテゴリ</h2>
<ul class="category-list">
<li><a href="#games">🎮 ゲーム</a></li>
<li><a href="#productivity">📊 生産性向上</a></li>
<li><a href="#education">📚 教育</a></li>
<li><a href="#entertainment">🎥 エンターテイメント</a></li>
<li><a href="#health">💪 健康・フィットネス</a></li>
<li><a href="#finance">💰 ファイナンス</a></li>
</ul>
</section>
<section id="apps" class="app-list">
<h2>おすすめアプリ</h2>
<div class="apps-grid">
<div class="app-card">
<img src="app1.jpg" alt="アプリ名1">
<h3>アプリ名1</h3>
<p>説明文がここに入ります。最新機能と素晴らしいデザインを備えています。</p>
<a href="#" class="btn-secondary">詳細を見る</a>
</div>
<div class="app-card">
<img src="app2.jpg" alt="アプリ名2">
<h3>アプリ名2</h3>
<p>説明文がここに入ります。日常生活を豊かにするツールです。</p>
<a href="#" class="btn-secondary">詳細を見る</a>
</div>
</div>
</section>
</main>
<footer>
<div class="container">
<p>© 2025 アプリストア. 全著作権所有。</p>
<nav>
<a href="#privacy">プライバシーポリシー</a> |
<a href="#terms">利用規約</a> |
<a href="#sitemap">サイトマップ</a>
</nav>
</div>
</footer>
</body>
</html>
JavaScriptモーダルウィンドウ
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Modal Window</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div id="open">
詳細を見る
</div>
<div id="mask" class="hidden"></div>
<section id="modal" class="hidden">
<p>こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。こんにちは。</p>
<div id="close">
閉じる
</div>
</section>
<script src="js/main.js"></script>
</body>
</html>css/style.css
body {
font-size: 14px;
}
#open,
#close {
cursor: pointer;
width: 200px;
border: 1px solid #ccc;
border-radius: 4px;
text-align: center;
padding: 12px 0;
margin: 16px auto 0;
}
#mask {
background: rgba(0, 0, 0, 0.4);
position: fixed;
top: 0;
bottom: 0;
right: 0;
left: 0;
z-index: 1;
}
#modal {
background: #fff;
width: 300px;
padding: 20px;
border-radius: 4px;
position: absolute;
top: 40px;
left: 0;
right: 0;
margin: 0 auto;
transition: transform 0.4s;
z-index: 2;
}
#modal>p {
margin: 0 0 20px;
}
#mask.hidden {
display: none;
}
#modal.hidden {
transform: translate(0, -500px);
}/js/main.js
'use strict';
{
const open = document.getElementById('open');
const close = document.getElementById('close');
const modal = document.getElementById('modal');
const mask = document.getElementById('mask');
open.addEventListener('click', () => {
modal.classList.remove('hidden');
mask.classList.remove('hidden');
});
close.addEventListener('click', () => {
modal.classList.add('hidden');
mask.classList.add('hidden');
});
mask.addEventListener('click', () => {
// modal.classList.add('hidden');
// mask.classList.add('hidden');
close.click();
});
}MyTabMenu
index.html
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>Tab Menu</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="container">
<ul class="menu">
<li><a href="#" class="active" data-id="about">サイトの概要</a></li>
<li><a href="#" data-id="service">サービス内容</a></li>
<li><a href="#" data-id="contact">お問い合わせ</a></li>
</ul>
<section class="content active" id="about">
サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。サイトの概要。
</section>
<section class="content" id="service">
サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。サービス内容。
</section>
<section class="content" id="contact">
お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。お問い合わせ。
</section>
</div>
<script src="js/main.js"></script>
</body>
</html>css/styles.css
body {
font-size: 14px;
}
.container {
margin: 30px auto;
width: 500px;
}
.menu {
list-style: none;
padding: 0;
margin: 0;
display: flex;
}
.menu li a {
display: inline-block;
width: 100px;
text-align: center;
padding: 8px 0;
color: #333;
text-decoration: none;
border-radius: 4px 4px 0 0;
}
.menu li a.active {
background: #333;
color: #fff;
}
.menu li a:not(.active):hover {
opacity: 0.5;
transition: opacity 0.4s;
}
.content.active {
background: #333;
color: #fff;
min-height: 150px;
padding: 12px;
display: block;
}
.content {
display: none;
}js/main.js
'use strict';
{
const menuItems = document.querySelectorAll('.menu li a');
const contents = document.querySelectorAll('.content');
menuItems.forEach(clickedItem => {
clickedItem.addEventListener('click', e => {
e.preventDefault();
menuItems.forEach(item => {
item.classList.remove('active');
});
clickedItem.classList.add('active');
contents.forEach(content => {
content.classList.remove('active');
});
document.getElementById(clickedItem.dataset.id).classList.add('active');
});
});
}