佐々木陽菜/情報デザイン演習IIA2

MOTIVATION SwitCh site

MOTIVATION SWITCH with site!

佐々木陽菜
Keywords：やる気スイッチ, 二面性
成果物はこちら

↑

概要

↑

これは何？

やる気スイッチON、OFFのあるあるをまとめたWebサイト。

やる気スイッチON、OFFあるある
やる気スイッチがONになるきっかけ、ヒント

↑

背景と目的

「やる気、出ない。」

明日までの課題、今日のバイト、1限の座学…
やる気を出さないといけないのに、出ない時ってあるある。

「やる気スイッチ、コントロールできたらいいのに…」

それを形にしてみよう！で始めるプロジェクト。

しかし…
やる気スイッチは人それぞれで、サイトを通してコントロールするのは難しいと考えたため、サイトのメインは楽しく見れるあるある集サイトという方向性で企画する。

やる気がない時は、色々と上手くいかなかったり何よりも楽しくなかったりが多く、そんなやる気がない日や時間を好きになれない。
そのため、プロジェクトの目的は「やる気スイッチがOFFの状態もちょっと好きになれる」こと。

↑

制作ツール

Visual Studio Code: HTML, CSS, JavaScriptで使用
GitHub : アップロードで使用
Google Gimini : ミスの指摘、コードのプロパティの解説等で使用

↑

成果物の仕様

Webサイト（GitHub）

進捗記録

↑

2025.07.14

プロジェクトのタイトルとサブタイトル
- タイトル: MOTIVATION SwitCh site
- サブタイトル: MOTIVATION SWITCH with site!
これは何？を簡潔に
- ページ上部に記載
プロジェクトの背景と目的
- ページ上部に記載
成果物の紹介
- MOTIVATION SwitCh site
成果物の仕様
- Webサイト
制作の方法（使用したツール、素材、手順など）
- ページ上部に記載
今回のプロジェクトで特にこだわった部分、工夫した点など・・
- メインビジュアルとしてスイッチを配置した点
- HTMLやCSSの基本的な部分ができるようになった点
- レスポンシブを対応させました
- 「やる気スイッチがON/OFFになるとき…」のセクションからグラデーションをかけてスイッチの切り替えを催促しました
- ナビゲーションの固定や、前のページに戻るボタンなどの配置でサイト内を行き来しやすくしました
- タイトルの小文字を読むと「with site」になったり、サイト内で「あるある」が浮かぶような動きがあったりなど、遊び心を入れました
- marginやpaddingをこだわって、全体のレイアウトが見やすくなるようにしました
成果の振り返りと今後の課題
- JavaScriptが苦手なので勉強すること
- 大画面表示にすると文字サイズが小さい
  → max widgeの設定（ブラッシュアップ予定）