Webデザインの事例①

Webサイトのデザインにおいてレイアウトの設計を考える時に重点を置くのは、もちろんいかに魅力的に印象付けられるかだと思います。
ただ印象付けだけを考えてデザインを行なっていると大切なポイントを見失ってしまうこともあります。僕の場合で言うと、魅力的なデザインを考えつつ並行して以下の2つの要点も踏まえて考えるようにしています。

・クライアントが希望する要件を満たせているか
・サイト閲覧者にとって適切に情報を見せられているか

どちらも当たり前といえば当たり前なのですが意外と見落としがちで、あるポイントを意識し過ぎたあまりもう一方の点が損なわれているというケースはよくあります。
具体的にどのように気を付けて作業をしているのか、僕が実際にデザインを担当した事例を元に掘り下げてみたいと思います。

実際の制作事例を元にしたデザインワークフロー

事例として取り上げるのは、大阪・梅田に2019年12月にオープンした大型コワーキングスペース「ONthe UMEDA」という施設です。

ONthe UMEDA – 大阪梅田の駅チカ コワーキングスペース

とても広々としていて内装も美しく設計された施設です。
それでは最初に説明した「印象的なデザイン」「クライアントの要件」「閲覧者にとって適切な情報」という要点を踏まえて、今回は実際に提出して不採用となったヒーローエリアのデザイン案を例に説明していこうと思います。

ヒーローエリア：Webサイトを開いた時に一番最初に目に留まる画面のエリアを指し、サイト来訪者との初めての接点となる為、クライアントとのデザインプレゼンの際に最も重要視されるフェーズと言えるでしょう。

まず下の画像が完成した最終的なヒーローエリアのデザインです。

こちらのデザインをする際にクライアントから頂いた要望は、おおまかに下記の4点です。

・興味を持ってWebサイトに訪れてくれたお客様に施設の内観のイメージを適切に伝えたい
・オープン当初は施設名やコンセプトが定着するようにキチンと示したい
・サイト上で重要となるアクションは「新規会員登録」
・女性の利用者を増やしたい

印象的なデザインや閲覧者に適切に情報を伝えつつも、上記の4点は外さないように考えたいところです。
それでは着手した当初に考えたデザイン案から振り返ってみたいと思います。

印象的なデザインに振り切ったパターン

印象的なデザインを考える際にまず思いつくのが、近年よく見かけるようになったパソコンの全画面に写真を目一杯大きく表示するデザインです。
伝えたいイメージを効果的に印象付けたい時には最適で、画面の中に細かな情報を配置しないので余白がありスッキリと品のある印象も与えられます。
そして今回の要件に照らし合わせてみると、

・画面中央にロゴとコンセプト
・画面の右側にスクロールしても付随して付いてくる「新規会員登録」ボタン（画像の中の緑色のボタン）

施設名やコンセプトも強調され重要なアクションのボタンも配置し、スッキリとした印象で女性受けもそれほど悪くはないかと思うので、一見クリアされているように思えます。
しかし「内観のイメージを適切に伝えたい」という点で少し要件から逸脱しているように感じました。
このデザインのデメリットとしては全面に写真を配置しているので写真上に文字などの要素を重ねるしかなく、選ぶ写真によっては要素と被って細部が見えづらくなる。そして写真上に重ねる要素を浮き立たせる必要がある時には、写真の彩度を落とすなどの処理が必要になってきます。
それでは内観のイメージを適切に伝えるという要件はクリアできません。なのでこのデザイン案は今回は不採用となりました。

バランスを図ったデザインパターン

次に考えたデザイン案は内観のイメージを適切な彩度でかつ他の要素と重ねず、施設名やコンセプトもしっかりと伝えるために画面を左右に二分割し明確に分けるパターンです。
さらに補足すると閲覧者に適切に情報を伝えるという点でも、

・上部のメニューを安易に英語表記にしない
・施設のコンセプトを簡潔に説明する
・「新規会員登録」など次に起こして欲しいアクションがある
・ヒーローエリアで最新のニュースを流す

という機能と配慮を行なっています。
これでもう要件は満たしかなと思える形にはなりましたが、もう一つ気になる点が残っています。「女性の利用者を増やしたい」というものです。
このデザインでは上部のメニューバーや文字など画面内に占める黒色の割合が多く、カッコいい男性的な印象になってしまっています。
なのでまだ要件を満たしているとは言えません。

色を反転させたパターン

それでは単純に黒色を反転させて白色ベースに変更をしてみました。
だいぶスッキリはしましたが、それでもまだ完璧ではないような気がします。どこに問題点があるのだろうとさらに探ってみることにしました。
考える上でキーになったのがクライアントとのディスカッションで出ていたワード「女性の利用者を増やすために、カフェのような雰囲気でもいいかもしれない」という点に注目することにしました。
その上でここからさらに改善するポイントを挙げてみると、

・画面内の情報量が多く目に留まるポイントが散見する
・カッチリとして固い印象になっているのでもう少し印象を和らげたい
・カフェを連想させる要素が欲しい

という点を意識して手を加えてみることにしました。

最終デザインパターン

そして最終的にこのようなデザインに仕上がりました。
前段で挙げた改善ポイントを一つずつ取り上げて説明してみたいと思います。

画面内の情報量が多い

情報量の多さをいかにして軽減するか、まずは上部のメニューバーや右隅に配置していた新規会員登録のボタンはスクロールすると表示される仕様としてヒーローエリアでは非表示にしました。
さらにコンセプトなどの説明は思い切って下に移動し切り分けて、施設名の強調に的を絞りましょうという提案を行いました。
こうする事でスッキリとして一番目に留まって欲しい要素（施設名）に焦点を当てることができました。

固い印象になっているのでもう少し和らげる

こちらは白色背景となっている二分割の右側の部分の背景の透明度を下げることによって抜け感を演出してみました。
加えてロゴの透かしを差し込むことによって抜け感をさらに強調させています。

カフェを連想させる要素

カフェを連想させる要素として、安易な気はしますが手書き文字を入れることにしました。
大切な情報ではなく、あくまで装飾の一部なので邪魔にならないように施設名の下に添える感じで配置しました。

ワークフローまとめ

要はデザインワークにおいて大切なのはクライアントの要件をしっかりと聞き取るという事にあると思います。ここがしっかりと出来ていないと仕上がった後に相互のイメージの乖離が出てしまうのではないかと思います。
聞き取った要件をリストにして魅力的に映えるデザインを考えつつ、並行してリストの項目を全て満たしているか一つ一つ当てて見返していきます。
中には少し要件から外れてしまうとしても、最適だと思う形があれば積極的に提案をしていくことも大切だと思います。