はじめに
非デザイナーでもひとりでWebサービスをつくりたいときがあります。
けっこうよくあります。
もちろんいいデザイナーがデザインしてくれればうれしいですが、
個人開発のプロジェクトなんて、なかなかそうもいきません。
そんな自分がサービスを作るときに
心がけていることを簡単にまとめてみました。
事例
ちょうどお正月につくったサービスがあるので、
これを事例として振り返りながら書いてみたいと思います。
みんなのスマホを百人一首の取り札にして、
ふつうのカルタみたいにバシバシ叩くというおばかコンテンツです。
新年会のネタにどうぞ。
エクスキューズ
偉そうにデザイン記事とか書いてるけどこの程度かよ、、というご指摘もあるかと思いますが、同じく非デザイナーでがんばっている誰かの参考になればという趣旨で駄文をさらしてますので、大目に見てもらえるとうれしいです。
またデザイナーの方からの、もっとここに気をつけたほうがいいよなどの有益なフィードバックも大歓迎です。
メインコンテンツ
めざすのは60点
まず最初に。
いきなり身も蓋もないですが、非デザイナーのデザインは
60点くらいをめざしましょうという話。
非デザイナーが超絶いけてるデザインをつくるなんて（ふつうは）ムリです。
そんなことできるならデザイナーは要りません。
とはいえ何とかがんばって60点くらいを目指そうと個人的には考えているのですが、
これはサービスの企画やシステムの足を最低限引っ張らないレベルだと思っています。
- せっかくおもしろい企画を考えたのにデザインがひどすぎて見る気にならない
- 本当はちゃんとした世界観のあるサービスなのに、このデザインでは全然伝わらない
という状態をクリアするのが60点の目安です。
※もちろんデザインがひどくても本当におもしろい企画はバズるでしょうが、ほとんどの企画はその中間にあるはずです。
非デザイナーだからってデザインが足を引っ張っちゃうのはもったいないという話です。
一点豪華主義
続いてはこちら。一点豪華主義。
非デザイナーがサービスのすみからすみまで
いい感じにデザインするなんて大変です。
そして悲しいことに、大抵の個人開発プロジェクトは
そんなにサービスの隅々まで見られません。
というわけでいつも意識しているのは、当たり前ですが
とにかくトップページのデザインだけに集中してがんばること。
スマホde百人一首の場合は「出オチ」感の強いコンテンツだったのと、
サービスのコンセプトを説明するのが難しかったので、そこを伝えられるように気を付けました。
具体的には、
- タイトルとキャッチをわかりやすいようにして、大きく配置する
- まじめにあほなことをやってる雰囲気を出す
- あとはとにかくお正月感！
極力カスタムCSSは書かない
これは前項の一点豪華主義とも通じる点ですが、
とにかくトップページだけがんばって、他のページは極力CSSすら書かない。
じゃあどうするかというと、
いわゆるCSSフレームワークに完全に乗っかるという話です。
非デザイナがデザイン/コーディングのルールを統一しながら
自分でCSS書ききるなんて大変なので、ここはできるだけ楽をします。
今回のスマホde百人一首でも、後ろの方のページは
ほとんどCSS書いてません。
そのなかでもちょっと気をつけたのは、
- BootStrapをやめてSemanticUIを使ってみた
- 見出し帯などにトップと共通の素材を使って、最小限の労力でデザインしてる感を出した
という感じです。
今回はじめてつかったけどSemanticUIおすすめです！
Semantic UI
Bootstrapよりも細かいパーツが充実しているイメージです。
ボタンの種類とかDivider,Dimmerとか。
いろいろてんこ盛りなフレームワークを嫌う人も多いけど、
非デザイナが極力自分でCSS書かずにサービス作ることを考えると、
こうやって選択肢が多いのは魅力です。
ベンチマークするサイトを探す
順番前後するけど、そもそもデザインの大枠を決める前に
非デザイナーこそこのプロセスは絶対やったほうがいいと思います。
残念ながら非デザイナーはゼロから新しいデザインを生み出すなんて無理ですし、そもそもそんなことを目指さないほうがいいと思っています。
なのでできるだけ自分が今回つくってるサービスに雰囲気、コンセプトが近いサイトを探して、ベンチマークするのが有効です。
それだけだと他のサイトと一緒になっちゃうので、
ベースをベンチマークしたうえで、さっきの一点豪華なところで
ちょっとでも独自性を出せるといいなと思ってやっています。
色決めは妥協しないでがんばる
ベンチマーク探しの中に含まれる要素ではありますが、
サービスの色を決めるというのは相当大事な要素だと思います。
トップページでほぼサービスの印象が決まるという中でも、
とくに色の組み合わせで印象は大きく左右されます。
なのでここは妥協せずに、しっくりくるものが見つかるまで
がんばろうと思っています。
スマホde百人一首のときは、最初から和風の文様を使いたいなーと
思っていたものの、色については二転しました。
最初は白黒の文様をメインにしようかなーと思っていたのですが、
インパクトが弱くてもごもごしていたときに、金の市松文様を見つけて変更。
お正月感もすごく出て個人的には気に入っています。
並べてみると雰囲気だいぶ違うのがわかりますね。
早めにコーディングする
最後に。
ぼくはデザインはSketchを使ってやっていましたが、
ある程度できたらどんどんコーディングしちゃったほうがいいと思っています。
エンジニアなら細かい調整するのもSketchよりCSSいじったほうが早いし、
何よりものができてくるとテンションがあがります。
色は妥協しないとか言ったものの、
行き詰まったらひとまずコーディングしてみるっていうのもありだと思います。
色変えて比べるのも楽ですしね。
おわり
というわけで、だれの役に立つんだかわからないですが
正月から駄文を連ねてしまいました。
非デザイナーでWebサービス作ってる人がいたら
ぜひご意見きけるとうれしいです。
今年もいろいろ作ろうと思っているので、
何かおもしろいもの作りたいっていう人もぜひお声がけくださいー。
それでは、本年もどうぞよろしくお願いいたします。