サクサク感をデザインする
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog ヤフオク!アプリ開発部の中島(@52shinNaka)です。今日はデザイナーの立場からサービスの体感速度をテーマに記事を書いていきます。 サクサク感の正体 サクサク動くサービスと聞いて、どんなサービスを思いつくでしょうか？サクサク動くを分解すると下の２要素に分かれると思います。 表示速度は、純粋にコンテンツが表示されるまでの時間、体感速度は、実際にプロダクトを触って感じられた時間の長さです。触っていて「サクサク動く！」と感じられるサービスは、上の２つの要素が満たされていることが多いです。 表示速度はサービス利益に直結する デザイナーが日々の作業の中で表示速度を意識するタイミングは少ないかもしれません。しかしグロースステージにある多
Sticky Sidebar ⬆⬇
Sticky Sidebar 😎 Sticky Sidebar ⬆⬇ is a pure JavaScript plugin for making smart and high performance sticky sidebar, works with sidebar if it’s taller or shorter than the viewport, integrated with resize sensor to re-calculate the dimensions automatically when the size of sidebar or its container is changed, supports jQuery/Zepto and compatible with Firefox, Chrome, Safari, and IE9+. Source can b
Design patterns
User Interface Design patterns are recurring solutions that solve common design problems. Design patterns are standard reference points for the experienced user interface designer. Design patterns provide a common language between designers. They allow for debate over alternatives, where merely mentioning the name of a design pattern implicitly carries much more meaning than merely the name. Dwell
U-NEXT キャリア
U-NEXTは、2007年にサービスを開始した動画配信サービスのパイオニア。「ひとりひとりに、最高の時間を配信する。」 をミッションに、いま次のステージに進むべく、新たなメンバーを積極採用しています。会社についての情報はコーポレートサイトもぜひご覧ください。
Button Design Over the Years – The Dribbble Timeline | Toptal®
Digital design and UIs are evolving at an incredible pace, and the styling of buttons along with it. The Dribbble Button Timeline shows us how button styles have developed over the past decade. authors are vetted experts in their fields and write on topics in which they have demonstrated experience. All of our content is peer reviewed and validated by Toptal experts in the same field. Digital desi
デザインするのを忘れがちなデザイン要素のまとめ
ロゴ、ナビゲーション、ヘッダ、見出し、画像など、Webページやスマホアプリには、さまざまなデザイン要素が必要です。もちろん、これらを忘れることはないでしょう。 思わず、デザインするのを忘れがちなデザイン要素を紹介します。 もちろん、ここで紹介する50個すべてが必要ではありませんが、プロジェクトごとに合わせてご利用ください。 そういえば、フォームのサンキューページをいつも忘れるデザイナーさんが昔いました。 50 Things You (Probably) Forgot To Design 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ログイン・サインアップ関連のデザイン要素 ファースト エクスペリエンスのデザイン要素 小さいけれど大切なデザイン要素 割と目立つデザイン要素 プロフィールスタッフのデザイン要素 ユーザーのさまざまな
事例から学ぶ！Webアニメーションのテクニックまとめ
Webデザインをする上で欠かせなくなってきているアニメーション。PCやスマホなど対応デバイスが増えたことで、クリエイティブに対しての重要度も高まってきています。実例を元にどんなWebアニメーションが良いのか紹介しています。 テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社 調査期間：2021年8月12日～8月16日 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名 調査手法：インターネット調査 本稿は、Studio by UXPinのブログ記事を了解を得て日本語翻訳し掲載した記事になります。 本記事は、Nick Babich氏によって投稿されました。 機能的で楽し
The worst volume control UI in the world
About “wants”, “cans”, “needs”, and “shoulds”The original reddit post has now hundreds of examples of terrible volume UI, and it keeps growing — a fun exercise/joke, that can strengthen one’s creative muscles and ability to think outside of the box. People have been participating simply for the fun of coming up with the most absurd and weird interactions and interface elements. But there’s definit
キャンセルのキャンセル問題から考えるダイアログデザイン｜Goodpatch Blog グッドパッチブログ
この文脈では、「編集内容のキャンセル」という処理を続行しても良いかをユーザーに確認しています。続行に同意したい多くのユーザーは直感的に同じ表記の「キャンセル」を押したくなるでしょう。しかしそれでは編集のキャンセルが実行されません。 このキャンセルボタンが意味するのは、「『編集内容をキャンセルする』のキャンセル」なのです。つまり、ユーザーが望み通りに編集内容を破棄するためには、反対側のOKボタンを選ぶべきなのです。このような「キャンセルのキャンセル」は二重否定で意味がややこしくなるので避けなければなりません。 ここで「キャンセルのキャンセル」にならなければ良いということで、次のようにボタン名を変えてみました。 これでもう迷うことは無くなりましたか……？ 私はこの修正は誤りだと判断します。「はい」「いいえ」は結果を予想しにくい表現なので、ダイアログのアクションボタンに用いることはあまり適切では
Semantic UI
Design Beautiful Websites Quickly Semantic is a development framework that helps create beautiful, responsive layouts using human-friendly HTML. Concise HTML Semantic UI treats words and classes as exchangeable concepts. Classes use syntax from natural languages like noun/modifier relationships, word order, and plurality to link concepts intuitively. Get the same benefits as BEM or SMACSS, but wit
完璧なテキストフィールドのための14のルール
アプリやウェブアプリケーションは、ユーザーからの入力がなければ何も変化しません。プロダクトデザイナー、開発者、そしてプロダクトマネージャーがそれを理解することはとても重要です。 テキストフィールドは、ユーザーが短いテキストを入力するための基本パーツです。どのようなアプリでも、個人情報の入力を求める小さなテキストフィールドを必ず目にします。 この記事では、テキストフィールドを中心にデータ入力を改善する重要な要素について見ていきたいと思います。ただし、すべてのルールには例外があるということを念頭に置いておいてください。 わかりやすさ わかりやすいテキストラベル ユーザーはどんな種類のデータをフィールドに入力するべきか知りたいと考えます。明確なラベルテキストはユーザーにそれを伝えるメインの手段になります。もちろん、アイコンを頼りにフィールドの意味を理解することもあります。例えば、ユーザーが虫眼鏡
Weex
Lightweight low footprint，simple syntax，and easy to use Help you build real Native App Different from "web app" , "HTML5 app" and "hybrid app", you can use Weex to build a real mobile app. More intimate is that you write the code is relatively simple, just use HTML, CSS, Javascript can build native applications.But in fact, the bottom of the application is Objective-C or Java. At the same time, We
Prottとsketchとzeplinのススメ
46. Skechのexport • 複数要素に対する一括スライス設定ができる • 背景（写真や図形など）を含めず、アイコンなど必要 な要素だけを背景透過でexportすることができる • iOSアプリに必要な等倍、2倍、3倍の3種類の サイズのassetsを一回でexportすることができ、 ファイル名の末尾に”@2x” , “@3x” を自動的 に付与してくれる
ベータリリース開始！BacklogのUIアップデート (2) 〜変更点とデザイナーのこだわり編〜 | Backlog ブログ
仕様や画面は現行バージョンと異なる可能性があります。 Backlogの最新版についてはこちらからご確認ください。 こんにちは。最近海外ドラマがマイブーム。Backlog Refresh UI Webデザイン担当の中川です。 先日公開したベータリリース開始！BacklogのUIアップデート (1) 決意に至る経緯 では、Backlog Refresh UI の経緯についてご説明させていただきました。 第2弾のこの記事では、BacklogのUIをアップデートさせるために、実際にどういうことをして、どう変わったのか、デザインという観点からご説明します。 今回のリニューアルのコンセプト まず、今回のリニューアルで、やること、やらないことを決めました。 やること 画面をスッキリさせる モダンなUIにする やらないこと 大規模な画面構成の変更 既存機能の削除 やらないことを決める上で大切にしたのは、な
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - storybookjs/storybook: Storybook is the industry standard workshop for building, documenting, and testing UI components in isolation
chat bot UI by Angular (ng-japan meetup)
CodeMyUI
Interaction Museum | Techniques
Backlog UI リニューアルの舞台裏 / Backlog Renewal UI
UIkit
