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

はてなニュースのひとこまラフ&ボツ案

仕事

f:id:swimy1113:20140822131744p:plain:w250:rightこんにちは!はてなid:swimy1113 です。
普段は、webサービスのデザインをしています。
最近 私は 本業務の合間をぬって、はてなが運営するニュースサイト「 はてなニュース」で ひとこまを描かせてもらっています。
ひとこまって何?って方もいると思うので軽く紹介します。

f:id:swimy1113:20140822121046p:plain

週1,2回くらい、私の描いたものが登場します。
このひとこまは、

  1. 私がノートや紙にラフを描く
  2. 編集担当に見てもらって、良さそうなものを選んでもらう
  3. 選んでもらったものを清書する

という流れでできています。
今日はそのラフを..!!ちょっとだけお見せします..!!(ラフなので雑なのはおおめにみていただきたい)

5月のラフ

5月のはじめに新婚旅行でイタリアに行ってきたので、その間の出来事をラフでまとめて描きました。
f:id:swimy1113:20140822134348p:plain
右上は、フィレンツェのスーパーで、店員でもない人が勝手に店のものを試食させてくれるっていう面白さを伝えたかったんですが、ひとこまにすると情報量が多すぎて何が面白いのがよくわからないことに...ひとこま難しいですね。


1と4が採用されて清書しました。そのひとこまが入っているまとめはこちら。

はてなニュース「ひとこまマンガ」振り返り(5/20~5/30) - はてなニュース
今週の「ひとこまマンガ」振り返り(6/2~6/6) - はてなニュース

梅雨時に描いたラフ

次は梅雨時に描いたラフです。京都に東急ハンズがオープンして、二階のコーヒーショップでコーヒーを飲んだときの出来事などを描いてます。
f:id:swimy1113:20140822123450p:plain

ビールの絵が多いですね(というかさっきと同じ内容)
日常で驚いたことや疑問なんかをノートに描くのって結構楽しいです。ミニブログみたいな感覚で描いて、記事と結びつけられそうなものをピックアップしてもらい清書しています。
ここでは、「梅雨と言えば水玉柄」の女の子が採用されました。そのひとこまが入っているまとめはこちら。
今週の「ひとこまマンガ」振り返り(6/16~6/20) - はてなニュース

最近のボツひとこま

最近、会社の人の様子や旦那の様子を描くと好評なので、内輪ネタにならない程度にひとこまにならないかな〜と模索しています。
その中でも、意味が分からなすぎてボツにしたものを紹介します。
弊社のNさんという人の話です。

f:id:swimy1113:20140822134436p:plain

ペヤングをつけ麺に....Nさんはペヤングをつけ麺にして食べていて.......この斬新さをひとこまにしようとしたんですが、ちょっと私の力では何ともならなかったです。こういう食べ方はメジャーなんですかね?私は初めて見ました。カルチャーショックです。

まとめ

ひとこまは、はてなニュースで平日はほぼ毎日更新されています。もし気になっていただけたようでしたら、チェックしてみてくださいね!

デザイナー募集とワークショップのお知らせ

はてなでは、一緒にものづくりを楽しめるデザイナーを募集しています。興味を持った方はぜひエントリーしてください。

はてなデザイナー職に応募する

また、京都&東京で学生向けにワークショップを開催予定です。こちらもご応募お待ちしております!

はてなデザイナーワークショップ2014 - はてな

学生向けデザイナーワークショップを9月に京都・10月に東京で開催します

お知らせ

こんにちは、はてな デザインチームの id:ueday です。

株式会社はてなは、Webデザイナーを志望される学生の皆さまを対象に、9月と10月に「Webサービスのデザイン」をテーマにした体験型ワークショップを京都・東京で開催します。詳しくは下記の募集ページをご覧ください。

Webサービスをつくる面白さ」を体験できます

このワークショップでは、Webサービス開発の醍醐味である「自分達の考えた、オリジナルのサービスをかたちにする」工程を体験できます。Webサービスが好きな方や、Webデザインに興味がある方、Webサービスのデザインって何をしているの? と疑問に思っている方は是非ご応募ください!

しかし、Webデザインには興味があるけどスキルには自信がない…という方も多いと思います。このワークショップではWebデザインの知識やコーディングスキルは特に必要ありませんので、ご心配なく! 安心してご参加ください。

前回(2012年)開催の様子

前回は京都オフィスで開催しましたが、今回は京都に加え東京でも開催します!

前回参加者の感想

アプリの画面を考えるのは初めてでしたが、実際にやってみると楽しかったです。自分がwebサービスのデザインやるなんて、今まで考えたことありませんでしたが、この機会に興味を持ちました。

そのほか、 “webデザインに触れることが良い体験になった” “同世代のデザインに興味を持っている学生とも交流できた” などの感想をいただきました。

ご応募お待ちしています

詳しいワークショップの内容や応募方法については、募集ページをご覧ください。応募締め切りは2014年9月18日(木) です。皆さんのご応募をお待ちしています!

はてなのニュースアプリ「Presso」のデザインができるまで

サービス開発

f:id:hatenadesign:20140410151320p:plain

2014年3月27日、はてなはニュースアプリPressoをリリースしました。様々なニュースアプリが登場し、市場が賑わいを見せる中、Pressoはどのような思いで開発されたのか。Presso開発メンバーの id:akawakami さんに開発の裏側を語って頂きました。

――まずは自己紹介をお願いします。

デザイナーの akawakami です。Pressoのデザインを担当しました。

――Pressoの紹介をお願いします。

Pressoは自分が興味のあるジャンルやタグをフォローすることで、ネットで話題になっているニュースやブログなどを手軽にチェックできるニュースアプリです。

はてなブックマークとの違い

――早速ですが、Pressoのデザイン、はてなブックマークとはどこか雰囲気が違いますね。

今回のプロジェクトは、はてなブックマークアプリのリニューアルではなく、はてなブックマークを使った新しいコンセプトのアプリを作る目的でスタートしました。なので、はてなブックマークの延長線上というより、新しいアプリとしてデザインしています。

――キーカラーのブルーを継承したのはどうしてですか?

別のアプリではあるけど、はてなブックマークをベースにしたアプリであることは表現したかったので、サービスの世界観は共有しようと思いました。

――たしかに、デザインは全く違いますが、横に並べても違和感はないですね。

はい。質感やトーンは違えど、はてなブックマークとの連続性みたいなものは意識しています。
f:id:hatenadesign:20140410151344p:plain

メディアっぽくするか、ツールっぽくするか

――Pressoのアイコンはとてもシンプルですよね。

そうですね。モチーフであるマグカップを配置した、シンプルなデザインのアイコンです。

――ニュースアプリなのに、ニュースっぽくないアイコンですよね。どうしてですか?

Pressoはニュースを読むアプリなんだけど、ニュースリーダーであってニュースメディアそのものではないからです。

――なるほど。

このアプリの本質は、ニュースというコンテンツそのものではなくて、価値あるニュースを集めて、読みやすい形で提供するという仕組み、機能にあると思います。だから、メディアではなく、ツールとして表現する方向性を選びました。

――ニュースアプリと言っても、アプリによって方向性は一様ではないと。

はい。アプリがニュースメディアそのものであれば、新聞や雑誌のような具体的なメディアをデザインモチーフにし、読みものとして表現することで、アプリの体験を簡潔に伝えることが出来ます。でも、Pressoはニュースリーダーなので、メディアであることより、機能やコンセプトにフォーカスして、ツールとしての特徴を表現したアイコンにするほうが良いと考えました。

――確かに、Pressoはメディアとして自ら何かを発信するのではなくて、ユーザーがツールとして使うことで結果としてメディアとなる、みたいなアプリですね。

ジャンルごとにそれぞれの世界やカラーがあるし、ユーザーのコメントからもカラーが生まれる。だから、アプリそのもののデザインには、特定の色合いを持たせるより、極力、プレーンな印象にしたいという気持ちがありました。アイコンが白っぽい背景なのもそういう理由からです。

Pressoという名前は意外でした

――新アプリの名前が「Presso」だと聞いて、とても意外な感じがしました。

はてなブックマークっぽくないですよね。開発初期は、はてなブックマークリーダーアプリとか、WatchListとか呼ばれていました。

――そこからPressoですか。大きく変わりましたね。

ネーミングについては、だいぶ議論を重ねました。サービスっぽくするか、アプリケーションっぽくするか、また、はてなブックマークらしさを出すかどうかの判断も含め、何度もブレストして、様々なアイデアを出しました。そして最終的に、Press(新聞・雑誌)とEspresso(エスプレッソ・抽出する)を掛けあわせた「Presso」に決まったんです。

――価値のあるニュースを抽出するというアプリの性質にしっくり来てますね。

「Presso」というネーミング案が出た時は、これだ!って思いましたね。ネーミングにあたっては、アプリの特徴や機能を分かりやすく表現出来るという点をとても重視しました。また、スマートフォンはユーザーのライフスタイルに密着しているデバイスなので、日々の生活に自然と同居できるような風通しの良さも意識しました。

――ロゴマークもシャープで爽やかな印象ですね。

やはり、日々の隙間時間に気軽に使って頂きたいので、強い主張は控え、自然な形でニュース閲覧を楽しんで頂けるようなデザインにしたいと思いました。ロゴマークはもちろん、デザインは、細めのラインや明るめの色を意識的に使ったり、ロゴタイプも文字がよりシャープな印象になるよう、フォントのウェイトを微妙に調整しています。PressoのロゴタイプKoushiki Sans Fontというフォントをベースに作成しました。

――確かに、頻繁に使っていると主張の強いデザインでは疲れそうですね。

他にも、UIのデザイン要素は、色のニュアンスを微妙に変えただけで、画面から受ける印象がだいぶ変わります。また、屋内だったり、屋外だったり、画面の明るさの設定によっても、雰囲気が違って見えたりします。モックを画像に書き出して、いろんなタイミングやシチュエーションでスマートフォンを使って確認を繰り返し、ああでもない、こうでもないと微調整を続けました。この辺の調整にはだいぶ時間をかけましたね。

f:id:hatenadesign:20140410162922p:plain

UIデザインの話

――UIのデザインは、どのように進めていきましたか?

まずはチームメンバーでブレストして、簡単なペーパープロトタイピングを行いながら、アプリの全体像を考えていきました。

――プロトタイピングでは、何かツールを使いましたか?

POPを使いました。紙に書いたUIのラフスケッチを写真に撮り、POPを使って動きを付けながら、アプリのイメージを膨らませていきました。ラフスケッチとはいえ、実際にスマートフォンで触りながらシミュレーション出来ると、何となく使用感をイメージできるようになるし、何よりアプリ作ってる感があって自分たちのモチベーションが上がります。

――チーム外の人にも見せやすくなりますね。

そうですね。スマートフォンで簡単なデモが見せれるので、これから作ろうとしているアプリのイメージを伝えやすいですし、また、意見を聞きやすかったです。

全体像がある程度見えてきたら、それを元に具体的なデザインを起こしていきました。ツールを使ってモックを作り、画像に書き出して実機で見たり触ったりしながら調整をする。後はその繰り返しです。

――特にここにこだわったというポイントがあれば教えて下さい。

強いて挙げるなら、コメントUIですね。コメントとニュースコンテンツを同時に見るという体験を実現したかったのですが、コメントをコンテンツと同時に見せようとすると、どうしてもコンテンツが見づらくなってしまう。コメントを表示するボリュームや、その見せ方、UIの操作感など、試行錯誤を重ねながら作っていきました。その甲斐もあって、とてもユニークな機能になったと思います。

f:id:hatenadesign:20140410162019p:plain

WEBサービスの会社のデザイナーって?

――ところで、 akawakami さんは、いつもアプリのデザインを担当されているんですか?

WEBサービスの開発をメインに、ウェブ、アプリのUIデザイン、ページやグッズ制作など、いろいろですね。「ヱヴァンゲリヲン新劇場版:Q」とコラボしてアプリを作るというような、ちょっと変わった案件もありました。B!KUMA Qというアプリです。

――いろんな案件があるのですね。

そうですね。

――それでは、今このインタビューを読んでいるデザイナーの方に一言お願いします。

WEBサービスの会社のデザインというと、サービスのメンテナンスを黙々とやるイメージがありますが、実際の業務は多岐に渡っています。いろんなことにチャレンジできるので、やりがいがあるし、とても楽しいですよ。はてなでは積極的にもの作りに取り組みたいデザイナーを募集していますので、興味がある方は是非エントリーしてみてください。

はてなデザイナー職に応募する

――本日はどうもありがとうございました。

以上、まるでインタビューを受けているかのように、akawakami 本人がお送りしました。

エイプリルフールに新サービス!? 「はてなだまされまスター」と、はてなスターのカスタマイズ方法

サービス開発

こんにちは。はてなデザインチームの id:kyabana です。

4/1はエイプリルフールだったので、いたるところでお祭り騒ぎのようでした。
エイプリルフールに便乗しているサイトまとめ2014年版 - GIGAZINE

その日は、はてなにもエイプリルフールが訪れていて…

嘘をつきたい人と、気持ちよく騙されたい人をマッチングし、エイプリルフールにより年に1度行われるオンライン上のお祭り(マーケティング)を活性化して、嘘エコシステム(Ecosystem for Hoaxes)の循環を加速させる新サービス「はてなだまされまスター」をリリースいたしました。

嘘主と騙され手をマッチング! 嘘エコシステムの循環を加速させる新サービス「はてなだまされまスター」をリリースしました - はてなの日記 - 機能変更、お知らせなど

自然と集まってくるエイプリルフールネタにだまされましたの気持ちを表す「だまされまスター」をつけましょう、というサービスです。

はてなブックマークのサブカテゴリ + はてなスター + はてなブログのお題

はてなだまされまスター」は新サービスとは言うものの、新しくなにかを開発したというわけではなく「はてなブックマークのサブカテゴリ『エイプリルフール』に、はてなスターを表示してCSSでデザインを変更したもの」です。くわえて、はてなブログのお題を使って簡単に嘘記事を投稿できるようにしました。


f:id:hatenadesign:20140404101657p:plain
左がはてなブックマークのサブカテゴリ『エイプリルフール』、右がはてなスターを表示してCSSでデザインを変更したもの

はてなブックマークのサブカテゴリとは

はてなブックマークのカテゴリページに、より範囲を限定したジャンルやワードから人気/新着エントリーを確認できる「サブカテゴリ機能」を追加しました。範囲を限定することで、これまで読み逃していた記事を発見しやすくなります。

新しい視点で記事を発見! カテゴリページに「サブカテゴリ」を新設しました - はてなブックマーク開発ブログ

はてなブログ/ダイアリーでスターを変更する方法

はてなスターの画像は、自分の好きなものに変更できるのをご存知ですか? 「はてなだまされまスター」でも、スターを専用の画像に差し替えています。その変更方法をご紹介します。

はてなブログはてなスターの構造は、以下のようになっています。

div.hatena-star-container
span.hatena-star-star-container
a
span.hatena-big-star-star-container
img.hatena-star-user (プロフィール画像
img.hatena-star-star (スター画像)

※おおよその構成です。id、classを網羅しているわけではありません。2014.04.04現在の構成。

はてなスターの代わりに使いたい画像をインターネット上にアップロード(はてなフォトライフなど)してから、設定画面に次のようなCSSを追記します。

.hatena-star-star-image {
  background-image: url(はてなスターの代わりに使いたい画像のURL);
}

すると上の構成図のimg.hatena-star-star (スター画像)が置き換わります。

カラースターの変更やAddボタンの変更方法などは、こちらをご覧ください。
はてなスターのボタン画像を変更する - はてなダイアリーのヘルプ

だまされまスターはこういうコードで変更しました

「だまされまスター」は、上記のスター画像を変更するCSSのほかに、もともと指定されているCSSを打ち消したり、img.hatena-star-user (プロフィール画像)やimg.hatena-star-star (スター画像)に大きさや位置の指定をしたりする次のようなCSSを用意しました。

.hatena-star-star-container a {
  display: inline-block;
  vertical-align: middle;
  width: 52px;
  height: 52px;
  position: relative;
}
.hatena-big-star-star-container {
  width: 48px;
  height: 48px;
  position: relative;
}
.hatena-big-star-star-container > .hatena-star-star {
  background: transparent;
}
.hatena-star-star {
  padding: 0px;
  border: none;
  width: 48px;
  height: 48px;
  position: absolute;
  top: 0;
  left: 0;
}
.hatena-star-user {
  padding: 0px;
  border: none;
  border-radius: 0;
  width: 16px;
  height: 16px;
  position: absolute;
  top: 30px;
  left: 17px;
}

また、高解像度のディスプレイに対応するため、実際に表示される大きさの2倍の画像を用意しました。

変更前
変更後

すると、ビックリした星の口からプロフィールアイコンが覗くような見た目になりました。

変更前 kyabana kyabana kyabana kyabana kyabana kyabana
変更後 kyabana kyabana kyabana kyabana kyabana kyabana

この「だまされまスター」は、はてなブログはてなダイアリーでも設置することを想定しているので、以下の1行をはてなブログの、ブログの管理画面>デザイン>カスタマイズ>デザインCSSの欄の1番上に貼付けて「変更を保存する」ボタンをクリックで設定できます。

@import "[]http://s.hatena.ne.jp/images/aprilfool2014/damasare.css[]"; 

はてなダイアリーの場合は、こちらをご覧ください


以上、「はてなだまされまスター」についてと、はてなスターのカスタマイズ方法でした。はてなスターをあなたのブログにあわせてカスタマイズしてみるのはいかがですか?

デザイナーを募集しています

新卒デザイナー職エントリー締め切りは 4/24(木)正午 です。
キャリア採用は随時行っています。

はてなデザイナー職に応募する

はてな京都オフィスに憩いの場を作ってみた

こんにちは、はじめまして!
はてなデザインチームのid:swimy1113です。

はてな京都オフィスでは、去年の年末くらいから社内に憩いの場を設置しています。
社員同士で、その場所を"カフェ"と呼んでいます。
休み時間や定時後、業務のちょっとした休憩時間に、本を読んだりコーヒーを飲んだり、雑談を楽しむ場として使われています。
今日はそのカフェの紹介をしたいと思います!



できた経緯

カフェは「社内に社員同士がゆっくり話ができるカフェみたいな場所があったら良いな」という想いから生まれた場所です。
若手(?)社員3人(id:moret,id:ueday,id:swimy1113)が発起人となって動き始めます。

コストをあまりかけずに最低限のプロダクトを作って顧客の反応を見る「リーンスタートアップ」という手法がありますが、今回のカフェ作りでもこの手法を参考にし、まずはスモールスタートで最低限の場所だけ用意して、社員にどのくらい使われるか観察することにしました。

社内で空いている場所に、机とNespressoマシンを置いた簡易カフェを設置。しばらく運用したところなかなか好評で、昼休みや定時後、業務のちょっとした休憩に使われるようになりました。
「開発ブースの隣に設置するので、席がちかい人にとってうるさくないか」と懸念点もありましたが、アンケートを実施したところ特に気にならないという意見が返ってきました。

そして今では、よりリラックスできるソファやローテーブル、自由に本が置ける本棚などを設置。今のカフェができあがっていきました。
カフェというにはあまりにもこぢんまりとして手作り感満載ですが...憩いの場として機能しています。

全体図

以下はカフェの現在の間取り図です。

ソファとローテーブル

真ん中にあるソファとローテーブル。休み時間には本を読む人や雑談する人でいっぱいになります(最初の写真は昼休みの様子です)。
日がたつにつれ汚れてくる可能性を見越して、ソファーカバーが洗える素材になっています。しかし今のところマナー良く綺麗に使われています。
(まだソファ来て数日ですが)
座り心地も良いので、リラックスするのに最適です。

ソファとローテーブル、チェアはKEYUCAで揃えました。

カウンターテーブル

立ちながらPCを触ったり本を読んだりできます。
Nespressoが設置されています。味は、ダルサオが一番人気です。

冷蔵庫

牛乳やチョコレート(溶けたら困るお菓子)が入った冷蔵庫。
カフェオレも簡単にできてお腹にやさしい!

本棚

社員の本が置かれる本棚スペース。
基本的に誰でも自由に持ってきた本を置くことができ、仕切りなどで本の持ち主がわかるようになっています。
自由に持ち出し可能な「フリーゾーン」や、もう読まないからいらない本を置く「もらっていい本ゾーン」もあります。



この前本棚整理をして、空きが増えました。社員の本が日々増えています。

まとめ

以上、最近できた憩いの場の様子でした。
利用している社員に、カフェの感想を聞いてみたところ「昼休み、終業後に話しやすくなった」や「おいしいコーヒーが毎日飲めて良い」「他の社員の読んでいる本が、気軽に手に取って読めておもしろい」という反応が返ってきました。
このようにはてなでは、日々社員にとって気持ちよく働ける環境が実現されています。

はてなでは、デザイナーを募集しています

オフィスのカフェでわいわいデザインの話をしたい方。
本棚にオススメのデザイン本を置きたい方。
はてなへの応募をお待ちしております。

新卒デザイナー職エントリー締め切りは 4/24(木)正午 です。
キャリア採用は随時行っています。

はてなデザイナー職に応募する