【ノンデザ】あるWEBサイトを「３つの視点」で分析してみた

2024年4月8日 19:13

ご覧いただき、ありがとうございます。
WEBデザイナーの木村仁美です。

先日受けたこちらのウェビナー。

学んだことの実践として、1つのWEBサイトを分析し、次に活かせる学びを抽出しました。

Vi観点：「まっすぐ」なデザイン

事業の誠実さを表す「真っ直ぐ」さは強調したい、でもカッチリ固過ぎる感じは出したくない。
こんな時のデザインパターンを、サイト分析から導き出してみました。

上記共通事項を踏まえて、パターンを３種。

パターン①
背景色と文字のコントラストを下げてパキッとし過ぎないようにしてみました。

パターン②
四角背景から、線にすることでより真っ直ぐ感を出しつつも、丸みの点線にすることで、角丸の数を量産しました。柔らかさアップ！

パターン③
英語のあしらいを足しました。アルファベットはフォントが多いので、より丸みのあるフォントも選べます。
あしらいも角丸で囲って、全体も角丸で囲って、、ちょっと囲み過ぎたかもしれません。
テキストなども全部含めてセクション全体を角丸白背景で囲むくらいなら、いい感じかもしれないです。

ブログや実績紹介など、記事が連なる場合の見せ方の工夫について、サイト分析しました。

数を見せつつも、ページが長くならないのが一番の利点。
飛ばしたい人ば飛ばせるし、離脱率を防げるのではないでしょうか。

スクロール出来ることがわかるように、あえて最後の記事を画面からはみ出させている点にも注目。
「あれ、これ切れてる。ってことはスクロールできるのかな。」

ただ、ユーザーに気づかせる、だけじゃなく、スクロールヒントをちゃんとデザインして組み込むと、スクロールできることが分かりやすいし、読まれる率が増えると思ったので、今度案件があったら試してみようと思っています。

私も自分のサイトで使っていますが、
最近よく見る縦にスクロールしているのに、横にスクロールするギミックとは使い分けが重要だと感じました。

読ませる強制力があるかどうか。
この強制横スクが長すぎると、ウザがられて離脱される可能性は大。使い方には注意したいです。

これ、サイト分析していて目から鱗でした。
社員紹介の他、お客様の声、ネイルアートや施工実績などの事例紹介を載せるサイトが多いと思います。

これはブログやイベント案内と違って時系列は関係ない。
となると、より多くの人の目に留まるようにランダム表示は効果的に感じました。

横スクしなかった人が見落としていた記事も、ランダム表示にすれば、初めに表示されて目に留まるかもしれない。

効果的にランダム表示を取り入れていこうと思いました。
（どうやってやるかは調べます）。

これはUI観点というよりVi観点な気がするので、さらっとメモ程度に。
社員紹介、スタッフ紹介などは人の切り抜きかたの画角を揃えると綺麗に見えるようです。
顔のサイズ、胴体をどこまで移すか、背景に対して中央配置か、など。

顧客が記事投稿する機能の使い方をサイト分析しました。

開催予定と開催終了で分けると、ユーザー観点でかなり見やすいと思いました。

たとえ開催終了の記事を見て辿り着いたとしても、すぐに開催予定の記事にアクセスできる。
あえて「開催終了」とタグ付けされていると、「開催予定」のタグもあることは容易に想像がつくので、ユーザーの行動を繋げられる仕組みだと思います。

カテゴリーなんて昔からある機能だし、比較的誰でも使いやすい機能だけど、使い方って重要。

もう1つサイト分析で気づいたのは、写真をつける頻度と画角。

写真がない記事の方が多い場合、サンプル画像ばかり並ぶのはあまり印象が良くないです。

逆に写真を見せたい記事が多い場合は、サムネイルを大きく取ると効果的。
トリミングする比率や基準位置も変わってきます。
顧客がサムネイル用の写真を撮影する際の注意事項なんかに盛り込んであげるとより親切かと思いました。

WEBデザイナーが顧客に提供できることは、尽きない。
お客様任せにせずに、うまくアドバイスしながら運用サポートすることもWEBデザイナーの仕事だなと思いました。

UIとUXが考えれば考えるほど分からなくなってきました…。
それでも1つのサイトをじっくり見ることでわかったことも多かったです。

もれなく分からなかったことも多かったので、自分の課題として、他のサイトはどうなっているか、次のサイト分析の際に着目したいです。

インプット過多になりすぎないように、気をつけたいけど、定期的にやっていきたい。引き出し増やすぞー！

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