DroidKaigi2019でRoomClipのデザインガイドラインを公開した話｜takaaya＠RoomClip
2019年2月7〜8日に開催されたDroidKaigi2019で、RoomClipは企業スポンサーとして参加しました。 （パーティでご好評いただいたケーキの会社です🧁✨） そこでデザインガイドラインを（抜粋ですが）公開したところ、私からしてみると意外にも好評だったようで、少しでもエンジニア・デザイナー間のやりとりが円滑になったらいいなぁを応援したくて、いただいた反応やらエピソードやら記事に書くことにした次第です。 前置き実は、アンドロイドチームから『DroidKaigi2019にデザインガイドラインを公開したい』という打診があった時は正直ぜんぜん気乗りせず。 というのも、デザインガイドラインなんて先人がいくらでも知見を発揮していますし、「今やみなさんどこでも作ってるでしょ」という思いから、採用ベースでもエンジニア目線でも特に目新しくもなく、大したフックにはならないんじゃないかと思ってたか
UI Crunch #13 娯楽のUI - by Nintendo - - YouTube
2018/4/27（金）に渋谷・DeNAオフィスで開催した『UI Crunch #13 娯楽のUI - by Nintendo -』。"もっと楽しく"を追求する、任天堂のUIデザイナー3名をお迎えし、「Splatoon」 や「Nintendo みまもり Switch」 などの事例を交えながらお話いただきました。 https://ui-crunch.connpass.com/event/82969/ ■■■■コンテンツ■■■■ 00:00:00～ 自己紹介・もくじ 00:03:57～ ①あそび心とUI 00:23:02～ ②SplatoonUIの狙い 00:42:22～ 任天堂の紹介 00:46:14～ ③NintendoみまもりSwitch は 誰のもの？ 01:07:07～ さいごに 01:10:51～ Q&A 【UI Crunchとは】 UI Crunchは、DeN
スタディサプリにおけるアプリデザイン改善の取り組み
https://hirelink.connpass.com/event/44321/ hireLink vol.29【スタディサプリにおけるアプリデザイン改善の取り組み】で発表した登壇資料になります。 -「アプリの質を上げる」とはどういうこと？実際に何をしたら良-いの？ - アプリの質を上げた…
APIデザインにおける七つの大厄介 | POSTD
(編注：2016/7/29、頂いたフィードバックを元に記事を修正いたしました。) APIをデザインするということは、科学であり技術でもあります。多くの頭の良い人たちが失敗を重ねてきました。成功している人たちは、APIの主な目的を念頭においてデザインしているのです。その目的とは、「開発者たちをウンザリさせる」ということです。 親愛なる仲間たち、その崇高っぽい追求を称えるべく、「APIデザインにおける七つの大厄介」を共に数え上げようではありませんか（私がしたことを見てください）。 リスティクル（箇条書き形式の記事） を書くつもりはないのですが、少なくともタイトルは 教養ある宗教的文献が参照元 です。 まず、ルールを決めましょう。ここでは、成功し、きちんと機能しているAPIを取り上げます。ですから、「動かない」とか、「大量のセキュリティホールがある」といったことは厄介ごとに数えません。「致命的」
レスポンシブデザインにすぐ使える！すごいアイデア30個 | コリス
サイトをレスポンシブ対応にするには、デバイスごとのスクリーンサイズ、フォントや画像のサイズだけでなく、クリックとタップ、スクロールとスワイプなどの機能性、そして見た目もサイズだけでなく、配置やトリミングなど、さまざまな取り組みがあります。 レスポンシブデザインにすぐに使える制作テクニックのすごいアイデアを紹介します。 Responsive web design: What the Internet looks like in 2016 以下、各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様に許可を得て翻訳しています。 01. 空白スペースを効果的に使う 02. ロゴの配置を一貫させる 03. 縦置きと横置きを考慮したデザイン 04. 縦長スクロールページの素晴らしいアイデア 05. 指のタップに合わせた形と大きさ 06. レイアウトにレスポンシブ用の微調整 07. 一行
未知の端末に対応するレスポンシブデザイン - Qiita
はじめに 多様化する環境 iPhone6とiPhone6 plus、iPad proの登場によりiOSデバイスの画面サイズが一気に増えました。 次は4インチのiPhoneが追加されるという噂もあります。 Androidではそれ以上に多様な解像度の端末が発売され今後も増えていくことが予想されます。 Windowsタブレットの小型化も見逃せません。 さらに今後はTVやタブレット、カーナビなど様々なデバイスがWebにアクセスしてくるようになります。 以前のように特定の画面サイズをターゲットにしてWebサイトのデザインを行うのは難しくなっています。 現在ではあらゆる解像度や画面サイズで最適なWebデザインを行う必要があります。 最適とは 最適というのは、小さな端末でも見やすく、大きな端末では、大きさを活かしてもっと見やすく表示できることを言います。 より大きなスマートフォンを持っている人はより多く
AndroidオールスターズでClean Architectureについて発表してきた&参考リンク集 - tomoima525's blog
先日dots.さんが主催するAndroidオールスターズという勉強会で、"Android Clean Architectureことはじめ"と題して発表してきました。 資料はこちらになります。 Android cleanarchitecture from Tomoaki Imai www.slideshare.net また資料でお見せしたサンプルコードは https://github.com/tomoima525/CleanArchitectureSample になります。プリミティブな形でサンプルをお見せしたかったため、ほぼデファクトスタンダートとなっているRetrofitとButter Knife以外のライブラリは利用せずに書いています。 最低限の実装なので色々荒くなってるし、テストガーとか言ってたくせにテストも書けてないので、後ほどもう少しブラッシュアップしてテストも書きます。気になる
クレジットカードフォームの解剖学 | POSTD
オンラインでクレジットカードを使って支払うことは簡単ですよね？この答えはYesでもNoでもあります。Yesの理由は、インターネットが普及された初期からずっとそうしていたから（例：Amazon）。Noの理由は、まったく同じクレジットカードフォームは2つとないからです。 過去20年以上で、私たちはオンライン支払のメンタルモデルを作り上げてきました。「財布からクレジットカードを取り出して、ウェブのフォームに必要なカード情報を入力、そして申込みボタンを押す」というものです。しかし、ユーザーが答えないといけない質問でいっぱいなので、全てを入力するのはとてもややこしい行為になってしまいます。そして言うまでもなく、誰も取扱い説明書なんて読みたくありません。 さまざまな有名ウェブサイト・アプリのクレジットカードフォーム 何かの代金をオンラインで支払う時は、人へ支払う時より2,3倍遅れをとります。端末のボタ
Android cleanarchitecture
日本マイクロソフト株式会社 Digital Sales 事業本部 Digital Cloud Solution Architect 上坂 貴志 クロスプラットフォームに対応した .NET Core、.NET 5 を得てリリースされた .NET 6は待望の LTS (Long-term Support)です。新規開発であれば .NET 6 での開発を検討できますが、.NET Framework で作成された既存のシステムはどうすれば良いでしょうか。 .NET Framework は version 4.8 を最後に新機能の追加予定は今のところありません。今後のことを考えて .NET 6 へのアップグレードを検討したいところですね。 このセッションでは .NET Framework から .NET 6 へのアップグレードについての様々な情報をお伝えします。
アップルとグーグルのガイドラインに学ぶスマホWebデザインの要点（スライド付） | ベイジの社長ブログ
スマートフォン対応させるWebサイトが急増しています。しかし、スクリーンが小さくタッチ操作がメインのスマートフォンでは、デスクトップ向けWebサイトのデザインで培ったノウハウの多くが通用しません。このような時代におけるスタンダードなデザインルールを学ぶために、弊社デザイナーの荒砂を中心に、Appleが公開しているiOS Human Interface Guidelineと、Googleが公開しているMaterial Design Guidelineの比較を行いました。（以降、両者をガイドラインと略します） スマートフォン向けのWebサイトのデザインを考える上で、アプリのUIデザインの定石を知ることは重要です。なぜなら、スマートフォンにおいてはWebサイトをブラウズする機会は14％しかなく（comScore調査／2014）、多くの時間をアプリの中で過ごしているためです。さらにユーザは「これは
Android Material Design のタブの仕様まとめ
Tabs - Components - Google design guidelines 共通の仕様 タブの高さ : 48dp indicatorの高さ : 2dp タブ間に区切り線なし 文字サイズ : 14sp Roboto Medium 文字位置 : ベースライン = タブ下端から20dp 文字色 : 選択・非選択で同じ色 : 選択 = #ffffff、非選択 = #99ffffff 選択・非選択で別の色 : 選択 = indicatorの色、非選択 = 無彩色 http://material-design.storage.googleapis.com/publish/v_2/material_ext_publish/0Bx4BSt6jniD7OWxWU0JiNjA4Vzg/components_tabs_usage_specs1.png Fixed Tabs ■ full-scree
コンテンツとUIパーツの比率
コンテンツとUIパーツ(chrome)の比率についての記事を読んだ。単純にコンテンツを最大限確保するのではなく、画面サイズに応じて適切な大きさでUIパーツを提供することによって、コンテンツとUIパーツの比率への影響を最小限に抑えるべきだという風に読んだ。U-Siteでの日本語訳に期待したい。 Chrome (ブラウザーの方)やFirefoxのハンバーガー・ボタンやWindows 8のチャーム(廃止されるらしい)のような極小化したUIパーツは、発見性や再現性、そしてインタラクション・コストが高いということのようだ。ハンバーガー・ボタンの文脈でよく語られるあの三本線が何を意味しているかユーザーがわかるのかどうかという話のもっと前の段階で問題があるということだろう。 主にデスクトップ・アプリケーションでの話だけれども、逆にモバイル・アプリケーションでUIパーツを大きくしすぎないことにももちろん繋
Google I/O 2013 - Android : Structure in Android App Design
Structure in Android App Design 我々が"構造"について話すとき、それはどういう意味なのか。みなさんが最初に思いつくのは建築の図面ではないでしょうか？ここでの構造は、各スペースが何を意図しているものか決め、また行いたい活動をどうサポートするか提供します。構造は直接見えるものだけではありません。骨は私たちの体の構造を提供しています。骨により筋肉や内蔵を適切な場所に収めることができます。 "Does your app have good bones?" 我々のアプリケーションはこれらの例両方に似ています。空間を定義し、適切な場所に機能を取り付ける必要があります。 よく構造化されたアプリは少なくとも次の３つの特徴があります。 何かを行うのが簡単かつ効果的 家ではドアの幅は出入りするのに適切なサイズだし、床は硬いし、何かを行うのに適切な光量がある 関連する項目は一緒に
Martin Fowler's Bliki in Japanese - 設計＝スタミナ説
@@ -0,0 +1,81 @@ +http://martinfowler.com/bliki/DesignStaminaHypothesis.html + +2007/6/20 + +'''ソフトウェアをきちんと設計するのは、その労力に見合うことなのか？''' + +「ソフトウェアをきちんと設計することって、そんなに大切なことなの？」という問題について、遠回しなやりとりをすることが時々ある。 +あえて「遠回しなやりとり」と言ったのは、はっきりと「ソフトウェアの設計なんて無意味だ」と言う人を見たことがないからだ。 +そういう考えの人は、たいていこんな言い回しをする。 +「立ち止まっている暇なんてない。とにかく前に進まないと来年の目標を達成できないんだ。 +だから、≪設計に関する何かの作業≫は省略するよ」 + +そこにあるのは、設計と素早い開発の間には何らかのトレー
雑把の UI アーキテクチャー史(MVCからMVVMへ) | プログラマーズ雑記帳
Web の場合は View と Controller の違いははっきりしてます。 View は html ページとその作成を担当します。 CGI は アドレスとパラメーター(アドレスの ? の後など)を受け取り、処理を行います。 その受け取り部分が Controller です。 Model と View ではなく、なぜ MVC としたのでしょうか ? 『 GoF 本』 では Controller を分ける利点をいくつか挙げられています。 キーボードの応答を変えたり、メニューからの呼び出しに変更するとき、表示方法を変更しなくていい。 入力イベントを無視するといったことをコントローラーのインスタンスの入れ替えで可能。 その他にも "View を入れ替えれば、 PC アプリ、 Web アプリでも使えるように" という理由もあります。 ちょっと無理そうな話ですが、例えば、 PC アプリが次のような
Real “Skeuomorphism” | DevelopersIO
昨年末にアップルで iOSを担当する責任者が退任したことにより、それまで同社で推進されていた Skeuomorphic Designというソフトウェアのデザイン手法の採用の見直しが迫られていくのではないかと話題になりました。 また、 Windows8で採用されているモダン UIではSkeuomorphic Design とは対照的に余分なグラフィック効果を一切排した平面的で極めてシンプルなデザイン手法が取り入れられています。 このあたりの話題は海外のブログではよく見かけましたが国内ブログでは比較してあまり目にしませんので改めてまとめてみたいと思います。 Skeuomorphic Design Skeuomorphic Designとは現実世界のプロダクトなどの見た目や用途を模倣してデザインを行う手法です。 例えば、本を読むためのアプリケーションでは見開きになった本の中身が表示され、左右にフ
UIの改悪がUXを改善させる場合 - A Successful Failure
2013年01月20日 UIの改悪がUXを改善させる場合 Tweet Good UI≠Good UX UIとUXについてはその理解について多くの議論がなされてきた。たとえば、Googleの及川氏は「写真が語るUXとUIの違い」というエントリにおいてコーンフレークの例を元にUIとUXについて説明したが、その後、ERATOの渡邊氏が「1分でわかるUIとUXをわかりやすく説明する写真とお話」というエントリにおいて、ATMを例によりわかりやすい説明を挙げている（次の写真は当該エントリからの引用）。 この例ではたとえUIが素晴らしくても、そのATMは時間がかかるため、長い待ち時間ができ、結果としてUXが損なわれる場合を示している。 しかしながら、実際にはATMの劣悪なUIが悪いUXの原因となっている可能性があり、本当にこのATMのUIは素晴らしいのかという疑問が残る。つまり「Good UI ≠ Go
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
なぜスマホアプリのアイコンは近年立体的なポップなものから平面的なものに変わったのですか？
Flipsblog.jp
Martin Fowler氏の語る“犠牲的アーキテクチャ"
