皆さん、こんにちは！

サイトをコーディングで制作する立場にいる私ですが、作っている最中によく感じることがあります。

 

「これ使いづらそう・・・」

 

別にデザイナーさんに文句を言っているわけではないです（笑）

コーダーからするとそんなにUI/UXに対して知識が豊富なわけでもないので、論理的にフィードバックをかえせるわけでもない。

でも立場上、デザインを見る回数はデザイナーさんの次に多いと言っても過言ではないと思います。

せっかくそんなにデザインを見るなら、UI/UXに対してガチっても良いんじゃないかと思ったので少し勉強してみました！今回はその勉強メモめたいなやつです。

UIに関してはデザイン的要素が多すぎるのでとりあえずUXから・・・。

UXの基本要素

まずはUXを勉強するにあたって基盤となる考えを調べてまとめてみました。

そもそもUXって何って感じの人は下記を参考ください。

UX（ユーザーエクスペリエンス）

UXの基本要素：近接

要素と要素の距離のこと。

関連性の高い要素はできるだけ近くに置いて、関係性の低い要素は離して置く。

日常生活に例えると、キッチンの周りには料理しやすく調味料や料理器具を置いたりすると思います。
逆にキッチン周りに洗濯洗剤とか置いてると洗濯しにくいよねってお話し。

UXの基本要素：整列

要素を整列して使いやすくする。その際に意味のある整列をすること。

日常生活に例えると、タンスの中で衣類をジャンル分けしてしまうこと。
パンツが色んな棚にしまってあると探しにくいよねってお話し。

UXの基本要素：反復（リピート）

要素の並び順を一つのまとまりとしてパターン化しそれを反復して使う。

日常生活に例えると、テーブルとイス。テーブルの両端に３つずつイスを置くとキレイに並んでると感じるが、１つでもイスが抜けてたりすると違和感ありますよねってお話し。

UXの基本要素：強調（コントラスト）

ある要素強調し目立たせること。Webだとユーザーにアクションしてほしいボタンやリンク・テキストを目立たせること。

日常生活に例えると、カレンダーに書く赤文字の予定や冷蔵庫などに貼るメモ書きみたいなもの。

UXの基本要素：フォント（視覚）

読みやすい文字にすること。

フォントにこだわり過ぎておしゃれにした挙げ句、ユーザーが読めなかったら意味ないよねってお話し。

おすすめのWebフォントは以下を参考にして見て下さい！

UXの基本要素：インタラクション

ユーザーの操作に対して適切な反応を返すこと。

いかにも押せそうなボタンがあったとし、それが実はボタンではなくただの装飾だった場合はユーザーはちょっとイラッとしますよってお話し。

UXの基本要素：メタファー

固有の表現をするのではなく、リアルの世界・他の有名なサービスと似た見た目・操作感を実現させること。

普段何気なくユーザーが操作・見ているものに寄せると説明をしなくても理解できるよねってお話し。

UXの基本要素：アフォーダンス（誘発）

「〜したい！」って思わせること。

テキストリンクよりもボタンでリンク設置されていると「押しやすそうだから押してみるか」という潜在的な心理を誘発させることができる。

UXの基本要素：デザイン言語

すでにユーザーが知っているUI要素。

ハンバーガーメニューやリンクボタンなど普段良く使っているUIを実装してあげることで、操作での違和感や不明点を取り除くことができる。

UXで考慮した方がいいもの

上記の基本知識に踏まえUXを考える上で考慮したほうがよりいいものになるであろう項目。

ユーザーの特徴

対象のユーザーがどんな人物像なのか想像する。

例えば20代前半女性向けのWebサイトだったとする。この場合だと考えるべき点は以下のようになる？

• 爪が長いかもしれないから、タップしやすい大きさに
• 文字よりも、視覚的にキレイな写真などを活用しイメージを膨らませやすくする
• アニメーションなどのインタラクティブな反応はできるだけ可愛く

UXで「誰のために」を考えることでかなり明確になりそう。これはUXに限らず他人に使ってもらうモノ全てに言えそうです。

ユーザーが使用するデバイス

利用ユーザーがどんなデバイスでサービスを利用するのかを考える。

例えばWebデザイナーの情報共有サイトを制作する場合、利用ユーザーは何かしらの作業時に発生する疑問や不明点をそのサイトで検索するシーンが想像できる。

つまり「PCでの利用が多くなるかも？」という仮設が生まれ「スマホ・タブレットよりもPCのUXに力を注いだほうがいんじゃないか？」という結論を導ける。

ユーザーが利用する環境

利用ユーザーがどんな環境で使用するのかを考える。

例えば、スマートニュースやグノシーなどのニュースまとめサイトは空き時間で見ることが多いと思います。

これは通勤・通学の電車などが想像できるのでスマートニュース・グノシーはトンネルや通信環境が悪くてもニュースが見れるような工夫やすばやくコンテンツを読める工夫がされています。

利用ユーザーの環境を想定することでよりいいUXに近づくことができます。

UXでしてはいけないこと

UXを考える上で決してしてはいけないこと、それは「紛らわしい」ことです。

紛らわしいUXがあるとユーザーはほぼそれを避けて通ります。それがなにか分からないのでまず避けます。

もし避けずにユーザーがアクションを起こしたとしても、多分ユーザーが想像していたものとは違う反応が起こってしまうと思うのでユーザーは離れてしまいます。

最後に

少しUXに関して勉強しましたが、これを知っていると知らないでは結構な差があるのかなと思いました。

エンジニアだからといってこういった分野はあまり勉強せずに来ました。でも今日からはちょっとばかし気にしながらやっていけそうです。

デザイナーさんの力に少しはなれるのかな・・・？

 

ではまた合う日まで！