#author("2026-07-16T12:09:29+09:00","default:member","member") #author("2026-07-16T12:10:28+09:00","default:member","member") *毎日いろあつめ 色を探すwebサイト #image(mainv.png) -''齊場 由布'' -'''Keywords：color, diary, collect''' -[[Webサイト>https://oisiiomoti.github.io/iroatume0716/]] //-__[[相互評価シート>https://www.example.com]]__ ← ここからコメントをお願いします。 -[[作品概要(PDF)>https://ksumail-my.sharepoint.com/:b:/g/personal/k24as011_st_kyusan-u_ac_jp/IQC26-rqGTZFQpVYadH9UUOeAWt8jJra41H8BT_dh12GvjU?e=XPcKuL]] ~ //***CONTENTS //#contents2_1 //~ **概要 ***これは何？ //&color(red){これは何か・・を簡潔に}; 本研究は日常風景に潜む色彩に焦点を当て、創作活動の一助となることを目的とするギャラリーサイトである。 ~ ***背景と目的 //&color(red){プロジェクトの背景と目的}; デザインを制作する際、組み合わせや数、全体の印象などに大きく影響を与える色を決定することは苦を労する問題の一つだと言える。しかし、多くの創作にとって色彩は切り離せない要素である。 本研究では、作品制作における色選びに悩みを抱える人に向けて、決まりを設けて特定の色を選び出す方法の一例として一つのテーマに沿って制作したものを提案する。今回は、決まりとして日常風景を写した写真から一色を切り取り、累積的に配色パターンを作るウェブサイトを製作する。 //閲覧者を考慮したゴール、背景を書き足す ~ ***コンセプト //&color(red){基本的な考え方、枠組み、視点など}; 配色の決定への苦と悩みから創作者を解放し、色を探す段階から創作を楽しむ心を閲覧者に伝えることを本研究のコンセプトとする。 本研究では、日常から色を切り出すこと、多くの人にとって再現が容易であることを重視する。よって、親しみやすいシンプルかつ穏やかなデザインを用いる。 また、手軽にサイトを開けることを目標とし、スマートフォン環境での閲覧を想定したWebサイトの制作を行う。 ~ ***成果物の仕様 //&color(red){&small(成果物の形式・サイズ・時間尺等);}; [[Webサイト>https://oisiiomoti.github.io/iroatume0701/]] ~ ***制作ツール //&color(red){使用するツール｜ハードウエア・ソフトウエア}; VScode Google Gemini(プログラム補助) Adobe Photoshop Adobe Illustrator ~ ***プロジェクトの期間 プロジェクトの期間｜2026.04.09 - 2026.07.20 プロジェクトの期間｜2026.04.09 - 2026.07.23 ~ ***まとめ //&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。}; //中間のまとめをここに書く 本研究では、日常体験を用いて創作活動をより楽に、楽しくすることをコンセプトに配色選びを行うための1つの方法を作例を用いて提案した。前提を定めたのち、資料を探し、累積し、まとめるという工程をとることで扱う色を整理することができ、オリジナルの配色パターンの制作に有用であると感じた。 UIデザイン、コンテンツ量など未実装点が多く、改善の余地がある。長期的な運用、活用が可能であるため、実用的なWebサイトを目標とし、より一層の発展を図る。 ~ ~ **調査 ***現状調査 //&color(red){プロジェクトのテーマに関わる社会の現状と問題の洗い出し}; -配色のルール -既存の制作サイト ~ ***先行事例 //&color(red){プロジェクトのテーマに該当する先行事例の紹介、傾向分析など}; -[[配色テクニック紹介！イラストの色選びに迷わない>https://www.clipstudio.net/oekaki/archives/152589]] -[[グーぺ カラーパレット選定ガイド。初心者でも迷わない配色ルール>https://goope.jp/article/color-palette-guide/]] -[[Adobe Express>https://color.adobe.com/jp/]] ~ ***技法・技術情報 //&color(red){プロジェクトの遂行に必要な技法・技術に関する調査}; //新規技術がなければ書かなくていい //他の人の参考になるように書く ~ ~ **プロジェクト管理 ***スケジュール //&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。}; //一日単位で制作する（Googleドライブ） [[スケジュール（スプレッドシート）>https://docs.google.com/spreadsheets/d/1EFfH31LRMzxkPGyl4vypuKmrW7uoWYLXQX6OH_SVDNA/edit?usp=sharing]] ~ ***ToDo //&color(red){やるべきこと（タスク）を箇条書きにします。}; //&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」}; -%%サイトマップを作成%% -%%ワイヤーフレームを作成%% -%%資料を収集%% -%%資料を整理%% -%%Webサイトを作成%% -%%作品概要を作成%% //***NotToDo //&color(red){やらないこと：何をするかではなく「何をしないか」を考える}; //&color(red){例：10人以上の会議には出ない。苦手なことは誰かに頼む・・}; ~ ~ #hr CENTER:''進捗記録'' //&color(red){最新の情報を一番上に記載して下さい（古い記事が下へ沈む）。}; #hr ~ ~ **2026.07.16 -Webサイトを更新 --準備ページを作成 --フィードバックを元に改善 ~ **2026.07.09 ↪︎フィードバック -配色の意味に沿わせる -%%ロゴデザインのモチーフの説明%% -%%ボタンをボタンらしく%% -タブの分け方 -タブの中身を画像でなく ~ **2026.07.02 -作品概要用資料(画像・テキスト)を収集、制作 ~ **2026.06.25 webページを更新 -作品概要を作成 -フィルター機能を更新 -内容を追加 https://oisiiomoti.github.io/zyouho-design0625/ https://oisiiomoti.github.io/zyouho-design0701/ https://oisiiomoti.github.io/iroatume0701/ ~ **2026.06.18 webページを更新 -作品概要を作成 -フィルター機能を追加 https://oisiiomoti.github.io/zyouho_design0618/ ~ **2026.06.11 ワイヤーフレームを調整 #image(wf-zkl2.png) ウェブページの中身を更新 -ヘッダーを調整 --ロゴを追加 -フィルター機能の制作 https://oisiiomoti.github.io/zyouho_design0611/ ~ **2026.06.04 サイトマップを調整 #image(sm-zkl2.png) ウェブページの中身を更新 -home以外のページの枠を作成 -コンテンツページのレイアウトを更新 --フィルター機能の制作開始 https://oisiiomoti.github.io/zyouho_design0604/ ~ **2026.05.21 ウェブページの中身を更新 -homeのレイアウトを更新 --画像を仮置き --コンテンツフレームを作成 ~ **2026.05.14 ウェブページの中身を更新 -レイアウトを調整 ~ **2026.05.07 ウェブページの中身を更新 -レイアウトを調整 ~ **2026.04.30 ***今回の作業 -学科サイトを更新 -webページの枠を制作↓ https://oisiiomoti.github.io/zyouhokenkyu/ ~ **2026.04.23 ***テーマ決定 サイトマップ、ワイヤーフレーム(試作) |#image(sm-zkl.png)|#image(wf-zkl.png)| //サイトマップ 分かりやすく、ワイヤーフレーム htmlに合った形で ~ ***テーマ決定 -カラーパレットをつくる デザインで使えるオリジナルのカラーパレットを作る 色探し、写真から抽出 一日一色、日記形式 web ~ ~ ***先行調査 ***カラーパレットをつくる -[[カラーパレット選定ガイド。初心者でも迷わない配色ルール>https://goope.jp/article/color-palette-guide/]] -[[幅広く使えるカラーパレットを作ってみた>https://zenn.dev/aishift/articles/c940d961df923b]] -[[写真から色を抽出して配色アイデアを作る方法>https://tsukumanablog.com/color-pallet/]] ~ ***スマホでの写真研究 -[[スマホカメラで上手に撮影！写真の撮り方の基本って？4つのコツを押さえよう>https://www.iyobank.co.jp/sp/iyomemo/entry/20220428.html]] -[[スマホカメラを使った綺麗な写真の撮り方>https://f-photobook.jp/column/64photobook-smartphone_shooting/]] -[[ぬい撮りのコツとおすすめ写真加工アプリ ５ 選>https://jp.cyberlink.com/blog/photoeditor-app/3856/nuidori-how-to-and-recommended-photo-apps]] ~ ***架空のウェブサイト -[[ポートフォリオに載せる架空サイトの作り方>https://michan69.jp/demosite-making/]] -[[架空Webサイト 税理士事務所>https://www.lancers.jp/profile/ik___/portfolio_popup/589175?srsltid=AfmBOorkPTdxHYZVfCW3faIL7qEyBBUCvJNWOodGYyv6qFvWUlYWLGVx]] -[[ちょうどいいwebデザインギャラリー>https://choooodoii.com]] ~ ~ ***今後やること -試作 --%%サイトマップ、ワイヤーフレーム%% -先行調査 -日記付け ~ ~ **2026.04.16 ***テーマ案（絞り込み） -''カラーパレットをつくる'' -スマホでの写真研究 -架空のウェブサイト ~ **2026.04.09 ***テーマ案 -''カラーパレットをつくる'' -''スマホでの写真研究'' -ランダムに文字が出るサイト -フォントをつくる -こまごましたものをつくる（推し活） -''架空のウェブサイト'' ~