LogoMark.png

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


#author("2021-10-15T15:06:47+09:00","default:member","member")
#author("2021-10-29T14:31:46+09:00","default:member","member")
*サルでもパソコンが買えるサイト
QRコードを読み込んで、選択肢を選ぶだけで買うべきパソコンが分かる
#image(増丸竣太/卒業研究I/見出し.jpg)




~


**Overview
***Introduction / What is This
//&color(red){これは何か・・を簡潔に};
パソコンの買い方が分からない人のためにその人に合うスペック(商品)を
提示するサイト
~

***Background and Purpose
元々2020年は、高いシェアを確保していたWindows7のサポートが終了し、パソコン需要の右肩下がりの起点となる年だと予想されていた。
しかし、新型コロナウイルスの影響によりリモートワークが促進され、パソコンの需要は予想を裏切る形で増加した。ノートパソコンに関しては、約894万台と過去最高の国内出荷台数を記録したほどだ。

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


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

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

***Output
//&color(red){成果物の直接掲載またはリンク誘導};
//&color(red){&small(プロジェクトの途上では、試作品等、視覚的な資料を掲載・リンクして下さい。);};
//&color(red){&small(成果物の形式・サイズ・時間尺等の基本情報も記載して下さい。);};
#image(増丸竣太/卒業研究I/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~
~

***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){先行事例の紹介、傾向分析など};
-先行事例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.10.29
***試作
形として試作を行った。
https://marush19.github.io/monkeyPC/web/start
調査は終えているため、これが調整完了し次第情報を入れていく。
~

~



~
**2021.10.15
***試作
前期でXDを使用して制作したUIを用いてコーディングを行った。
~
・[[XDによる試作>https://xd.adobe.com/view/7102916e-0033-47b0-804d-e4148f7519be-2451/screen/228f9951-d761-4840-ad4f-63056b02787f?fullscreen&hints=off]] ← ''Click!''

・[[学部選択画面>https://marush19.github.io/monkeyPC/web/menu]] ← ''Click!''

・[[質問選択画面>https://marush19.github.io/monkeyPC/web/q1]] ← ''Click!''

~
学部選択と質問選択の部分のコーディングを行った。ここがメインの部分になるため、残りの結果画面やページ遷移時の挙動などを来週行う。

また、平行して質問選択に使用する内容を選ぶため学生に対して調査(質問)を行う。


~
**2021.10.08
***試作
一旦、前期で制作したUIデザインでコーディングを制作することにし、それの作業を進めた。
~

~
**2021.10.01
***試作
「どのPCにするか」というのを「ゴールが分からず、道に迷っている人」とし、
このサイトをマップアプリのような目的地まで導くものと考えた。
既存の簡単な質問を3つというぶぶんはそのままで、道路案内標識をイメージした画面を表示し、標識をスワイプやクリックで次の画面に移動するというUIを考えた。

#image(sisaku02.jpg)
~
**2021.09.24
***調査・試作
夏休みから引き続き、UI部分の調査・試作を行った。
現在は地図を用いたものにできないか考えている。


~
**2021.09.17
***試作
夏休みに引き続きコーディングを行った。
ある程度の部分まで進んだため、デザインに注力すべく作業を中断
~

**夏休み
-基盤となる部分のコーディング
UIデザインと平行して行っていたが、デザインが現在も制作中で変更の可能性があるため、中断。

-UIの部分を考案
PCを知らない人のためにというコンセプトの掘り下げをしながら、調査や試作を行った。現在も継続中。
[[≪調査例≫>https://www.pinterest.jp/search/pins/?q=Ui%20%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3&rs=rs&eq=&etslf=2019&term_meta[]=Ui%7Crecentsearch%7C4&term_meta[]=%E3%83%87%E3%82%B6%E3%82%A4%E3%83%B3%7Crecentsearch%7C4]]
~
≪試作例≫
#image(sisaku.png)
~