見出し画像

UI,UXのおもしろい授業

僕はWEBマーケティングの職業訓練校に通っている。
現在のカリキュラムが、「UI,UX」だ。

UI(ユーザーインターフェイス)は、
ユーザーとの接点となる要素を意味し、
UX(ユーザーエクスペリエンス)は、
ユーザー体験全般を意味しています。

その授業の中で、ロックな講師(*)から教えてもらったサイトで面白いのがあったので、紹介してみたくなった。

*=ロックな講師の話はこちら



UIのおはなし

業界内でも噂になったらしいが、
まずはUIのあえてワーストに作られたサイトで、
学びを深められる。として以下を紹介された。

※英語のサイトなので、翻訳機能を使用してください。
尚、名前やメールアドレスなどは、適当で大丈夫です。

とにかく、進むのに分かりづらい。
ゲームだと楽しんでやる分にはとても良いですが、
これが普通に出てきたら、相当イライラします。
良いサイトはこれと全く逆だと実感できます。

尚、最後まで到達すると、こんな画像が出てきます。

オッサンが踊ってる

クスッと笑えます。
ヒマな時に試してみて下さい。
あ、PC以外の動作環境は確認していません。悪しからず。



カーニングのお話

「カーニング(英:Kerning)」とは、文字を入力した後、特定の2文字の間隔を調整すること、もしくはその機能を指し、デザイナーにとって欠かせない用語です。

そのまま文字を入力すると活字と余白の間隔にバラツキがあり、文章が散漫に見えてしまうため、デザイナーは文章が読みやすく、美しくなるように必ず文字間の余白を細かく調整し、字詰めを行っていきます。きちんと字詰めを行った文章では余白が均一に調整され、読みやすさと美しさが向上します。

文字間の調整は、とても大事。
実際、詰まり過ぎていても、広がりすぎていても読みづらい。
それを感じることは、今の時代そうないけれど。

というわけで、このカーニングを体験できるサイトを教えてもらった。

文字間のバラつきをドラッグしながら調整して、
その間隔を修正した結果が100点満点で表示される。

10問あって、僕は平均79点だった。
イマイチだ。

皆さんもやってみて!

ちなみにクラスメートのデザインが抜群に上手なツートップは、
90点以上と、センスをいかんなく発揮していた。👋



誤魔化しがきかない

UI,UXはバンドにおいて【ドラム】のようなものだと思う。

間違えたら目立つ。

違和感を感じる。

ギターやベース、ボーカルは誤魔化しがきき易いけど、
ドラムスはほぼ無理だ。

ネット上で見づらさや分かりづらさというのは、
結果に即、表れる。
CVRの低下という結果を生む。



最も大事なこと

それは見てくれる人のことを考えているか?
がUI,UXの最も大事な趣旨だ。

僕はNoteを見ていて、それを感じることがままある。
ひと段落の文字数がとてつもなく長いものや、
文字の塊が大きい物など、読んでいて疲れるものは、
思わずブラウザの戻るボタンを押してしまう。

きっと良いことを書いているのだろうけれど、
読み進めることに面倒くささを感じると、離脱してしまう。

改行と見出しは、本当に大事だ。

それは、今まで文章を多数読んできて、
自分にとって心地良い段落の作り方や、
改行の仕方が影響していると思う。

かつ、
人に読んで貰うための「ささやかな心配り」が、
多少なりとも影響するのだとも思う。

僕が優れているとは思っていないが、
読み返すときに最も注意しているのが、
見やすさであることは間違いない。


ビジュアル系ロックな講師も、UI,UXは、
カラーの事も触れられたし、
構成のことにも触れられたけど、

サイト内で最も依存するのが文字であるため、
タイポグラフィが最も大事
だと仰っていた。

授業中に提示された面白い構図を一つ、掲載して終わりにしたいと思う。

目の追い方がまさに!

書かれた通りの順番でしたか?

この記事が気に入ったらサポートをしてみませんか?