Skip to content

Commit 03bedd4

Browse files
ta1yo1022ta1yo1022
committed
Add: 展示とはのページ
1 parent 8d812c8 commit 03bedd4

File tree

3 files changed

+297
-0
lines changed

3 files changed

+297
-0
lines changed

‎img/contests/what-is-display/image.png‎

791 KB
Loading

‎img/contests/what-is-display/image2.png‎

806 KB
Loading

‎what-is-display.md‎

Lines changed: 297 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,297 @@
1+
---
2+
layout: default
3+
hero_title: "展示とは？"
4+
hero_subtitle: "WHAT IS DISPLAY?"
5+
---
6+
7+
<!-- コンテンツエリア -->
8+
<div class="bg-white py-16 px-4">
9+
<div class="max-w-4xl mx-auto">
10+
<!-- 展示とは？ -->
11+
<div class="mb-16">
12+
<!-- 見出し -->
13+
<div class="text-center mb-12">
14+
<h2 class='text-4xl sm:text-5xl font-bold uppercase tracking-wider border-b-10 border-teal-500 inline-block' style="font-family: 'League Gothic', sans-serif; color: #221C35;">WHAT IS DISPLAY?</h2>
15+
<p class="text-xl mt-2" style="color: #444444;">展示とは？</p>
16+
</div>
17+
18+
<!-- モード切り替えボタン -->
19+
<div class="mb-8 text-center">
20+
<div class="inline-flex rounded-lg border-2 border-teal-500 overflow-hidden">
21+
<button id="mode-easy" class="px-8 py-3 font-bold transition-colors bg-teal-500 text-white w-40">
22+
やさしく
23+
</button>
24+
<button id="mode-detail" class="px-8 py-3 font-bold transition-colors bg-white text-teal-500 w-40">
25+
しっかり
26+
</button>
27+
</div>
28+
</div>
29+
30+
<!-- 導入文 -->
31+
<div class="mb-12">
32+
<p class="text-lg leading-relaxed content-easy" style="color: #444444;">
33+
「展示（てんじ）」って、ちょっと難しそうな言葉に聞こえるかもしれません。博物館や美術館で静かに見るもの、というイメージがあるかな？<br>
34+
でも実は、みなさんの身近なところにも「展示」はたくさんあります。<br>
35+
小学生から中学生のみなさんが、作品展示に向けて「展示ってこういうことなんだ！」とイメージできるように、分かりやすくまとめてみました。
36+
</p>
37+
<p class="text-lg leading-relaxed content-detail hidden" style="color: #444444;">
38+
展示とは、単に作品を並べるだけではなく、見る人とのコミュニケーションを生み出す重要な表現手段です。<br>
39+
このページでは、展示の基本的な考え方と、効果的な展示を行うためのポイントをご紹介します。
40+
</p>
41+
</div>
42+
43+
<!-- 展示とは？（基本編） -->
44+
<div class="mb-12 content-easy">
45+
<h3 class="text-2xl font-bold mb-6" style="color: #221C35;">展示とは？</h3>
46+
47+
<p class="text-lg leading-relaxed mb-6" style="color: #444444;">
48+
一言で言うと、<strong>「見てほしいものを、見やすいように並べて、伝えること」</strong>です。<br>
49+
例えば、こんなことも「展示」の仲間です。
50+
</p>
51+
52+
<!-- 具体例 -->
53+
<div class="mb-6">
54+
<img src="/img/contests/what-is-display/image.png" alt="展示の身近な例：お店屋さん、自分の部屋、学校" class="w-full rounded-lg shadow-md">
55+
</div>
56+
57+
<div class="bg-teal-50 border-l-4 border-teal-500 p-6">
58+
<p class="text-lg leading-relaxed" style="color: #444444;">
59+
ただ「置く」だけではなく、<strong>「どうやったらよく見えるかな？」「みんなが見てくれるかな？」</strong>と考えて並べることが、展示のスタートです。
60+
</p>
61+
</div>
62+
</div>
63+
64+
<!-- もう少し詳しく（応用編） -->
65+
<div class="mb-12 content-detail hidden">
66+
<h3 class="text-2xl font-bold mb-6" style="color: #221C35;">展示とは何か</h3>
67+
68+
<p class="text-lg leading-relaxed mb-6" style="color: #444444;">
69+
一言で言うと、<strong>「見てほしいものを、見やすいように並べて、伝えること」</strong>です。展示は博物館や美術館だけのものではなく、私たちの身近なところにも存在しています。
70+
</p>
71+
72+
<p class="text-lg leading-relaxed mb-6" style="color: #444444;">
73+
お店では、おすすめのお菓子を一番目立つ棚に綺麗に並べます。自分の部屋では、お気に入りのフィギュアやぬいぐるみを机の上にかっこよく飾ります。学校では、図工の時間に描いた絵を教室の後ろの壁に貼り出します。これらすべてが「展示」の一形態です。
74+
</p>
75+
76+
<!-- 具体例 -->
77+
<div class="mb-8">
78+
<img src="/img/contests/what-is-display/image.png" alt="展示の身近な例：お店屋さん、自分の部屋、学校" class="w-full rounded-lg shadow-md">
79+
</div>
80+
81+
<p class="text-lg leading-relaxed mb-6" style="color: #444444;">
82+
ただ「置く」だけではなく、「どうやったらよく見えるかな？」「みんなが見てくれるかな？」と考えて配置することが、展示の第一歩です。
83+
</p>
84+
85+
<h3 class="text-2xl font-bold mb-6 mt-12" style="color: #221C35;">展示はコミュニケーション手段</h3>
86+
87+
<p class="text-lg leading-relaxed mb-6" style="color: #444444;">
88+
展示は、ただ物を並べるだけでなく、<strong>「作品と、見る人をつなぐコミュニケーション」</strong>でもあります。
89+
</p>
90+
91+
<p class="text-lg leading-relaxed mb-6" style="color: #444444;">
92+
例えば、あなたが一生懸命作った工作の作品があるとします。それをポンと机に置いただけでは、見てくれた人は「あ、何か置いてあるな」で終わってしまうかもしれません。
93+
</p>
94+
95+
<p class="text-lg leading-relaxed mb-6" style="color: #444444;">
96+
でも、そこに工夫を加えることで、見る人の体験は大きく変わります。例えば以下のような方法です。
97+
</p>
98+
99+
<ul class="space-y-2 text-lg pl-8 mb-6" style="color: #444444; list-style-type: disc;">
100+
<li>「ここが一番のこだわりポイントです！」という説明を書いたカードを設置する</li>
101+
<li>作品がかっこよく見えるように台の上に配置する</li>
102+
<li>「裏側には秘密が隠されています」と矢印で誘導する</li>
103+
</ul>
104+
105+
<p class="text-lg leading-relaxed mb-6" style="color: #444444;">
106+
このような工夫により、鑑賞者は「へえ、そうなんだ！」「面白いな！」と感じ、作品に対する理解と興味が深まります。
107+
</p>
108+
109+
<!-- 画像 -->
110+
<div class="mb-8">
111+
<img src="/img/contests/what-is-display/image2.png" alt="展示の工夫の例" class="w-full rounded-lg shadow-md">
112+
</div>
113+
114+
<div class="bg-teal-50 border-l-4 border-teal-500 p-6 mb-12">
115+
<p class="text-lg leading-relaxed" style="color: #444444;">
116+
つまり展示とは、あなたの作品を使って、見てくれる人に<strong>「すごい！」「なるほど！」「面白い！」という気持ちをプレゼントすること</strong>なんです。
117+
</p>
118+
</div>
119+
120+
<h3 class="text-2xl font-bold mb-6" style="color: #221C35;">展示による効果の違い</h3>
121+
122+
<p class="text-lg leading-relaxed mb-6" style="color: #444444;">
123+
展示とは、作品を通じて鑑賞者に<strong>感動、発見、理解という体験を提供すること</strong>です。作品そのものの質だけでなく、「どう見せるか」「どう伝えるか」という展示設計が、鑑賞者の体験を大きく左右します。
124+
</p>
125+
126+
<div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-12">
127+
<div class="bg-red-50 p-6 border-l-4 border-red-400">
128+
<p class="font-bold mb-3 text-lg" style="color: #721c24;">❌ 配慮が不足した展示の例</p>
129+
<p class="mb-2" style="color: #444444;"><strong>状況：</strong>ゲーム作品を机の上に置いただけ</p>
130+
<ul class="space-y-1 text-sm pl-5 mb-3" style="color: #444444; list-style-type: disc;">
131+
<li>タイトルや説明がない</li>
132+
<li>操作方法が分からない</li>
133+
<li>画面が見づらい角度</li>
134+
<li>制作者が不在で質問できない</li>
135+
</ul>
136+
<p style="color: #444444;"><strong>結果：</strong>鑑賞者は作品の意図や魅力を理解できず、素通りしてしまう可能性が高い。</p>
137+
</div>
138+
139+
<div class="bg-green-50 p-6 border-l-4 border-green-400">
140+
<p class="font-bold mb-3 text-lg" style="color: #155724;">✅ 効果的な展示の例</p>
141+
<p class="mb-2" style="color: #444444;"><strong>状況：</strong>同じゲーム作品を工夫して展示</p>
142+
<ul class="space-y-1 text-sm pl-5 mb-3" style="color: #444444; list-style-type: disc;">
143+
<li>ポスターに作品タイトル、概要、操作方法を大きく表示</li>
144+
<li>画面が見やすい角度に設置、複数人で見られる配置</li>
145+
<li>「まずはステージ1をプレイしてみてください！」と明確な案内</li>
146+
<li>開発の裏話や苦労したポイントをイラスト付きで紹介</li>
147+
</ul>
148+
<p style="color: #444444;"><strong>結果：</strong>鑑賞者は作品の世界観を理解し、実際にプレイして楽しみ、制作者との対話も生まれやすくなる。</p>
149+
</div>
150+
</div>
151+
152+
<h3 class="text-2xl font-bold mb-6" style="color: #221C35;">効果的な展示を実現するポイント</h3>
153+
154+
<p class="text-lg leading-relaxed mb-6" style="color: #444444;">
155+
みなさんがこれから行うポスター展示も、立派な「展示」です。成功させるために、以下のポイントを意識してみましょう。
156+
</p>
157+
158+
<div class="space-y-8">
159+
<!-- ポイント1 -->
160+
<div>
161+
<h4 class="font-bold text-xl mb-3" style="color: #221C35;">1. 鑑賞者の視点に立つ（見やすさ）</h4>
162+
<p class="text-base leading-relaxed mb-3" style="color: #444444;">
163+
自分だけが分かる内容ではなく、「初めて見る人」でも理解できるかを考えることが重要です。
164+
</p>
165+
<ul class="space-y-2 text-base pl-5" style="color: #444444; list-style-type: disc;">
166+
<li>文字は読みやすい大きさになっているか</li>
167+
<li>重要な情報が隠れていないか</li>
168+
<li>専門用語を使わず、わかりやすい言葉を選んでいるか</li>
169+
<li>遠くからでも視認できるフォントサイズを使用しているか</li>
170+
</ul>
171+
</div>
172+
173+
<!-- ポイント2 -->
174+
<div>
175+
<h4 class="font-bold text-xl mb-3" style="color: #221C35;">2. 焦点を明確にする（強調）</h4>
176+
<p class="text-base leading-relaxed mb-3" style="color: #444444;">
177+
情報を詰め込みすぎず、「ここを一番見てほしい！」というポイントを明確に伝えましょう。
178+
</p>
179+
<ul class="space-y-2 text-base pl-5" style="color: #444444; list-style-type: disc;">
180+
<li>最も伝えたいメッセージを明確にする</li>
181+
<li>重要な要素は大きく、目立つ色を使って強調する</li>
182+
<li>情報を詰め込みすぎず、余白を効果的に活用する</li>
183+
<li>タイトル→概要→詳細の順で情報を整理し、階層構造を作る</li>
184+
</ul>
185+
</div>
186+
187+
<!-- ポイント3 -->
188+
<div>
189+
<h4 class="font-bold text-xl mb-3" style="color: #221C35;">3. 興味を引く工夫をする（創意工夫）</h4>
190+
<p class="text-base leading-relaxed mb-3" style="color: #444444;">
191+
「どんな作品だろう？」と思わせる仕掛けが、鑑賞者の関心を引きつけます。
192+
</p>
193+
<ul class="space-y-2 text-base pl-5" style="color: #444444; list-style-type: disc;">
194+
<li>興味を持ってもらえるような魅力的なタイトルをつける</li>
195+
<li>スクリーンショット、図解、イラストなどのビジュアルを活用する</li>
196+
<li>制作の動機や過程をストーリーとして伝える</li>
197+
<li>可能であれば、実際に触れたり操作できるインタラクティブ要素を用意する</li>
198+
</ul>
199+
</div>
200+
</div>
201+
</div>
202+
203+
<!-- まとめ -->
204+
<div class="mb-12 content-easy border-t pt-8">
205+
<h3 class="text-2xl font-bold mb-6" style="color: #221C35;">「良い展示」にするための3つのヒント</h3>
206+
207+
<p class="text-lg leading-relaxed mb-6" style="color: #444444;">
208+
みなさんがこれから行うポスター展示も、立派な「展示」です。成功させるためのヒントは、この3つです。
209+
</p>
210+
211+
<div class="space-y-8">
212+
<!-- ヒント1 -->
213+
<div>
214+
<h4 class="font-bold text-xl mb-3" style="color: #221C35;">1. 相手のことを考える（見やすさ）</h4>
215+
<ul class="space-y-2 text-base pl-5" style="color: #444444; list-style-type: disc;">
216+
<li>自分だけが分かるのではなく、「初めて見る人」でも分かるかな？と考えます</li>
217+
<li>文字は読みやすい大きさかな？</li>
218+
<li>大事なところが隠れていないかな？</li>
219+
</ul>
220+
</div>
221+
222+
<!-- ヒント2 -->
223+
<div>
224+
<h4 class="font-bold text-xl mb-3" style="color: #221C35;">2. 「一番」を伝える（強調）</h4>
225+
<ul class="space-y-2 text-base pl-5" style="color: #444444; list-style-type: disc;">
226+
<li>あれもこれもと欲張らず、「ここを一番見てほしい！」というポイントを決めます</li>
227+
<li>そのポイントを大きくしたり、目立つ色を使ったりします</li>
228+
</ul>
229+
</div>
230+
231+
<!-- ヒント3 -->
232+
<div>
233+
<h4 class="font-bold text-xl mb-3" style="color: #221C35;">3. ワクワクをプラスする（工夫）</h4>
234+
<ul class="space-y-2 text-base pl-5" style="color: #444444; list-style-type: disc;">
235+
<li>「どんな作品だろう？」と興味を持ってもらえるようなタイトルをつけたり、楽しいイラストを添えたりします</li>
236+
</ul>
237+
</div>
238+
</div>
239+
</div>
240+
241+
<!-- 締めの言葉 -->
242+
<div class="mt-8 bg-teal-50 border-l-4 border-teal-500 p-6">
243+
<p class="text-lg leading-relaxed" style="color: #444444;">
244+
展示は、あなたの頑張りをみんなに知ってもらえる最高のチャンスです。<br>
245+
難しく考えず、<strong>「どうやったら楽しんでもらえるかな？」</strong>とワクワクしながら準備してみてくださいね。
246+
</p>
247+
</div>
248+
249+
250+
<!-- 参考リンク -->
251+
<div class="mt-12 border-t pt-8">
252+
<h4 class="font-bold text-xl mb-4" style="color: #221C35;">次のステップ</h4>
253+
<div class="space-y-3">
254+
<a href="/display-rules" class="block bg-white border-2 border-teal-500 hover:bg-teal-50 p-4 rounded-lg transition-colors">
255+
<span class="font-bold" style="color: #221C35;">📋 展示のおやくそく</span>
256+
<p class="text-sm mt-1" style="color: #444444;">展示する際のルールを確認しよう</p>
257+
</a>
258+
</div>
259+
</div>
260+
261+
<!-- モード切り替えスクリプト -->
262+
<script>
263+
const modeEasyBtn = document.getElementById('mode-easy');
264+
const modeDetailBtn = document.getElementById('mode-detail');
265+
const easyContents = document.querySelectorAll('.content-easy');
266+
const detailContents = document.querySelectorAll('.content-detail');
267+
268+
function switchToEasy() {
269+
// ボタンのスタイル切り替え
270+
modeEasyBtn.classList.add('bg-teal-500', 'text-white');
271+
modeEasyBtn.classList.remove('bg-white', 'text-teal-500');
272+
modeDetailBtn.classList.add('bg-white', 'text-teal-500');
273+
modeDetailBtn.classList.remove('bg-teal-500', 'text-white');
274+
275+
// コンテンツの表示切り替え
276+
easyContents.forEach(el => el.classList.remove('hidden'));
277+
detailContents.forEach(el => el.classList.add('hidden'));
278+
}
279+
280+
function switchToDetail() {
281+
// ボタンのスタイル切り替え
282+
modeDetailBtn.classList.add('bg-teal-500', 'text-white');
283+
modeDetailBtn.classList.remove('bg-white', 'text-teal-500');
284+
modeEasyBtn.classList.add('bg-white', 'text-teal-500');
285+
modeEasyBtn.classList.remove('bg-teal-500', 'text-white');
286+
287+
// コンテンツの表示切り替え
288+
detailContents.forEach(el => el.classList.remove('hidden'));
289+
easyContents.forEach(el => el.classList.add('hidden'));
290+
}
291+
292+
modeEasyBtn.addEventListener('click', switchToEasy);
293+
modeDetailBtn.addEventListener('click', switchToDetail);
294+
</script>
295+
</div>
296+
</div>
297+
</div>

0 commit comments

Comments
 (0)