デザイナー横断組織の変遷 - クックパッド開発者ブログ
こんにちは。デザイナーの池田（id:tikeda）です。6月末までユーザーファースト推進室というデザイナーを中心としたユーザー体験について横断的に責任をもっている室の室長を勤めていました。7月からこのユーザーファースト推進室をなくし役割を各部室に分散させる体制変更を行いました。 ユーザーファースト推進室については、過去のインタビューやブログのエントリーをご覧ください。 はじめに サービス開発では、デザイナー・エンジニアといった職種毎に部を構成し各プロジェクトに派遣するようなスタイル（A）、ディレクター・デザイナー・エンジニアといった役割の異なる職種で部を構成するスタイル（B）、またこの2つを組み合わせたハイブリットのような組織が存在しており、弊社だけでなく開発の現場ではよりよい開発が行われるよう試行錯誤が行われていると感じています。 クックパッドではここ数年、アプリケーションエンジニアは各
Androidアプリのリソースを整理して開発効率を改善した話 - クックパッド開発者ブログ
開発効率を下げる要因 themeが整備されていない styleによるデザインの再利用ができていない 文字の色、サイズ、書体などが整理されていない エンジニアとデザイナの間に共通言語がない 開発効率を上げるための工夫 未使用のリソースを削除する themeの定義 styleの整理 その他のリソース整理 どう変わったか おわりに 技術部モバイル基盤グループの児山です。 モバイル基盤グループではモバイルアプリの開発だけでなく、開発環境の整備や開発効率の向上も重要な目的の一つとしています。 今回はその取組の中で、特にAndroidアプリの開発効率向上に関する取り組みを紹介したいと思います。 開発効率を下げる要因 経験上、どのようなアプリでも開発を続けていくうちに細かい技術的な負債がたまり、開発効率は下がっていくものです。 クックパッドアプリでは朝Lintの実施やDokumiによるレビューによってソ
ニュースアプリの「究極のUI」って何ですか？ Yahoo!ニュースと日経電子版が大激論
Yahoo!ニュースとエンジニアtypeが「『公共性×編集×テクノロジー』～ニュースメディアに求められる使命に、開発者はどう応えるのか～」と題した勉強会・交流会を9月17日に開催しました。後半のディスカッションでは、Yahoo!ニュースと日本経済新聞のアプリ担当者が、ニュースアプリに求められるUI/UXとは何かを語り合いました。 ⇒前半のディスカッションはこちら：【編集×テクノロジー】激戦のプッシュ通知 Yahoo!ニュースアプリの「苦い」1日 登壇者は、日本経済新聞の電子版アプリを監修したUIデザイナーの深津貴之さん（THE GUILD、写真左から2番目）、同紙デジタル編成局編成部の重森泰平次長（左から3番目）、ヤフー ニュース事業本部のUIデザイナー宇野雄（左から4番目）。モデレーターはエンジニアtypeの伊藤健吾編集長（1番左）。あわせてエンジニアtypeの記事「ニュースアプリ「究極
よくわかるマテリアルデザインの設計コンセプト | fladdict
iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた
全7章にわたって書体攻め アニメやラノベのタイトルロゴ、約200個を徹底的に調査した書体研究本登場
※本記事はアフィリエイトプログラムによる収益を得ています マンガ、アニメ、ライトノベルに使われる個性豊かな「タイトルロゴ」に特化した書体研究本「ろごたいぷっ!」が、2015年1月23日に発売されます。価格は2160円（税込）。 意味深な「あ」「う」が目印！ 「人気＆定番書体」を皮切りに、「モダン系」「ニュアンス系」「重厚系明朝」「各種ゴシック」「直線系」「クラシック系」の7章にわけて、さまざまな書体（フォント）の研究結果を、全248ページにまとめた1冊。アニメなどのロゴのフォントを研究する「ゆず屋」さんの同人誌や公式ブログを加筆して再構成しています。 「あずまんが大王」「進撃の巨人」「バカとテストと召喚獣」「普通の女子校生が【ろこどる】やってみた。」など、62作品から選りすぐったタイトルロゴが収録されており、各種フォントでの再現方法や類型フォントとの比較なども掲載されているそうです。 フォ
AppleとGoogleのマップアプリに見るUXデザイン思想の違いを徹底比較
スマートフォンアプリの開発ではユーザーエクスペリエンス(UX)を高めることが重要で、優れたアプリには必ずと言ってよいほどUXを高めるデザイン上の工夫があるものです。人気の地図アプリである「Google Maps」と「Apple Maps」のUXデザインを比較すると、両アプリが異なる思想の下で緻密にデザインされていることがよく分かります。 Maps on iOS: Design Explosions #1 http://uxlaunchpad.com/designexplosions/1-mapping-on-ios.html 左がGoogleの地図アプリ「Google Maps」で右がAppleの地図アプリ「Apple Maps」。一見、よく似たデザインですが、UXデザインの思想は大きく異なっています。 ◆地図表示とツールの配置 これはGoogle Mapsのレイアウト。右の図は、ユーザー
シンプルなKeynoteのテーマ作った - ぴよぴよ.py
研究発表等で使っているシンプルな自作テンプレートをGithubにアップしたので紹介しようと思います。 テーマ 「Mint Green」 ミントグリーンがベースのシンプルなテーマ。 タイトルにはスマートフォントUIというフォントを利用していますが、これを入れてなくても問題なく使えると思います。 テーマ 「Violet」 紫がベースのシンプルなテーマ。Mint Greenの色違い。 こちらも、タイトルにはスマートフォントUIというフォントを利用していますが、これを入れてなくても問題なく使えると思います。 テーマ 「Scarlet」 赤がベースのテーマ。 フォントはヒラギノ角ゴ + Avenir Next。 こちらからDLできます リポジトリ: GitHub - cocodrips/keynote-themes: Free Keynote templates. 良かったら自由にDLして使ってくだ
チャットで勤怠管理する「みやもとさん」をリリースしました
トレタで使っている、チャットで勤怠管理する「みやもとさん」をオープンソースでリリースしました。 https://github.com/masuidrive/miyamoto Slackの#timesheetsという部屋で、「おはようございます」と書き込みと出勤が記録され、「お疲れまでした」と書き込むことで退勤となります。「明日はお休みさせて頂きます」と書き込むと、休暇の届け出になります。 チャットで勤怠管理する最大のメリットは、オフィスに居なくても誰がいつ出勤・退勤したのか全員が分かることにあります。出退勤管理アプリは色々出ていますが、営業で直行直帰する人や、リモートワーカーなどは、帰った時間がリアルタイムでわかりにくいという欠点があります。 「みやもとさん」では、チャットでやりとりする事でみんなの見える形で出退勤が記録され「あ、帰る前にあれも！」など、ありがちなコミュニケーションがスムー
DISられないUIを作るために最低限守るべき5つの鉄則 - たごもりすメモ
ぼくらが迂闊にUIを作ると、そこにはユーザの正直な目線があり、非常に様々な、そして真っ当な反応がある。 曰く「わからん」「まさかそこをクリックするとは」「不思議な動作」「独自宇宙」「モリスUI」。 反応がもらえるのは非常に良いことだが、何度も何度も繰り返しているとつらくなってくるので、できれば避けたい。分かっている(いた)ことは最初から対応しておきたいものだ。*1 ということで、ここではブラウザで操作する管理画面等のWebUIを作るとき、真っ先に心得ておくべき5つの鉄則を紹介したい。これを守っていてもDISられなくなるというわけではないが、これを守らないと間違いなくDISられるので注意しよう。 なおこの記事ではオリジナリティというものについては考慮しない。オリジナリティとか犬に食わせろ。 クリックできる場所はcursor:pointerを指定しろ これを忘れるとこの世のものとは思えないくら
Webデザインのアイデアに困ったら！参考になるさまざまなコンポーネントやレイアウトをまとめた -Call to Idea
Webページによく使用される、アイテムを並べるリスト、ギャラリー、タブ、ナビゲーションといったさまざまなコンポーネントをはじめ、打ち出しコンテンツのレイアウト、サンプルの表示方法、AdWordsの配置、データがない状態のレイアウトなど、Webデザインのアイデアをまとめているサイトを紹介します。
情報がないことを伝えるUIデザイン | UXデザイン会社Standardのブログ
「Empty Data（またはEmpty Status）」というUIパターンがあります。タイムラインやドロワーなどデザイナーであれば知っているUIパターンの名称に比べると、あまり日本では聞き慣れないのかもしれません。Empty Dataは簡単に言うとデータがない時のUIになります（Webでの404に近いですが、少し違います）。では、Empty Dataを知るためにもう少し詳しく紹介していきたいと思います。 参考：モバイルデザインパターン 第2版 ―ユーザーインタフェースのためのパターン集 Empty DataはUIである Empty Dataはただユーザにデータがないことを示すだけではありません。ユーザにデータが存在しないという情報をフィードバックし、どうしたらここに情報が入るかのアクションに繋げる立派なUIです。もしEmpty DataのUIが存在しなかったらユーザはどのように感じるでし
Web Components普及の夜明け！？Polymer.jsを試してみた。 | OpenWeb
今、Google I/Oに来ています！ そこで参加したWeb Components in Actionというセッションで、以前から注目していたWeb Componentsについて、大きな動きがあったことを知りました。 Polymer.jsというライブラリにより、Web Components仕様の大部分が動作させられるだけではなく、様々なカスタムコンポーネントを既に利用可能とのことなのです！ ちなみに、Web Components仕様について多少詳しく知りたい方は、昔白石が書いたこちらの記事を参考にするといいんじゃないでしょうか。 Polymerのコードを取得 PolymerはGitHubでコードが公開されています。まずは適当な空ディレクトリに移動し、そのコードを手元にクローンします。 このコマンドを実行すると、Polymer本体だけではなく、依存しているいくつかのモジュールも同時にクローン
Web開発者に革命をもたらす！「Web Components」超入門 | 株式会社LIG
こんにちは。デザイナーの王です。 Webアプリはデスクトップアプリとは違い、まだまだ発展途上の技術のため、色んな所でまだ未熟な部分があります。デスクトップアプリでは当たり前のことでもWebアプリではできなかったりすることも多いのです。中でも、UIのコンポーネント化問題が以前から指摘されてきました。 通販サイトにある「購入ボタン」を例に説明すると分かりやすいと思います。 この手のボタンを作るには以下の手続きを要すると考えられます。 外観を整える CSS HTMLマークアップ クリックした際の挙動 JavaScript 何が厄介かというと、「再利用」が難しいというところなんですね。 例えば、同サイトの別のページで同じボタンを使いたい場合、js、CSS、HTMLを再度記述しなければなりません。しかも場合によってはHTMLのマークアップが非常に冗長化していることもある。 「購入ボタン」はあくまで一
クックパッドのアプリが累計2,000万DLを突破、滞在時間を3割伸ばしたAndroid版を手掛ける2人に会ってきた - BRIDGE（ブリッジ）テクノロジー＆スタートアップ情報
モバイルファースト部の八木さん（右）と滝口さん（左） ユーザー目線でサービスを作り続けている会社は？という質問に、「クックパッド」と答える人はきっと少なくないはず。同社のアプリのダウンロード数は累計2,000万を突破し、スマートフォンからの閲覧は直近で全体の7割以上を占めるまでになっている。 今年2月、クックパッドに新たに結成されたのが、モバイルファースト部。全70人強のエンジニアのうち、10%ほどが所属する。アプリの開発や運用はもちろん、モバイルファーストを社内全体で推進し、もともと人数では圧倒的に多いWebエンジニアがモバイルにシフトする後押しをすることをミッションに掲げる。 今回は、そんなモバイルファースト部の八木俊広さんと、滝口健太郎さんにお話を伺った。二人とも、Androidアプリ開発の経験者として、クックパッドにここ1年以内にジョインしたメンバーだ。 モバイルエンジニアもUIや
はてなのニュースアプリ「Presso」のデザインができるまで - Hatena Design Group
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
スマホUI考（番外編） UIやUXを劇的に改善する、『ビッグオー駆動型開発』とは | fladdict
いま『ビッグオー駆動型開発』とよばれる開発手法が、業界の一部で注目を集めている。 その理由は非常にシンプルだ。『ビッグオー』は非常に安価で簡単な手法でありながら、従来の開発手法に比べ劇的にUIやUXを改善できるためである。 製品コンセプトのような上流から、ボタンのレイアウトといった下流工程、さらにはグロースハックやプロモといったリリース後のフェイズまで一つの手法でユーザビリティを評価できる。この汎用性がビッグオー駆動開発の大きな特徴であり、導入時の利点となる。 今回はこのビッグオー、の概要と具体的なやり方について論じたい。TwitterのUI拡張予言以来、久しぶりのUI系エントリである。 ビッグオー駆動開発とは何か？ ビッグオー駆動開発は、正式には『OKAN Driven Development（オカン駆動型開発）』とよばれる開発手法である。 これは自分のオカンを指標とすることで、低コスト
凄まじい成長ぶりが話題の「Box」を創業したカリスマ起業家、アーロン・レヴィとは何者なのか？ | ライフハッカー・ジャパン
Inc.：現在、アメリカで大きな注目を集めているスタートアップが、クラウド環境のストレージサービス「Box」です。創業者のアーロン・レヴィは、現在28歳。2005年、20歳のときに南カリフォルニア大学の学生寮でBoxを立ち上げました。同社の収益は毎年倍増という凄まじい成長ぶりで、2013年末には1億ドルに達する勢い。従業員は900名を超え、オフィスはカリフォルニア州ロス・アルトス、サンフランシスコ、ロンドン、パリ、ミュンヘンとグローバルに展開。来年、レヴィと共同創業者・最高財務責任者のディラン・スミスは同社の株式公開を計画しています。 このスタートアップ企業に3億ドル（約315億円）の投資が集まり、同社の価値が12億ドル（約1260億円）と評価された事実は、Boxに対する期待の大きさと同時に、クラウドコンピューティングの市場がついに成熟したことを示しています。IT分野の投資家と専門家に対し
フォント選びで個性が出る！ はてなデザイナーお気に入りのフォント16選 - Hatena Design Group
あけましておめでとうございます。はてなデザインチームの id:tanemu です。 デザイナーが個人的に好きなフォントって気になりますよね。新年最初のエントリーは、お気に入りのフォントについてデザインチームに聞いてみました。どことなく人となりが感じられるチョイスになったような気がします。 id:ueday いつもフォント激安情報をIRCに流してくれる id:ueday さんのおすすめは、 salome めちゃくちゃおしゃれ、だけど使いどころが難しいから腕が問われる。 ITC Lubalin Graph スラブセリフかっこいいです。 uedayさんの資料で、数字部分におおきくsalomeをあしらっているのを目撃したことがあります。どちらもXハイトが高めの特徴的なフォントですね。 また、よく使うフォントも教えてもらいました。 見出ゴMB31 ツメて使うのが好み Lato Google webf
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
Ionic: Enterprise App Platform
