謹賀新年🎍今年はウェブオブジェを駆逐して良いUIを作りましょう

明けましておめでとうございます。

年末年始はfirebaseで遊んでました。

さて去年の年末に仕事仲間と飲んでたのですが、「ウェブオブジェ」と言う単語を聞いてなかなか面白い言い回しだなぁと思ったので、今年のテーマのひとつにウェブオブジェの駆逐を加えようと思います。

ウェブオブジェとは?

ウェブサイト上に配置されてる特に意味もなく配置されているフリー画像とかページ、テキスト、かっこよく派手に動くけど内容が伝わらないスライダーなどのことです。

具体例

具体例を挙げると誰かのサイトをディスることになってしまうのすが少しだけ(^_^;)

例えばこういうサイトの場合

 

よくあるサイトの構成ですが、たぶんこのテキストは読まれないのでユーザーにとってはほとんどノイズです。

 

 

人ってウェブでもチラシでもほとんど文章を読まないんですよね。

ちゃんと伝えるなら画像や見出しで訴求する方が効果的ですし、内容のない文章なら無い方がましだったりします。

自分でもウェブオブジェなサイトをついつい作ってしまいますが、ユーザー目線で良いUXを提供するためには、できる限り排除しないといけません。

このサイトもウェブオブジェを排除してリニューアル

ということでウェブオブジェの排除を意識しながら自社サイトの改修をしてやってみました。

ブログの記事一覧画面

旧サイトはこんな感じ

抜粋テキスト長すぎ

抜粋テキストが長すぎてたぶん読まれないので、文章を短くしました。代りに記事の概要がわかるようにタグを入れてみました。また抜粋文章は基本読まれなくてOKなので、テキストカラーを薄めに変更、メインのタイトルとのコントラストを付けてみました。

新しいデザインはこんな感じ↓

ほとんど違いがわからないかもですが、こういう細かい処理がユーザビリティーを上げるはず!

制作実績の見せ方

旧サイトはこんな感じ

シンプルではありますが、並べてるだけなので伝えたい情報が伝わりません。

ちなみに、うちはウェブやシステムを制作する会社なので、アクセスしたユーザーが最初に見たいのは事例だと思うのですよね。

なので、いきなりトップページに事例がくるようにしました。

旧サイトは会社ページとブログを分けていたのですがそれも統合です。

 

旧トップページ

 

新しいトップページはこんな感じ

新しいトップページではまず制作実績を表示ブログベースなので、制作実績を事例として”具体的”に紹介することにしました。

モバイルでの導線

左上の赤丸の部分が「ハンバーガーメニュー」と呼ばれるメニューボタンなのですが(3本の線がパンに挟まれたハンバーグのように見えることから由来)ナビゲーションメニューを小さく隠して、必要なときだけ見れるようにするための定番UIです。

ですが、ハンバーガーメニューはクリックするまで内容が見えないのでここに大事な情報を入れるべきではないです。

代りにタブを設置しました。

これでスマホでも大事なページへの導線を確保できました。

できるだけ短い問い合わせフォーム

短い問い合わせフォームはUIの基本です。

長ければ長いほどユーザーは問い合わせするのを躊躇します。

入力するのめんどくさいですもんね。

ちょっと実験的ですが、メールアドレスまで必須項目から外しました。

そもそも、最近だとメールよりLINEやらFacebookでやりとりすることも多いですし、本文にTwitterアカウント書いてくれてもOKだったりします。

まとめ

ユーザー目線では何の意味もないウェブオブジェですが、見た目を派手にさせたり、文章を多く書いたりするのは仕事してる感があるしなかなかやめられなかったりします(^_^;)

でもUIやUXの基本は、機能を絞ったり目的を絞ることだったりするので、今年はできる限りウェブオブジェ排除に努めたいと思います。

サイト制作無料相談 サイト制作無料相談