デザイナーとエンジニアのコミュニケーションプロトコルを設計する 〜はてなブックマークアプリDark Mode実装の現場より〜 - Hatena Design Group
こんにちは！はてなデザインチーム所属のid:cormorantcraftです！ 先日、配信させていただいたはてなブックマークiOS版のDark Mode、みなさん使っていただけているでしょうか？ 今回はそのDark Modeの実装にあたって、デザイナーとエンジニアのコミュニケーションをどのように行っていたかという点にフォーカスしてお話しさせていただければと思います。 コミュニケーションプロトコルの設計 いきなり「コミュニケーションプロトコルの設計」って言われても？ という声が聞こえてきそうですが、Dark Mode実装の上で平たく表現すると「色を指定するデザイナー」と「色を実装するエンジニア」の間の意思疎通の枠組みを作ることです。 これをしないで進行してしまうと、デザイナーとエンジニアの間で手戻りが多数発生したり、精神的にお互い疲弊したりチームの雰囲気にも悪影響が出たりしてしまいます。気持
三井住友銀行アプリについてお話します。｜SMBC DESIGN
こんにちは！三井住友銀行 デザイナーの堀と申します。 前回の初投稿から、SNSなど多方面でたくさんの反応をいただきありがとうございました。予想以上の反響で銀行内でも話題となり、三井住友銀行のデザイナーの活動が少しでも広がったことにうれしく思います。 その中で「銀行アプリが変わった」とのコメントを多くいただき、自分たちが関わったプロジェクトがお客さまの手元に届いているんだなぁと感動しました。 今回はその「三井住友銀行アプリ」について書いていきたいと思います。 本題に入る前に…、お伝えしたいことがあります。 三井住友銀行初！2019年度グッドデザイン賞を取りました！！（ぱちぱちぱち） デザイナーだけでなく、たくさんの方々のご協力、お客さまの声から作られたアプリなので受賞したときは本当にうれしかったです。 それでは本題です。 アプリリニューアルの背景 様々な理由がありますが、まずはこれです。 キ
フロントエンドエンジニアから、デザイナーさんに意識してほしい10のこと｜Pittan｜note
フロントエンドエンジニアとデザイナーさんは日々協力してプロダクトを作っていく関係にあります。デザイナーさんが作ってくれたものをエンジニアが素早く実現できるよう、いくつかエンジニアから意識してほしいことをまとめました。 なんでこんな話になったのか（前置きなので次の章まで飛ばしてOKです） デザイナーさんから「この画面をこんな風に作ってください」とXDやSketch、PSDなどいろいろな形で渡されることがあると思います。 僕の個人的な意見・経験ですが、いざ実装するぞとなったときに 「あれ…ここってどうしたらいいんだろう？」 と迷って作業のスピードが落ちてしまうことがとてもストレスに感じていました。できればノンストップでいきたいなあと思うわけです。 手が止まるたび、デザイナーさんに「ここってどうしたらいいですか？」と質問するのが何か新しい画面を作るときに必ず発生していました。 「（いつも聞いてる
UIデザインは奥が深い！最近のスマホアプリで見かけるアニメーションの素晴らしいアイデアを解説
普段何気なく使用しているUIのアニメーションもその仕組みや効果を理解すると、なるほどと考えされられます。 スマホアプリのUIに使用するアニメーションをGoodな良いものから、Greatな素晴らしいものに変えるUIアニメーションのさまざまなアイデアを紹介します。 Material Motion, IBM Animation Principles, The UX in Motion Manifestoのガイドラインに基づいた、気持ちのいい操作性に優れたアニメーションを楽しむことができます。 Good to great UI animation tips 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 タブのコンテンツをスライドさせるアニメーション カードをタップして詳細を表示するアニメーション コンテンツを表示するアニメーション コ
Facebook Design | What's on our mind?
Every pixel. Every word. Every part of the experience aims to deliver on that promise.
iPad ProでUIスケッチできるアプリBluprint をリリースしました
UXデザイナーのiPad Proレビュー記事で、UIのスケッチにいいと。僕自身もスケッチが大好きなので、ものすごく欲しくなって。この記事に挙げられているのが『純正メモ』と『Adobe Comp』なんですけれども、Compは機能が中途半端で、僕はこれを使うならSketchでいいんじゃないか？と感じたので、純正メモでスケッチをしてみました。カメラでいちいち撮影したり消しカスに悩まされることがなくなり、確かに圧倒的に紙より捗るものの、幾つか問題がありました。 Notesアプリで描いたスケッチ毎回画面のスクウェアを描くのが面倒スクウェアは勘で描くので、サイズがiPhoneと同じにならないもちろん解像度もiPhoneと全く異なるアイコンなどを何回も描かなくてはならないMacに転送した場合、画像をトリミングしてからでないとInVisionなどのプロトタイピングサービスに配置できない1画面に2〜3個しか
ユーザーの期待に応えるクックパッドのUI/UXーWDF Vol.17 with HTML5 Experts.jp「アクセシビリティとUX」
ユーザーの期待に応えるクックパッドのUI/UXーWDF Vol.17 with HTML5 Experts.jp「アクセシビリティとUX」 仲 裕介（HTML5 Experts.jp副編集長） 3月14日に特定非営利活動法人Web Directors Forum（以下、WDF）とHTML5 Experts.jpの共催企画として、WDF Vol.17 with HTML5 Experts.jp「アクセシビリティとUX」が金沢にて開催されました。この記事では、その勉強会のセッションの模様をレポートします。 ユーザーの期待に応えるクックパッドのUI/UXー元山 和之 イベント最後のセッションは、クックパッドでデザイナーをされている元山和之さんです。今回のセッションでは、クックパッドが実践するユーザーファーストなサービス開発の様子を紹介していただきました。 余談ですが、クックパッドさんのプレゼンテ
ビジュアル仕様書共有ツール Zeplin でアプリ開発が爆速になった - Qiita
デザイナーが作ったデザインをエンジニアがコードに落としこむ工程，コミュニケーションコストも大きくなかなか大変ですよね．そんな課題を解決してくれる，ビジュアル仕様書共有ツール Zeplin を使ってみたところ非常に好感触で，アプリ開発がかなり効率化されたように思うので，普及もかねてまとめてみようと想います． Zeplin は何を解決してくれるのか これまでアプリ開発の際，デザイナーさんに以下の様なビジュアル仕様書を Google Drive で共有してもらっていました． 自分はデザイナーさんみたいに 1px の細かい差異など分からなかったりするので，このようなビジュアル仕様書を作成してもらえると，正しく実装することができ非常に助かります．しかし，これには例えば以下のような課題がありました． (1) デザイナーさんのコストが大きい．上図の例はアプリの 1 画面に過ぎませんが，これが 10 枚，
アプリ開発で参考にしておきたい UI デザインパターンまとめサイトのまとめ - Qiita
業務や個人でのアプリ開発で、UI デザインを考えるときに参考にできそうなサイトを紹介します。なかなか個性的・奇抜だったり、少し古い UI が混ざってたりしますが、インスピレーションを働かせる良い刺激になります。 tumblr 多めです。 Behance https://www.behance.net/ Adobe のポートフォリオサイトです。 モバイルデザインのみならずファッションやグラフィックデザインなど、様々なコンテンツが登録されています。 このサイトでは Creative Field という名前でカテゴリ分けされており、アプリ開発においては Interaction Design や Web Design あたりが参考になります。 Pinterest https://jp.pinterest.com/explore/%E3%83%A2%E3%83%90%E3%82%A4%E3%83%A
バッドUIを改善する方法 ― UIの「5つの状態」を考える | POSTD
(訳注：2020/08/22、画像と動画が正しく表示されていなかったためリンクを修正しました。) こんにちは。このブログは12月にO’Reillyから出版予定の私の著書『 Designing Products People Love 』からの抜粋です。ぜひ本も読んでみてください。また、FacebookやTwitter、 Slackなどで活躍されている20人以上のプロダクトデザイナーにインタビューもしています。* 無味乾燥なUIを経験したことはありますか？ 何か が足りないと感じてしまうようなUIを作ってしまったことはありませんか？ もしそうであれば、使い勝手の悪いUIを経験したのだと思います。 使い勝手の悪いUIには進捗インジケータがありません。ユーザにどこで障害が起きたのか知らせてくれません。怖いエラーメッセージでも表示してくれれば、なお良いのですが。わずかなデータのみの奇妙なグラフです
Apple WatchのUI/UXデザインでデザイナーが考えるべきことまとめ - HOME'S Designer's Blog ｜ ホームズ デザイナーズ ブログ
2015-10-05 Apple WatchのUI/UXデザインでデザイナーが考えるべきことまとめ こんにちは、HOME'Sアプリのデザインをしている、こいずみです。 HOME'Sはこの度、watchOS2発表に伴いWatchアプリをリニューアルいたしました！ Apple WatchのUI/UXデザインの経験を通して、学んだことや感じたことなどをご紹介しようと思います。 「IOS版 HOME'Sアプリ」DLはこちら Apple Watchだからこその機能 watchOS2対応アプリでできることは主に3つです。 ・新着物件の通知を受け取る ・物件を確認する ・気になる物件をお気に入りに追加する iPhoneで希望の条件を保存しておけば、その条件に合った新着物件通知を受け取ることができ、物件の概要を確認できます。 気になる物件をお気に入りに追加すると、iPhone側にその情報が引き継がれます。
Material Design を全力で取り込んだはてなブックマークリーダーを作ってみた - Qiita
はじめに はてなブックマークのカテゴリをスワイプでシュッシュッと切り替えられるアプリがあったら使いやすいかなぁ、ということで作ってみました。 Material Design のエッセンスをできる限り取り入れましたので、注意した点などを紹介します。現行のアプリに導入できる内容もあると思いますので、参考になれば幸いです。 （追記）「階層」の概念、実装コストの高いものについては、実装の対象外としております。 （再追記）タブバー、トップバーの下にスクロールに合わせてシャドーを表示する変更をしました。 アプリはこんな感じです。ご指摘やご要望などありましたらコメントいただけると嬉しいです。 https://play.google.com/store/apps/details?id=com.appspot.parisienneapps.hatebureader レイアウト、コンポーネント アップバー レ
よくわかるマテリアルデザインの設計コンセプト | fladdict
iPhoneとAndroidではiPhoneのほうが良くできているが、iOSのフラットデザインとAndroidのマテリアルデザインでは後者の設計が優れている。マテリアルデザインは、デザインとエンジニアリングが高いレベルで融合していて、ロジカルで非常に美しい。 以下、自分の理解をまとめたメモ。 紙とインク マテリアルデザインは「ペーパー」と「インク」のメタファーでできている。 ペーパーの特徴 バーやボタンといった画面上のUIコンポーネントは、バーチャルな紙でできたカードと考える。また、このペーパーは1dpの厚さを持っている。 ペーパーは純白の矩形、あるいはシンプルな円形である。三角や星型といった複雑な形はとらない。そのような複雑な形状や模様はインクが担当する。 現実とことなり、このペーパーは自由に伸縮することができる。 マテリアルデザインにおけるレイアウトは、複数のペーパーを並べたり、重ねた
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Refactoring UI
Backlog UI リニューアルの舞台裏 / Backlog Renewal UI
http://www.ogura.blog/entry/2017/02/28/190245
モバイルアプリのUIデザインの参考になるスライド10選
ウェブ初心者も安心して作成できる、無料HTMLテンプレート素材24個まとめ - PhotoshopVIP
ログイン - はてな
UIデザイナーを取り巻く様々な設計 / Intrinsic meaning of UI Design
