消えゆくスクロールバー｜3inowayosuke
最近スクロールバーを見かけなくなった気がします。ざっと調べてみると、スクロールバーはすでに消え始めており、今のスタンダードはスクロールインジケーターになってる様です。そうかと思えば、そのスクロールインジケーターすら消え始めている状況です。 ▼１．消えゆくスクロールインジケーター1.1 フェイスブックiOSアプリ フェイスブックのアプリでは、もはやスクロールインジケーターすら表示されていません。ご自身のスマートフォンで見てみると、画面右側には何も表示されないはずです。 1.2 電話帳 iOS 実は電話帳からもスクロールインジケーターが消えています。インデックスが表示されているので、スクロールインジケーターとインデックスが重なってしまうのを防ぐためと思われます。 1.3 メモ帳 iOS メモ帳ではスクロールをするまでインジケーターは表示されません。スクロール後は一定時間が経つとスクロールインジ
料理におけるＵＩとＵＸ｜田村浩二（タム3）Food Expander
最近様々な所でＵＩ，ＵＸという言葉を見かける。少し前までは何のことか分からず意識もしなかったが、異なるジャンルの方達と触れ合う機会が増えたことで自然と考えるようになってきた。 ＵＩとは『ユーザーとの接点』ＵＸとは『ユーザーの体験』。このように言われている。では料理におけるＵＩ，ＵＸとは何なのだろう？ 先ずはＵＩ。料理、レストランにとってこのＵＩという部分はかなり重要だ。接点という意味で、椅子テーブルから始まりカトラリー、お皿やグラス。様々な食材。もっと広く言えば空間内に流れる音楽やサービスするスタッフもそういえるだろう。如何にスムーズに料理に触れてもらうかを考えた時、盛り付けという部分もＵＩに入ると僕は考える。 ＵＸ（料理を食べる事で得られる体験）は、その空間で感じる事、サービスから感じる事、コース全体から感じる事、そして一皿ごとに感じる事と多岐にわたる。その一つ一つにどのようなアプローチ
UI改善のためにエンジニアに仕様を構造化してもらったら再設計がめちゃくちゃ捗った話｜鈴木 健一 / PLAID & Ex.STANDARD
この記事はPLAID Advent Calendar 9日目の記事ですUI改善の前提理解、うまくできていますか？皆さんはこれまで着手してこなかった既存画面のデザイン改善をする時、どのように進めているでしょうか。 自分がプレイドで所属しているreBAISUというチームでは、タタキとして定義したスタイルガイドを旧来の画面に適用しながらUI改善する取り組みをしています。 取り組み方として、改善対象となる画面の仕様を理解しながら課題を見つけ、解決策を検討していく流れになるのですが、この仕様理解が難しいと感じていまして。 なんとか前提理解を促せる方法はないものかと検討した結果、対象画面の構成要素をひとつずつ紐解いていく方法で理解していく「デザインの逆行分析」という方法をとっていました。 デザインの逆行分析とは「リバースエンジニアリング」とも呼ばれる手法で、その考えをデザインでも応用しようというもので
フジロック来場者の約4割が使用した公認アプリ「FUJI ROCK `19 by SoftBank 5G」開発ストーリー｜PARTY
今年の7月にローンチされたFUJI ROCK FESTIVAL '19の公認アプリ、「FUJI ROCK `19 by SoftBank 5G」。 アーティストラインナップ、タイムテーブル、マップ、ライブカメラ、飲食店、グッズ情報など、フジロックを楽しむために必要な情報をぎゅっとつめこみ、初めて参加する方でも、毎年参加するような常連の方でも、これ１つでフェス全体をとことん楽しめるアプリを目指しました。 事前の情報収集から当日の会場まで、便利に使える機能を集めとにかくストレスなく使えるように フジロック常連の開発陣が考え抜いたUIと、サクサク動く気持ちよい挙動を実現した、アプリ開発の裏側にせまります。 <GUESTS> Technical Director 渡島 健太（Whatever） Designers 北田 荘平（THE GUILD） 小玉 千陽（THE GUILD） Engineer
毎日見にいきたくなるレポート画面のデザイン｜taiga / 佐野大河
こんにちは、デザイナーの佐野大河@sn_taigaです。先日、クックパッドのiOSアプリで「キッチンレポート」という自分のレシピ投稿の活動の成果がわかる機能をリニューアルしました。今日はそのデザインプロセスについてお話します。 キッチンレポートとはキッチンレポートでは、自分の投稿したレシピやマイページへのアクセス数が見られる他、個々のレシピのアクセスランキングやつくれぽ（レシピを見て料理した人から届くメッセージ）などが見られます。レシピが保存された数や印刷された数もわかり 「自分のレシピが誰かの役に立っている！」という実感を持つことができます。 他にも「公開レシピが30品になりました！」や「あなたのレシピが人気順検索でトップ10入りしました！」など、自分が投稿したレシピに関する嬉しい出来事を残してくれる機能もあり、ユーザーの継続的なレシピ投稿や日々の料理のモチベーションにも繋がっています。
ブサイクなUIデザインを劇的に改善するための10のチェックリスト｜Taiki IKEDA｜note
お久しぶりです、イケダです。UIデザインをする上で、これらを意識するだけでビジュアルの質が劇的に向上するというチェックリストを作ってみました。UIデザインの参考にしてください。 左右の余白は揃っているか 左右の余白をしっかり揃えることは最も初歩的で、カンタンに実践できるTipsです。あまりに初歩的すぎて悪い例を探すのに苦労しましたが、MoneyF●rwardさんが題材として非常に優秀でした。左右の余白は14~20ptの間で揃えるのが定石です(迷ったら16ptにしておこう)。どうしても左右の余白を持て余してしまうという場合は右の改善例のように中央揃えに逃げるのも手です。 フォントの大きさは正しいか fontサイズはまず、「読ませるテキストの大きさ」を決めてから、それを基準に組み立てていきます。読ませる文字、webでいう<p>タグは14~16ptに設定し、その文字とのバランスを見て<head>
いちばん詳しい Sketch / XD / Figma / Studio の比較 〜1. 導入と背景知識｜平田 / U-NEXT
いちばん詳しい Sketch / XD / Figma / Studio の比較 〜1. 導入と背景知識 平田です。普段は個人のブログに記事を書いているので、ちゃんとしたnoteを書くのはこれが初めてです。 Sketch, Adobe XD, Figma, InVision Studio について徹底的に比較を行ったので、知見をまとめたいと思います。量がかなり多いので、いくつかの記事に分けて紹介します。 1. 導入と背景知識 ◀イマココ 2. 基本項目の比較 3. デザイン機能比較 4. シンボルとスタイル 5. プロトタイピングとコラボレーション 6. まとめ 今回はこの連載記事の導入と、各ツールを比較する上での背景的な情報をまとめます。 概要## この記事に含まれる内容 🙆♀️ - Sketch, Xd, Figma, Studio の選定基準 - Sketch, Xd, F
Kactus
Meet KactusIntroducing true design version control without changing your tools. Manage changes, document work and keep your team in sync. Download for macOS Experience GitEnjoy all the benefits of git with our simple UI, leaving you more time to focus on what matters — your design. Streamline your workflowCreate branches, collaborate with other designers or developers, and commit changes without t
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI
モバイルWebのUIを速くする基本テクニックがわかる──Google I/O 2016 High Performance Web UI 川田寛（ピクシブ株式会社） こんにちは、ふろしきです！ 私はHTML5 Experts.jpで、過去2年ほどGoogle I/Oの情報を発信し、Web技術の変化についてお伝えしてきました。振り返るとGoogleは、2014年にモバイルWebの提唱と技術要素の拡大を図り、2015年からは「RAIL（モバイルWebが目指すべきパフォーマンス指標）」や「Progressive Web Apps（アプリのように振る舞うWeb）」といった、モバイルとの親和性が高いWebを作り出すための”考え方”を推し進めました。今年2016年は、さらにそれを踏み込んでいったという感じがします。 今回のI/Oで取り上げるのもそのひとつ。毎度お馴染みGoogle Developer A
とある求人サイトをデザインリニューアルした話｜Yoko Nishida
副業で「コデアル」という求人サイトのデザインリニューアルをしました。このリニューアルでは、何をやったのかを振り返ってみようと思います。 1. プロジェクト概要コデアルはリモートワークで副業をしたい方向けの求人サービスです。主にエンジニアやデザイナーに手伝って欲しいIT系スタートアップの求人案件を紹介しています。 ※リニューアル前のデザイン ミッション このプロジェクトで自分自身に課していたミッションは3つ。 1. 情報設計の見直し ユーザーが求人を探しやすい＆応募しやすいように情報整理する。 2. 汎用性のあるUIを提案 エンジニア特化ではなく、デザイナーやディレクターにも使いやすいUIに改修する。 3. デザインシステムの構築 ブランド / カラー刷新に伴うスタイル変更、一貫性のあるUI設計ができるようデザインガイドラインを作成する。 主な担当範囲 情報設計、UIデザイン、デザインガイド
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Wires jp on Behance
UI Interactions of the week #174
情緒の設計
TikTokやSnapchatが覆す、アプリデザインの「常識」
Gestalt
Mobile Design Inspiration
Muzli - Design Inspiration
UltraUI | UI Design Inspiration
Collect UI
UI Movement - The best UI design inspiration, every day
