【Webデザインスクール体験談#22】ペルソナ完成！クリエイターズファクトリー（CF）

チーム制作が始まって2回目の授業。
今回のメインは校長先生自らがお客様となって留学支援サイトに関するヒアリングを行います。

各々ヒアリング内容を出し合ったら24個も聞くことがでてきました。
1チーム30分なので全然時間が足りなそう。

※今回の内容はボリューム少なめなので時間がない方は読まなくて大丈夫です。

22回目の授業までにやったこと

個人制作のお問い合わせページとチーム制作のヒアリングをまとめていました。

チーム制作に関しては現時点ではお伝えする内容がないので省略します。

お問い合わせページ

戻るボタンを押すとせっかく入力した内容消える問題を解決していきます。

戻る処理を修正

「onclick」の箇所を「onclick=”location.href=’./index.php'”」から「onclick=”history.back(-1)”」に変更します。
これでひとつ前のページに戻るようにしました。

<button class="confirm_return_btn font" type="button" id="confirm_btn" onclick="history.back(-1)">戻る</button>

実際の動きがこちら。

戻るボタンを押すと前のページに戻って入力内容も残るようになりました。
ただ、必須項目が入力されているのに「送信内容を確認」ボタンが非活性のままです。

原因は、お問い合わせページに戻ったときに何も操作がされていないため、javascriptが反応しないから。
javascriptではページ内で何か変化（チェックボックスのチェックが外れたり、テキスト入力されるなど）が起こった場合に反応するような処理にしたため、お問い合わせページに戻っただけでは何も操作がされないからボタンが非活性のままとなる状態です。

原因はわかっても対処法がわからず校長先生に相談することに。

校長先生に相談

校長先生に相談したところ、下記ページを教えてくれました。

「プライバシーポリシーに同意する」ボタン付きのフォームを作る

まさにドンピシャ。
概要としては、戻るボタンを押してもキャッシュが保持されているので、入力内容などの状態が残ってしまうので、チェックボックスだけキャッシュを破棄して必ず送信前に操作をしてもらうという方法です。

戻る処理が完成！

さっそく対処していきます。

プライバシーポリシーのinputに「autocomplete=”off”」を追加してキャッシュを破棄するように変更します。

<input class="policy_check round_c" type="checkbox" name="policy_check" autocomplete="off" required>
<span>利用規約・プライバシーポリシーに同意</span>

実際の動作がこちら。

戻るボタンを押して戻ったときにプライバシーポリシーのチェックが外れました。
これで非活性でも違和感がなくなりました。

ヒアリングとペルソナ

今回の授業は事前に配布されたヒアリングシートをもとに足りない情報をヒアリングする時間でした。
ヒアリングが終わったら自由時間なので余った時間でペルソナを考えました。

ヒアリングはあまり見せるところがないので割愛します。ペルソナはこんな感じになりました。

ペルソナ作成

留学支援サイトのターゲットが「24〜50代の女性」だったので30代の女性をペルソナにしました。
また、チーム内で以前留学するために色々調べていたメンバーがいたのでその方にインタビュー的な形で聞くことにしました。

ところどころ架空になっています。

チームメンバーが全員男性なので男性よりの回答な気もしますが、一旦この内容で完成。

ここでタイムオーバー。
今回の授業はペルソナ作成まで。

次回の授業までに

各自で競合調査を行って授業前にサイトコンセプトやページ構成などを決めていく予定です。
来週中にデザインに入れたらうれしい。