#author("2026-05-17T14:22:40+09:00;2026-05-17T14:22:29+09:00","default:member","member") #author("2026-05-17T14:57:35+09:00","default:member","member") *妄想キャンパス 制作プロセス ~ ここでは[[福光そら/IdeaNote]]に書いた3つの提案を 課題が出された5.14〜締め切りまでの21日間の 制作過程を記す。 21（日数）÷3（作品数）=7（１週間）計算で 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)|