鳥越友菜/情報デザイン演習IIA

かみしも温泉センター(廃業済み)

陰謀論まとめwebサイト♬

• 鳥越友菜
• Keywords：陰謀論,webデザイン,かみしも温泉センター(廃業済み)という架空のサイト,電波系サイト
  
  

プロジェクトの概要

これは何？

陰謀論とそれを信仰する人々の心理傾向、信仰に陥りやすい精神状態についてまとめる

背景と目的

昔からよく「陰謀論」という言葉は目にしていたが、世界的なコロナ禍に陥ってからさらにその言葉をよく目にするようになった。陰謀論を信仰する人々(いわゆる陰謀論者)の主張や態度を見るに、新興宗教への信仰と似た性質を感じ興味を惹かれたため調査しまとめようと思いこのプロジェクトを企画

制作ツール

html, css,chatGPT

🌟成果物とその仕様🌟

• かみしも温泉センター(廃業済み)←click!(学内ネットワーク限定)
• かみしも温泉センター(廃業済み)-html,cssファイル←全ファイルDL後任意のhtmlファイルをクリックしていただければご自身のPCから閲覧可能です(PCのみ対応)

2025.05.19

サイトのホーム部分の画像作成(chatGPT)、文章作成、調査

2025.05.12

作業の記録

• 作成中のhtml及びcss←click!
  
  
  
  

2025.04.28

アドバイス等

• ジャンル分け、時代分けする
• 画像、図を多めに
• 難しいジャンルなので詳しい解説を
• 宗教、国家が絡む類は細心の注意を

好評を得た点

• 特殊テーマで面白そう
  
  
  
  

2025.04.21

今回制作したプロトタイプ

プロトタイプ制作の方法

• AdobeIllustrator で ワイヤーフレームを制作
• インターネット上のWebテンプレートを利用
• メインビジュアルとメニューのみを修正してサーバーにアップ
• サイトのメニューを作成
• ダミーデータの投稿＞表示動作確認
  
  
  
  

Webの公開方法

• Google site
  
  
  
  

Webの内容

• 陰謀論という概念誕生の経緯
• 陰謀論を信仰する人々の心理的・性格的傾向および社会情勢の傾向
• 過去の陰謀論もしくは陰謀論に類する信仰まとめ
  
  
  
  

Webのネーミング

かみしも温泉センター(廃業済み)

2025.04.14　

現状調査｜テーマ内容の先行事例

• 陰謀論とは何か そのメカニズムと対処法
• 陰謀論 Wikipedia
  
  
  
  

ToDoリスト

• 1.「陰謀論」という言葉がいつ頃どのような経緯で生まれたのかを調査
• 2.「陰謀論」という概念が誕生する前にあった信仰等で現在の陰謀論に通ずるものを探す
• 3.陰謀論を信仰する人々の心理的・精神的傾向とそれに陥りやすい精神状態及び社会的情勢について調査
• 4.見やすく興味を引く成果物制作にする

制作上のアイデア　

• 1.差別的にならないよう慎重に言葉選びをする
• 2.公式からの図やイラストの引用を検討
  
  
  
  

2025.04.07

プロジェクトのテーマ候補

• 花札
• 香水
• 伊藤計劃
• 綾辻行人
• 本の装丁
• すいぞくかん
• 陰謀論まとめ
• クレーマー対応の極意
• 詐欺みたいなサイトに引っかからないために
  
  
  
  

《参考リンク》

▪️花札

• 任天堂公式 花札について
• 花札 Wikipedia

▪️香水

• 香水 Wikipedia
• 香りの愉しみ、匂いの秘密 東京大学大学院生物科学研究室

▪️伊藤計劃

• 伊藤計劃 個人ブログ
• 伊藤計劃 はてな版
• 伊藤計劃 Wikipedia

▪️綾辻行人

• 綾辻行人 公式HP
• 綾辻行人 Wikipedia

▪️本の装丁

• 本の装丁について ブックホン公式HP
• 本の断截、製本の種類 (株)プリミヤファクトリー公式HP

▪️すいぞくかん

• 水族館 Wikipedia
• 日本の水族館 Wikipedia
• 日本動物園水族館協会 公式HP
• マリンワールド海の中道 公式サイト

▪️陰謀論まとめ

• 陰謀論とは何か そのメカニズムと対処法
• 陰謀論 Wikipedia
  
  
  
  
  
  

@import url('https://fonts.googleapis.com/css2?family=Kosugi+Maru&display=swap');

body {

 font-family: 'Kosugi Maru', sans-serif;
 background-color: #ffd6e8; /* いちごミルクピンク背景 */
 color: #00ff00;
 margin: 0;
 padding: 0;
 filter: contrast(1.5) saturate(1.8);

}

header {

 background-color: #ffcc00;
 color: #ff0066;
 text-align: center;
 padding: 2em;
 border-bottom: 4px dotted #ff0066;
 box-shadow: 0 0 15px #ff0066;
 position: relative;

}

header h1 {

 font-size: 3.2em;
 font-weight: bold;
 letter-spacing: 0.12em;
 text-shadow: 2px 2px #ff00ff;

}

header p {

 font-size: 1.4em;
 font-style: italic;
 text-shadow: 1px 1px #990099;

}

#menu-toggle {

 display: none;
 background: none;
 border: none;
 font-size: 2em;
 color: #ff00ff;
 position: absolute;
 top: 1.5em;
 right: 1em;
 cursor: pointer;
 user-select: none;

}

nav ul {

 background-color: #00ffff;
 list-style: none;
 margin: 0;
 padding: 1em;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-around;
 font-weight: 900;
 font-size: 1.3em;
 text-shadow: 1px 1px #ff00ff;

}

nav a {

 color: #ff0099;
 text-decoration: underline dotted;
 background-color: #ffffffcc;
 padding: 0.3em 0.7em;
 border: 3px groove #ff66ff;
 margin: 0.3em;
 transition: 0.3s;
 box-shadow: 0 0 10px #ff00ff;

}

nav a:hover {

 background-color: #ffff00;
 color: #000;
 transform: scale(1.2) rotate(-5deg);
 text-shadow: 0 0 5px #ff00ff;
 box-shadow: 0 0 20px #ff00ff;

}

main {

 background-color: #ffd6e8; /* いちごミルクピンクで統一 */
 padding: 2.5em;
 filter: contrast(1.3);
 border: 5px double #ff33cc;
 box-shadow: 0 0 20px #ff33cc;

}

.intro h2 {

 font-size: 2.4em;
 background-color: #ffeeff;
 padding: 0.6em;
 border-left: 8px solid #ff33cc;
 text-shadow: 1px 1px #ff00ff;

}

.intro p {

 font-size: 1.3em;
 margin: 0.6em 0;
 color: #990099;
 text-shadow: 1px 1px #ff99ff;

}

.flyers h2,
.attractions h2 {

 font-size: 1.8em;
 color: #ff3399;
 border-bottom: 3px dashed #ff66cc;
 padding-bottom: 0.4em;
 margin-bottom: 1.3em;
 text-shadow: 1px 1px #ff00ff;

}

.flyer {

 border: 4px ridge #ff99ff;
 background-color: #fff0f5;
 padding: 1.2em;
 margin-bottom: 2em;
 box-shadow: 0 0 15px #ff33cc;

}

.flyer img {

 width: 100%;
 max-width: 320px;
 border: 3px dashed #cc33ff;
 margin-bottom: 0.7em;
 filter: saturate(2);

}

.message {

 margin-top: 3.5em;
 background-color: #ffffcc;
 border: 5px double #ffcc00;
 padding: 1.2em;
 font-size: 1.4em;
 box-shadow: 0 0 25px #ffcc00;
 text-shadow: 1px 1px #ff9900;
 color: #cc6600;

}

footer {

 background-color: #ffccff;
 color: #9900cc;
 text-align: center;
 padding: 1.3em;
 font-size: 1em;
 border-top: 5px solid #ff33cc;
 box-shadow: 0 0 15px #ff33cc inset;
 user-select: none;

}

/* ハンバーガーメニュー対応 */
@media (max-width: 768px) {

 #menu-toggle {
   display: block;
 }

 nav ul {
   display: none;
   flex-direction: column;
   align-items: center;
 }

 nav ul.open {
   display: flex;
 }

}