2022年に高評価を得ているウェブサイトを分析し、結果の出るサイトデザインを分析しました。
私自身が目指すサイトは以下の項目です。
- 初めてサイトに訪れた方でも直感的に分かる
- お問い合わせや購入が増える
- 検討中の方の背中を押す
- 情報が見やすく違和感がない
- 信頼感
- 印象に残る、日本人に馴染むデザイン
訪問者様の調査
お願いするなら御社と思ってもらえるような、サイトの作成を目指します。
1、サイト訪問者を理解
サイト訪問者様がどのような目的でいらしたのかを見極め、最短で欲しい情報に辿り着けるように振り分けます。
- 訪問者様のターゲット属性
- 訪問者様が解決したい悩み
- ご依頼いただいた後の満足いただいた状態
- 依頼頂く判断基準
2、他社を理解
- 競合企業はどの会社か
- 他社の機能面、印象面での強み
3、自社の強みを理解
- 競合を知った上で、自社にしか提供できない強みを理解する
サイトを作成
訪問者様が求めていることや、他社との差別化調査を元に、適切な情報を配置していきます。
1、サイトマップ作成
必要な情報をツリー状にして可視化しサイト全体感のデザインします。
- ナビゲーションバーのメニュー
- 情報の階層
2、ワイヤーフレームを作成
必要な情報をどこに配置するのが最適か、ページのワイヤーフレームを作成して大枠を決めていきます。この段階では正確な写真や文章を入れる必要はありません。
- ページの骨組みを設計(テキスト、写真、ボタンの配置)
- 日本人向けのサイトであれば、日本人が見慣れたサイト設計から離れすぎない
- SEOを意識して作成
- ユーザー様に選択肢を与えすぎない
- モバイルからの見え方は重要!
3、ページのビジュアルをデザイン
ワーヤーフレームに合わせて見た目のデザインを決めていきます。
- 適切なもので統一。トーン、テイスト、色づかい、フォント(16px)、余白画像やイラスト等
4、文字や画像などコンテンツの移行
- 適切なもので統一。トーン、テイスト、色づかい、フォント(16px)、余白画像やイラスト等解像度が低すぎるものを使わない
- サイトスピードが落ちないように、写真はPNGは圧縮したりJpegに変更してから
- 英語と日本語のサイトを作る場合は、コンテンツ置き換えの時に備えてコピーデックを作成する
5、SEO対策の実装
別記事にて。
6、サイトのスピード改善
別記事にて。
ウェブサイト価値ランキング2020
日本人に評判の良いコーポレートデザインはどんなかを調査しました。

こちらのサイトでは、A軸:アクセス性、B軸:サイト全体の明快性、C軸:ナビゲーションの使いやすさ、D軸:コンテンツの適切性、E軸:ヘルプ・安全性の、5つの軸でいいサイトと評価されています。
高評価を得ているトップ3社(+気になる企業様)の共通点を見ていきたいと思います。
A軸:アクセス性
SEO対策などが当たります。
B軸:サイト全体の明快性
瞬時にサイトを理解してもらうように心がけます。トップページのありかた、サイトの統一感等で評価されます。
1位 大同生命 B軸:98.20点
- ナビゲーションで、契約者、見込み契約者、代理人と分岐させることで、訪問者は欲しい情報に迷わずアクセスできます。
- 保険のことにわかっていない人が多いことが想定されるので、よくある質問とお問い合わせのボタンをわかりやすい位置に配置することで解決を促しています。
- 高齢者に向けても分かりやすくするためか、文字サイズを変更できるのも親切です。

2位 積水ハウス B軸:96.92点
動画と文字で素敵な家づくりを連想させます。

3位 エーザイ B軸:95.50点

KDDI
- Noto Sans JP – 400 18px

Nikon

C軸:ナビゲーションの使いやすさ
特に90点以上の高評価を受けていたのはKDDI 、日本通運、明治、中外製薬、日本電産、清水建設でした。共通してみられるのは以下の通りです。
-サイドバーではなくトップナブバー
-白ベース、濃いグレーの文字が多い
-ナビゲーションの文字の下にブランドカラーの太めの下線がありがち
-ナビゲーションと検索やお問い合わせで2行にわたる大きなトップナブバー
-メガナビゲーションが大きく開き、写真やロゴが一目瞭然。
1位 KDDIのナビゲーション C軸:95.41点

2位 日本通運のナビゲーション C軸:95.22点
写真が大きく選びやすい
3位 明治のナビゲーション C軸:93.67点
商品の写真があって選びやすい
Niconのナビゲーション
D軸:コンテンツの適切性
情報の読みやすさや、情報量を適切にします。ユーザー様の視点のZラインや、斜め読みを想定したフォントの強弱など、適切であることが求められます。
E軸:ヘルプ・安全性
ヘルプやQAなどの情報や、通信の暗号化などが当たります。
ファーストビューについて
- ファーストビューに、欲張ってあれこれ詰め込み過ぎては逆効果。情報は2個3個ほど。
- キャッチコピーと事業内容を100文字以下で。
- 解像度は、72dpi程度
- 流れる導線
コメント