“drafty” ―ユーザが着目した箇所をヒートマップと色復元で伝えるSNS―



学部4年の山本です。今回は私の卒業制作についてお話ししたいと思います。

私は、卒業制作にて「ユーザが着目した箇所をヒートマップと色復元で伝えるSNS」を制作しました。

現在、WEBにて公開しております。サービス名は、風通しの良いデザインを広めたいという思いからdrafyと名付けました。

drafty
www.drafty.jp




このSNSのターゲットユーザは「デザイナ[Desiner]」と「デザイナが制作したものを利用するユーザ[User]」です。その二方を繋げ、デザイナがユーザ目線でデザインを考えるようになることに加え、ユーザがデザインプロセスへ参加することをねらっています。


従来のSNSとの違いは具体性のあるフィードバックを容易に行える点です。多くのSNSはいいね!ボタンやコメントでフィードバックを返すと思いますが、いいね!ボタンだと具体性がなく、コメントだと専門用語を知っておく必要があったり、冗長になるといった問題が挙げられます。



そこでユーザが画像上の着目した箇所をマウスでドラッグし、その箇所を強調して表示するとともに、他のユーザもそれを閲覧できるようにしました。コメントの吹き出しをクリックすることでそのユーザの入力が再現されます。デザインのどの箇所についてフィードバックをしているのかが視覚的にわかります。


またデザインのどのような要素に対してフィードバックをしているのか伝えるために、ボタンを押して専用の絵文字がコメントに含まれるようにしました。

色や質感といったデザインの要素を表したボタン

強調の表示には2種類の手法を用いています。一つはヒートマップというサーモグラフィやアクセス解析で使用されているデータ可視化の手法です。こちらはデータの強弱を段階で表示できます。

もう一つは画像をモノクロにし、指摘した箇所のみを元の色に戻すカラーリングです。こちらはデザインに使用されている色を強調することができます。2種類の表示はトグルボタンで切り替えができます。

誰でもコメントはできるようになっていますので、ぜひお試しください!



この1年間、卒業制作を通して多くのことに挑戦できました。ゼミでは自分の考えをまとめ議論し、中間発表ではポスターを作り、最終発表では論文やプレゼンを制作しました。


情報デザインの力がつねに求められ大変ではありましたが、先生や先輩方の助言、同期のみんなの刺激を受けて乗り越えることができました。制作するのは自分ですが、いろんな人に意見を求めたり、テストユーザとして使ってみてもらうことで新しい気づきがありました。これから卒業制作をされる方は、自分の中で完結させず社会にリリースすることを目標にすると研究が進むと思います。

ネットワークデザインスタジオ での1年間はあっという間でしたが新鮮で内容の濃い経験ができました。この経験を社会で活かしていこうと思います。

みなさん、1年間ありがとうございました!