福光そら/process
をテンプレートにして作成
HOME
ABOUT
最新の更新
2023
MEMBER 2023
秋月靖雅
浅田真優花
阿南慶子
荒谷唯斗
安藤貴仁
井上大河
岩本愛結
梅﨑美和
浦朱里
江村梨里香
大場こころ
勝田喜一
亀崎瑞穂
神田舞
白井くるみ
髙市遥
竹松莉羽
寺田圭志
中村心香
原晴紀
菱谷実来
日山晃良
平崎千夏
福井涼
堀玲二
早稲田加奈恵
渡邊優希
十時明日香
江口依舞
久木田直央
本田麻緒
山田真央
石井彩晶
大神槙之介
大熊玄樹
大山花音
岡萌絵子
荻野美咲
鐘ヶ江雅
金田桜子
北村美優香
清野梨果
高庄玲衣
津覇稜也
福屋早希乃
脇山千寛
2024
MEMBER 2024
芦谷心渚
安部詩織
池田隆之介
伊藤早紀
越智花凛
金ヶ江光千瑠
佐藤澪
川村玲太
菊池真桜
後藤未羽
齊場由布
佐々木陽菜
猿本大翔
竹之内優希
田尻有沙
谷口和歌子
千々岩聡真
手島凜
鳥越友菜
中尾桃瀬
庭瀬美来
野口朗央
福岡比菜
松崎菜々実
松永紗和
真子大輝
南妃香莉
宮園晴日
森山海莉
劉沢寧
渡辺颯香
足立実優
池田阜弥
井上朋美
宇野日菜
上瀧桃子
佐藤美月
茂山和寛
髙嶋莉彩
橘彩以
田村宥奈
徳永歩乃佳
轟はなの
若狭映那
古賀莉梨香
2025
MEMBER 2025
赤星花
有薗晴己
泉百々
稲吉うた
宇都宮楓
大島詩絵里
小川眞由
源島咲太郎
櫻井風希
佐藤禾生子
友田葵
中西恋果
中山颯太
新甫楓佳
納富早希
野口瑞季
橋本京佳
東島百合子
平野雅華
深井梨々子
松本美時
丸石樹
椋本凌
村山小桜
村山優
持田真翔
吉松まなみ
浅川ひより
池光希
大崎優衣
大瀬梨乃亜
加藤虎太郎
金丸菜美
北本杏
坂本隆太朗
杉野亜子
田代夕加里
永野陽香
濱村悠伸
原凛々子
一松彩心
八木玲蓮
2026
MEMBER 2026
STAFF
専任教員一覧
伊藤敬生
井上貢一
井上友子
岩田敦之
桜井祐
永嶋さゆり
北島己佐吉
OBOG
2024年度卒業生
2023年度卒業生
2022年度卒業生
2021年度卒業生
2020年度卒業生
2019年度卒業生
SESSION
専門科目一覧
ソーシャルデザイン概論
ソーシャルデザイン演習
情報デザイン演習IIA
情報デザイン演習IIB
企画デザイン演習IIA
企画デザイン演習IIB
視覚デザイン演習
Webデザイン演習
情報デザイン研究I
地域ブランド企画研究I
3DCG演習
卒業研究
教務ガイダンス
RecommendedVideo
BasicKnowledge
PROJECT
SEARCH
開始行:
*妄想キャンパス 制作プロセス
~
ここでは[[福光そら/IdeaNote]]に書いた3つの提案を
課題が出された5.14〜締め切りまでの21日間の
制作過程を記す。
21(日数)÷3(作品数)=7(1週間)計算で
1週間に1つ完成させる。
**:)
~
5.14(木)
アプリの細かな内容、そこで生まれる
問題点を深掘りし、
改善、解決する方法を言葉として
ひたすら書き出していく。
~
客観的な視点で見てもらうために、
AIに定期的にメモをし送信し
問題点の穴を見つけてもらい、解決策を探す。
この時点でアプリ名を考え
後日のロゴ制作に活かす。
|#image(1.png)|
**:)
~
5.15(金)
クリスタにてロゴ案をとりあえず書き出していく、
良いなと思ったものをイラレにて清書
クマのキャラにすることは、
昨日から考えていた案なので
そこを意識しながら今回「Q-ma」の
イメージキャラクターである
クーマ(仮称)のキャラ制作も並行して行う。
|#image(2.png)|
|#image(3.png)|
↓ラフの二面図
|#image(4.jpg)|
↓左右対称になるように清書
|#image(5.png)|
**:)
~
5.16(土)
昨日進めていたアプリアイコン案を作った
ロゴを基に色や配置がどういう印象を
与えるか、使う上での見やすさを
考えながら出していく、今回アプリの
アイコンの持つ色の意味、背景色が白だと
情報が少ないと認知がしずらいという
ことから背景色を赤にすることに決定。
~
例えばFacebook、Twitter(X)などのSNS
スタサプ、日本経済新聞など知的な感じは青
赤はpaypay、三菱銀行、楽天銀行など
逆にYahooやGoogle、Microsoftなど、複数の
アプリを出している会社は、背景は真っ白が多い
おそらく他のアプリと勘違いされない為だろう。
~
この理由と、九産大のテーマカラーがえんじ色で
あることから、基本カラーは赤にすることに
決定した。
|#image(6.jpg)|
また、アイコンを見てどのようなアプリなのか
大まかでもわかる方がいいと思ったので、
ロゴではなく文字(右上/上段)のようにした。
ここからさらに細かくブラッシュアップを開始。
|#image(7.jpg)|
↑クロッキー帳の一部
今日は家作業でクロッキー帳があるので、
そちらに案出し
デジタルと違い軽い気持ちで描ける
~
クロッキーは完成に向けた案出しというよりも、
***様々な形の持つ可能性を出し切る。
という目的でやっている。
ダサい形でも、ヘンテコな形でもとりあえず描く。
~
|#image(8.jpg)|
クロッキーのイメージをデジタルにて明確にし、
形の印象を捉えた後は色の印象による
イメージの違いを見ながら調整していく。
最終的に清書はイラレだが、清書はもう
ミリ単位での調整以外するつもりが
無いくらいの勢いで行きたいので、
99.9%完成状態で持っていく。
イラレはクリスタと違いキーボード操作
中心で、一回一回の操作がしにくいので、
考えが甘い状態で清書を行おうとすると、
もし後で変更を加えたくなった場合、面倒😠
~
*問題と解決策
アプリアイコンデザインで躓いた理由は、
アイコンの背景色を赤にしてしまうと、
視認性の問題から、白以外の色、つまり
はっきりした色が使えなくなってしまう。
かといって、ロゴを白にするとキャラの顔が
わからなくなってしまうというところだ。
その為、いっそこのロゴは使わず文字のみの
アイコンにしようとしていた
(クロッキーの前の画像の右上参照)
~
しかし、QmaのQを吹き出しに見立てて、
その中にロゴを入れる
ことで、ロゴの周りに白い空間を
作成することができ、それにより
ロゴマークの色にはっきりした色を
使うことができた。
~
この状況を画像でまとめたので
そちらを見て欲しい。
|#image(9.jpg)|
~
今回プレゼンをする上で、どのアプリのイメージ画像が
必要かまとめるために、アナログで書き出していく
見返すのが目的でなく、頭の中で整理するのが目的の為
消しゴム一切使わずに画面を荒らす。
~
アイデアノートには、
|3.4.アプリのデザインを3日目に決め、4日目にPCで清書|
|5.紹介するスライドの制作、流れを決める|
|6.7.スライドの作成、清書、仕上げ|
このように、スライドの作成に3日かけるスケジュール
だったが、スライドの大まかな流れを今決めてしまった
のと、アプリ画面に力を入れたいと3日目のペースで
感じた為、5日もアプリ画面の制作にすることにした
|#image(10.jpg)|
~
まずは一番最初、プレゼンの顔となる
ヘッダーを作っていく。
最近いろんな広告やHP、デザインを見て
気がついたことは、やはりキャッチコピーの
重要性だと思ったので実際のプロ企業を参考に
キャッチコピーでぱっと惹かれるものを考えていく。
~
右にあるのは、アプリのダインロード画面だ。
実際に出すわけではないが、それっぽいものがあると
見ている側も気分が上がるだろう。
|#image(11.jpg)|
~
|#image(12.jpg)|
クリスタで色味を見る。文字は見やすく黒、
差し色はえんじ色をイメージした赤や
オレンジにした。
~
|#image(13.jpg)|
まだ素人ではあるが、イラストが描けるので
そこを活かし、絵柄をできる限りの簡略化で
デザインに馴染みやすいものにする。
クーマと大学生の構図は色々決めていたが、
デザインを活かすために、球体の上に乗っている
イメージにした。
~
|#image(14.jpg)|
着彩が終わったので色味を加工して
背景と合うようにし、補色である緑を追加した。
緑に関しては今のように2Dで入れるか、オレンジの
円のようにぼかしを使って別の図形で
差し色を入れるかまだ迷い中なので
このデザインはまだ未確定。
~
私はデザインにおいて画面をデコり過ぎて
しまったり描き込み過ぎてしまう修正があり、
圧倒的プロのデザイン感がまだ足りないと思う。
皮肉だけどイラストのせいで素人感が
増している節もある😭
明日は朝から色配置をもっと調節する。
**:)
5.17
色や配置を調節。
|#image(15.jpg)|
こっちもできた
|#image(16.jpg)|
終了行:
*妄想キャンパス 制作プロセス
~
ここでは[[福光そら/IdeaNote]]に書いた3つの提案を
課題が出された5.14〜締め切りまでの21日間の
制作過程を記す。
21(日数)÷3(作品数)=7(1週間)計算で
1週間に1つ完成させる。
**:)
~
5.14(木)
アプリの細かな内容、そこで生まれる
問題点を深掘りし、
改善、解決する方法を言葉として
ひたすら書き出していく。
~
客観的な視点で見てもらうために、
AIに定期的にメモをし送信し
問題点の穴を見つけてもらい、解決策を探す。
この時点でアプリ名を考え
後日のロゴ制作に活かす。
|#image(1.png)|
**:)
~
5.15(金)
クリスタにてロゴ案をとりあえず書き出していく、
良いなと思ったものをイラレにて清書
クマのキャラにすることは、
昨日から考えていた案なので
そこを意識しながら今回「Q-ma」の
イメージキャラクターである
クーマ(仮称)のキャラ制作も並行して行う。
|#image(2.png)|
|#image(3.png)|
↓ラフの二面図
|#image(4.jpg)|
↓左右対称になるように清書
|#image(5.png)|
**:)
~
5.16(土)
昨日進めていたアプリアイコン案を作った
ロゴを基に色や配置がどういう印象を
与えるか、使う上での見やすさを
考えながら出していく、今回アプリの
アイコンの持つ色の意味、背景色が白だと
情報が少ないと認知がしずらいという
ことから背景色を赤にすることに決定。
~
例えばFacebook、Twitter(X)などのSNS
スタサプ、日本経済新聞など知的な感じは青
赤はpaypay、三菱銀行、楽天銀行など
逆にYahooやGoogle、Microsoftなど、複数の
アプリを出している会社は、背景は真っ白が多い
おそらく他のアプリと勘違いされない為だろう。
~
この理由と、九産大のテーマカラーがえんじ色で
あることから、基本カラーは赤にすることに
決定した。
|#image(6.jpg)|
また、アイコンを見てどのようなアプリなのか
大まかでもわかる方がいいと思ったので、
ロゴではなく文字(右上/上段)のようにした。
ここからさらに細かくブラッシュアップを開始。
|#image(7.jpg)|
↑クロッキー帳の一部
今日は家作業でクロッキー帳があるので、
そちらに案出し
デジタルと違い軽い気持ちで描ける
~
クロッキーは完成に向けた案出しというよりも、
***様々な形の持つ可能性を出し切る。
という目的でやっている。
ダサい形でも、ヘンテコな形でもとりあえず描く。
~
|#image(8.jpg)|
クロッキーのイメージをデジタルにて明確にし、
形の印象を捉えた後は色の印象による
イメージの違いを見ながら調整していく。
最終的に清書はイラレだが、清書はもう
ミリ単位での調整以外するつもりが
無いくらいの勢いで行きたいので、
99.9%完成状態で持っていく。
イラレはクリスタと違いキーボード操作
中心で、一回一回の操作がしにくいので、
考えが甘い状態で清書を行おうとすると、
もし後で変更を加えたくなった場合、面倒😠
~
*問題と解決策
アプリアイコンデザインで躓いた理由は、
アイコンの背景色を赤にしてしまうと、
視認性の問題から、白以外の色、つまり
はっきりした色が使えなくなってしまう。
かといって、ロゴを白にするとキャラの顔が
わからなくなってしまうというところだ。
その為、いっそこのロゴは使わず文字のみの
アイコンにしようとしていた
(クロッキーの前の画像の右上参照)
~
しかし、QmaのQを吹き出しに見立てて、
その中にロゴを入れる
ことで、ロゴの周りに白い空間を
作成することができ、それにより
ロゴマークの色にはっきりした色を
使うことができた。
~
この状況を画像でまとめたので
そちらを見て欲しい。
|#image(9.jpg)|
~
今回プレゼンをする上で、どのアプリのイメージ画像が
必要かまとめるために、アナログで書き出していく
見返すのが目的でなく、頭の中で整理するのが目的の為
消しゴム一切使わずに画面を荒らす。
~
アイデアノートには、
|3.4.アプリのデザインを3日目に決め、4日目にPCで清書|
|5.紹介するスライドの制作、流れを決める|
|6.7.スライドの作成、清書、仕上げ|
このように、スライドの作成に3日かけるスケジュール
だったが、スライドの大まかな流れを今決めてしまった
のと、アプリ画面に力を入れたいと3日目のペースで
感じた為、5日もアプリ画面の制作にすることにした
|#image(10.jpg)|
~
まずは一番最初、プレゼンの顔となる
ヘッダーを作っていく。
最近いろんな広告やHP、デザインを見て
気がついたことは、やはりキャッチコピーの
重要性だと思ったので実際のプロ企業を参考に
キャッチコピーでぱっと惹かれるものを考えていく。
~
右にあるのは、アプリのダインロード画面だ。
実際に出すわけではないが、それっぽいものがあると
見ている側も気分が上がるだろう。
|#image(11.jpg)|
~
|#image(12.jpg)|
クリスタで色味を見る。文字は見やすく黒、
差し色はえんじ色をイメージした赤や
オレンジにした。
~
|#image(13.jpg)|
まだ素人ではあるが、イラストが描けるので
そこを活かし、絵柄をできる限りの簡略化で
デザインに馴染みやすいものにする。
クーマと大学生の構図は色々決めていたが、
デザインを活かすために、球体の上に乗っている
イメージにした。
~
|#image(14.jpg)|
着彩が終わったので色味を加工して
背景と合うようにし、補色である緑を追加した。
緑に関しては今のように2Dで入れるか、オレンジの
円のようにぼかしを使って別の図形で
差し色を入れるかまだ迷い中なので
このデザインはまだ未確定。
~
私はデザインにおいて画面をデコり過ぎて
しまったり描き込み過ぎてしまう修正があり、
圧倒的プロのデザイン感がまだ足りないと思う。
皮肉だけどイラストのせいで素人感が
増している節もある😭
明日は朝から色配置をもっと調節する。
**:)
5.17
色や配置を調節。
|#image(15.jpg)|
こっちもできた
|#image(16.jpg)|
ページ名: