Webグランプリ審査員のコメントから見る、良いWebサイトを作る5つのポイント

体を動かすこと全般が大好きなシステムデザイナー/ディレクターの今井です。
体の老化を感じて昨年の11月からジムに通いだしたのですが、一昨日ジムに行って「デッドリフト」というバーベルを床から持ち上げるトレーニングを行った時に、正しい姿勢で上げることができず腰を痛めてしまいました。
筋肉の衰えとバランスの悪さなどが怪我の原因だと思うのですが、こんなぐらいで簡単に怪我してしまうほどに老化して体力が衰えているということを痛感しました。
40歳を越えてから老化と体力の低下が著しいですが、まだまだ動ける体力をキープしたいので、諦めずトレーニングを続けたいと思います。もう少しトレーニングについていけるようになったらブログでも紹介したいと思いますので、お楽しみに！
って誰が興味あんねん！

話は変わって、代表の谷川の記事でも紹介していますが、昨年に「Webグランプリ」というデザインアワードに応募し、企業グランプリ部門でAND SPACEが制作した2サイトが優秀賞を受賞しました！
今回のブログは、「Webグランプリ」で受賞したサイトのうち、僕がディレクションとデザインを手掛けた日本ノズル様のコーポレートサイトを元に、審査員から高く評価されたポイントについて紹介させてもらいます。
今後のWebサイト制作の参考に、ディレクターやデザイナー、コーダーの人には特に読んでいただきたいと思います。

もくじ

• Webグランプリとは
• POINT1：やっぱり目を惹くことが大事
• POINT2：わかりやすさ超重要
• POINT3：導線設計に注力
• POINT4：遅いは悪
• POINT5：アニメーションはほどほどに
• まとめ

Webグランプリってどんな賞？

Webグランプリは、コーポレートサイトの健全な発展を目的とし、企業サイト制作に携わる関係者の労と成果を表彰し讃える『Web関係者の、Web関係者による、Web関係者のための賞』です。
※公式サイトより

企業サイト部門は「企業BtoBサイト」「企業BtoCサイト」「プロモーションサイト」「コーポレートサイト」の4部門に分かれており、それぞれの部門で選考を行いグランプリを決定します。
他のデザインアワードなどと違って選考方法が少し変わっているのですが、応募企業から3名が審査員となり、その審査員がそれぞれに与えられたWebサイトを見て審査するという選考方法を行っています。
要するに応募者である制作会社か一般企業の人が審査するという仕組みですので、偏った審査などが無く、とても公平な審査の元に選考してもらえるというものです。

POINT1：やっぱり目を惹くことが大事

自分も実際に審査を行って感じたことですし、頂いた評価のコメントでも多かったものですが、目を惹くデザインであるということがやっぱり重要ですね。
今回出展したWebサイトは、

• ファーストビューに動画を使用していることでインパクトがあっていい
• シンプルで誠実感があるデザインでとても好印象
• 白と青でスッキリとまとまっていて見ていて気持ちいい
• デザインがとても洗練されている点がとても素晴らしい

という感じのコメントをたくさん頂いてとても嬉しかったのですが、「かっこいい・おしゃれ・興味がそそられる」ということがかなり重要だということを改めて感じました。
全体設計ももちろんかなり重要なポイントですが、見た目としてデザイン的に良いと思ってもらえないとWebサイト全体を見てもらう前に飽きられてしまいますし、それでは素晴らしい設計ができていても気づいてもらうことすらありません。
今回は特にデザインアワードでのお話ですので、審査員は目を惹くようなセンスを感じるデザインが見れることを楽しみにしています。そんなテンションのところに平凡で差別性の無いデザインを見せてもさっと流されてしまいます。
だからこそ余計にインパクトなどが重要になりますが、普段でも「印象づける」「目立つ」「興味を惹く」ということはもちろん重要なことだと思いますので、目を惹くようなデザインであるということがやっぱり大事ということを改めて意識しましょう。
※派手であればいいと勘違いしないようにご注意を

POINT2：わかりやすさ超重要

「このサイトに学ぶ点」として一番多かったコメントは「わかりやすい・見やすい」でした。

• 全体的に見やすい情報量とレイアウトだと思います
• Webサイトは比較的ななめ読みされることが多いと感じていますが、ジャンプ率のつけたキャッチコピーが目に飛び込んで来るので、ついつい読んでしまいます
• BtoBの企業サイトとしては、シンプルで見やすく、伝えたいことが伝わりやすい素晴らしいサイトだと思いました
• 横幅を100%使用したデザインでありながらコンテンツは中央に寄せているのは見やすいです
• こだわられたという写真がどれもハイクオリティで分かりやすいです
• 全体を構成する白と青のデザインもすっきりとしていて見やすく思いました

このようなコメントをたくさん頂けたのですが、やはり見やすくわかりやすいデザインというのは評価が高いですし、閲覧者は求めています。
当たり前なことに感じると思いますが、デザイン性に力を入れすぎて「見やすさ・わかりやすさ」を忘れてしまい、伝わらないデザインになってしまっているWebサイトをよく見かけます。
そうならないための僕が意識している具体的なポイントは、

• タイトルや見出しを意識して活用する
• 重くならない程度に的確に画像を使う
• 読んでほしいポイントはわかりやすく大きく扱う

という感じです。
これがすべてではありませんが、まずは上記のことを意識してデザインするだけでも全然違ってくると思いますので、これを忘れず心がけましょう。

POINT3：導線設計に注力

これもたくさん頂いたコメントの一つで、「導線」について高い評価を頂きました。

• どこに何があるのか、今どこにいるのか迷うことなく、目的のページ、情報にたどりつける
• 下層への誘導も画像を大き目に使って興味が湧く導線になっていて、自然と回遊したくなった
• 関連サービスなどへのリンクもきちんとされており、ここでも回遊性を担保しているのもいい
• 非常に操作しやすいサイトだと感じました
• 各カテゴリの詳細ページ下部にカテゴリトップへの導線が設置されているので、ストレスなくサイトを回遊できました
• 上層ページと下層ページとの行き来が非常にスムーズで、迷うところがありません

Webサイトはご存知の通り、他の広告と大きく違うのが「自分で操作しながら見る」というところです。だからこそ導線が非常に重要です。
実際、導線設計には時間をかけました。一番時間を費やしたと言っても過言ではないぐらいに全体の設計に力を入れていたので、この点が大きく評価されたのはディレクターとしてかなり嬉しかったですね。
具体的な方法として重要なのが「設計段階で触ってみる」ことです。
きちんと設計できてるつもりでも、実際に画面で操作してみると思うように目が動かないや、誘導しているページに進みにくいということがよくあります。
ですので、実際に触ってみて、テストすることがとても大切です。
ありがたいことにAdobe XDというプロトタイプのようなものが簡単に作れるアプリがありますので、怠らずテストするようにしましょう。

POINT4：遅いは悪

表示速度に関しては閲覧環境によって大きく変わるので、自社とクライアント様の環境、そして自宅の環境だけではなかなか気づけない部分ですので、良い評価も悪い評価も両方頂きました。

• TOPの動画は迫力がありながら、重くならないよう調整してあり、全体を通してストレスなく見続けることができました
• 動画が多いにも関わらず非常にサクサクと動き、回遊している間も非常に快適でした
• 冒頭に動画が入っていますが、表示速度的にもユーザーの負担は少ないように思います
• 画質が良いためと思いますが、ページ遷移のため待ち時間が発生してしまっておりました
• SPでアクセスした際、サイトトップの表示にすごく時間がかかりました

表示速度は、Webサイトを制作するうえでは必ず付きまとう問題です。
画像や動画を多用した方がしっかり見てもらえるし理解度も上がりますが、一方で閲覧環境によっては表示が遅くなって見てもらうことすらできなくなってしまいます。
Googleも「表示速度が速いにこしたことはない」的なことも言ってるので、たくさん画像を掲載したいところをグッと我慢して、表示速度のバランスを見ながら制作するように注意しましょう。

POINT5：アニメーションはほどほどに

逆に指摘が多かったポイントになりますが、それは「アニメーションが邪魔をしている」という指摘です。
正直なところ、個人的には細かなアニメーションが好きなので、これが悪い方に評価されるとは全く想像していませんでした。

• 各ページのフェードイン、視差効果は、やめる、もしくは表示時間を短くするほうがベターと思います
• スクロールした際に斜めのブルーのラインと写真がでるアニメーションがやや見にくい
• 下層ページでのスクロールのギミックは、もう少し控え目でも良いかもと思いました

個人の好みもあるとは思いますが、アニメーションが邪魔と思っている人は意外と多いようです。
もちろんサービスにもよりますし、一概に減らせばいいというわけではありませんが、頂いたご指摘を参考に今後はもっとバランスを考えてアニメーションの調整をしたいと思います。
※日本ノズル様のサイトに関しては、個人的にもお客様的にも気に入っているので今のところ調整するつもりはありません。

まとめ

以上が「Webグランプリ」にて審査員から頂いた評価のまとめと解説になります。
もちろん同じことに対してたくさんコメントを頂いたからと言って、それが最も大事なポイントとは思っていませんが、普段なかなか頂けないユーザーの声ですので、ぜひ参考にして今後に活かしたいと思います。
Webサイト制作者のみなさんも今後のお仕事に、ぜひ活かしていただきたいと思います。
最後に、授賞式のインタビュー動画が掲載されている動画のリンクを貼っておきますので、良ければ暇つぶしにでも見てあげてください。
（どんな授賞式なのかを聞かされていない状態で会場に向かい、想像していたよりガチな状況に圧倒されてめちゃくちゃ緊張していましたので、反応が怪しいところもありますが大目に見てやってください）
第8回Webグランプリ「企業グランプリ部門」贈賞インタビュー