detailsとsummaryタグで作るアコーディオンUI - アニメーションのより良い実装方法 - ICS MEDIA
アコーディオン型ユーザーインターフェイス（UI）はウェブページでよくみられる表現です。巷ではさまざまな方法でアコーディオンUIを作る方法が紹介されていますが、みなさんはどのような方法で実装していますか？ 見た目だけでなくアクセシビリティ対策までしっかりとできているでしょうか？ <details>要素と<summary>要素は、アコーディオンUIを実装するのに最適です。過去にIE対策として<button>要素や<div>要素、<input>要素などでアコーディオンUIを作っていた方は、アクセシビリティ対策が簡単にできるので、<details>要素と<summary>要素の採用がオススメです。 この記事では、<details>要素と<summary>要素がアコーディオンUIに最適と言える理由と、HTMLのマークアップからCSSでのスタイリング、JavaScriptでのアニメーション制御まで順を
一貫性のある自然さを生み出す、「Ameba」らしさを加速させるアニメーションシステム | CyberAgent Developers Blog
みなさんは、普段UIをデザインする中で、「アニメーション」についてどれほどの意識を割けているでしょうか。 極端な事を言えば、ほとんどの状況においてUI上でアニメーションは存在しなくても成立してしまいます。 それはなぜかといえば、UIは主にユーザーの入力に対して特定の画面を出力したり、内部ステータスを変更するなどの必要条件を満たすことで目的が成就できてしまうからです。 上の画像のように、入力の示唆と結果の画面さえ描画できていれば、その間を繋ぐアニメーションは必ずしも必要では無いのです。 では、アニメーションの必要性はどこに見い出すべきなのでしょうか。 そもそも不要なものなのでしょうか？ OSのガイドラインからアニメーションを考える このような時は世界の御大にご意見を仰ぐのが正攻法です。 まずはGoogleから、Material DesignのUnderstanding motionでは、アニ
ゲームUIブログ
Search for: Cancel 異世界グルメ食堂 異世界転生×モンスター飯 超次元彼女: 神姫放置の幻想楽園 ビックリマン・ワンダーコレクション 星になれヴェーダの騎士たち テンペスト 機兵とドラゴン サバイバーガールズ パンドラノヴァ 熱戦少女 ウォッチャー・オブ・レルム プリストンテールM デーモンスクワッド 異世界傭兵団のそだて方 ダークオリンポス：闇の女神 ファントム オブ キル -オルタナティブ・イミテーション- 1 of 87123…87次へ »
ユーザーテストサービスのUIscope | UIscope
ユーザーがどのようにサービスを使っているのか。 利用シーンが最短1日で届く、 ユーザーテストサービス。 いますぐ無料で試してみる UIscope とは？ 「高品質なユーザーテストを 最も安く・早く・簡単に」 ユーザーがサービスを使っている様子を 動画形式でお届けする、 ユーザーテストサービスです。 ユーザーテストとは
UIやUXにパクリの概念はあるのか？ デザイン会社 ビートラックス: ブログ
“優れた芸術家は模倣し、偉大な芸術家は盗む “という言葉を聞いたことがあるかもしれない。ピカソが言ったとか、スティーブ・ジョブスが引用したとかで、デザインの世界では一つの基準にもなっている。 模倣は良くないが、アイディアを盗むのはアリということか？ これに関して、以前にインスパイアとパクリの違いをまとめた。クリエイティブな世界では誰もが何らかの理由で誰かに影響を受けており、100%オリジナルはかなり稀であるという話。ざっくりと考えてみると下記の感じなのかなと思う。 パクリ: バレたら困るインスパイア: バレた時の言い訳として使うオマージュ: わかる人にだけにわかってもらいたいリスペクト: 他のクリエイターに気づいて欲しいパロディー: バレなきゃ困るどこからがアウト？インスパイアとパクリの境界線とは そして最近ふと思った。アートや音楽、ロゴやイラストのパクリはあるが、UIやUXにもパクリとい
Building a switch component | Articles | web.dev
Building a switch component Stay organized with collections Save and categorize content based on your preferences. A foundational overview of how to build a responsive and accessible switch component. In this post I want to share thinking on a way to build switch components. Try the demo. Demo If you prefer video, here's a YouTube version of this post: Overview A switch functions similar to a chec
Building the Google Photos Web UI
A few years ago I had the privilege of being an engineer on the Google Photos team and part of the initial launch in 2015. A lot of people contributed to the product — designers, product managers, researchers, and countless engineers (across Android, iOS, Web, and the server) to name just some of the major roles. My responsibility was the web UI, and more specifically the photo grid. We wanted to
Goodpatch新卒UIデザイン研修の設計—ソフトウェアデザイン概論と基礎理論—｜Goodpatch Blog グッドパッチブログ
Goodpatchでは職種ごとにさまざまな新人研修プログラムを用意しています。2020年の新卒UIデザイナー向けには、4月から6月にかけてUIデザインに関する基礎的な講義や演習、課題制作といった集中的な研修を行い、UIデザイナーとして必要な基礎知識を身につけてもらいました。 UIデザイン研修といってもいくつかにコースが分かれており、今回私が講師として担当した部分では「ソフトウェアデザイン」をテーマに講義を行いました。 以下の講義のうち私が担当した、ソフトウェアデザイン概論、インタラクションデザイン基礎、モードレスデザイン基礎、UIモデリング基礎について簡単にご紹介いたします。 UIデザイン研修—ソフトウェアデザイン編—講義シラバス ソフトウェアデザイン講義の設計 UIデザイン新人研修は全体構成を「ビジュアルデザイン編」「ソフトウェアデザイン編」と二分し、それぞれの専門性を深堀りできる形を採
日本語向けフォントスタックの現状 - yuhei blog
日本語のウェブサイト向けのフォントスタックの現状と無難な設定についてまとめた。sans-serif、serif、system-uiのそれぞれの総称フォントファミリーに基づいて、主要な端末（Windows、Mac、iOS、Android）のフォントの搭載状況を整理する。 sans-serif まず、Windowsはメイリオ一択だと考えたほうが良い。游ゴシックはWindows 8.1ではかなり細く、Windows 10でも一般的なフォントと比べると少し細いのが問題だ。ハック的に回避する方法はあるものの、積極的に採用したくはない。メイリオはWindowsユーザーにとって馴染みがあり、最も問題になりにくいフォントだと考えられるため、あえて別の選択をする必要性は低いと思う。 Yu Gothic UIという選択肢もあるが、本文向きでは無さそうだ。 Macでは問題なく游ゴシックが利用できるので、ヒラギノ
Design for Offline
No internet? No problem. Make your product come alive with offline design Nearly 1.6 billion people around the world live outside the range of mobile internet networks. Millions more bounce in and out of network connectivity when on-the-go. Wi-Fi access may also be scarce, or the cost of mobile data prohibitive. In Uganda, for example, internet access can cost nearly 11% of monthly expenses. Peopl
入力時間11％減！書きやすいエディタのUIデザイン - クックパッド開発者ブログ
こんにちは、投稿開発部の佐野大河（@sn_taiga）です。 先日、クックパッドのiOSアプリでレシピのエディタ画面をリニューアルしました。今日はそのUIデザインの設計についてお話します。 方針は「簡素化」 エディタ画面は、レシピを考えて記録・投稿する人にとって重要な機能の一つです。レシピには材料や作り方、料理写真、タイトル、紹介文などさまざまな項目があり、頭の中にある料理をこれらの形に落とし込んでいくのはなかなか大変な作業でもあります。なので、レシピを書く際の手間を減らし、ユーザーがストレスなくレシピを書けることを目的に「簡素化」という方針を定め、改善に取り組みました。具体的に行ったことは大きく以下の二つです。 １.入力や編集のステップを少なくする 以前のエディタ 新しいエディタ 以前のレシピエディタはひとつの項目を選択するとモーダルが開き、入力を終えたら元の画面へ戻ってくるウィジェット
ソシオメディア | OOUI – オブジェクトベースのUIモデリング
最近、OOUX という言葉を見聞きしました。これはオブジェクト指向の利用者体験（Object-Oriented User Experience）のことで、いくつかの記事を読んだところ、アプリケーション設計において画面とデータを対応づける際にオブジェクトを手掛かりにするという方法論のようです。つまり OOUX は「オブジェクトベースのUIモデリング」と言い換えることができそうです。そうすると実は以前からそのようなデザイン手法はあり、「OOUI（オブジェクト指向ユーザーインターフェース）」と呼ばれていたのです。最近になって OOUX という言葉が使われるのは、OOUI のことを知らなかったか、もしくは流行語である「UX」を用いた方がかっこいいと考えたからではないでしょうか。 「オブジェクトベースのUIモデリング」というデザイン手法は、GUI アプリケーションをデザインする際の基本的なテクニック
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Game UI Database
Interface In Game | Collection of video games UI | Screenshots and videos
https://developer.apple.com/jp/design/human-interface-guidelines/
Material Design
The Component Gallery
Material Design
Headless UI
UI Faces | Free AI-generated avatars for your creative projects
