本記事ではユーザーが使いやすいサイトの作り方の解説記事になります。
ユーザーにサイトを使ってもらう際に最初に考えるUIについての解説やデザインの参考になるサイトの紹介をします。
ユーザーが使いやすいサイトってどんなサイト？
ユーザーがサイトを見る時に重要視するのはコンテンツの内容もそうですが同じくらい大事な要素にUIがあります。
UIというのは「ユーザーインターフェース」の略称で、ユーザーとの接点という意味になります。
UIは具体的にいうと、サイトに表示されるデザインやフォントといった「画面に表示される要素」が全てUIになります。
よく混同されがちなUXとの違いはUIは「画面に表示される要素」なのに対してUXは「情報に対してのユーザーの印象、感想」という差があります。そのため良いUXを生むためには優れたUIである必要があります。
このUIをどのようにすることでユーザーに便利に使って貰えるのかを考えていきましょう。
UIの役割って具体的にどんな目的で何を改善するの？
UIを改善することで得られるのはユーザーへのコンテンツ提供をスムーズに行うことが出来るので、「サイト内の回遊率が上がる」.
その結果、お問い合わせや資料請求の増加が見込めます。
SEO対策ではユーザー自体の集客が目的でしたが、UIはユーザーの回遊率やまたサイトにアクセスしてもらうための施策になります。
改善しようとしてもどこから触れば良いのか分からないという場合もあると思います。
まず自分のサイトが客観的に見て見やすいサイトなのかを考えてみましょう。
例えば、背景の色が暗い色なのに対し文字の色が明るいと言った場合には目がチカチカしてしまうためサイト自体が見づらくなってしまいます。
このように自分が客観的に見て違和感を感じたところから改善を行っていきましょう。
UIを改善するときに意識することは何？
UIを改善するときに意識することはユーザーが見やすいサイトを意識するのはもちろんですが他にも意識することがあります。
それが以下のような事です。
・ユーザーが利用して使いやすいと感じるようなサイト
・デスクトップ版サイトだけではなくモバイル版サイトでも見やすく
・使いやすさだけではなくデザインも考える
・改善する前に目的を明確にする
1つずつ解説していきます。
1つ目の「ユーザーが利用して使いやすいと感じるようなサイト」は今までも解説していたように客観的に見た時にサイトが見やすく、どこを押すとどこに繋がるのかが分かりやすいというのが基準になります。
2つ目の「デスクトップ版サイトだけではなくモバイル版サイトでも見やすく」は、Googleは近年スマートフォンの普及により検索上位に表示させるための基準をデスクトップ前提からモバイル前提に移行されました。そのため今後はモバイル版サイトのUIを改善することもSEO対策に繋がっていきます。
3つ目の「使いやすさだけではなくデザインも考える」は使いやすさを重視するあまり白と黒の色のみといった単調なデザインになってしまった場合はユーザーによってはあまり良い印象を受けない場合があります。
例えば料理サイトで青色を基調としたサイトのデザインの場合はイメージとしてあまり良い物ではありません。このようにサイトのデザインに合わせたデザインを心掛けましょう。
4つ目の「改善する前に目的を明確にする」は明確な目的を持ってUIを変更しましょうという事です。
目的無くやみくもにUIを変更してもあまり良い結果は得られません。そのため明確に何をどのように変更するのかを決めた上で行いましょう。
UIデザインは何を参考にすればいいの？
ここまでUIについて解説してきましたがUIデザインについて全く知識がない場合はどうやってつくればいいのかについてのお話をします。
まずUIを改善したいが何をすれば良いのか分からないという人は2つやり方があります。
それは「自分でUIについての勉強をする」やり方と「会社に依頼する」というやり方です。
自分でUIの勉強をするというよりは自分が使いやすいと感じるようなUIを探すという事です。
会社に依頼する場合は費用がそれなりに掛かってしまいますがそれに見合ったものは作成してもらえます。
今回は前者の「自分でUIについての勉強をする」やり方をする場合に参考になりそうなサイトを集めて来たので紹介します。
codorops
「codorops」はウェブに関する情報をまとめたブログになっています。
デモやサンプルのソースが多く掲載されています。
眺めるだけでも楽しめるさ。
:http://tympanus.net/codrops/:
Design Patterns on CodePen
このサイトはCSSやJavaScriptのコードをシェアするサービスである「CodePen」のコンテンツです。
特徴はデモとソースコードが一緒に見れるのはもちろん、エディター上でカスタマイズ出来るのが大きな魅力です。
:https://codepen.io/topics/:
CodyHouse
「CodyHouse」はフラットなデザインで動くUIをまとめているサイトにになります。
対応するブラウザやソースの解説が丁寧に掲載されています。
:https://codyhouse.co/:
UI Garage
「UI Garage」はアプリのUIについてまとめられているデザインのギャラリーサイトになっています。
今までしょうかいしたサイトと比べるとこんなデザインにしたいというインスピレーションを沸かせるようなサイトになっています。
IOS、Android、MacOSなどUIがカテゴリ別にまとめられているのがりようしやすい点です。
CodeMyUI
「CodeMyUI」は流行りのUIのソースコードを紹介しているサイトになっています。
GIFでどのように動作するのかを紹介しているため大変便利なサイトになっています。
目的に合わせたUIを見つけやすいです。
UIとSEOが両立出来ない場合がある！
UIとSEO対策はそれぞれサイトへの効果がありますが、多くのSEO対策をしてしまったことで使いにくいUIのサイトになってしまう場合があります。
今言った逆のようにUIをシンプルに変更するためにサイト内の情報量を減らした結果、クローラーから情報量が少ないと判断されてしまい、検索結果で上位表示されなくなってしまったというケースもあります。
そのためUIの改善も重要ですがUIはあくまでも利用しているユーザーに対して情報を伝達しやすくするための目的で行われます。そのためSEO対策を万全にした上で行いましょう。
まとめ
今回はUIについての記事になりました。
最後におさらいすると
・UIはユーザーが使いやすいサイトにするために重要
・UIを変更する場合は目的を持って行う
・SEO対策とUIの改善ならば優先するのはSEO対策
・デザインがまとまったサイトをさんこうにする
これらが私としては重要だと考えます。
自分でやるのは大変ですし、会社に任せてみるのも良いと思いまが自分で作ったUIは愛着が湧きますよ。
以上でUIについての解説を終わりにします。
