開発チーム

開発チームは、エンジニアid:cho45／デザイナーid:ueday／ディレクションid:onishiです。デザインはクオリティチェックをid:tikedaに依頼して、適宜フィードバックを貰いながら進めていきました。このほかに制作スタッフが数名います。

プロジェクトが立ち上がったのが8月1日だったので、開発期間は約3ヶ月です。アルファ版完成が異常に速く、開発2日目か3日目で記事投稿ができるようになり、5日目でアルファ版を社内リリース。choさんほんとすごいなって思いました。

デザインの方向性

「簡単に使えるブログ」というコンセプトにあわせ、極力余計なものを置かず、やりすぎなくらいシンプルさを保つことを心がけました。自分のブログは自分の部屋みたいなイメージがあるので、散らかっていたらそこで活動する気になりません。余計な邪魔をされずにのびのびと記事が書ける場所が理想だと思っています。

また、管理画面等でボタンや見出しに使用している文字は、原則画像に書き出さずCSSでなんとかする、というのを徹底しています。これはサービスの国際化に対応するためです。言語の数だけ画像を用意する手間を省くことができます。

HTML構造

ブログのHTML構造は、一旦リリースしてしまうと変更が難しくなるため、特に慎重に作りました。国内と海外の主要なブログサービスのテンプレートを1週間くらい研究し、それらを基にして構造が分かりやすくCSSが書きやすい設計になるよう心がけました。

はてなダイアリーでは、エントリが日付ごとにdiv.dayというボックスで囲まれていましたが、はてなブログでは思い切ってそれをなくすことにしました。これによりエントリに対して擬似セレクタが使えるようになったので、「エントリごとに背景色を変える」とか「エントリのn番目でfloatを解除する」みたいなCSSが書けるようになりました。表現の幅が広がって結構面白いです。
↓たとえばこういうテーマとか作れます。

ロゴ

ロゴは紆余曲折あって、いまの万年筆アイコン＋Century Gothic Regularになりました。
はてなではコーポレートロゴや各サービスロゴにCentury Gothic Boldを使用していますが、Boldを使用すると途端に新サービス感が弱まるので、どうしたものかと思っていました。とはいえ、まったく別の書体にしてしまうとはてなのサービスであることが分かりにくいので、ウェイトを細くすることで新しい感とサービスのシンプルさを表現しました。ちなみに社内リリース中にロゴをこっそりGaramondとかのセリフ体に変更したところまったく不評でした。
万年筆マークはIllustratorで作りました。長く書き残せるツール、なイメージです。

ブログテーマ

Epic、Aero、Natural、Bordeauxという4種類のテーマを作りました。以下のような共通のコンセプトを決めて制作しました。

• テーマそのものに装飾を施した状態で提供するというより、背景色・背景画像を色々いじってもらい、テーマと背景の組み合わせでユーザー毎の個性を出せるようにする
  • どのテーマもデフォルトの状態では装飾・色数をなるべく少なくする。
  • 背景色・背景画像変更に強いテーマにする。（.entryの背景をちゃんと白色にするetc）

というのも、開発期間的な問題で、リリースまでに用意できるテーマ数が限られていたからです。今後はもっと個性的なテーマを優先的に作っていこうと考えています。

各テーマでは、そのテーマを使うであろうターゲットをなんとなく想定しています。Epicはデフォルトなのでクセがなく万人受けしそうな感じ、Aeroは背景画像カスタムしたい人向け、Naturalは女性、Bordeauxは長文書くユーザーを想定しています。概ね狙ったユーザーに使っていただいているようなので嬉しいです。

ちなみに、リリースしたのは4種類ですが、実は出してないテーマがその倍くらいあります。ブログのHTML構造を考えているときに、ちゃんとCSSが書きやすいかどうか検証する必要があり、その過程で試験的に作ったものです。テーマ名を考えるのが面倒だったので、作った順に、alpha,bravo,charlie,delta,...と名付けていました。テーマ「Epic」のCSSファイル名が“alpha2.css”なのはその名残です。

↓一番最初に作ったブログテーマ。リリースしていませんが割と気に入っているのでブラッシュアップして個人的に使いたいと思っています。

スマートフォンビュー

スマートフォンビューはコーディングの前にワイヤーフレームの画像を作ってiPhoneのブラウザに読み込ませ、実際に画面を触りながらインタフェースを検証する方法でデザインしました。が、Illustratorでちまちま作ったので時間がかかってしまいました…。もっとサクッと作るべきでした。ちなみにスケッチにたびたび出てくる「Epic」というのは開発時のコードネームです。
会社にあったiPhone型メモ用紙も試しました。が、画面サイズが実機と微妙に違っており、あまり良くなかったです。

また、実ははてなで初めて「あなたへのお知らせ（notify）」をスマートフォン対応させたサービスがはてなブログです。スマホでもnotify見たいですね、みたいにチームで話をしていたらchoさんがその日のうちに実装していました。通知が読めるの非常に便利です。

まとめ

入社して割と早い時期に、自分の関わった新サービスが世に出るという体験が出来て有難く思っています。あと、はてブロちょっとイケてないなぁとお考えのデザイナの皆様方、はてなで働きませんか。新卒採用も行っています。僕も新卒入社です。
はてな 2013年度新卒採用ページ

今後ともはてなブログをどうぞご利用ください。