宣言的UI宣言的UIの状態管理とアーキテクチャSwiftUIとGraphQLによる実践 https://speakerdeck.com/sonatard/swiftui-graphql
邪悪なUIチェックポイント - その先へ
ハロー、@seto_hiです。 北海道で避暑をしています。 アプリ開発をしていると様々なコンバージョン率がKPIになることは多いですが、誠実さを欠いたUIを作ると数字がよく伸びることが稀によくあります。 そういったものは一時的な利益には繋がりますが、長期的な利益には繋がらないと考えています。 自分が今後そういったUIを作らないための予防線としてこの記事を書きます。 不利益の排除 ・不利益な動線を奥深くに隠す ・ユーザーが設定を変更する手間を増やす ・「メールマガジンの解除にはメッセージを送ってください」 ・「メールマガジンの解除にはログインが必要です」 ・過度に警告を表示する ・「この設定をOFFにするとアプリが正常に動作しなくなる可能性があります」 ・「本当にOFFにしてよろしいですか」 ・不利益な動線を目立たなくする ・不利益な動線のシグニファイアを消す ・スマートフォンならスクロール
任天堂のUI/UXデザイナーに5つの質問！UI Crunch #13 娯楽のUI【書き起こし後編】｜Goodpatch Blog グッドパッチブログ
後編は、イベントにお申込みいただいた皆さんから寄せられた質問と、その回答をご紹介します。モデレーターにDeNA 増田 真也さん、Goodpatch 土屋を迎え、娯楽のUIをデザインするために大切なことを聞きました！ ハッシュタグ「#uicrunch」のつぶやきのまとめは、こちらからご覧いただけます。 登壇者プロフィール 正木 義文 (MASAKI yoshifumi) ｜UI/UX デザイン チーフ 多摩美術大学でグラフィックデザインを学んだ後、2005年に任天堂入社。 UI/UXデザイナーとして多数のゲームソフトを開発しつつ、現在はUIデザイン開発チーフとしてゲームソフトのUIクオリティを統括している。 UIデザインのなかに、機能や実用性だけでなく楽しさやユーモアを盛り込むことを得意とする。 担当プロダクト：Nintendo Labo (Nintendo Switch, 2018）、どう
任天堂のUI/UXデザイナーが語るデザイン思想。UI Crunch #13 娯楽のUI【書き起こし前編】｜Goodpatch Blog グッドパッチブログ
イベントレポート 任天堂のUI/UXデザイナーが語るデザイン思想。UI Crunch #13 娯楽のUI【書き起こし前編】 私たちが利用するサービスやプロダクトには、毎日使う実用品もあれば、娯楽品もあります。目的は異なっても、どちらも生活に欠かせないものです。技術が進化し、新しいものが生まれ続ける現代において選ばれるサービスやプロダクトには、人に寄り添ったデザインが求められることは想像に難くないでしょう。では、娯楽品のデザインに潜むロジックや哲学はどのようなものなのでしょうか。 2018年4月27日、DeNAとGoodpatchが主催するUI Crunchは、任天堂株式会社さまをゲストに迎え「UI Crunch #13 娯楽のUI – by Nintendo –」を開催しました！告知開始直後からたくさんの反響をいただき、最終的には4200人以上の方々にご応募いただきました。伝説の回となった
FlutterでDroidKaigi 2018のiOSアプリを作りました - Konifar's WIP
DroidKaigi2018が来週に迫ってきましたね。 自分もコードで見るFlutterアプリの実装というテーマで発表します。 その題材として、DroidKaigi2018のiOSアプリを作りました。コードも公開しています。 github.com 作った理由は、以前の記事に書いたとおりです。 また、公式アプリではないですが今年はiOSアプリも用意したいなぁと思っています。iOSDC2017に参加した時にAndroidアプリが欲しいと思ったからです。 まだ申請中なので間に合うかどうかわかりませんが、iOS端末がメインの方に使っていただけると嬉しいです。 DroidKaigiの発表では、時間の都合上Flutterの基本的な部分の説明は省くつもりなので、ここで簡単にまとめておこうと思います。 Flutterとは Flutterは、iOS / Androidで動くアプリを作れるクロスプラットフォー
AbemaTVのUIデザイン 僕なりの運用の心得 | CA BASE CAMP | CyberAgent Developers Blog
2018年1月22日（月）セルリアンタワーにて、サイバーエージェントの約1,800名の技術者に向けた全社技術カンファレンス『CA BASE CAMP』を開催しました。 本ブログでは、『CA BASE CAMP』にて行われたセッションの一部を、登壇スライドと共に順次公開していきます。 ▼開催レポート 全60セッション。約1,800名の技術者に向けたサイバーエージェントの全社技術カンファレンス『CA BASE CAMP』を開催 https://developers.cyberagent.co.jp/blog/archives/13613/ こんにちは！AbemaTVにてリードデザイナーを務めている松本(@ShunsukeM108)です。 この度サイバーエージェントグループでの技術カンファレンスCA BASE CAMPにて登壇させていただきました。サービスの立ち上げから運用までやってきて得られた
デザイナーの僕がいかにしてビデオゲームのUIから「インタラクション・デザイン」を学ぶのか | 超ゲームウォーカー!
普段、インターネット上ではただのゲーム好きとして活動（？）しておりますが、本職はWebサービスやスマートフォンアプリのUIデザイナーをやらせていただいております コウノ アスヤ（@asuyakono）です。 退勤後はイベントに登壇！土日はコンセプトデザインで習作！みたいな同僚を横目に、仕事の時間以外はもっぱら家にこもってゲームを遊び、プレイ後に感想を記事にしてネットに公開することが多いです。それがこのブログです。このブログではいつも「良いも悪いも正直に。なるべく平易な文で。」をモットーに書いてますが、記事のボリュームを考えたり、専門的すぎないように気をつけていると、どうしてもなくなく端折らざるを得ない話題というものがあります。 それは、ゲームにおける「インタラクション・デザイン」のことです。 「友達が少ない」「インドア」「両親が共働き」の３本揃いで、物心ついた時から１人で黙々とビデオゲーム
iPhone X対応におけるデザイン上の注意ポイント | fladdict
iPhone Xが発表されたわけですが、なにこのデザイナー泣かせの変態端末。 iPhoneのUI設計者グレッグ・クリスティが追い出されて、ジョナサン・アイヴがソフトウェア統括となったのが2014年。 iOS7のフラット化あたりから、どんどんとUI設計が置いてけぼりになった感がありましたが・・・ここにきてまたデザイナー泣かせの豪速球が。 ざっくりデザインガイドラインを読んでの、気になったところメモ。 画面サイズ サイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された。 想定されるインパクト 表示可能な情報量が増える 縦スクロール系コンテンツのコンバージョンが増加 スクロールで隠れるナビゲーションの必要性が低下 画面上部のボタンのコンバージョンが低下 ゲームなどの全画面イラストに、黒枠が出たり、見切れたりする グラフィッ
ペーパープロトタイピング入門 – 第4回 見やすいペーパープロトの描き方 | fladdict
ペーパープロトタイピング講座シリーズ。第4回は清書の仕方。絵心なんて必要ない、エンジニアリング的アプローチからのデザインスケッチの描き方講座。チーム共有やプレゼン用に、スピーディーで効率の良い清書のしかたを紹介する。（第3回は準備に時間がかかりすぎたので、第4回を先に掲載） シャーペンでアイデアを練る サインペン3種類で太さに差をつける マーカー3種類で濃淡をつける ポップアップや状態変化をポストイットで作る シャーペンでアイデアを練る 最初の段階では高速に試行錯誤するのが重要。 紙に関しては、いつもどおりペーパー・プロトタイピング・パッドを使用する。 シャーペンで描いては消してを繰り返し、あらゆる可能性を広範囲に試していく。とにかく手戻りを恐れずにガンガン描く。この段階では自分さえ理解できればよい。ある程度アイデアが固まってきたら「手早く」清書する。清書はチーム共有やテスト、プレゼンのた
ペンとふせんで！スマホUIのアイデアプロトタイピング - クックパッド開発者ブログ
検索事業部のデザイナー倉光です。 今回は、開発現場でアイデア発散フェーズにやっていることの一例を紹介したいと思います。UIデザインの手法として比較的知名度は高く、デザイナー以外でも学びたいという要望も多い「ペーパープロトタイピング」についてです。 前提として プロトタイピングにはフェーズと目的に応じて 様々な手法がありますが、今回は「小規模チームでアイデアをぽんぽん出し、伝え合うためのプロトタイピング」の話です。ユーザーに実際に評価してもらうためのプロトタイプの作り方についてはこの記事では割愛させていただきます。 また非デザイナーの方は「いやいや、デザイナーじゃないと画面なんてうまく書けないよ…」と躊躇してしまうかもしれませんが、本記事では社内のディレクター/エンジニア/インターン生が書いた成果物も掲載していますので、そちらも参考になると思います。 目次 目次 1.ペーパープロトタイピング
より良いデザインにするために大切にしたいと思っていること - クックパッド開発者ブログ
こんにちは。デザイナーの遠藤です。 私は今クックパッドiOS/Androidアプリのデザインを担当しています。 みなさんは、既存の機能を別のプラットフォームに追加する際に、あまり考えずにそのまま追加してしまい、後で後悔したことはないでしょうか？今回は、web版にある機能「料理の基本」をクックパッドアプリへ追加した時のことを交えて、より良いデザインにするために大切にしたいと思っていることをご紹介します。 料理の基本について レシピをみて料理を作っている際に、「あれ、半月切りって何だっけ？」「水にさらすってどれだけやればいいんだろう」のような、基本的なことさえわからず手が止まってしまったことはありませんか？クックパッドでは、そんな方のために料理の基本を提供しています。今回私は、この機能をiOS/Androidアプリのレシピページに追加する際、デザインを担当しました。 この機能の使い方は、レシピ
どのようにして高速に iOS アプリの UI を作り上げるか：動作モックの活用と実装時の UI 作りこみ - クックパッド開発者ブログ
Holiday デザイナーの多田です。 皆さんは Web アプリやモバイルアプリを開発する時、モックアップ作成にどれだけ時間を割いているでしょうか？もしくはモックアップを作成せずにすぐに実装に入るでしょうか？私はこれまで Web アプリ開発ではいきなり実装に入ることが多かったのですが、Holiday iOS アプリ の開発では Web アプリの時のように上手くいかないことに気づき、やり方を考え直しました。iOS アプリ開発の過程で、モックアップ作成や実装をどのように捉えるか、具体的にどう行うか、ということが自分なりに見えてきたので、それらについてご紹介します。 目的は、価値のあるプロダクトを速くユーザの手に届けること Web アプリやモバイルアプリの開発過程においてモックアップなどを作る目的は、あくまでも ユーザに届く プロダクトの価値を高めてそれを速くリリースすることです。適切な前準備は
iOS ヒューマンインターフェースの原則 — Medium
iOS のヒューマンインターフェースを理解するためにはまず UI 設計の原則を定めた聖典 iOS Human Interface Guidelines を読むことから始めなければなりません。ここにはプラットフォームの特徴から情報設計の原則、それぞれ何のための部品なのか、という解説がされています。なぜこうなったのか、なぜこれが良くてあれが駄目なのか、Apple の UI デザイナーは何を考えてこのような設計にしたのか、HIG ではそのようなところまでは説明されていないことがあります。いくら内容を丸暗記したとしても「 なぜ 」がわからなければ本質から理解したとは言えません。 よくある UI デザインにおける誤り、『磨りガラス効果がかっこいい』『アニメーションしておくとかっこいい』『ボタンは右配置の方が押しやすい』『色が綺麗』『流行っているから優れている』…などがありますが、そういうことではない
fladdict » スマホのUI考 〜 ボタンについて
SuperPopCamとか作ったときに、体系的な資料欲しいなぁーとか思ってたことのまとめ。 色々と自分の中の考えをまとめるためのメモ。世の中のアプリは機能を半分にして、減った予算分をUIの練り込みにつぎ込んだ方が絶対よいアプリになると思う。 書いてる作業が一番考えまとまるので、ちょぼちょぼあげていこうかと、まずはボタンから。 指の大きさの制約を受ける ・Webとスマホを比較した場合、最大の違い。 ・ピクセル単位でクリック位置を制御できるマウスポインタと違い、指は大雑把にしかタップ位置を指定できない。 ・このためAppleはボタンの最小サイズとして44pxというガイドラインを作っている。 ・視覚的に44px以下のボタンも実際のヒットエリアは大きめにする。 ・またこれに留まらず、ボタンとボタンの間のマージンは空けられるだけ空けた方が安全。 ・つまるところ「カッチリ」つめたボタンレイアウトのグラ
日経電子版 新聞アプリとしてのUI/UX
「日経電子版×Sansanアプリ開発プロジェクト成功への道〜アプリ開発者勉強会Vol.2」で発表したスライドです。 http://connpass.com/event/16187/
誰のためのデザイン？増補・改訂版を読んだ - ninjinkun's diary
自分が最初に元の誰のためのデザイン?―認知科学者のデザイン原論 (新曜社認知科学選書)（初版はPOETと呼ばれている*1 ）を読んだのは十数年前でした。4月に出たこの改訂版を読み返してみて、改めて感銘を受けました（そして内容をほとんど忘れていたのに気づきました）。 内容としては、エモーショナル・デザイン―微笑を誘うモノたちのために 、複雑さと共に暮らす―デザインの挑戦など後の書籍で検討された内容が盛り込まれて、ノーマン著作の集大成になっています。 自分がこの改訂版で注目しているのは、「6章デザイン思考」の追加です。 6章デザイン思考 正しい問題を発見するのがデザインである として、そのための手段としてデザイン思考が解説されます。 具体的にフレームワークとして取り上げられている人間中心デザインプロセスを見てみると、 観察→アイデア創出→プロトタイピング→テスト→観察… というサイクルになって
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザイン原則の実践｜dely design
快適なUIを持つアプリを作るために
できること
iOS のポップアップUIのクローンライブラリを作りました
ログイン - はてな
