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

はてな広報ブログ

株式会社はてなの広報ブログです。ウェブサイト「はてな」の話題やイベント情報、サービス開発の裏話など多彩な情報をお伝えします。

はてな新人デザイナー、id:chira_rhythm55の「はてな広報ブログ」制作奮闘記

chira_rhythm55 スタッフの仕事

f:id:hatenapr:20090831111050j:image:h250:right8月24日に開設した「はてな広報ブログ」をデザインしたid:chira_rhythm55です。
今年4月、はてな初の新卒社員として入社しました。高専では情報デザイン学科、大学編入後は理工学部で学びました。趣味でhtmlや画像をいじっていたこと、ダイアリーやハイクのユーザーだったことから、自分の最もよく使うウェブサービスの会社で働いてみたいと思い、はてなに応募し、入社に至りました。
入社後はうごメモはてなチームに配属され、国際化のスタッフとして日本語ページを各国語ページへと変更するための業務に携わりました。各国語対応の画像作成やhtmlの組み替え、ページの新規作成や微調整等、多岐にわたる仕事を現在もおこなっています。
また、先日終了したサマーインターンシップでは、うごメモチームに配属された学生参加者らの面倒を見て、彼らが開発した新機能を実装するお手伝いをしました。

マーケティング部からの依頼で広報ブログデザインに着手

広報ブログは、リリース直前だったうごメモでの仕事と両立をしつつ制作を進めました。
はじめにid:reikonから広報ブログを作りたい、という話を受け、イメージを聞いた上で、まずフォトショップで画面イメージを作成。それを先輩デザイナーのid:kyabanaに相談して、具体的な制作がはじまりました。
発注されたときに聞いたイメージは、

  • 人の存在が感じられて、あたたかみがあり、
  • なおかつ会社を代表する「コーポレートブログ」らしいきちんとした雰囲気にしたい
  • 例えば写真を使うなど、にぎやかさを出してほしい

とのことでした。一番はじめにつくった画面イメージの一つはこれです。

f:id:hatenapr:20090831111045j:image:w300

この時点では自分の中で、まだ方向性が定まらず、もやもやしていました。そこでさらに意見をもらいながら整理し、まとめ直すことにしました。その後に3案ほど作成したうちの一つがこちらです。

f:id:hatenapr:20090831111046j:image:w300

ここで、reikonやチーフデザイナーのid:tikedaはじめ関係者に見てもらい、また他社の広報ブログ等を参考にして、さらに一案作成し、ダミーの記事をはめ込んで、より現物に近付けました。

f:id:hatenapr:20090831111047j:image:w300

ここまでを振り返ると、前述したようにデザインの方向性が明確にできないことで苦労したのを思い出します。
例えば、基本的な色を何色にすべきか、シックかポップか、世の中の「広報ブログ的」なデザインに合わせるべきか、まったく異なるものにすべきか等々...。
自分のデザイン歴では、これまではお手本になるものを参考にしながら作成することはあっても、いちからオリジナルのデザインを手がけたことはなかったということも理由のひとつだったと思います。

ガラリと方向転換。手を動かしながら見えてきた最終形。CSSは既存のデザインを活かし、200行の追記で完成

上記の試作品をマーケティング部に提示しましたが、方向転換してほしいとの依頼がやってきました。理由としては、

  • ヘッダの写真たちが強烈すぎて、ブログ本文やブログに掲載する写真が負けそう
  • もっとシンプルに記事が生きるデザインにしてほしい
  • ページを開いたときに記事に目がいくようなデザインがよい

そんなわけで、一度白紙に戻して、上記の意見を反映させたデザインを作り直しました。

f:id:hatenapr:20090831111048j:image:w300

大きな変更点として、ヘッダ部分の写真を全て無くしたわけですが、そうなるとはてならしさを出すために設定した青、黒、白の基本カラーだと、あまりにきっちりしすぎた雰囲気になることが分かってきました。そこで、基本カラーを一気に暖色に変更することにしました。
続いて、ポイントとなる部分ですが、はてなのオフィシャルブログなのでロゴっぽいものを入れるべきだとは思いつつ、単なる画像のロゴだと普通すぎる。そんなわけで、はてなオフィスの入口にある壁のロゴを撮影した写真を使うことにしました。
背景については、当初はベタッと色を引くだけでしたが、それだとつまらないため、tikedaやkyabanaにアドバイスを受け、技術的なサポートを受けながら、一部にテクスチャ(素材画像)を採用しました。

この時点でマーケティング部からも「いいね!」と好評をもらい、細かい部分の仕上げに移り、本番用の記事を流し込みました。

f:id:hatenapr:20090831111049j:image:w300

ここまでは、フォトショップでイメージ画像を作成しています。これから実際の画像の切り出しやコーディングが始まりました。
広報ブログは、はてなダイアリーのブログのひとつです。そのため、CSSは既存のテーマをベースに上記のイメージを実現するためのCSSやHTMLを追記していきました。追記した行数は約200行です。

実作業時間はモック作成や打ち合わせ等で、3,4日ほど、コーディングは1日ほどで完成しました。しかし、他の業務と並行していたのでお話を受けてから完成まで1か月近くかかってしまいました。

その後、最終的に代表のid:jkondoにもチェックしてもらい、ゴーサインをもらって無事リリースとなりました。
はてな広報ブログを開設しました - はてな広報ブログ

初めてコーポレートブログを制作して感じたこと

f:id:hatenapr:20090831111051j:image:h250:right自分自身、まだまだデザインの引き出しが少ないので、いただいたイメージから案を出すのに苦労しました。デザインに対して自分の意見を持つこと、他の人の意見を聞くこと、それらを活かすことの難しさに悩みました。

また、id:reikonからは「発注側もイメージがうまく伝えきれず、回り道をさせてしまった。でも結果的に良いものができてとても満足しています」とコメントをもらいました。
自分が手を動かして作ったものを依頼者に見せながら、互いに試行錯誤を繰り返すなかで最初はぼやぼやしていたものがクリアになってきたこと。悩み続けたことは苦しかったけれど、完成が近付くにつれて楽しくなり、ものづくりの醍醐味を味わえました。

入社してからの業務は、うごメモのこと、うごメモの国際化に関することが主だったので、デザイン中心の業務に携われたのは勉強になりました。
広報ブログが走り出して最も気になったのはユーザーの皆さんの反応でしたが、「お洒落だ」「いい感じ」と、肯定的な意見を多くいただけて、ほっとしています。
実際の記事がどんどん公開されて、自分の生んだデザインがリアルなブログとして動き出したことに手応えを感じています。
これからもはてな広報ブログをよろしくお願いします。


(はてなデザインチーム id:chira_rhythm55 / 取材のお問い合わせは hatenapr@hatena.ne.jp まで)