Webデザインの事業サイトであるこの「YOUSE DESIGN」というWebサイトについて、せっかくなのでどのような意図でデザインされたか・ユーザビリティ面で工夫したことについて、制作者の私の考えをご紹介したいと思います。
目次
TOPページのアニメーションについて
TOPキービジュアル：グラデーションを緩やかにアニメーション（変化）させる
TOPページのキービジュアルにグラデーションをかけているのですが、よく見ると実はゆっくりとグラデーションの色が変わるようになっています。
- 日々のサイト運用の中で生まれる流動的なサイトへの改善要望のイメージ
- それに臨機応変に対応するための”部分改善・部分リニューアル”という事業のイメージ
を表現しています。
そういった意味で、
- 「日々の変化」
- 「流動性」
- 「臨機応変」
といったキーワードを、キービジュアルのグラデーション変化で表現させることにしました。
ただし変化の速度はあえてゆっくり目にし、見た人が「よく見ると色が変わっている？」と思わせる速度にしています。
なぜなら、人間の心理は動くものについ意識がいってしまうものです。
このキービジュアルで最もユーザーに見てもらいたい部分は、”サービスの部分改善・部分改修”という見出しです。
ですので、背景のアニメーションを「気づけば変わっている」くらいに変化を緩やかにすることで、あくまでも主体である”サービスの部分改善・部分改修”という見出しを見てもらい、重要な部分のユーザーへの意識を阻害しないという意図があります。
このように当サイトはユーザーに最も伝えたいメッセージへの優先度を意識しつつ、コンテンツの特徴を暗喩的に取り入れてデザインされています。
またグラデーションカラーはIT関係のWebサービスに使われることも多く、見た人に洗練されたイメージをもたせることにも繋がっています。
コンテンツ表示は適切なタイミングでアニメーション表示させる
人間の習性として、動くものへは自然と意識が向きます。
それを利用して、ユーザーに見てほしいコンテンツ・ページにとって重要なコンテンツをアニメーション表示させることにより、ユーザーの視線を自然と誘導することができます。
そのためユーザーのスクロールに応じて、各コンテンツのメインになる部分がアニメーションしながら表示されるようにしています。
アニメーションは動きが楽しいため色々なところに使いたくなってしまいますが、多用すると見る人の意識が散漫になってしまい、かえって見づらくなってしまいます。
ですが、適切な場所・タイミングで使うことで、アニメーションの効果をうまく引き出すことができます。
配色
配色はロゴに使われているカラーである寒色系（#85acda／#61b34f／#62bfca）を中心に使っています。
ただし「お問い合わせ」「サービスの詳細」といった、ユーザーに積極的にとってほしいアクションのボタンには、アクセントカラーとしてメインカラーの補色である黄色（#f5a623）を使っています。
アクセントカラーに補色を使うことで、ブルー系のページ内で目立つ存在になり、ユーザーの目にも自然と止まりやすくなります。
このボタンは多用すると視線誘導としての意味をなさなくなるので、ページの中で使う箇所は「一番ユーザーのアクションが欲しいところ」のみに限定するようにしています。
▼ロゴについては下記の記事をご覧ください
全文を読まなくても内容が理解できるように文字を装飾する
ほとんどのユーザーはサイト内のすべてのテキストを隅々まで読むことはしません。
また例えば電化製品の説明書を使用前から隅々まで読むのが多くの人にとって大変だと感じるように、長い文章を隅々まで読まないと理解できない内容というのも、多くのユーザーにとってはストレスを感じます。
そのため、サイト内の文言は必要に応じて太字にしたり文字サイズを変えるなどして、その部分だけを流し読みすればある程度内容が理解できるようにしています。
そうすることで、長くなりがちな説明文やPR文もストレスなくユーザーに読んでもらいやすくなります。
WordPressテーマのデフォルトのデザインをそのまま使用しない
今回はonepressというWordPressの無料テーマをベースに使用しました。
ですがTOPのアニメーション表示やコンテンツの追加、デザイン的な部分でかなりカスタマイズを加えています。
また下層ページのメインカラムは、イチからデザインとコーディングをしました。
有料にすればある程度凝ったカスタマイズできるところもあるのですが、とはいえ、このonepressはそれなりに有名なテーマです。
デザインをそのまま使うと、見る人が見ればすぐに「●●のテーマを使っている」と分かり、有名なテーマがゆえに他サイトとデザインが似てしまい安っぽく感じられてしまいます。
そういった理由で大幅にカスタマイズする予定でしたし、自身のスキルアップも兼ねたかったので、今回は無料のままでカスタマイズしました。
まとめ
このWebサイトをデザイン・制作するにあたって意識したポイントをいくつかご紹介してきました。
最小工数で公開していってるので、まだまだ作り込みの余地はありますが、引き続きブラッシュアップに努めたいと思います。
グラフィック面よりはユーザビリティ寄りの話になりますが、私は「伝えたいこと」がどうすればユーザーに伝わりやすくなるか、ユーザーにストレスなくサイトを見てもらうためにはどうすれば良いかを特に優先して考えるようにしています。
もちろんグラフィックに凝ってオシャレでかっこいいサイトにすることも、サイトの目的やゴールによっては有効な手段です。
ただ、Webデザイナーにもそれぞれ得意不得意な分野はありますし、その中で私はどちらかと言えば過度な装飾を減らしてシンプルに、その分ユーザーにとって「分かりやすい」を考えたサイトづくりが得意なので、今後も伸ばしていきたいと考えています。
このようなWebデザインのページを作りたい・自社管理画面など見た目よりも使いやすさを優先して改善したいといった方は、ぜひ一度お問い合わせフォームよりご相談ください。