齊場由布/情報デザイン研究I

毎日いろあつめ

色を探すwebサイト

• 齊場 由布
• Keywords：color, diary, collect
• Webサイト
• 作品概要(PDF)

概要

これは何？

　本研究は日常風景に潜む色彩に焦点を当て、創作活動の一助となることを目的とするギャラリーサイトである。

背景と目的

　デザインを制作する際、組み合わせや数、全体の印象などに大きく影響を与える色を決定することは苦を労する問題の一つだと言える。しかし、多くの創作にとって色彩は切り離せない要素である。
　本研究では、作品制作における色選びに悩みを抱える人に向けて、決まりを設けて特定の色を選び出す方法の一例として一つのテーマに沿って制作したものを提案する。今回は、決まりとして日常風景を写した写真から一色を切り取り、累積的に配色パターンを作るウェブサイトを製作する。

コンセプト

　配色の決定への苦と悩みから創作者を解放し、色を探す段階から創作を楽しむ心を閲覧者に伝えることを本研究のコンセプトとする。
　本研究では、日常から色を切り出すこと、多くの人にとって再現が容易であることを重視する。よって、親しみやすいシンプルかつ穏やかなデザインを用いる。
　また、手軽にサイトを開けることを目標とし、スマートフォン環境での閲覧を想定したWebサイトの制作を行う。

成果物の仕様

Webサイト

制作ツール

VScode
Adobe Photoshop
Adobe Illustrator

プロジェクトの期間

プロジェクトの期間｜2026.04.09 - 2026.07.20

まとめ

　本研究では、日常体験を用いて創作活動をより楽に、楽しくすることをコンセプトに配色選びを行うための1つの方法を作例を用いて提案した。前提を定めたのち、資料を探し、累積し、まとめるという工程をとることで扱う色を整理することができ、オリジナルの配色パターンの制作に有用であると感じた。
UIデザイン、コンテンツ量など未実装点が多く、改善の余地がある。長期的な運用、活用が可能であるため、実用的なWebサイトを目標とし、より一層の発展を図る。
↪︎フィードバック

• 配色の意味に沿わせる
• ロゴデザインのモチーフの説明
• ボタンをボタンらしく
• タブの分け方
• タブの中身を画像でなく
  
  
  
  

調査

現状調査

• 配色のルール
• 既存の制作サイト
  
  

先行事例

• 配色テクニック紹介！イラストの色選びに迷わない
• グーぺ カラーパレット選定ガイド。初心者でも迷わない配色ルール
• Adobe Express
  
  

技法・技術情報

プロジェクト管理

スケジュール

ToDo

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

ワイヤーフレームを調整

ウェブページの中身を更新

• ヘッダーを調整
  • ロゴを追加
• フィルター機能の制作
  https://oisiiomoti.github.io/zyouho_design0611/
  
  

2026.06.04

サイトマップを調整

ウェブページの中身を更新

• 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

テーマ決定

サイトマップ、ワイヤーフレーム(試作)

テーマ決定

• カラーパレットをつくる
  デザインで使えるオリジナルのカラーパレットを作る
  色探し、写真から抽出
  一日一色、日記形式
  web
  
  
  
  

先行調査

カラーパレットをつくる

• カラーパレット選定ガイド。初心者でも迷わない配色ルール
• 幅広く使えるカラーパレットを作ってみた
• 写真から色を抽出して配色アイデアを作る方法
  
  

スマホでの写真研究

• スマホカメラで上手に撮影！写真の撮り方の基本って？4つのコツを押さえよう
• スマホカメラを使った綺麗な写真の撮り方
• ぬい撮りのコツとおすすめ写真加工アプリ ５ 選
  
  

架空のウェブサイト

• ポートフォリオに載せる架空サイトの作り方
• 架空Webサイト　税理士事務所
• ちょうどいいwebデザインギャラリー
  
  
  
  

今後やること

• 試作
  • サイトマップ、ワイヤーフレーム
• 先行調査
• 日記付け
  
  
  
  

2026.04.16

テーマ案（絞り込み）

• カラーパレットをつくる
• スマホでの写真研究
• 架空のウェブサイト
  
  

2026.04.09

テーマ案

• カラーパレットをつくる
• スマホでの写真研究
• ランダムに文字が出るサイト
• フォントをつくる
• こまごましたものをつくる（推し活）
• 架空のウェブサイト