pblog

pplog.net を作っている @ppworks こと越川直人(Koshikawa Naoto)のブログ。esa LLCで働いてます(\\( ⁰⊖⁰)/)

we love herokuのデザインリニューアル

we love herokuリニューアルのお話です。今回はデザインサイドの話です。

we love heroku とは

we love herokuは、herokuを使ったサービスを登録するギャラリーサイトです。

開発したキッカケは、@herokujpさんのつぶやきでした。去年の2月ぐらいでしたかね、仕事の帰り道にこのつぶやきをみて、設計しながら家帰り、即実装という感じでした。

railsを初めて1ヶ月ぐらいの頃にherokuを試したところ、すごく感動したのですっかりherokuのファンになっていました。そして、2月のheroku meetupに参加しようと思っていたところ、先ほどのつぶやきが目に止まり。作ってみるかな、と。

トップページを振り返ろう

今回は機能の話は書きません。あえての見た目の話だけです。当時のバージョンのスクリーンショットはこんな感じでした。

weloveheroku1

Bootstrap2のまんまですが、we love herokuのMVPとしては十分でした。

その後、ちょっとherokuぽい色にしてからは、2年ほど放置していました。

weloveheroku2

そして、ついこの間コードをすべてて作り替えたのを期に、デザインも変えてみました。これは、Bootstrap3の色を多少調整したレベル。それでもここまでそれっぽくなるのは良いなあと思っていました。

weloveheroku3

でも、もうちょい何とかしたいなとズルいデザインでお馴染みの赤塚さんにアドバイスをもらいながらデザインハッカソンをしたのがこれ。

weloveheroku4

ふむ。大して、違いが分からないですね。なので、これから各画面をズルくデザインした部分を紹介します。

ズルいポイント

ロゴをwebフォントにせよ

子曰く

webフォント使いな

今回は、herokuぽさを出したかったのでElectrolizeというフォントを使いました。すると、あのつらい感じのロゴがグッとオシャレに。

@import url(http://fonts.googleapis.com/css?family=Electrolize);

こんな感じでインポートしておいて、font-family: Electrolize;するだけです。楽ですね。

before

weloveheroku_logo_before

after

weloveheroku_logo_after

日本語本文の行間を調整せよ

子曰く

日本語の本文はline-height: 1.7くらい、ただし複数行になるheadでは1.4くらいが良い。

まずは、詳細ページを見てもらいましょう。ここでサイトの説明があるわけですが、この本文と他のサービス紹介のところのサイト名の行間を調整しました。

before

weloveheroku_sites_show_prev

after

weloveheroku_sites_show_renewal

見てお分かりの通り、そもそももっと色々変わっているじゃないかと。なので、その他のポイントも整理します。

Bootstrapの.wellをすぐ使わない

Bootstrapを覚えたエンジニアは何かと、.wellしがちです。エンジニアの習性ではなく私個人の問題かもしれません。

子曰く

.wellやめな

やめました。そして先程の行間調整をしたら、なんということでしょう。本文が読みやすくなったのです。

Bootstrapのdtを使わない

子曰く

dl横並びにした方が良いけど、まあtable使いなよ

tableの方が見やすいですね。dl、dt、dd 横並びで検索すると分かるのですが、人類とdlとのつらい戦いの歴史が掘り起こされます。素直に、tableにしましょう。

目立たせないリンクは地味にせよ

子曰く

一覧のURLのリンク、グレーにしな

確かにトップのサイト一覧で目立たせたいのはサイトのサムネイルと詳細だったりするので、URLはグレーでさりげなく表示しておくのが良さそうです。
その他のテクニックも併用したbefore, afterです。

before

weloveheroku_sites_before

after

weloveheroku_sites_after

もはや雑誌のブルータスのようですね。素敵です。

意味の単位でマージンを駆使せよ

セクション単位のマージン、headと本文とのマージン、まとまりの中のマージンという感じでマージンを意味で分けて共通値を用意すると便利です。

子曰く

最近は40px派

なるほど。たとえば、headと本文との間のマージンは40pxくらい取ってしまっても良いとのこと。このテクニックは今回サイトの随所で使わせてもらいました。マージンを意識すると全体的にまとまった感じになりますね。

weloveheroku_margin

デザインハッカソンを終えて

デザインは、自転車のようなもので何度も練習してカラダに覚えさせれば、自然とできるようになると教わりました。なので今回教わったポイントを活かして、このブログのデザインもやりなおしたいなあと思いました。がんばります。

というわけで、herokuのサービスを公開されている方がいらっしゃいましたら、we love herokuに登録して頂けると嬉しいです。よろしくお願いします。

また、デザイナーの方はデザイン募集中のサイト一覧からデザインテロを仕掛けてみてはいかがでしょう。