皆さん、こんにちは!サイトをコーディングで制作する立場にいる私ですが、作っている最中によく感じることがあります。別にデザイナーさんに文句を言っているわけではないです(笑)コーダーからするとそんなにUI/UXに対して知識が豊富なわけでもないので、論理的にフィードバックをかえせるわけでもない。立場上、デザインを見る回数はデザイナーさんの次に多いと言っても過言ではないと思います。そんなにデザインを見るなら、UI/UXに対してガチっても良いんじゃないかと思ったので少し勉強してみました!今回はその勉強メモめたいなやつです。UIに関してはデザイン的要素が多すぎるのでとりあえずUXから・・・。UXの基本要素まずはUXを勉強するにあたって基盤となる考えを調べてまとめてみました。そもそもUXって何って感じの人は下記を参考ください。要素と要素の距離のこと。関連性の高い要素はできるだけ近くに置いて、関係性の低い要素は離して置く。日常生活に例えると、キッチンの周りには料理しやすく調味料や料理器具を置いたりすると思います。逆にキッチン周りに洗濯洗剤とか置いてると洗濯しにくいよねってお話し。要素を整列して使いやすくする。その際に意味のある整列をすること。日常生活に例えると、タンスの中で衣類をジャンル分けしてしまうこと。パンツが色んな棚にしまってあると探しにくいよねってお話し。UXの基本要素:反復(リピート)要素の並び順を一つのまとまりとしてパターン化しそれを反復して使う。日常生活に例えると、テーブルとイス。テーブルの両端に3つずつイスを置くとキレイに並んでると感じるが、1つでもイスが抜けてたりすると違和感ありますよねってお話し。UXの基本要素:強調(コントラスト)ある要素強調し目立たせること。Webだとユーザーにアクションしてほしいボタンやリンク・テキストを目立たせること。日常生活に例えると、カレンダーに書く赤文字の予定や冷蔵庫などに貼るメモ書きみたいなもの。UXの基本要素:フォント(視覚)読みやすい文字にすること。フォントにこだわり過ぎておしゃれにした挙げ句、ユーザーが読めなかったら意味ないよねってお話し。おすすめのWebフォントは以下を参考にして見て下さい!2020年流行?font-familyのオススメ設定はこれ!【CSS】UXの基本要素:インタラクションユーザーの操作に対して適切な反応を返すこと。押せそうなボタンがあったとし、それが実はボタンではなくただの装飾だった場合はユーザーはちょっとイラッとしますよってお話し。固有の表現をするのではなく、リアルの世界・他の有名なサービスと似た見た目・操作感を実現させること。普段何気なくユーザーが操作・見ているものに寄せると説明をしなくても理解できるよねってお話し。UXの基本要素:アフォーダンス(誘発)「〜したい!」って思わせること。テキストリンクよりもボタンでリンク設置されていると「押しやすそうだから押してみるか」という潜在的な心理を誘発させることができる。UXの基本要素:デザイン言語すでにユーザーが知っているUI要素。ハンバーガーメニューやリンクボタンなど普段良く使っているUIを実装してあげることで、操作での違和感や不明点を取り除くことができる。UXで考慮した方がいいもの上記の基本知識に踏まえUXを考える上で考慮したほうがよりいいものになるであろう項目。対象のユーザーがどんな人物像なのか想像する。20代前半女性向けのWebサイトだったとする。この場合だと考えるべき点は以下のようになる?爪が長いかもしれないから、タップしやすい大きさに文字よりも、視覚的にキレイな写真などを活用しイメージを膨らませやすくするアニメーションなどのインタラクティブな反応はできるだけ可愛くUXで「誰のために」を考えることでかなり明確になりそう。これはUXに限らず他人に使ってもらうモノ全てに言えそうです。ユーザーが使用するデバイス利用ユーザーがどんなデバイスでサービスを利用するのかを考える。Webデザイナーの情報共有サイトを制作する場合、利用ユーザーは何かしらの作業時に発生する疑問や不明点をそのサイトで検索するシーンが想像できる。「PCでの利用が多くなるかも?」という仮設が生まれ「スマホ・タブレットよりもPCのUXに力を注いだほうがいんじゃないか?」という結論を導ける。利用ユーザーがどんな環境で使用するのかを考える。スマートニュースやグノシーなどのニュースまとめサイトは空き時間で見ることが多いと思います。これは通勤・通学の電車などが想像できるのでスマートニュース・グノシーはトンネルや通信環境が悪くてもニュースが見れるような工夫やすばやくコンテンツを読める工夫がされています。利用ユーザーの環境を想定することでよりいいUXに近づくことができます。UXでしてはいけないことUXを考える上で決してしてはいけないこと、それは「紛らわしい」ことです。紛らわしいUXがあるとユーザーはほぼそれを避けて通ります。それがなにか分からないのでまず避けます。避けずにユーザーがアクションを起こしたとしても、多分ユーザーが想像していたものとは違う反応が起こってしまうと思うのでユーザーは離れてしまいます。最後に少しUXに関して勉強しましたが、これを知っていると知らないでは結構な差があるのかなと思いました。エンジニアだからといってこういった分野はあまり勉強せずに来ました。今日からはちょっとばかし気にしながらやっていけそうです。今月の人気記事2020年流行?font-familyのオススメ設定はこれ!【CSS】2017.06.25【リッチなサイトへ】おしゃれなCSSアニメーションサンプル10選2018.05.17現役Web開発者がおすすめするAtom拡張パッケージ17選2019.05.25とにかく”映え”てしまう。現役Web開発者がおすすめするAtom拡張パッケージ17選2019.05.25ガチのPython初心者がDjangoを使ってWebアプリを作ってみる【導入編】2017.12.06【クリック率倍増!】CTAのボタンの見直すべきポイント2017.10.16思わず見入ってしまう!おしゃれすぎるWebサイトまとめ【10選】2017.08.29Webデザイン・制作を勉強したい方にオススメの参考サイトまとめ2018.01.29おすすめタグ解説まとめおすすめ映画WEBアプリfontWordPressテーマAtom用語SEO対策font-family2017洋画アクションランキングAnyushuについて主に映画とWebについての記事を投稿するブログ「Anyushu」です。現役のWebエンジニアが記事を更新しています。