読者です 読者をやめる 読者になる 読者になる

センス無いやつが透明感のあるwebデザインに憧れると白くなるの法則

以前チャットサイトを作ったのですがデザインのセンスがないせいか様々な問題点が浮上したので修正を加えたところ、画面が白くなりました。

 

修正前のデザインの問題点を挙げると

  • ボタンが多すぎてどれをクリックしたらいいかわからない
  • 必要な情報とどうでもいい情報が区別されておらずとっちらかった印象
  • 無駄にカラフル!目がチカチカする
  • 不必要な装飾
  • スマホで見ると画面がグラグラする

などなど、ニールセン博士の10原則をことごとく破りまくっています。

 

修正前のデザイン

まずwebサービスの顔、トップページです。

修正前トップページ

f:id:FRISKER:20151121001859p:plain

*1

 

シンプルイズベストをモットーに訪問者が迷わないデザインを意識してbootstrapをいじっていたのですが、公開後しばらくして落ち着いてから見るとありえない配置と配色になっていることに気づきました。

 

今こうしてスクリーンショットを眺めていても無駄な情報が多く、優先順位がわからず、目がチカチカします。ごちゃごちゃしててわけがわかりません。中学生の時ドン・キホーテに初めて行った時も同じような気持ちになったのを覚えています。

 

修正前チャットページ

f:id:FRISKER:20151121002818p:plain

緑色が本人、青と赤が相手です。細かいことが気になる人には見ていてムカムカする画面ですね。

 

ちょっとクイズです。この画面中に会話の内容以外で問題が4つあります。当ててみて下さい。

 

 

答えは

  • 開発時のside、head、footの文字がそのまま
  • テキストボックスとボタンの高さが合っていない
  • 長いテキスト(赤の「ああああああああああ」)の改行がなぜか右
  • チャット相手の位置もなぜか右

です。

 

今トップページとチャットの2つを載せましたがこれらのページは特にひどかったので真っ先にデザインを見なおしました。

修正の方針

  • 訪問者が迷わないこと優先、説明なしでもすぐに使えるように
  • シンプルかつ透明感のあるデザインにしたいので無駄な色、ボタン、テキストは削る

無駄な装飾を削って必要なものだけにすれば勝手に機能美由来のシンプルな美しさは実現できる(はず)という前提に立ち、シンプルさと相性のいい透明感のあるwebデザインを求めていじることにしました。

 

修正後のデザイン

主な修正点は

  • ヘッダフッタの無駄な黒いナビゲーションを白く、脇役であるナビゲーションは文字を薄い灰色に
  • 情報は必要なポイントに絞って箇条書き
  • コンテンツが説明と開始ボタンで左右に分かれていたのをまとめた
  • 赤青緑黄色と意味不明なカラーバリエーションを廃止、色をしぼった
  • 枠を薄く

などです。

 

とにかく無駄なテキストと装飾を削り、シンプルかつ清潔感あふれるデザインを目指しました。

 

そしてついに透明感のあるwebデザインのサイトが出来上がりました。

修正後トップページ

PC

f:id:FRISKER:20160103211955p:plain

スマホ

f:id:FRISKER:20160103213607p:plain

 

修正後チャットページ

pc

f:id:FRISKER:20160103220054p:plain

スマホ

f:id:FRISKER:20160103220143p:plain

 

白いです。

 

どこからが画像でブログ背景なのかわからないくらい白いです。今記事を書いている私にもわかりません。

 

導線の確保と見ただけでわかるシンプルさはある程度実現できたと思うのですが、 これが透明感なのでしょうか?

 

もしかすると透明感=白さなのでしょうか?

 

実際「透明感 webデザイン」で検索すると、白ベースで青が差し色の様に入っているサイトが主流です。

 

私のセンスが欠落しているせいかもしれませんが、「白ベースで青が入っててシンプル=透明感」という思い込みもあった気がします。

 

おそらく透明感はデザインの基礎力がそこそこある人でないと実現できないのでしょう。「背景が白い」とか「ボタンが青い」ではなく、そうしたひとつひとつのパーツの色や形やレイアウトが作用しあって生まれるものなのかもしれません。

 

色や形自体が透明感を放つのであれば話は別ですが、それがありえない以上センスのない人間が透明感を創りだそうとすると私のように「白い背景」や「青色」といった表層的な特徴だけを切り取ってシンプルな作りにするのが関の山なのかもしれません。

 

自分しかサンプルがいないので、もし私以外にも「センスがないのに透明感目指して白くなった」人を知っている方がいれば教えていただけると幸いです。

*1:初期画面。訪問者の注意力を分散させる色とりどりのボタンと導線を破壊する無駄なテキスト達