佐々木陽菜/情報デザイン演習IIA2 をテンプレートにして作成

開始行:
*MOTIVATION SwitCh site MOTIVATION SWITCH with site! ~ #image(main.png) ~ -''佐々木陽菜'' -'''Keywords：やる気スイッチ, 二面性''' ~ -''成果物は__[[&color(#c98508){こちら};>https://33ki-2022... ~ //-&color(red){相互評価シートはこちら▼}; //__[[相互評価シート>https://docs.google.com/spreadsheets... ~ //***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/... ~ ~ #hr CENTER:''進捗記録'' #hr ~ ~ **2025.07.14 -プロジェクトのタイトルとサブタイトル --タイトル: MOTIVATION SwitCh site --サブタイトル: MOTIVATION SWITCH with site! -これは何？ を簡潔に --ページ上部に記載 -プロジェクトの背景と目的 --ページ上部に記載 -成果物の紹介 --__[[MOTIVATION SwitCh site>https://33ki-2022.github.io/... -成果物の仕様 --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 T... ~ ~ ~ **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... -プロトタイプのサイトを基に修正をして、成果物とする。 ~ ~ **2025.06.14 -Web制作（HTML、CSS、JavaScript） ~ ~ **2025.06.13 -アンケート作成、公開 ~ ~ **2025.06.12 -Web制作（HTML、CSS、JavaScript） ~ ~ **2025.06.09 ***現状分析 -プロジェクトテーマと同様の「テーマ内容」に関する先行事例... --[[オンライン個別指導 スクールIE（やる気スイッチがキャッ... -プロジェクトの成果物の「表現形式」に関する先行事例を探す。 --[[CODE My UI>https://codemyui.com/tag/toggle-switch/]] //-プロジェクトのテーマに関わる「時間的情報（歴史）」を調... //-プロジェクトのテーマに関わる「空間的情報（地理）」を調... -プロジェクトのテーマに関わる「技術」について調査する --[[ふわふわ浮かぶオブジェクトの作り方>https://zenn.dev/t... --[[CSS で要素を中央に配置する方法 (div、テキスト他)>http... --[[CSS でランダムな値を扱う `random()` と `random-item()... --[[SCSSのランダム関数を用いてテーマカラーをランダムに生... --[[6ケタのカラーコードをランダムで生成する色々な方法>htt... --[[SVGで手書き風アニメーションを実装する方法>https://wil... ~ ***課題定義 -公開方法 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]] ~ ~ ~ ~

終了行:
*MOTIVATION SwitCh site MOTIVATION SWITCH with site! ~ #image(main.png) ~ -''佐々木陽菜'' -'''Keywords：やる気スイッチ, 二面性''' ~ -''成果物は__[[&color(#c98508){こちら};>https://33ki-2022... ~ //-&color(red){相互評価シートはこちら▼}; //__[[相互評価シート>https://docs.google.com/spreadsheets... ~ //***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/... ~ ~ #hr CENTER:''進捗記録'' #hr ~ ~ **2025.07.14 -プロジェクトのタイトルとサブタイトル --タイトル: MOTIVATION SwitCh site --サブタイトル: MOTIVATION SWITCH with site! -これは何？ を簡潔に --ページ上部に記載 -プロジェクトの背景と目的 --ページ上部に記載 -成果物の紹介 --__[[MOTIVATION SwitCh site>https://33ki-2022.github.io/... -成果物の仕様 --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 T... ~ ~ ~ **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... -プロトタイプのサイトを基に修正をして、成果物とする。 ~ ~ **2025.06.14 -Web制作（HTML、CSS、JavaScript） ~ ~ **2025.06.13 -アンケート作成、公開 ~ ~ **2025.06.12 -Web制作（HTML、CSS、JavaScript） ~ ~ **2025.06.09 ***現状分析 -プロジェクトテーマと同様の「テーマ内容」に関する先行事例... --[[オンライン個別指導 スクールIE（やる気スイッチがキャッ... -プロジェクトの成果物の「表現形式」に関する先行事例を探す。 --[[CODE My UI>https://codemyui.com/tag/toggle-switch/]] //-プロジェクトのテーマに関わる「時間的情報（歴史）」を調... //-プロジェクトのテーマに関わる「空間的情報（地理）」を調... -プロジェクトのテーマに関わる「技術」について調査する --[[ふわふわ浮かぶオブジェクトの作り方>https://zenn.dev/t... --[[CSS で要素を中央に配置する方法 (div、テキスト他)>http... --[[CSS でランダムな値を扱う `random()` と `random-item()... --[[SCSSのランダム関数を用いてテーマカラーをランダムに生... --[[6ケタのカラーコードをランダムで生成する色々な方法>htt... --[[SVGで手書き風アニメーションを実装する方法>https://wil... ~ ***課題定義 -公開方法 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]] ~ ~ ~ ~

ページ名: