
【PDO新卒】デザインについてちょっとだけ学んでみた
はじめまして、PDO/24卒のおくひらです。
入社までの期間で
「新しいことへのチャレンジを通して、仮説検証のプロセスを学ぶ」
という活動に取り組みました。
今回はその取り組んだ内容についてまとめていきたいと思います。
1.テーマ
今回は「デザインスキルの向上」をテーマに活動を行いました。
学生時代「デザインセンスが赤ちゃんレベル」と言われてきたので、この機会に「デザインセンスを成人男性レベルまで高めてやろう!」と思ったのがきっかけです。
今回はデザインと呼ばれるものの中でも、UI/UXデザインの学習を主として活動を進めていきます。
2.どんな仮説を設定したの?
良いデザインだと
「情報を覚えてもらいやすくなる」「知識欲を刺激できる」
という二つの仮説を立て、それらについて検証を行いました。
学生時代にコンテストや学会発表で使用するスライドやポスターをたくさん作成してきましたが、う〜んという感じのデザインとなってしまうことが多かったです。
下の画像が悪いデザインの参考資料となっています。
活動の結果をまとめているときに改めて見返してみると、色が無駄に多いし、どこに注目すればいいのかわかりにくいし、本当にひどいポスターだなぁと思いました笑。

このような悪いデザインでポスターなどを作ってしまうと、
「そもそも興味を持ってもらえない」
「興味をもってもらえても、伝えたいことが伝わらない」
ということが起こってしまうと考えています。
実際、コンテストや学会等での発表では、伝えたいことが伝わっていなかったり、見てほしい部分を見てもらえなかったりした経験が多くありました。
しかし、「いいデザインのほうがいいよね」ということはわかっていても、実際どのくらいの効果があるのかわからないから~ だとか、
ほかに優先すべきところがあるんじゃないか~ と理由をつけて
後回しにすることが多かったです。
そのため、言い訳にしていた部分を検証結果で明らかにすることで、
「デザインは大事!後回しはダメ!」
と常に思えるようになれればと期待しながら活動を進めていきました。
3.検証方法と検証過程
3.1 検証の流れ
ガジェットを紹介するWebサイトをデザインの学習前後で作成し、それを使用して実験を行うことで仮説の検証を行いました。具体的な手順は次の通りです。
学習前のデザイン力でWebページを作成
デザインの学習
学習後のデザイン力でWebページを作成
1,3で作成したWebページを使用して実験
実験結果を分析・考察
また、デザインの効果を測定する実験を行うために、どちらのWebサイトも次の条件に従って作成されています。
Webページはデザイン以外極力変更しない(文面や画像等)
対象はガジェットへの関心度が高くない人
PC向けのサイト
目標は紹介したガジェットを「覚えてもらう」こと
デザインの学習については、先輩社員の方に紹介していただいた
「オブジェクト指向UIデザイン」という書籍を用いて行いました。

引用元:https://m.media-amazon.com/images/I/71lVIChq1kL._SL1500_.jpg
この流れで検証を進めていきます。
3.2 学習前
こちらが学習前の知識で作成したWebサイトになります。
よくあるガジェット紹介のWebページとなっていて、「違和感なく使用することが可能か」という部分を意識して作成しました。スクロールをすることでページを閲覧でき、画像が複数枚あるものについては、画像の左右を押すことで遷移ができるようになっています。

3.3 学習後
こちらが学習後の知識で作成したWebサイトになります。
ガジェットが一覧化されていて、ガジェットの画像をクリックすると各ガジェットの紹介ページに遷移する形になっています。別ガジェットの紹介を見る際にはページバックをしてもらうようになっていて、「全てのガジェットが何度も自然に目に入るように」という部分を一番意識して作成しました。

4.検証結果
ここからは実験結果とその考察になります。
学習前と学習後のWebサイトが完成した後、効果測定を行うための実験を行いました。実験の手順は次の通りです。
Webサイトを3~5分間自由に使用してもらう
Webサイトを閉じて、計14問のテストに回答してもらう
2つのアンケートに回答してもらう
学習前と学習後のテスト・アンケート結果を比較・考察する
今回は学習前6人と学習後6人の計12名の方に協力していただけました。
ありがとうございました!
初めに、テストの結果についてです。
テストの問題は次のようになっています。

テストは1問1点の14問、14点満点となっています。
平均すると、学習前5.33点、学習後7.83点という結果となりました。
学習後のWebサイトを閲覧した人のほうが2点以上高いという結果となりました!
学習後のWebサイトのほうが点数が高くなっていることから、デザイン改善後のほうが「情報を覚えてもらいやすくなっている」ということがわかります。

続いて、1つ目のアンケート結果についてです。
0~10の11段階で評価をしてもらっています。
各項目の評価については次のようになっています。
サイトの使い勝手:10に近づくほど「使い勝手がよい」
ストレスの度合い:10に近づくほど「ストレスを感じる」
このアンケート結果から、「知識欲を刺激できる」という仮説が正しいかを検証します。
サイトの使い勝手の平均点はそれぞれ6.67点、8.83点となっており、
デザイン学習後のほうが使い勝手がよくなっていることがわかります。
また、Webサイトに対するストレスの度合いですが、
こちらはそれぞれ3.50点、3.33点となっていて、大きな差がないことから、ストレスの度合いを上げることなく、使い勝手のみをよくできていることが確認できました。
このことから、デザイン学習後のほうが「知識欲を刺激できる」
という仮説が正しいことが明らかとなりました!

最後に、アンケート2の結果についてです。
こちらも0~10の11段階で評価をしてもらっています。
各項目の評価については次のようになっています。
操作方法の明瞭さ:10に近づくほど「わかりやすい」
コンテンツのデザイン:10に近づくほど「適切」
クリックの操作量:10に近づくほど「多い」
スクロールの操作量:10に近づくほど「多い」
こちらはサイトの使い勝手の詳細について問うものになっています。
平均点はそれぞれ次のようになっています。


操作方法の明瞭さ、コンテンツのデザインともにデザイン学習後のほうが高くなっていることがわかります。このことから、デザインの改善が正しく行えていることがわかります。
実験結果から、良いデザインだと
「情報を覚えてもらいやすくなる」「知識欲を刺激できる」
という二つの仮説が正しいということを明らかにしました!
5.全体評価
今回は入社までの期間で
「新しいことへのチャレンジを通して、仮説検証のプロセスを学ぶ」
という活動に取り組みました。
「デザインスキルの向上」をテーマに設定して、良いデザインだと
「情報を覚えてもらいやすくなる」「知識欲を刺激できる」
という二つの仮説を立て、それらについての検証を行いました。
検証の結果、二つの仮説が正しいということを明らかにすることができました。
今回の活動で次の三つの学びを得ることができたと考えています。
デザインについての知識・経験
エンジニアリングの学習
仮説検証の体感
自分が疑問に思っていた「デザイン」の実際の効果はどの程度なのかということについて自分で確かめることができ、加えて、その過程で使用したWebサイトの構築を通してエンジニアリングの学習をすることもできました。
また、これらの活動を通して、仮説検証プロセスはどのようなものであるか体感することができたと感じています。
6.おわりに
最後まで読んでくださってありがとうございます。
以上が今回取り組んだ内容のまとめになります。
最後までやり切ってみて、自分で実際に確かめてみるということの重要性を強く感じました。
「デザインは重要」という’’知識’’が’’経験’’に変わった活動だったなと感じていて、自分で実際に試して確かめてみないとこのようにはならなかったと思っています。最後には「デザインは大事!後回しはダメ!」と思えるようになった気がしています。
このことから、目的であった仮説検証プロセスの実感をしっかりすることができた活動であったのではないかと思っています。
最後になりますが、同期の皆様や先輩社員の皆様にご協力いただけたおかげで活動を順調に進めることができ、本記事を執筆することができました。様々なご助言や実験へのご協力ありがとうございました!
今後ともよろしくお願いいたします!