PR TIMESデザイナー&エンジニアブログ BREAK TIMES

PR TIMES Developer Blog(デザイナー&エンジニアによる開発者ブログ)

PR TIMES Developer Blog

当ブログは下記URLに移転しました。
https://developers.prtimes.jp/

PR TIMESオフィス内GArDENでUX DAYS TOKYOワークショップ:UXガイドライン作成の心得を開催しました!

PR TIMESエンジニアの山田です。

12/8(金)PR TIMESオフィス内のイベントスペースGArDENでUX DAYS TOKYOのイベント「UXガイドライン作成の心得」が開催され、お手伝いさせて頂きました。

UXやサービス運営に興味がある方にはかなり勉強になるワークショップでしたので、少しご紹介いたします。
f:id:breaktimes:20171213210917j:plain


概要としてはこちらの書籍をもとに、著者の大本さんに解説して頂くワークショップでした。
・ノンデザイナーでもわかる UX+理論で作るWebデザイン
https://www.amazon.co.jp/dp/4839961077/

ガイドライン

まずはガイドラインについての解説。
サービスの企画や設計する段階でズレていてはUXは良いものになりません。また開発する上でUIがダメでも良いものになりません。
全体を通して一貫していることが重要です。
その上でガイドラインは品質を一定に保つ役割があります。
f:id:breaktimes:20171213211207j:plain

ただ作れば良いというわけでなく、ユーザー視点であることが重要です。
先に使えないガイドラインだけ作って無理やりサービスを合わせていては本末転倒です。

グループワーク

今回はあるサイトをテーマにUIのガイドラインにしぼって、グループワークを行いました。
f:id:breaktimes:20171213211318j:plain

ユーザー視点で見ていくと様々な問題が出てきます。
・リンクが統一されていない(フォントサイズやデザインなど)
・リンクの飛び先が外部サービスか内部リンクかわかりづらい
・タッチデバイスが考慮されていない
・アイコンと内容がひと目で結びつかないものがある

などなど自分だけでは思いつかないような意見も出てきて興味深かったです。

理論

それらを見た目が良いというだけで統一するのではなく、理論を持ってわかりやすくしていく必要があります。
マテリアルデザインのガイドラインが参考になります。
Introduction - Material Design

例えば通常では肯定的なボタンは右に、却下するボタンは左に置くのがスムーズです。
ただフォームであえて左に肯定的なボタン(「送信」「アップロードする」など)を置くことがあります。
これはあえて引っかかり(フリクション)を作ることで、ユーザーに本当にその動作をして良いのかを一瞬考えてもらうことができる例です。

懇親会

最後は懇親会。
f:id:breaktimes:20171213211645j:plain

みなさんUXに興味があって集まっているので、サービスのUXをどう改善したら良いかなど、濃い話で盛り上がります。

最後に

PR TIMESでもまだまだ足りていないところはありますが、こういったUXの考えを取り入れユーザーが使いやすいサービスにしていくことを目指しています。
そして、こういったUXにもこだわってデザイン・開発していけるメンバーを募集しています。
ご興味を持たれましたら、是非ご応募ください。
www.wantedly.com
www.wantedly.com


そしてUX DAYS TOKYOでは2018年も海外からUXの第一人者を招聘し、カンファレンスを開催します。
PR TIMESもスポンサーとしてご協力させて頂きますので、是非ご参加ください!
2018.uxdaystokyo.com
www.facebook.com