LogoMark.png

増丸竣太/卒業研究II のバックアップソース(No.2)

#author("2022-01-24T15:02:56+09:00;2021-12-04T10:18:29+09:00","default:inoue.ko","inoue.ko")
*わたしでもパソコンが買えるサイト
QRコードを読み込んで、選択肢を選ぶだけで買うべきパソコンが分かる
#image(見出し3.jpg)




~
[[プレゼンページ>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%B6II/%E3%83%97%E3%83%AC%E3%82%BC%E3%83%B3]]


**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)

webサイト
[[サルでもパソコンが買えるサイト     ←Click>https://marush19.github.io/monkeyPC/web/start]]

~


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

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

***Conclusion / Summary 
//&color(red){プロジェクトが完結したら「まとめ」を記載して下さい。};
今回、複雑なPCをシンプルなデザインで商品を提案するサイトの制作という目標は、質問数を絞ることや、図を使用することで達成できたと感じている。今後も細かい調整やwebに関する勉強をもっと行い、多くの人に使用してもらえるサイトを目指す。
~
~


**Survey

***Present Status
//&color(red){現状調査、現状の問題の洗い出し};
-2020年のノートパソコン、“コロナ特需”で出荷台数が過去最高
https://response.jp/article/2021/01/27/342541.html




~


***Precedent
//&color(red){先行事例の紹介、傾向分析など};
-先行事例１
https://jp.ext.hp.com/campaign/personal/others/pc_check/

問は4つと少なくサイトデザインもシンプル、選択肢についても丁寧な説明だが、結果が自分が何を重視しているかとうものであり、直接的に提案してくれるものではない。

-先行事例２
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.12.03
***概要・試作
概要のまとめを引き続き行った。
サイトの方は、最初の画面にアニメーションを実装し、その他細かい部分の調整を行った。また、結果画面のデザイン作業を行い、「この商品を見に行く」「他の商品を見に行く」ボタンを追加した。他の商品を見に行くを押すと、３つの質問で選んだワードでGoogle検索した場合のリンクに飛ぶ仕様になっている。
[[サルでもパソコンが買えるサイト     ←Click>https://marush19.github.io/monkeyPC/web/start]]
~

~
**2021.11.26
***概要・試作
概要のまとめを行った。プレゼンページと内容が合うようにし、齟齬が無いよう調整した。
フッターのボタンを機能させ、ヘッダーのロゴの部分をクリックすると最初の画面に戻るようにした。
~

~
**2021.11.19
***試作
前回までの変更をコーディング作業で反映させた。
背景の色をロゴに使用している3色に質問ごとに変わるようにし、ヘッターにロゴを、フッターに「最初に戻る」「ひとつ前に戻る」を追加した。
~



~
**2021.11.12
***試作
#img(ques.jpg)
前回に引き続きパターンの詰めを行った。
遷移図を制作し、把握しやすいようにまとめた。
これを元に制作していく。
~




~
**2021.11.05
***試作
中身になる質問を詰める作業を行った。
質問は全6パターン
-何に使う？
レポート/イラスト/ゲーム

-今後挑戦したい？　　
動画/ イラスト/音楽

-どのタイプ？
ノート/デスクトップ/タブレット

-どのくらいする？
ガチ/普通/そんなに

-Mac?Windows?
Mac/windows/よくわからん

-家でも作業したい？
はい/いいえ/外でもする

3つの質問を答えるため、合計パターンは54通りとなる。
結果として表示される項目はOS、CPU、GPU、RAM、ROMの5つ。Macの場合、M1が結果として表示される場合はGPU項目が減る。
~




~
**2021.10.29
***試作
形として試作を行った。
https://marush19.github.io/monkeyPC/web/start
調査は終えているため、これが調整完了し次第情報を入れていく。
~

~
**2021.10.22
***試作
前回に引き続きコーディングを作業を行った。




~

~
**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)
~