はてなブログ・スマートフォンの新ページャ

はてなブログスマートフォンで見た時、前後の記事へのリンク(ページャ)が新しくなっていることにお気づきですか? こんな感じです。

いままでのページャは下記のようなデザインで、要素を横並びに表示していました。

f:id:ueday:20160606110527p:plain

しかし、スマートフォンの狭い画面では、長い記事タイトルのとき窮屈に見えてしまいます。また、左右どちらが新しい日付の記事なのか、一見わかりません。実際、ほかのウェブサイトを見てみると、ページャの表示方法は諸説あるようです。また、ラベル(「前・次」や「新・旧」など)も特に決まった体裁はないようでした。

はてなブログの新しいページャは、縦2列に「新しい記事」「過去の記事」を表示します。また、タイトルだけでなく記事のサムネイルを表示して、視覚的に内容をわかりやすくしました。これにより、前後の記事が読まれる可能性が高まります。

この変更は、今のところスマートフォンに対してのみ行っています。PCでの表示は、意図しないデザイン崩れを防ぐため元のままです。

なお、このブログ『つくるひと | はてな デザイナーブログ』はスマートフォンであってもPCのテーマで表示(レスポンシブモード)しています。気になる方は、ぜひスマートフォンからご自分のブログにアクセスして確かめてみてくださいね!

Hatena Design Hour #3 を開催しました

6月3日(金)に、はてな東京オフィスにて、デザイナーイベント『Hatena Design Hour #3』を開催いたしました。

Hatena Design Hourは、Webサービスの開発に関わっている、Webサービスに興味がある、そんな、Webサービスが大好きなデザイナーのためのイベントです。弊社デザイナーによる各担当サービスのデザイン業務をバックグラウンドとした、デザインに対する考え方を紹介しました。

ありがたいことに、今回も定員を大きく上回るご応募をいただきました。抽選に漏れた方、申し訳ございません。次回のイベント開催時にも、このブログで告知しますので、ぜひご応募ください。

イベントで行った各プレゼンテーションの概要をご紹介します。

はてなブックマークエリアガイドのデザイン(百合佐織)

f:id:ueday:20160607145847p:plain

はてなブックマークの新機能「エリアガイド」を作るときに考えたコンセプトやデザインを自分の体験を交えてお話ししました。

はてなブログ、これまでの施策で大切にしてきたこと(ueday)

f:id:ueday:20160606152812j:plain

はてなブログ開発時に大切にしている、デザインの指針についてお話しました。また、「書く文化」を広めるために行っている取り組みを紹介しました。

新サービスのデザイン(村田智)

f:id:ueday:20160607155928j:plain

新小説投稿サイト・カクヨムのデザインの軸となる価値観を紹介し、それが特に体現されている箇所について、実際の画面を示しながらお話しました。

はてなブックマークアプリリニューアル(川上淳)

f:id:ueday:20160606151951p:plain

サービス全体の情報設計やUIの観点から、はてなブックマークアプリのリニューアルについてお話しました。

参加頂いた方の感想

walkey.hatenablog.jp

chinami266.jugem.jp

前回開催時のレポート


今後も、楽しいイベントを企画していきます。よろしくお願いします。

はてなブログの公開/下書きボタンのインターフェースデザインをリニューアル

f:id:mazco:20160603152821p:plain

はてなブログを使っているとき、記事を書き上げて最後に押すボタンをつい、押し間違えそうになった経験はありませんか?

最後の一手を、うっかり押し間違えないように

これまではてなブログの記事編集画面では「公開する」ボタンと「下書きに保存する」ボタンを並べていましたが、これにより誤って隣のボタンを押し間違えてしまうということがありました。

今回のリニューアルでは、

  • ドロップダウンで選んでから押すことによって、2択を1択にすることで押し間違いを防止。
  • それぞれの状態で、ボタンのデフォルトを変えることによって毎回悩ませることを減らしました。
下書きの状態から

f:id:mazco:20160603153641p:plain

公開済みの状態から

f:id:mazco:20160603153645p:plain

インターフェースに完成はない

これからも様々なユースケースを考えて、改善していきたいと思います。
ぜひ、新しくなった公開ボタンではてなブログをご利用ください!

はてな東京オフィスでデザイナーイベント「HatenaDesignHour#3」を開催します #hatenadesign

f:id:mazco:20160519105710p:plain

こんにちは、はてなid:mazco です。 昨年、「#1 in Tokyo」「#2 in Kyoto」と実施いたしましたHatena Design Hourですが、今年もはてな東京オフィスにてHatena Design Hour #3を開催することとなりました!

Hatena Design Hour とは

Hatena Design Hourは、Webサービスの開発に関わっている、Webサービスに興味がある、そんな、Webサービスが大好きなデザイナーのためのイベントです。このイベントでは、はてなWebサービスの開発に関わるデザイナーが、自身の関わるプロジェクトからホットなトピックを持ち寄り、デザインの見どころや制作の裏話を、様々な角度からご紹介します。

f:id:mazco:20160519105732j:plain

イベント概要

  • イベント名:Hatena Design Hour #3 in Tokyo
  • 日時:2016年6月3日(金)19:30 - 22:00(19:00受付開始・懇親会含む)
  • 参加費:無料
  • 定員:50名(応募者多数の場合は抽選とさせていただきます)
  • 会場:株式会社はてな 東京オフィス 多目的ルーム「SHIBAFU」
  • 所在地:東京都港区南青山6-5-55 青山サンライトビル3F

プログラム

お申し込み方法

以下のイベントページからお申し込みください http://hatenadesign.connpass.com/event/32300/

はてなの個人情報の考え方については、プライバシーポリシー http://www.hatena.ne.jp/rule/privacypolicyをご覧ください

皆さんのご参加お待ちしております!

Hatena Design Hour #2 を開催しました

こんにちは。デザイナーの id:murata_s です。さる8月27日(木)に、はてな京都本社セミナールームにて、デザイナーイベント『Hatena Design Hour #2』を開催いたしました。

Hatena Design Hour

本イベントでは、『Hatena Design Hour #1』 で発表された内容に加え、はてなブログのプレゼンテーションも実施しました。弊社デザイナーによる各担当サービスのデザイン業務をバックグラウンドとした、デザインに対する考え方を紹介するイベントになりました。

たいへん有難いことに好評を頂き、全40席の会場はほぼ満席となりました。プレゼンテーション中の質疑応答やイベント終了後の懇親会では、想定以上の活発な意見交換がなされ、有意義な交流の機会となりました。ご来場いただいた皆さま、ありがとうございます。

また、今回のHatena Design Hourの開催にあたっては、毎年恒例となっているエンジニアサマーインターンシップのスケジュールとの調整を行いました。インターン生の方々にも多数ご参加いただきました。弊社エンジニアインターンシップについて、詳しくは『はてなサマーインターン2015』をご覧ください。

今回残念ながら抽選に漏れてしまった方へ。大変申し訳ございません。現在はてなデザインチームでは、次回デザイナー向けのイベント『Hatena Design Hour #3』の開催を検討しています。開催が決まり次第、当ブログにてご案内をいたします。奮ってのご参加をお待ちしています。

さて、本イベントでのプレゼンテーションの概要と、当日ご参加いただいた方の感想記事を紹介いたします。

プレゼンテーションの概要

B!KUMAガールズ リブランディング(mochapi)

f:id:murata_s:20150914181238p:plain

B!KUMAガールズのキャラクターである、ナンシーのリニューアルについてのお話です。形状の変遷から、リニューアル後の展開までを紹介しました。

Mackerelのデザイン(村田智)

f:id:murata_s:20150911163255j:plain

Mackerelのサービス説明と実際の画面を見ながらのデモを行いました。その後Mackerelのデザインをするときに考えていることを紹介しました。ツールとしての利便性を確保しつつ、先進的なサービス思想を体現するための視点をお伝えしました。

村上さんのところ(種村司)

実ははてなブログを使って構築されていた「村上さんのところ」のデザインプロセスについて、情報デザインをテーマに紹介しました。

はてなブックマークのアートディレクション(川上淳)

f:id:akawakami:20150911165334p:plain

今年で10周年を迎えたはてなブックマークの歴史を振り返りつつ、サービスデザインの事例を交えながら、Webサービスのアートディレクションについてお話しました。

なぜ、こんなご時世にブログサービスを作っているのか(ueday)

はてなブログはどのようなコンセプトで開発・運営しているのか、デザイナーの視点からお伝えしました。3年間のサービスの歴史を振り返りながら、実際の開発フロー、想いのあるリリース、デザインの指針などについて紹介しました。

参加頂いた方の感想

blog.rokuzeudon.com

www.mdesign-works.com

ytsk.hatenablog.com

採用情報

はてなでは考えることが好きなデザイナーを募集しています。

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