EduTalk

教育に関するテクノロジーやスタートアップ、考えたことについて発信中。

デザイン未経験者でも出来た7つのステップで初見離脱されない雰囲気イケメンサイトを作る方法

最近お話したスタートアップ代表の方から、サイトのデザインをどうやっているのかについて聞かれました。その企業の場合は中にデザイナーさんがいて、とてもキレイなデザインで羨ましいなと思っていたのですが、僕はデザイナーさんが居ない状態で無理やりやりくりしていることもあり興味を持って頂けたようです。

そんなわけで今回はデザインについて書いていきます。

目標: 初見で離脱されないサイトを作る

前回、前々回の記事を書くにあたって個人開発のWebサービスについて調べてみたのですが、個人的に分かったのがデザインにあまり力を入れてない開発者が結構多いなぁということです。これは結構もったいないことで、メラビアンの法則で考えてもほとんどの人は初見から数秒以内にそのサービスが良さそうなのかどうなのかを判断します。だから初見でデザインが微妙という場合、ほとんどの人は中身をちゃんと見ること無く離脱してしまうのです。逆に初見離脱を防げれば中身を知ってもらえる可能性が高まります。

個人開発でいきなりプロ並みにデザインを行うというのは本業がデザイナーでない限り難しいと思います。僕はイラストとか全然描けない人なのですが、そんな僕でも初見離脱されないくらいのレベルのデザインであれば何とかなっているのではと思っています。

以下は僕の場合していることを簡単にまとめてます。

1. デザインの参考になるサイトを集める

f:id:atsuhio:20170721182013p:plain

僕の場合ですが、TechCrunchで新たに資金調達をした会社の情報をどんどんPocketに保存するということをしています。こうして集めた企業のサイトでデザインの良いものを、例えば「デザイン参考中」というようなフォルダにまとめていってます。

TechCrunch以外では、500 startupsやY Combinatorというスタートアップアクセラレーターに採用されたサービスのサイトも良くみます。なぜかというとスタートアップインキュベーターに入っているような小さなスタートアップで社内にデザイナーがいるケースはまれだからです。だからこうした企業のサイトデザイナは大体においてプログラマがやっていて、デザイン素人でも真似しやすいのでは、と思っているためです。

例えばY Combinatorの採択企業一覧はここから見ることが出来ます。

www.ycombinator.com

2. 分類する

こうやってどんどん情報を集めていってから、更に参考にするサイトを分類するということをしています。最初から調べるサイトを業界で絞っていたりするとこのステップは元々完了しているので、次のステップに進みましょう。

f:id:atsuhio:20170721182854p:plain

例えば上の画像は、僕のGoogle Chrome上のBookmarkページでオレンジをメインカラーで使っている会社やロゴがオレンジの会社を集めています。これはリンガルボックスのロゴがオレンジ色でそれと合わせた色合いなど調べるためにフォルダ分けしたものです。オレンジって結構デザインが難しくて、画像を見ても何社からはブルー系のロゴに変更したりしています。

その他、僕の場合はEdTech系のサービスやSEOに強いサービスなどを分類しています。

3. デザインパターンが分かる

こうして色々サイトを見ていくと、分かることが色々あります。例えば法人向けと個人向けではデザインが全然違いますし、対象年齢層によっても違います。またAIスタートアップやエンジニア向けサービスなどは幾何学模様を多用していてかっこいいけど、他のスタートアップではあまり使ってないなとかということが分かります。その他にも最近はセクションを斜めの線で切るのが流行っているとか、グラデーション使ったサイト増えてるとか、埋め込み動画を使っているサイトはどんどん減っている、などということも分かります。例えば下の画像みたいなのは最近流行しています。

f:id:atsuhio:20170722140936p:plain

4. デザインパターンの理由を調べる

f:id:atsuhio:20170722144051p:plain
こうした傾向が分かったら、そうなっている理由を実際に調べてみるといいでしょう。例えば、埋め込み動画は一時期一気に増えてAirBnBなんかもしていました。でも今どんどん減っているというのはそれがあまり効果がないのかもしれません。

例えば、"hero embedded video good or bad"というキーワードで調べたらWISTIAのブログ記事が出てきました。

wistia.com

この記事では、埋め込み動画はロード時間を増加させてしまう、認知不可を増加させてしまう、実際にWistiaでは上手くいかなかった、というようなことが書かれています。

こうして一つ一つのデザインパターンについて使うべき理由や使わないほうが良い理由を調べていくと、自分のサイトでどのパターンを使おうかということも分かってきます。

5. 各コンポーネントごとに参考デザインを調べる

大まかなデザインパターン以外にも、ページ内の各パーツごとにも参考デザインを集めます。特にサービスのコアになる部分は念入りに調べます。例えば、リンガルボックスで言えば講師一覧画面や、講師詳細ページなどで他のサービスはどういう情報を掲載しているのかや、ページネーションは無限スクロールとページ別に区切るのとどちらが良いのか、など調べます。

6. 増やす減らす

上記のように情報を調べたら、増やすものと減らすものを考えます。参考デザインにはあってもこれは邪魔でしかないなというものはどんどん減らします。逆にこれがあればもっといいなというものは増やします。

ここまでやっていけば、自分のサービスのデザインについてどうしてそういうデザインにしているのかまで全部説明出来るぐらいになるでしょう。

7. 簡単に実現できるものだけ取り入れる

色々調べたら、このサイトめちゃめちゃいいなぁとか、これ真似したいというもの色々出てくると思います。リンガルボックスだってもっといいデザインにしたいし、このデザイン取り入れたら良さそうって思うものにたくさん遭遇します。例えば、最近僕が見て素敵だなぁと思ったのはHire by GoogleのGIFを使ったサービス説明。

しかし、僕の場合はイラストレーターが使えないので、1人で出来ることは限られています。CSSだってプロのマークアップエンジニアと比べたらお粗末な設計で、shame.scssの中身は増えるばかり。だからかけた時間に対して効果が相当見込めるのでない限りは、頑張らないで1人でもすぐに実装出来るようなものだけやることにしています。

まとめ

いかがだったでしょうか。これからサービスを作ることを考えているけど、デザインをどうすればいいのか考え中という方や、デザインに力を入れてなかったという方の参考になれば嬉しいです。

このブログでは、スタートアップのことや教育、1人で作るWebサービスについての知見などを書いています。もし興味がありましたら是非僕のTwitterやFeedをフォローして下さい。またプロのデザイナーさんや、同じように未経験からデザインをされているという方で、記事へのご意見やリンガルボックスへのダメ出しなどありましたらメッセージ頂けると嬉しいです!

twitter.com