LogoMark.png

増丸竣太/卒業研究I のバックアップの現在との差分(No.5)


#author("2021-06-04T13:53:35+09:00","default:member","member")
*文字で構成される世界
文字(漢字)を取り入れたパズル制作とそのブランディング
#img(S4.jpg)
#author("2021-07-28T12:53:19+09:00;2021-07-28T00:36:03+09:00","default:inoue.ko","inoue.ko")
*サルでもパソコンが買えるサイト
QRコードを読み込んで、選択肢を選ぶだけで買うべきパソコンが分かる
#image(見出し.jpg)




~


**Overview
***Introduction / What is This
文字をイメージしたパズルと、それを宣伝するメディア制作
//&color(red){これは何か・・を簡潔に};
パソコンの買い方が分からない人のためにその人に合うスペック(商品)を
提示するサイト
~

***Background and Purpose
数学や数式で世界を表現できるという記事を見たことがあり、面白いなと感じた。
数学以外のものでも同じように世界を表現できないだろうかと考え、理系である数学の対照として、文系の国語を連想し、「文章や文字で使用しても面白そう」だと思い、今回の制作に至った。
元々2020年は、高いシェアを確保していたWindows7のサポートが終了し、パソコン需要の右肩下がりの起点となる年だと予想されていた。
しかし、新型コロナウイルスの影響によりリモートワークが促進され、パソコンの需要は予想を裏切る形で増加した。ノートパソコンに関しては、約894万台と過去最高の国内出荷台数を記録したほどだ。

~
多様なパーツで構成されるパソコンの性質上、どうしても「難しいもの」「よく分からない」というイメージを持っている人は一定数存在する。例として、Youtubeで「パソコン 買い方」や「パソコン 選び方」で検索した際に表示される動画の再生回数は、多いもので100万回を超えるものもあるほどだ。

それを表現するにあたり、多くの要素が一つに集約しているという点から、パズルを用いて制作することにした。
文字を取り入れたパズルを制作し、それをWEBや動画で宣伝することを目標としている。

「よくわからないものだけど、パソコンは必要だから買う」という心持ちでお店に行くと、結果的にオーバースペックの高価なものを購入してしまう可能性は大いにある。
そんな人のために、ちょうどいい商品を提案し、少しでも費用を節約するものがあればいいのではないかと思い、今回これを制作するに至った。
//&color(red){プロジェクトの背景と目的};
~

***Concept
//&color(red){基本的な考え方、枠組み、視点など};
世界を表現できるものの模索
分からない人のために、シンプルに道を示す
~

***Output
//&color(red){成果物の直接掲載またはリンク誘導};
//&color(red){&small(プロジェクトの途上では、試作品等、視覚的な資料を掲載・リンクして下さい。);};
//&color(red){&small(成果物の形式・サイズ・時間尺等の基本情報も記載して下さい。);};
説明用のイメージ
~
***1 用意されているのは「文字が書かれたパネル」と「ピース」
#img(S4.jpg)
***2 組み上げていく
#img(S5.jpg)
***3 完成
#img(S3.jpg)
#image(siryou01.jpg)

[[≪現在のワイヤーフレーム≫>https://xd.adobe.com/view/7102916e-0033-47b0-804d-e4148f7519be-2451/screen/228f9951-d761-4840-ad4f-63056b02787f?fullscreen&hints=off]]



~


***Tools
//&color(red){使用するツール|ハードウエア・ソフトウエア};
adobe Photoshop
adobe Illustrator
adobe Premiere pro
adobe After effect
VS code
~

***Term
//&color(red){プロジェクトの期間|20XX.XX.XX - 20XX.XX.XX };
2021.04~
2021.04~
~

***Conclusion / Summary 
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};
途中で題材を変更した影響もあり、前期での進捗は微々たるものになったが、XDでの試作は形にはなった。今後は、学生に対しての直接質問したりとさらなる調査や、HTML、CSSによるコーディングを行っていく。
~
~


**Survey

***Present Status
//&color(red){現状調査、現状の問題の洗い出し};
漢字を並べて表現するというのを前提に、フォントや色などを模索中。
現在は、フォントは漢字らしさが表現される明朝体、色はその要素に合った色(「土」ならば茶色の系統、「川」なら水色の系統)で考えている。
-2020年のノートパソコン、“コロナ特需”で出荷台数が過去最高
https://response.jp/article/2021/01/27/342541.html

色を白などに統一させて配置が何かしらの模様のようなものになるようにする案や、漢字とその要素をの特徴を合わせたタイポグラフィを制作し、それを並べる案も並行して考えている。



~


***Precedent
//&color(red){先行事例の紹介、傾向分析など};
明確な選考事例を見つけられていないが、タイポグラフィの案の場合、川や土
などの表現をどう落とし込むかを模索している。
https://www.pinterest.jp/pin/3096293481016265/
https://www.pinterest.jp/pin/359162139027939730/
-先行事例1
https://jp.ext.hp.com/campaign/personal/others/pc_check/

海の要素を持つ場合は、波を連想させる曲線を使用して表現されている。
問は4つと少なくサイトデザインもシンプル、選択肢についても丁寧な説明だが、結果が自分が何を重視しているかとうものであり、直接的に提案してくれるものではない。

-先行事例2
https://pcrecommend.com/

こちらもシンプルなデザインではあるものの、選択肢が多く、選択すること自体に面倒だと感じる可能性がある。
~

上記2つの事例は「パソコン 選び方 診断」と検索した際に上にヒットする2つになる。
診断結果が自分の傾向やメーカーなど、「結局どんなの買えばいいの?」という疑問を解決するものではないと感じた。
そのため、スペックや商品を提示するものは、分からない人にとっての道を定める意味でも需要があるのではないかと考える。


~

***Technique / Technology
//&color(red){プロジェクトの遂行に必要な技法・技術に関する調査};
HTML
CSS

~
~

**Project Management

***Schedule
//&color(red){計画的な遂行のために、進行管理表を作成してリンクして下さい。};
後期分制作中
~

***ToDo
//&color(red){やるべきこと(タスク)を箇条書きにします。};
//&color(red){完了後は「%%取り消し線%%」あるいは「// コメントアウト」」};
後期に向けて
-コーディングによるデザインの精査
-学生本人に対する質問など、さらなる調査

~
~
~

#hr
CENTER:''worklog''
//&color(red){最新の情報を一番上に記載して下さい(古い記事が下へ沈む)。};
#hr

~
~

**2021.07.27
[[プレゼン用ページ>https://design.kyusan-u.ac.jp/socialdesign/?%E5%A2%97%E4%B8%B8%E7%AB%A3%E5%A4%AA/%E5%8D%92%E6%A5%AD%E7%A0%94%E7%A9%B6I/pre]] ← ''Click!''

~
~

**2021.07.16
***試作
[[サイトの大まかな機能をXDにて構成>https://xd.adobe.com/view/7102916e-0033-47b0-804d-e4148f7519be-2451/screen/228f9951-d761-4840-ad4f-63056b02787f?fullscreen&hints=off]] ← ''Click!''

HTMLなどで実際に組み上げていく際に変更する部分がある可能性が高いため、現時点で想定しているデザインになる。
コーディングに関しては、夏休み中に取り組む予定。その際に、今回のデザインとのすり合わせを行う。

~
~

**2021.07.09
***試作
コンセプトに沿ったシンプルなUIを制作した。
最初のメニュー(学部選択画面)を九産大のホームぺージに寄せ、それ以降は学部それぞれの色をメインカラーとして進んでいく。
画像は芸術学部のもの。学部の色はホームページの学部紹介にて使用されている色を参考にしている。
#image(見出し2.jpg)

~
~

**2021.07.02
***試作
ターゲットを一般向けから学生向けに絞ることにした。詳細に言えば、九州産業大学に通う学生に向けたものにする。
理由としては、対象が曖昧な一般よりも、まずはある程度知れている学生に向けたものを制作した方がやりやすいのではないかと考えたからだ。
それに伴い、サイトのデザインも九州産業大学のホームページに寄せたものにする予定である。

~
~

**2021.06.25
***試作
「複雑なものを取り扱うからシンプルに」というコンセプトを立てた。
それをもとに試作を開始。現時点では、3つの質問に対して適当なものを選択し、それを3回繰り返すという仕様となっている。
|#image(旧モック02.jpg)|#image(旧モック01.jpg)|

~
~

**2021.06.18
***題材決定
「サルでもパソコンが買えるサイト」を制作することにした。
具体的には、パソコンに対して、複雑でよくわからないという人に向けて、選択肢を選ぶだけで適当なスペック(商品)を表示するというもの。
ワイヤーフレームをXDで制作し、コーディングをHTML、CSSで行う。それぞれ前期、後期で行う予定。

~
~

**2021.06.11
***題材変更
現在の題材に意味を見出せなくなってしまったため、題材変更をすることとした。
題材は現在考え中。
案として、パソコンの買い方が分からない人向けの何かを制作というものがある。

~
~

**2021.06.04
***試作
#img(S08.jpg)
#img(S07.jpg)
#image(S08.jpg)
#image(S07.jpg)
タイポグラフィ案について試作。
明朝体の漢字らしさとの両立を考えたが、どれも控えめすぎて区別がつかないため、試行錯誤中。この案については明朝体にこだわる必要はない方向でも考える。

~
~

**2021.05.28
***調査
漢字をタイポグラフィにする案を考える。
川であれば川の要素を取り入れた文字を使用することでより分かりやすくなるのではないかと考えた。

~
~

**2021.05.21
***試作
#img(S4.jpg)
#img(S5.jpg)
#img(S3.jpg)
#image(S4.jpg)
#image(S5.jpg)
#image(S3.jpg)
イメージを試作し、説明用のイメージとしても制作した。
いざ形にすると少し圧が強く感じたため、フォントや並べ方を別パターンを検討する。

~
~

**2021.05.14
***試作
説明用のイメージ画像を制作
言葉で説明するのが難しい題材であるため、急務として行う。
#image(S4.jpg)

~
~

**2021.05.07
***調査
漢字が分かりやすいフォントを見つける。明朝体を使用するとやはり漢字らしさのようなものがでるため、この方向性で試作を進める。

~
~

**2021.04.23
***調査

パズルにはどういったものがあるのかを調査してみた。

https://item.rakuten.co.jp/slowworks/08169-150119-02/
アルファベットとそれに関連する(イニシャルなど)動物を組み合わせた立体パズル、木製のおもちゃ。子供向けではあるが、アルファベットと動物などを一緒に覚えられる可能性があるため良い相乗効果が生まれていると考える。

https://tabi-labo.com/296750/wt-herdingcatspuzzle
猫のパズルで、ピースも猫型というもの。それぞれ個別の要素を持ちながら、組み合わせると一つのものに成るという意味で、現在自分が考えているものに一番近いものになる。

~
~

**2021.04.16
***試作
#img(3.png)
#image(3.png)

写真を使用したパズルを制作し、そのベースとなるフレームに文字情報を入れ込む。

#img(2.png)
#image(2.png)

パズルは基本的に完成図がパッケージや説明書なりに載っているが、今回考えているものは完成図を載せず、フレームに書いてある文字情報を頼りに完成を目指すというものを想定している。

~
~

**2021.04.09
***考案
写真を使用したパズルを制作する予定。
完成図が存在せず、パズルのベース部分に書かれた漢字をもとに組み上げていくようなもの。

~
~