webデザインの注意点まとめ

こんにちは！ダブルループの上田です。
webデザインって何を気を付けたらいいんだろうと悩んだことありませんか？

私も何がいいデザインで何が悪いデザインなのか、視覚的な部分しかわかりませんでした。

例えばここが崩れてるとか、ここ読みづらいとか、デザインに触れていない人でもわかるようなことです。
webデザインのここを気を付けようというのを備忘録的に調べたことをまとめていきたいと思います。
（他にもいっぱいあると思うけどとりあえず調べたことだけまとめます！）

文字の読みやすさ

これって誰でも感じることですね、
背景が薄い黄色で文字が白だとどう考えても見辛いですよね。

また、ビジュアルヒエラルキーという言葉を知っていますか？
日本語で約すると「視覚的階層」という意味です。

長い情報があっても伝えたい情報って字が太くなっていたりと、パッと見たときわかるようにデザインしていく考え方です。

例えばデザインなんかやったことないって方でも
この考え方に沿って作ればプレゼンの資料など見た目の印象が変わるはずです。

使いやすいナビゲーションデザイン

ユーザー目線で見たときに使いやすさって大切ですよね。
特にページの案内をしてくれるナビゲーションデザイン。
ユーザーがサイト内でうまく操作できなければ意味がありません。
「シンプル」「わかりやすい」「一貫性がある」
の3つに従って作成していきましょう。

ユーザーが最小限のクリック回数で探している場所にたどり着けるように設定していきます。

リンクをクリックしたら色を変えてあげる

訪問済みのリンクは色を変えてあげると親切です。
URLだけ並んでて、クリックしたときに何も色が変わらなかったらとってもわかり辛いです。
ユーザーの手間を省いてあげるためにも重要です。

クリック可能な要素の見た目を統一する

ユーザーを混乱させないためにもこちらも必要です。
リンクではないのにリンクのような下線があったり、リンクではないのに文字にマウスを置くと色が変わるなどそういうことはしてはいけません。
クリックできそうなボタンで統一してあげたり、
色を統一してあげたり、ユーザーが間違えないようにしてあげましょう。

新しいタブでリンクを開かない

ユーザーが前のページに戻る手段としてよく使う”戻るボタン”を無効にしてしまうのでやらないほうがユーザーには優しいです。

音が出る自動再生の動画の配置を意味もなくしない

これは、個人的にもとってもよくわかります。
なんどやらかしたか、、、。結構迷惑なんですよね。
自動再生で動画や音楽を流すとユーザーをいら立たせます。適切なところで使うようにしてください。

ビジュアル重視でユーザビリティを無視することは良くない

ユーザーが使いづらいかもしれないけどここにこれを配置したいってことあるかおしれませんが
ユーザビリティは無視できません。フォントと背景のコントラスト比が低いなど、見た目を重視しすぎてユーザー目線に立てないことが無いようにしましょう。

テキストや広告の点滅には注意

これって言われないと盲点かもです。
点滅や点灯をするコンテンツによって発作を招いてしまうかもしれない方々がいます。
発作までいかなくても気が散ったりイライラする原因になります。
注意が必要です。

まとめ

他にも色弱などの方のためのwebサイトの作り方っていうのがあったり、
必要がなかったとしてもこういうことには注意できたらいいなと思います。

色々調べてみてまとめましたが、こうやってまとめるだけでもいい勉強になりました！
私も個人的に気を付けていきたいと思います。