#author("2025-07-14T14:51:02+09:00;2025-07-14T14:47:47+09:00","default:member","member") #author("2025-07-16T11:39:18+09:00;2025-07-14T14:47:47+09:00","default:member","member") *MOTIVATION SwitCh site MOTIVATION SWITCH with site! ~ #image(main.png) ~ -''佐々木陽菜'' -'''Keywords：やる気スイッチ, 二面性''' ~ -''成果物は__[[&color(#c98508){こちら};>https://33ki-2022.github.io/MotivationSwitchSite/]]__'' ~ //-&color(red){相互評価シートはこちら▼}; //__[[相互評価シート>https://docs.google.com/spreadsheets/d/1o44_l40gT1sTizPzgyTeiVmhid0e4a4num8vF9xWBms/edit?usp=sharing]]__ ~ //***CONTENTS //#contents2_1 //~ **概要 ***これは何？ やる気スイッチON、OFFのあるあるをまとめたWebサイト。 -やる気スイッチON、OFFあるある -やる気スイッチがONになるきっかけ、ヒント ~ ***背景と目的 「やる気、出ない。」 明日までの課題、今日のバイト、1限の座学… やる気を出さないといけないのに、出ない時ってあるある。 「やる気スイッチ、コントロールできたらいいのに…」 それを形にしてみよう！で始めるプロジェクト。 ~ しかし… やる気スイッチは人それぞれで、サイトを通してコントロールするのは難しいと考えたため、サイトのメインは楽しく見れるあるある集サイトという方向性で企画する。 ~ やる気がない時は、色々と上手くいかなかったり何よりも楽しくなかったりが多く、そんなやる気がない日や時間を好きになれない。 そのため、プロジェクトの目的は「やる気スイッチがOFFの状態もちょっと好きになれる」こと。 ~ ***制作ツール -Visual Studio Code: HTML, CSS, JavaScriptで使用 -GitHub : アップロードで使用 -Google Gimini : ミスの指摘、コードのプロパティの解説 等で使用 ~ ***成果物の仕様 Webサイト（GitHub） #iframe(https://33ki-2022.github.io/MotivationSwitchSite/, 100%, 75%) ~ ~ #hr CENTER:''進捗記録'' #hr ~ ~ **2025.07.14 -プロジェクトのタイトルとサブタイトル --タイトル: MOTIVATION SwitCh site --サブタイトル: MOTIVATION SWITCH with site! -これは何？ を簡潔に --ページ上部に記載 -プロジェクトの背景と目的 --ページ上部に記載 -成果物の紹介 --__[[MOTIVATION SwitCh site>https://33ki-2022.github.io/MotivationSwitchSite/]]__ -成果物の仕様 --Webサイト -制作の方法（使用したツール、素材、手順など） --ページ上部に記載 -今回のプロジェクトで特にこだわった部分、工夫した点など・・ --メインビジュアルとしてスイッチを配置した点 --HTMLやCSSの基本的な部分ができるようになった点 --レスポンシブを対応させました --「やる気スイッチがON/OFFになるとき…」のセクションからグラデーションをかけてスイッチの切り替えを催促しました --ナビゲーションの固定や、前のページに戻るボタンなどの配置でサイト内を行き来しやすくしました --タイトルの小文字を読むと「with site」になったり、サイト内で「あるある」が浮かぶような動きがあったりなど、遊び心を入れました --marginやpaddingをこだわって、全体のレイアウトが見やすくなるようにしました -成果の振り返りと今後の課題 --JavaScriptが苦手なので勉強すること --大画面表示にすると文字サイズが小さい → max widgeの設定（ブラッシュアップ予定） --サイトのアイコンを設定する（ブラッシュアップ予定） ~ ~ ~ **2025.07.12 -Web仕上げ（HTML、CSS） --あるあるの書き換え --「Have you turned on the motivation switch?」のレスポンシブ対応 ~ ~ ~ **2025.07.07 -Web仕上げ（HTML、CSS） ~ ~ ~ **2025.07.06 -Web制作（HTML、CSS） ~ ***見出された問題点 -サイトの説明がないためわかりにくい →訂正済み（WHAT IS THIS?） ~ ~ ~ **2025.06.30 -Web制作（HTML、CSS） ~ ***見出された問題点 -サイトの説明がないためわかりにくい →訂正予定 ~ ~ ~ **2025.06.23 ***見出された問題点 -文字だけでなく、ボタン全体が反応するようにする →訂正済み ~ ***好評を得た点 ＞ プロジェクトの特性として -サイトのシンプルさ、デザイン、雰囲気 -プロジェクトの発想 ~ ~ **2025.06.16 ***今回制作したプロトタイプ #settableborder( none ) |49|2|49|c |#image(swichon.png)||#image(swichoff.png)| ~ #image(sitemap.png) ~ ***プロトタイプの説明 -Webサイト //→ [[MOTIVATION SwitCh site>https://33ki-2022.github.io/MotivationSwitchSite/]] -プロトタイプのサイトを基に修正をして、成果物とする。 ~ ~ **2025.06.14 -Web制作（HTML、CSS、JavaScript） ~ ~ **2025.06.13 -アンケート作成、公開 ~ ~ **2025.06.12 -Web制作（HTML、CSS、JavaScript） ~ ~ **2025.06.09 ***現状分析 -プロジェクトテーマと同様の「テーマ内容」に関する先行事例を探す。 --[[オンライン個別指導 スクールIE（やる気スイッチがキャッチコピー）>https://www.schoolie-net.jp/ieonline/?utm_source=google&utm_medium=cpc&utm_campaign=21945353192&utm_term=やる気スイッチ%20オンライン_p_c_21945353192_176690785888_722970227759&utm_content=176690785888&gad_source=1&gad_campaignid=21945353192&gbraid=0AAAAA-Vk7yYhsGN0v9nZ1JMALyRsccyxI&gclid=CjwKCAjw3rnCBhBxEiwArN0QEwNtadvondb5AJz0HIOXKSxg709-x4hSVY-S4ZGOVoy6jV7NDA8S2BoCfzIQAvD_BwE]] -プロジェクトの成果物の「表現形式」に関する先行事例を探す。 --[[CODE My UI>https://codemyui.com/tag/toggle-switch/]] //-プロジェクトのテーマに関わる「時間的情報（歴史）」を調査する //-プロジェクトのテーマに関わる「空間的情報（地理）」を調査する -プロジェクトのテーマに関わる「技術」について調査する --[[ふわふわ浮かぶオブジェクトの作り方>https://zenn.dev/taiyok/articles/43e1d5e7abfdef]] --[[CSS で要素を中央に配置する方法 (div、テキスト他)>https://www.freecodecamp.org/japanese/news/how-to-center-anything-with-css-align-a-div-text-and-more/]] --[[CSS でランダムな値を扱う `random()` と `random-item()` 関数>https://azukiazusa.dev/blog/css-random-function/]] --[[SCSSのランダム関数を用いてテーマカラーをランダムに生成>https://qiita.com/ishi720/items/32fc990b0b30e155279c]] --[[6ケタのカラーコードをランダムで生成する色々な方法>https://q-az.net/random-color-code/]] --[[SVGで手書き風アニメーションを実装する方法>https://willstyle.co.jp/blog/1569/]] ~ ***課題定義 -公開方法 Webサイト -成果物のネーミング MOTIVATION SwitCh site → MOTIVATION SWITCH with site -成果物の形式（分量とサイズ） Webサイト -素材（データ）の入手方法 Google forms -制作環境と方法 PCで作業。AIを活用して制作する。 ~ ***制作上のアイデア（課題ごとに複数のアイデア） +スイッチで切り替えられるようにする ONのページ OFFのページ +あるあるをまとめる ON、OFFのページそれぞれ5つくらい？ ~ ~ **2025.06.02 ***To Do リスト -サイトの内容を考える -あるあるアンケートをとる？ -Figmaでワイヤーフレームを作る -サイト制作に取り掛かる --アニメーションのさせ方を調べる ~ ~ ***MEMO -ホーム中央のサイトをクリックすることでONとOFFを切り替えられる仕様にする -ONとOFFでふたつのページを作る --あるある --モヤモヤ -やる気スイッチがONになるきっかけ（余裕があれば） ~ ~ ***テーマ候補 -写真 --斜影、斜光→印象。円形配置 --写真×キャッチコピー -「個人差」や「人それぞれ」をモノに置き換えてみる --名詞、形容詞 --マンホール、信号機 etc... -白い朝⇔キャンドル -''やる気スイッチ'' --オンとオフの2パターン -ジャーナリング --「見つめる」「考える」体験型 -日記 --どうでも良いこととか ~ ***成果物の仕様 -形式：Webサイト ~ ***この演習を通して身につけたいスキル -HTMLスキル -CSSスキル ~ ~ ***自分自身の関心事 -写真（斜影、斜光） -二面性 --太陽と月 -美術館（主に絵画や写真）を楽しむ -「個人差」や「人それぞれ」 -白い朝 -キャンドル -自炊 -プレイリスト -スケジュール管理 -アート融合 --音楽と写真 --映像と3DCG --映像と絵画 etc... -やる気スイッチ -体験型 -1→10（想像） -日記 -ジャーナリング -キャッチコピー ~ ~ ***面白い！と思った先輩方のプロジェクト -[[大井このか/情報デザイン演習IIA]] -[[石垣永樹/情報デザイン演習IIA]] ~ ~ ~ ~