入力時間11％減！書きやすいエディタのUIデザイン - クックパッド開発者ブログ
こんにちは、投稿開発部の佐野大河（@sn_taiga）です。 先日、クックパッドのiOSアプリでレシピのエディタ画面をリニューアルしました。今日はそのUIデザインの設計についてお話します。 方針は「簡素化」 エディタ画面は、レシピを考えて記録・投稿する人にとって重要な機能の一つです。レシピには材料や作り方、料理写真、タイトル、紹介文などさまざまな項目があり、頭の中にある料理をこれらの形に落とし込んでいくのはなかなか大変な作業でもあります。なので、レシピを書く際の手間を減らし、ユーザーがストレスなくレシピを書けることを目的に「簡素化」という方針を定め、改善に取り組みました。具体的に行ったことは大きく以下の二つです。 １.入力や編集のステップを少なくする 以前のエディタ 新しいエディタ 以前のレシピエディタはひとつの項目を選択するとモーダルが開き、入力を終えたら元の画面へ戻ってくるウィジェット
OOUI視点で、iOS写真アプリを分析・考察してみた | Goodpatch Blog
この記事はGoodpatch UI Design Advent Calendar 2018の16日目の記事です。 私はOOUI（オブジェクト指向ユーザーインターフェース）に関する勉強をし始めてから、世の中のアプリが全てオブジェクトにしか見えなくなりました（笑）。まだ、完璧に理解しきれていない部分もあるかもしれませんが、Appleの純正な写真アプリを分析・考察しながら、私なりにOOUIの理解を深めたいと思います。 OOUIとは システムを開発する際には、オブジェクト指向（Object-oriented）という設計論があります。その設計論をUIデザインに導入することをオブジェクト指向ユーザーインターフェース（Object-oriented user interface、以下「OOUI」という）と呼びます。 オブジェクト指向（Object-oriented）とは、オブジェクト同士の相互作用として
iOSにおける半モーダルビューの解釈｜usagimaru
iOS 8の頃より見かけるようになった新しいモーダルビューの形態と、その設計思想、UI としての使われ方について考察します。この新しいモーダルビューのことを私は他のモーダルビューと区別する意味合いで「半モーダルビュー（Semi-Modal View）」と呼んでいますが、実際にガイドライン上でそのような定義がされているわけではありません。「ハーフモーダル」という呼び方も耳にすることがありますが、私は後述の理由からこの呼び方は推奨していません。 今回はパターンとしてあえて区別することで他のモーダルビューとの違いを明確にし、その特徴や仕組み、正しい設計とはどのようにあるべきかを理解しやすくすることを目指します。なお、2019年版のHIG（すなわちiOS 13対応版）からはモーダルビューのスタイルの一つとして Sheet の記述が現れるようになりましたが、今回は Sheet スタイルに限らずもう少
esaのデザインの話 - 自分たちのWebサービスを作るデザイナーとしてやっていること / Design Talk of esa - Speaker Deck
ハッカーズチャンプルー2018でお話させていただきました http://hackers-champloo.org/2018/ https://esa.io/
Sketchのシンボル活用で新規サービスの開発効率が2倍になった｜北川レオ / hicard
先日、SNSを使ってカンタンに募集することができるbosyuというサービスをリリースしました。 bosyuのデザインを作っていく中で、sketchのシンボルを活用してみたのですが、とても効率よく作業を進めていくことができました。Basecampに入った当初、ほとんどシンボルが使えていなかった頃に比べると開発効率が2倍ほどになったと思います。 あくまでも僕流なので、「自分はこうしてるよ。」っていうアドバイスを募集します！！！(bosyuリンクを記事の最後に貼っておくのでぜひ応募お願いします！) 命名規則はAtomic Designを参考する僕は基本的にAtomic Designと言われる考え方をベースにシンボルを作っています。Atomic Designって何やねんって方はこちらの記事がわかりやすいので、ぜひ読んでみてください。 カンタンに言うと、デザインを小さい順からAtoms(原子)、Mo
基本機能からプロトタイプ制作まで！用途別・Sketchのおすすめプラグイン50選｜Goodpatch Blog グッドパッチブログ
こんにちは、UIデザイナーのサイです。私が普段のデザイン作業で使っているツールはいくつもありますが、使う頻度がもっとも高いのはSketchです。UIデザインに特化した機能のほか、便利なプラグインがあることもSketchの魅力のひとつです。この記事では、Sketchのおすすめプラグインを用途別でご紹介します。 1. 基本機能の強化 Find and Replace Text plugin for Sketch https://github.com/thierryc/Sketch-Find-And-Replace 選んだレイヤーの中のテキスト、あるいはファイルの中にあるすべてのテキストを検索と置換できるプラグインです。検索の範囲は自分で設定できるので、間違えてテキストを置換することを防げます。シンボルのOverridesのテキストもサポートするので、たくさんシンボルを使っても心配なく使えます。
モードレスデザイン｜ai
はじめて iMacG3 を使った時、私はとても前向きな気持ちになった。説明書を読まなくても何をどうすればいいの分かったし、自分の思い描いた通りに動かすことができた。 道具は使う人の能力を拡張させると言うけれど、私はあの丸いマウスと一緒に、文章を書いたり、絵を描いたり、本当に何でも出来る気がしたのだ。 それは Mac だけではなかった。iPhone も、iPadも、Apple 製品はいつも私を高揚させた。なぜ私はこんなにも惹かれるのか。不思議に思いながらも、私は Apple 製品を追いかけてきた。 どうして？ ... 実はその秘密は既に明らかになっている。 それは、モードレスだからだ。 直感的だとか、シンプルだとか、一貫性があるとか、そういったものは表出された一部にすぎない。 この秘密は、 今から 9 年も前にインターネットに公開されたテキストにあっさり書かれている。ソシオメディアの上野学
これぞプロのデザインテクニック！UIデザインの印象がよくなるデザインの知識とテクニックのまとめ
Webサイトやスマホアプリをデザインする際に、カラー・タイポグラフィ・レイアウトなどはどのようにすればうまくいくのか、ユーザーインターフェイスのデザインが一手間加えるだけでよくなるデザインの知識とテクニックを紹介します。 10 cheat codes for designing User Interfaces 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 1. テキストは重要、より大きく！ 2. 複数のブラックを作成しない 3. カラーを理解するためには数学が大切 4. 空白スペースを活用してグループ分け 5. カラーを使用して行を区切る 6. ドロップシャドウの代わりに乗算を使う 7. 一行の長さ 8. 新しいデザインに執着しない 9. ブランドカラーをアクセントとして使用する 10. リストにおけるビュレットのデザイン 1
本当はこんな話をしたかった。CXO Night #2｜こばかな
こんにちは。THE GUILDのこばかなです。昨日CXO Nightというイベントに登壇してきました。時間が限られていたので、あまりうまく喋れなかったなぁと反省しつつ、色々と補足しながら私が話した内容をご紹介します。 自己紹介をお願いします。私は多摩美のグラフィックデザイン学科を卒業し、新卒でDeNAに入社しました。1年間UIデザイナーとして働いた後に転職し、昨年4月からTHE GUILDで働いています。 現在は複数クライアントとお仕事をしていて、新規事業を立ち上げたり、UIデザイン、UXコンサル、デザインリサーチなどをしています。 今の会社で仕事をしようと思った理由は？大学では第一線で活躍しているクリエイターの教授陣と関わることが多かったので、デザインの奥深さや厳しさをぼんやりと感じていて、自分も将来は教授たちのような偉大なデザイナーになりたいと考えていました。 しかし社会人になって目の
リデザインの成功事例から考えるデザインと売上の関係｜Goodpatch Blog グッドパッチブログ
デザインが以前よりもビジネスの世界において重要視されるようになった今日において「デザインって売上に関係あるの？」という質問が頻繁に交わされるようになったのではないでしょうか。 今回は実際に売上の向上につながったリデザイン例を紹介・考察し、売上とデザインの関係を考えたいと思います。 Meiji The Chocolate Meijiはこだわりの良質なカカオを使った高級路線のチョコレートを開発し、2014年から初代「The Chocolate」を売り出していました。申し分のない品質の商品ではあったものの、売上は伸び悩み、発売1年でリニューアルチームが結成される結果になりました。初代のパッケージでは文字やカカオの写真を配置し、質の良いカカオを使っていることを伝えたかったものの、消費者には見た目としてのカカオはあまり認知されておらず商品は「少し高いチョコレート」という受け取られ方をされてしまいまし
検索結果ページにおけるベストプラクティス
Nickはロシアのセントピーターズバーグ出身のソフトウェアデベロッパー/ブロガーです。彼による他の記事はこちらをご参照ください。 検索とは、ユーザーとシステム間の会話のようなものです。ユーザーは必要な情報をクエリとして表現し、システムはその返事として検索結果を提示します。そのため検索結果ページは、検索体験において非常に重要な部分です。検索結果ページはユーザーの情報のニーズを導き出して会話を成立させる機会を提供するものなのです。 この記事では、検索結果のUXを向上させる10のベストプラクティスを紹介したいと思います。 １. 検索ボタンが押されたあとユーザーのクエリを消去してはいけない オリジナルテキストは残したままにしてください。クエリの再構築は、数ある情報探索においてとても重要な段階です。探している情報が見つからない場合、ユーザーは元のクエリを少し修正して再び検索しようとします。これをユ
How to fix a bad user interface
Hey! This is an excerpt from my book Designing Products People Love, which was published by O'Reilly in January 2016. Learn more about the book and the 20+ product designers from Facebook, Twitter, Slack, etc. who were interviewed about how they work. Have you ever experienced a user interface that feels lifeless? Have you created a UI that just seems to be missing...something? If that's the case,
iPhone X対応におけるデザイン上の注意ポイント | fladdict
iPhone Xが発表されたわけですが、なにこのデザイナー泣かせの変態端末。 iPhoneのUI設計者グレッグ・クリスティが追い出されて、ジョナサン・アイヴがソフトウェア統括となったのが2014年。 iOS7のフラット化あたりから、どんどんとUI設計が置いてけぼりになった感がありましたが・・・ここにきてまたデザイナー泣かせの豪速球が。 ざっくりデザインガイドラインを読んでの、気になったところメモ。 画面サイズ サイズは従来のベースであった4.7インチの375pt x 667ptから、375 x 812ptに。縦方向に145pt追加された。 想定されるインパクト 表示可能な情報量が増える 縦スクロール系コンテンツのコンバージョンが増加 スクロールで隠れるナビゲーションの必要性が低下 画面上部のボタンのコンバージョンが低下 ゲームなどの全画面イラストに、黒枠が出たり、見切れたりする グラフィッ
Macintosh から iPhone へ受け継がれるデザイン原則｜Goodpatch Blog グッドパッチブログ
こんにちは。iOS Developer（当時）のusagimaruです。 先日WWDC 2017が閉幕しましたが、グッドパッチでもデベロッパーを中心にWWDC報告会が開催されるなど、とても注目度が高いイベントでした。個人的には、リフレッシュレートの120Hz化によって今後UIやコンテンツがどのように変わるのか、UIKitレベルで統合されたドラッグ＆ドロップによって体験がどのように変わるのか、HEVC/HEIFコーデックによってコンテンツはどこまで進化するのか、ARKitによってUIがどのように進化するのかが気になります。 WWDCで気になったデザイン系セッション さて、6月後半でそろそろWWDCの熱狂が落ち着いてきた頃合いだと思いますが、平熱に戻った今だからこそ改めてWWDCを振り返ってみたいと思いました。デベロッパーとしては、これからがある意味でWWDC本番なのかもしれません。今回も気に
これからのUXデザインにおけるモーションデザインの重要性
モーションデザインとは空間の関係性や、機能性、あるいは意図を美しく流動的に説明する際に使われます。「モーション」というと大げさに聞こえるかもしれませんが、効果的に使用したものはさりげなく自然なものです。よく考えられたモーションデザインは、従来のデザイン要素よりもよりUXを高めることができるはずです。 今回はモーションデザインの基礎や、いつ、そしてなぜモーションデザインを使うべきなのか、そしてより良いUXのためにどうモーションデザインを使えば良いのかをお話ししましょう。 モーションを基盤としたデザイン モーションは物語を伝えることができます。アプリがどのように構成され、何ができるのかを表現できるのです。モーションはナビゲーションを再定義し、インタラクションに新たな深度をもたらし、より自然な体験を作り出すのです。クリックしたボタン、画面のトランジションのひとつひとつに物語があることを、モーショ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
そのUI、実は簡単じゃないんです
http://www.life-is-bitter.com/entry/ui_checklist
日本語アプリケーションのインターフェイスデザイン（公開版）
より良いUXを実現するための開発プロセスとは / Development process for better UX
視差効果を減らす設定をオフにした - すてィーろ.swift - Medium