こんにちは。id:akawakami です。今回は、はてなデザイングループで定期開催している「デザインゼミ」から「いい感じのアニメーション研究会」というプレゼンテーションをご紹介します。 デザインゼミとは デザインゼミは、はてなデザイングループの取り組みの一つで、社内メンバーに限定したクローズドな勉強会です。プレゼンテーションのテーマは自由。シニアデザイナーが交代で講師を担当します。 日頃蓄積された知見や経験、個人的な関心テーマ、ちょっとした工夫などを、みんなで聞いたり、話したりして、わいわい出来る、ちょっと砕けた感じのまかない勉強会です。 気軽な会なので、体系立てられた深い知識でなくても、超個人的な思いつきやアイデア、細かすぎるネタなどもテーマに採用しやすく、講師を担当する側としても、楽しみながらプレゼンテーションの準備が出来ています。 いい感じのアニメーション研究会 最近の個人的な関心

はてなノベルチームの id:murata_s です。4月1日にリニューアルした魔法のiらんどのデザインを担当しました。この記事では、本リニューアルプロジェクトで、デザイナーはどのようなことを考えてデザインの方向性を定めたのか、その思考の一部を紹介します。 プロジェクトの背景とリニューアル後の反応 リニューアル開発で手を入れる箇所を見極める 視覚に訴えるビジュアル要素 ガーリーにならないスタイリッシュさ 使われることを意識したリッチな設計 リニューアル開発でデザインに期待されること （この記事の内容は、2020年7月15日にオンライン開催したイベント「Hatena Engineer Seminar #14」での発表内容をもとにしています） プロジェクトの背景とリニューアル後の反応 魔法のiらんどは1999年12月のサービス提供開始から20年が経過している老舗サービスです。いまでも若い女性に人

こんにちは！はてなデザインチーム所属のid:cormorantcraftです！ 先日、配信させていただいたはてなブックマークiOS版のDark Mode、みなさん使っていただけているでしょうか？ 今回はそのDark Modeの実装にあたって、デザイナーとエンジニアのコミュニケーションをどのように行っていたかという点にフォーカスしてお話しさせていただければと思います。 コミュニケーションプロトコルの設計 いきなり「コミュニケーションプロトコルの設計」って言われても？ という声が聞こえてきそうですが、Dark Mode実装の上で平たく表現すると「色を指定するデザイナー」と「色を実装するエンジニア」の間の意思疎通の枠組みを作ることです。 これをしないで進行してしまうと、デザイナーとエンジニアの間で手戻りが多数発生したり、精神的にお互い疲弊したりチームの雰囲気にも悪影響が出たりしてしまいます。気持

こんにちは！はてなデザイングループ所属のid:cormorantcraftです。 昨年末にお届けしたはてなデザイナー達の「人生の一冊」！（前編）、いかがでしたでしょうか？ 少し間が空いてしまいましたが今回は後編をお届けしたいと思います。 本編に入る前に、改めて本企画の説明をさせていただきます。 皆さんはこれまで生きてきた中で 人生を変えてくれた！ 何度も何度も読み込んだ！ どうしても捨てられない！ という本はあるでしょうか。 僕は勿論あります！きっと誰しもがそういった「人生の一冊」があると思うんですね。 それがなんなのかを聞いてみれば、どういったことに影響されて「はてなのデザイナー」にたどり着いたのか、がわかるはず…というのが今回の企画の趣旨です。 前回は5名の「人生の一冊」をご紹介させていただきました。残り6名、はたしてどんな名著が出てくるのか！ それではいってみましょう！ id:kar

こんにちは。ノベルチームでデザイナーをしている id:murata_s です。先日カクヨムでは、新しいバージョンのアプリをリリースしました（iOS、Android）。読む専用のビューワーアプリとして、名称も「カクヨムViewer」と改めています。 開発面では、これまでネイティブとWebViewで構成されていたアプリに、React Nativeという技術が加えられたことが大きなトピックです。技術方面での具体的な使用感などについては一緒に開発を担当したエンジニアさんが別の機会に発表してくださるとのことですので、本稿ではデザイナー目線で触った感想を述べたいと思います。 やったこと この度のアプリ開発で導入されたReact Nativeですが、個人的にも初めて触る技術でした。どのようなものなのかまず知ろうということで『Atomic Design』という本を読んで予習することにしました。この時点では

こんにちは、Mackerelチームでデザイナーをしているid:takuwologです。 突然ですが、Mackerelにはエージェント氏というキャラクターがいます。エージェント氏はサーバーにインストールする監視エージェントであるmackerel-agentをキャラクター化したものです。今回はこのエージェント氏を様々な媒体に展開するために、その造形をアップデートした話をします。 アップデート前のエージェント氏 これはMackerelのスタートガイド画面の一部で、ホストの登録をイラストを使って説明しています。ここに登場しているキャラクターがエージェント氏です。エージェント氏はホストの情報を収集するロボットです。 このイラストをもとにエージェント氏を使ったノベルティとしてステッカーを作成しました。 またMackerelのリリース3周年を祝うケーキにもなりました。このケーキはMackerel mee

こんにちは、はてなデザインチームの id:swimy1113 です。はてなのマンガチーム所属で、京都本社に勤務しながらコミックDAYSや週刊少年マガジン公式サイトのデザインを担当しています。 私には現在2歳半の息子がいます。最近はお手伝いブームで、「〇〇ちゃんがやる！」と主張するようになった元気な男の子です。 3年前に産休、育休合わせて1年半を取り、2017年の4月に仕事復帰をしました。 仕事復帰から1年と3ヶ月が経ち、この1年を振り返ってみると色々あったなあと思うのでこの機会に振り返りのブログを書くことにしました。 1年半仕事を全くせずに育児と家事だけをしていたので、本当に前みたいに働けるのか？！という心配と、準備を進めるにつれ具体的にどうしようという悩み、先輩社員に聞いた保育園あるあるの心配事など。同じように仕事復帰の悩みを抱えている方に、少しでも参考になれば幸いです。 育児・家事しな

こんにちは。現在カクヨムのデザインを担当しておりますデザイナーの id:murata_s です。 先日、カクヨムでは縦組み機能をベータリリースしました。これは文字通りウェブブラウザ上で小説を縦組みで表示することができる機能です。リリース後書き手ユーザーの皆さまを中心に多くの反響がありました。 この機能開発では、基本的な組方向に関する変更に加え、画面のデザイン的にも新しい試みを行っています。そこで、今回はウェブにおける縦組みのデザイン事例としてこれを紹介します。 小説を縦組みで読みたい ウェブ小説を縦組みで読みたいという、シンプルなモチベーションで始まった縦組み機能の開発ですが、アイデア自体はサービスの立ち上げ当初からチーム内で挙がっていました。日本語で紡がれた物語を縦組みで読みたいという欲求は、小説文化に親しみのある者なら誰もが思うことだと思います。実際にご利用いただいているユーザーさんと

Mackerelチームでデザイナーをしているid:takuwologです。 この記事ではMackerelがどのように情報をデザインしているのかを事例を交えて紹介します。 Mackerelとはエンジニアがサーバーを管理・監視するためのサービスです。 mackerel.io サーバーの管理・監視を行なうMackerelでは多くの情報を取り扱うことになります。扱う情報は大きく分けると3つあります。 サーバーの仕様や状態などの情報 サーバーを監視するためにユーザーが追加した設定情報 チームやユーザー個人の設定情報 上記3つを合わせると情報量はとても多くなります。そのため情報を「わかりやすく」ユーザーに提示することがサービスにおいて重要になってきます。 「わかりやすさ」とは何か ユーザーは日常的にMackerelを使用してサーバーの管理・監視を行います。そのため誰がどんな時に何が目的でMackere

2014年3月27日、はてなはニュースアプリPressoをリリースしました。様々なニュースアプリが登場し、市場が賑わいを見せる中、Pressoはどのような思いで開発されたのか。Presso開発メンバーの id:akawakami さんに開発の裏側を語って頂きました。 ――まずは自己紹介をお願いします。 デザイナーの akawakami です。Pressoのデザインを担当しました。 ――Pressoの紹介をお願いします。 Pressoは自分が興味のあるジャンルやタグをフォローすることで、ネットで話題になっているニュースやブログなどを手軽にチェックできるニュースアプリです。 https://itunes.apple.com/jp/app/presso-sosharunyusu-matomemoburogumo/id799334646?mt=8&uo=4&at=10l8JW&ct=hatenab

こんにちは。はてなデザインチームの id:kyabana です。 デザインやコーディングをする上で、アイデアやスキルを画面に伝えるマウスなどの入力デバイスは欠かせません。ものによっては作業効率が上がったり、精神的ストレスから解放されたりなどの効果もありますよね。 そこでデザインチームに普段使っているマウスやペンタブ、スタイラスとその良いところを聞いてみました。それぞれ好みがあるようで、みんな違ってみんないい！というモノが出てきました。 id:murata_s 大学では紙のデザインを中心に学んでいた新人id:murata_sさんは、 Wacom プロフェッショナルペンタブレット ワイヤレスキット付属 Mサイズ Intuos5 touch PTH-650/K0 出版社/メーカー: ワコム発売日: 2012/03/16メディア: Personal Computers購入: 5人 クリック: 33

こんにちは。はてな デザインチームの id:ueday です。 長時間机に向かうデザイナーにとって、椅子選びは超重要です。自分の体に合った椅子を選べば腰の負担が軽減されるだけでなく、作業に集中できて仕事が捗りますよね。 アーロンチェア派とバロンチェア派 はてなでは「デスクワークにはなるべく良い椅子を」という方針から、オフィスにアーロンチェアとバロンチェアが多く配備されています。はてなのデザイナーに現在どちらの椅子に座っているかアンケートをとったところ、こんな結果になりました。 アーロンチェア バロンチェア 4人 3人 アーロンチェアが若干多いようです。 そんなはてなのデザイナーはそれぞれ椅子にこだわりを持っているそうなので、どんな椅子がおすすめかアンケートしてきました。なお、自宅で使っているものでも可としました。 id:akawakami のおすすめ椅子 id:akawakami さんのお

こんにちは。はてな デザインチームの id:ueday です。 どうしたら会社（あるいはチーム）でのコミュニケーションを円滑に・楽しく行うか、というのは常に悩みどころですよね。私達も今までに色々なツールや方法を試していて、日々ベストプラクティスを探しているところです。 この記事では、はてなで実践している社内コミュニケーション方法についてご紹介しますが、常に試行錯誤しているので、これが最適、とは言い切れないところがあります。現時点の方法としてご紹介したいと思います。 東京・京都の2拠点を繋ぐ はてなでは、京都と東京の2拠点で開発をしています。そこで活躍するのが、「ポリコム」というテレビ会議システムです。打ち合わせや朝会はこのポリコムを通じて行うので、物理的な距離を感じずにコミュニケーションがとれるのです。詳しくははてなのカルチャーをご覧ください。 カルチャー - 株式会社はてな メールは使わ

あけましておめでとうございます。はてなデザインチームの id:tanemu です。 デザイナーが個人的に好きなフォントって気になりますよね。新年最初のエントリーは、お気に入りのフォントについてデザインチームに聞いてみました。どことなく人となりが感じられるチョイスになったような気がします。 id:ueday いつもフォント激安情報をIRCに流してくれる id:ueday さんのおすすめは、 salome めちゃくちゃおしゃれ、だけど使いどころが難しいから腕が問われる。 ITC Lubalin Graph スラブセリフかっこいいです。 uedayさんの資料で、数字部分におおきくsalomeをあしらっているのを目撃したことがあります。どちらもXハイトが高めの特徴的なフォントですね。 また、よく使うフォントも教えてもらいました。 見出ゴMB31 ツメて使うのが好み Lato Google webf

photo by wiccked こんにちは。はてな デザインチームの id:ueday です。 先日、はてなでは品川の日本マイクロソフトで「はてな エンジニアブロガー祭り」を開催しました。 そこで発表された、はてな アプリケーションエンジニアの id:hitode909 による 「高速にドッグフードを食べる方法」 のスライドが SpeakerDeck に公開されています。もうご覧になりましたか？ 高速にドッグフードを食べる方法 - Speaker Deck 高速にドッグフードを食べる方法 - hitode909の日記 はてなブログチームでは高速にドッグフードを食べながら開発していますが、この記事では 「エンジニアと一緒に高速にドッグフードを食べるデザイナー」 という視点から、はてなブログ開発の様子をご紹介します。 高速にドッグフードを食べるメリット 「ドッグフードを食べる」とは、実際にド

photo by Abee5 こんにちは、はてなデザインチームのid:murata_sです。 人の家にあがったらやっぱり最初に本棚をみてしまいますね。どんな本読んでるんだろう？　何に興味があるのかな？　気になります。本選びには、その人の個性がすっごく出てきますね。 やっぱり気になるデザインの本 はてなのデザイナーは、普段ウェブのデザインをしていますが、ちょっと道端で話をしたりすると、ウェブ以外のデザイン情報にも造詣が深いんです。あれやこれや何でも出てきます。良い本知ってそう！　ぜひ聞きたい！　ということで…… 善は急げ、さっそくお気に入りのデザイン関連本を聞いてみました。いろいろ紹介したい人もいるようですが、今回は一人一冊です。 注：一見するとデザインとは関係のない本が並んでいるようにみえるかもしれませんが、いまデザイナーとして活躍している上で大きく影響を受けた本ということで選んでもらって

こんにちは。 id:akawakami です。はてなの企業ロゴリニューアルを担当しました。 はてなでは、20周年を機に企業ロゴのリニューアルを行いました。ロゴマークのコンセプトなど、表現上の意図についてはプレスリリースで触れられているので、ここでは制作面にフォーカスして、ロゴマークのデザインをご紹介したいと思います。 hatenacorp.jp はてなロゴの変遷 今回リニューアルしたロゴマークは、はてなの企業ロゴとしては4代目となります。 2001年 〜 2005年 「人力検索はてな（人力検索サイトはてな）」とともにデビューした、はてなの最初のロゴマークです。 2005年 〜 2007年 ブロックを組み合わせてはてなマークを表現したロゴマークです。この時に生まれたはてなマークの表現が、その後のロゴマークに踏襲されていきます。 2007年 〜 2021年 ブロックのはてなマークをシンプルにア