Splide - アクセシビリティに配慮した軽量・高機能スライダー
アクセシビリティに配慮した軽量・高機能スライダー。 ほかのライブラリに依存せず、Lighthouseのエラーもありません。
アクセシビリティに配慮した軽量・高機能スライダー。 ほかのライブラリに依存せず、Lighthouseのエラーもありません。
Next.js v13 への移行でやったことまとめ 準備 基礎となる記事に目を通した -> https://zenn.dev/link/comments/eefa4975aaedaf マイグレーションガイドを見て一つずつ対応しようかなと思ったけど、記事が長いのでnext devで動かして出てきたエラーを潰していく方法にした。とりあえずビルドできるようになったら、見落としやより良いやり方があるか確認するために読む。 ページコンポーネントに対して pages にあるファイルを app ディレクトリに移動させる 規約 通りに page と layout にコンポーネントを分割する getServerSideProps の処理をasync function getData() に変更する コンポーネントを async 関数にする props ではなくコンポーネントの中でgetData()の返り値を
Hey, check out my Modern Python Projects course. It's an extended version of this workshop!
2022年4月27日 CSS, JavaScript スマートフォンのアプリやモバイルサイズのWebサイトでよく見かけるスライドメニュー。どうも「jQueryがないと実装できない」と思っている人がちょこちょこいるようなので、簡単なJavaScriptで実装できるんだよーというのを記事にしてみます。 ↑私が10年以上利用している会計ソフト！ このようにボタンをクリックすると横からひゅるっと出てくるメニューを作っていきます。 1. メニューを開いた状態を作成 まずはHTMLとCSSで「Menu」ボタンをクリックしてメニューが開いている状態を作成します。メニュー部分は position: absolute; で位置を指定しています。また、メニュー項目に white-space: nowrap; を加えることで、スライドさせた時に日本語が変に改行されるのを防ぎます。それ以外は色や線、余白の指定など
［CEDEC 2020］「星のカービィ」のUIはおもてなしの心で作られている。UIデザインが分かりやすく言語化されたセッションをレポート
［CEDEC 2020］「星のカービィ」のUIはおもてなしの心で作られている。UIデザインが分かりやすく言語化されたセッションをレポート 編集部：御月亜希 ゲーム開発者向けカンファレンス「CEDEC 2020」の2日目（2020年9月3日），ハル研究所は「カービィUIでおもてなし！『ゲームとプレイヤーを繋ぐUI』を目指して」と題したセッションを行った。 このセッションでは，同社の人気シリーズ「星のカービィ」（以下，カービィ）において，どのようにユーザーインタフェース（UI）が作られているのかを，UIアーティストの伊藤晴香氏と，リードUIデザイナーの剣持 紫氏が紹介した。UIデザインが論理的かつ分かりやすく言語化されたセッションの内容をお伝えしていこう。 本セッションの主題となるカービィのUIとは，どのようなものなのだろうか。UIチームは，迷わないUI，ストレスや不快感を与えないUI，印象に
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第6弾は、アクセシブルで美しいユーザーインターフェイスを構築するデザインのテクニックです。 UI & UX Micro-Tips: Volume Six. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. スマホアプリではタブバーを常に表示する 2. ウェイトを使用するだけで、強調と階層を作ることができます 3. スマホではタップ可能な領域を広くする 4. サイト内のナビゲーションは一貫性のあるものにする 5. コンテンツが豊富なサイトでは検索を目立たせる 6. 適当にフォントサイズを選ぶのではなく Typ
Home | Open UI
Open UISection titled Open%20UIThe purpose of the Open UI, a W3C Community Group, is to allow web developers to style and extend built-in web UI components and controls, such as <select> dropdowns, checkboxes, radio buttons, and date/color pickers. To do that, we’ll need to fully specify the component parts, states, and behaviors of the built-in controls, as well as necessary accessibility require
マージンを片側に与えるのではなく、アイテム間に4remのギャップを確保するように実装すると期待通りに配置できます。 See the Pen Using min margins by Cyd Stumpel (@Sidstumple) on CodePen. クリック可能領域を広げるテクニック これについては以前にも説明しましたが、アンカータグ（<a>）に::beforeのような疑似要素を加えると、親のクリック機能を継承するため、クリック可能領域を広げることができます。 クリック可能領域の参照として使用する要素には、position: relative;を必ず追加してください。 下記のデモでは、.list-item全体にposition: relative;を、疑似要素にposition: absolute;を使用し、top, left, right, bottomを0またはwidth: 1
ナビゲーションの各アイテムをCSS Flexboxで横軸に配置し、アイテムを左と右の両端揃えにするときの実装テクニックを紹介します。 ナビゲーションに限らず、さまざまなUI要素に使用できるテクニックです。デスクトップで表示したときの上のバーみたいなのとか。 Justify Space Between Individual Items in Flexbox by Jim Nielsen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSS Flexboxで左と右の両端揃えにしたい 解決方法1: マークアップを追加する 解決方法2: flex-growを使用する 解決方法3: margin: auto;を使用する はじめに これは一見すると些細なことですが、ようやく最終的な解決策にたどりついたので、記事に書こうと思います
タブやアコーディオンの非表示コンテンツにはdisplay:noneがよく用いられますが、hidden="until-found"を利用するほうがメリットがあります。 hidden=“until-found”で非表示にしたコンテンツはページ内検索でアクセスできるuntil-foundはhidden属性に新たに追加された属性値です。 hidden - HTML: ハイパーテキストマークアップ言語 | MDN hidden グローバル属性は 列挙型属性であり、ブラウザーがその要素の中身を表示すべきではないことを示します。例えば、 要素がまだ、あるいはもはや関連性がないことを示す論理型属性です。例えば、ログイン処理が完了するまで使用できないページの要素を非表示にするために使用することができます。 developer.mozilla.org 従来のhidden属性とは違い、until-found"属
モダンiOSナビゲーションパターン 日本語訳
モダンiOSナビゲーションパターン 日本語訳Modern iOS Navigation Patterns (Japanese Text Ver.) この資料は、Frank Rausch 氏による Modern iOS Navigation Patterns の、日本語訳版です。オリジナル版 “2023-03-07” を基にし、CC BY-NC-SA 4.0 ライセンスによって公開しています。 オリジナルを日本語に訳すにあたり、なるべく元の表現を尊重するように心がけていますが、一部の表現については、訳者による解釈の補足や文言調整を加えています。 目次 目次 はじめに 1. 構造的なナビゲーション ドリルダウン (Drill-Down) フラット (Flat) ピラミッド (Pyramid) ハブ・アンド・スポーク (Hub-and-Spoke)2 2. オーバーレイ型ナビゲーション 強いモー
2019年9月25日、クックパッド株式会社にて「Cookpad Product Kitchen #4」が開催されました。今回のテーマは「ユーザー体験を支える検索・マッチング技術」。あらゆるサービスに採用されている「検索」機能。そんな検索機能における技術と工夫について、様々なIT企業のエンジニアたちが一堂に会し、自らの知見を語ります。プレゼンテーション「メルカリ商品検索のUI/UXと新たな挑戦 」に登壇したのは、株式会社メルカリ 元Director of Search/AI/Data Scienceの森山大朗氏。講演資料はこちら メルカリ商品検索のUI/UXと新たな挑戦 森山大朗 氏（以下、森山）：みなさんこんばんは。メルカリで検索の責任者をやっています森山大朗です。今日は、光栄にもログミーTechの記事を見ていただいたことがきっかけでこの場を作っていただいたということなので、がんばって話そ
ナビゲーションを実装する時、アイテムを左端に詰めて配置したいけど、1つだけ右端に配置したい、そんな時はFlexboxでオートマージン（margin: auto;）を使用すると簡単です。また、論理プロパティの効果的な使い方にも触れられているので、勉強になります。 How Auto Margins Work in Flexbox Flexboxにおけるオートマージンの仕組みをさらに詳しく知りたい方は下記の記事も参考になると思います。 CSS Flexboxで配置する時に知っておくと便利！オートマージン（margin: auto;）の仕組みと効果的な使い方 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 Flexboxでのオートマージンの仕組み Flexboxのオートマージンについてmagic of flexbox and auto
ビジネスの現状を把握し、さらにモニターし続けるためにダッシュボードなどを使ったBI（ビジネス・インテリジェンス）の仕組みを社内に導入したものの、社内ではあまり活用されていない、またはプロジェクトが途中で終わってしまったといった話をよく聞きます。 そこで、こちらの記事ではBI導入やダッシュボード作成プロジェクトを進めるときにぶつかることの多い問題、さらには、そうした問題を乗り越えてプロジェクトを成功に導くための5つのポイントを紹介します。 1. データの加工 ダッシュボードの作成プロジェクトに関わるタスクを考えると、真っ先に思い浮かぶのは、ダッシュボードに、どのようなチャートを入れるのかや、そのレイアウトをどうするかといったことです。 しかし、ダッシュボードの作成に関わるタスクを紐解くと、ほとんどの業務はダッシュボードに入れるチャートの作成にかかる時間ということになります。また、チャートの作
MuscleWiki is a fitness app with a comprehensive exercise library that includes videos and written instructions for over 2000 exercises. With a simple and intuitive bodymap that guides you to exercises for a particular muscle, you can simplify your workout with exercises suitable for beginners, intermediate and advanced fitness enthusiasts.
CSSだけでも表現できるデザインが増えてきまして、疑似要素::beforeや::afterなどを駆使することでボタンやテキストリンクへさまざまな装飾することができるようになりました。今回は全部で19パターンのデザインをCSSのみで実装する方法をご紹介します。あなたの現場でぜひご利用ください。 CSSボタンのスタイルCSSボタンは11パターンあります。すべてのデザインに共通したCSSがありますので以下のコードをコピペした後に、実装したいボタンのCSSをコピペしてください。 CSSボタンの共通スタイル .btn a { display: flex; justify-content: center; align-items: center; position: relative; width: 300px; height: 60px; color: #333; font-size: 18px;
ますます進化するWebデザインの世界において、アニメーションはますます欠かせないデザイン要素のひとつとなっています。 パソコンだけでなくスマホなどアニメーションに対応するデバイスが増えたことで、クリエイティブに対する重要度も高まっています。 では、実際にどのようにWebサイトにアニメーションを活用したら良いのでしょう。 この記事では、Webアニメーションの参考にしたい、魅力的な最新UIインタラクションをまとめてご紹介します。 UXデザインにおけるアニメーションの基本原則とルールも一緒に確認しておくと良いでしょう。 【保存版】ユーザーを魅了する！UXデザインの正しいアニメーション完全ガイド 実例で学ぶ！美しい最新UIアニメーションまとめ Origin ページをスクロールすると、海面から深海へとつづくコンテンツを、アニメーションを利用することで没入感のあるデザインに仕上げています。
記事の目的 本記事ではdToFとiToF LiDARの基本や原理について説明します。 また込み入った理論ではなく、LiDARの大まかな種類や用途を理解するのが目標です。 LiDARセンサはLight Detection and Rangingの略で光を使った距離測定技術の総称です。 RADARが電磁波を使って距離を測るのに対して、光を使った距離センサを指します。 こちらは距離センサ全般の記事です。合わせてどうぞ。 aru47.hatenablog.com 記事の目的 LiDARには大きく２種類ある dToF LiDAR 原理 dToF LiDARの製品 dToF LiDARの種類について iPadのdToF LiDAR indirect Time of Flight 原理 iToF LiDARの製品 参考文献 最後に LiDARには大きく２種類ある LiDARには大きく２つ種類があります。
「ひどすぎ音量調整UI選手権」が注目集める。ミニゲームに大量ボタン、16連サイコロなど使いにくさ追求の“最悪UI”たち - AUTOMATON
Twitterユーザーの0xDesigner氏が、過去に海外掲示板Redditにて実施された“ひどすぎ音量調整UI選手権”より、さまざまなgifを引用して紹介している。謎のミニゲームから単純に使いづらいUIまで、多種多様なおもしろUIが取り上げられ、話題を呼んでいる。 0xDesigner氏の引用元となっているのは2017年にReddit上のプログラマー向けコミュニティr/ProgrammerHumorに投稿された「Who can make the best volume slider?」というスレッド。表題では“best”といいつつも、実際には最悪のUIアイデアが集っている。投稿されたgifにはよく見かける縦長の音量調整バーが収められている。しかしこの調整バーでは縦軸ではなく、音量調整は細い横軸でおこなう様子。せっかくのUIをダメにするジョークを見たユーザーたちは、こぞって酷いUIを考え
「ファストフード店で注文する際に、自分自身で食べたいものを決めている自信はありますか？」――そんなことを唐突に聞かれたら、おそらく大半の人が「そんなこと、考えたことすらなかった」と回答するだろう。 では、なぜ今回このような問いを投げたのか。それは、消費者がファストフード店で行う購買選択が、実は企業にそっと誘導された結果によるものかもしれないからだ。 東京大学大学院で行動経済学を教える阿部誠教授はファストフード店のメニュー選びにおいて、消費者は「企業が購入してほしい商品」を無意識的に選択している可能性があると指摘する。なぜそのような事象が発生するのか？ ファストフードのメニュー表に張り巡らされた“仕掛け”を行動経済学の観点から読み解いていこう。 意図的に設計された「読みづらいメニュー表」 無意識的な購買選択を引き起こす要因として阿部氏は「ファストフード店のメニュー表は、企業が売りたい商品を販
xbar, the BitBar reboot
Put anything in your macOS menu bar Put anything in your macOS menu bar (the BitBar reboot) Hundreds of pre-built plugins to choose from Information you care about, at a glance Write your own plugins—in any language
静寂の街 消えた“耳印” | NHKニュース
男性は、街にあふれるさまざまな音を聞き分けていました。コンビニの自動ドアの音、ラーメン屋のBGM。自動販売機の音まで。すべては生きるため。 覚えた一つ一つの音は、“耳印”として記憶に刻み込まれていました。しかしいま、耳印は消え、その場に立ち尽くすこともあるといいます。 （社会部記者 災害担当 飯田耕太） “耳印”の取材は、意外なところから始まりました。 揺れをとらえる、地震計です。 車のエンジンや人々の足音、工場の機械音…。社会生活に伴って出る音は、すべて振動として地中に伝わっていました。 地震を観測するうえでは妨げとなる「ノイズ」と呼ばれています。 東京を中心とする1都5県に整備されている観測網「MeSO-net（メソネット）」。約290もの地震計が記録した「ノイズ」が、コロナ禍の異変をあぶり出していたのです。
はじめに 今やあらゆるサイトで使用されているハンバーガーメニュー。 私たちウェブサイト系のエンジニアは数え切れないくらい実装してきている定番パーツです。 しかしながらその実装は容易ではありません。自分の作り方に自信を持てていない方も少なくないのではないでしょうか。 ただ単にそれっぽく動くものを作るのであれば簡単ですが、アクセシビリティやメニュー展開時の他の箇所の挙動など、不具合がないように徹底的に作り込もうとするとなかなか難しいものです。 今回はそんな厄介な存在であるハンバーガーメニューについて、私なりの現在の作り方を紹介したいと思います。。 ハンバーガーメニューの実装で気を付けるべきこと ハンバーガーメニューの作り方を見る前に、ハンバーガーメニューのあるべき姿、実装時に気を付けるべきことを洗い出してみましょう。 私が思い浮かぶものだと以下のようなものがあります。 メニューボタン、アコーデ
キャレットアイコンは、アコーディオンがその場で開くのであって、新しいページへの直接のリンクではない、ということを最も明確にユーザーに示すことができていた。 Accordion Icons: Which Signifiers Work Best? by Page Laubheimer and Raluca Budiu on August 23, 2020 日本語版2021年4月8日公開 アコーディオンが、現在、人気のあるUI要素であるのには理由がある。というのも、モバイルでは、コンテンツを折りたたんでページの長さを管理可能にする不可欠なツールになっている一方、デスクトップでも、視覚的な複雑さを軽減し、ユーザーが目下のタスクに最も関連性の高いコンテンツに集中できるようにしてくれるからだ（複雑なアプリケーションには特に適している）。 モバイルUXとアプリケーションデザインの両方の講座でよく聞かれ
WebサイトのUIにフローティング要素、ドロップダウン、ツールチップ、ポップオーバー、ナビゲーションなどを実装するJavaScriptのライブラリを紹介します。 フローティング要素の実装で問題となる配置の向きや衝突やオーバーフローなどにも対応しており、アクセシブルなフローティング要素を実装できます。 Floating UI Floating UI -GitHub Floating UIの特徴 Floating UIのデモ Floating UIの使い方 Floating UIの特徴 Floating UIは、ドロップダウン、ツールチップ、ポップオーバー、ナビゲーションなどのフローティング要素を配置するためのJavaScriptライブラリです。 フローティング要素はコンテンツのフローを中断することなくUIの上に浮かぶため、配置するときに課題が発生します。Floating UIではフローティン
こんにちは！ゲストライターのトゥクです。 前回は、連載最初の記事として私の大学の学部卒業制作研究をもとにデザインとの向き合い方について、ご紹介いただきました。 私の紹介記事に関してはこちらをご覧ください。 そして今回からは私自身や家族、友人が外国人として日本に住む中で感じていることや、出来事についてご紹介していきます。 この連載では、外国人視点から日本に住む上で感じたこと、気づき、出来事を通して、読者の皆さんに新たな視点や発見を届けたいと思います。そして社会におけるマジョリティやマイノリティに関係なく、全ての人にとって良いデザインについて共に議論できると嬉しいです。 外国語名を日本語名のフォーマットに当てはめるって難しい！今回私が紹介するのは「外国語名を日本語名のフォーマットに当てはめること」の難しさと、具体的に私が出会ったBADなUIデザインについてです。 役所や病院、インターネットの個
先日サンフランシスコ市内の公園を歩いていたら、ふとあることに気づいた。本来設計されている道とは異なるルートが作られているのだ。 そう、アスファルトで舗装されている通行用ルートではなく、芝生になっている箇所を複数の人が通ったことによる近道、いわゆる「けもの道」が生成されている。 これはデザイナー的観点から見るとかなり興味深い。 というのも、ユーザーに対して元々設計されていた「導線」とは異なるルートをユーザーが選択した結果、いつの間にかそのルートの方を他のユーザーも利用するようになった。これは明らかにデザインミスでは無いのか？と。 けもの道 (Desire Paths) について英語ではこの現象をDesire Pathsと呼び、Wikipediaには下記のような説明がされている。 公認されていない自転車道や歩道のことで、定期的に自転車や人間が通ることによって時間をかけて作られた道のことを指す。
The Speed-Based Vim GameThe goal of the game is to navigate to every target as quickly as possible. Once you navigate to a target, the next target will appear. Targets look like this: A. You have access to every vim motion command, so the most efficient time will make use of them. To start the race, click reset. Now your browser will be focused on the editor, so you can immediately starting using
こんにちは、カワルンです。 今日は前回の続き、はてなブログテーマNeumorphism（ニューモーフィズム）に変更したときのカスタマイズをまとめます。 ■ 前回はこちら ■ ▷ Neumorphism（ニューモーフィズム）にテーマ変更【はてなブログデザイン】 - 書く、走る。 これからニューモーフィズムにブログテーマを変更しようとしている方は参考にしてみてくださいね！ そうそう、テーマ変更するならまずはバックアップを取ってからスタートしましょう。 ヘッダー下の変更 グローバルナビゲーションの設置 ヘッダー下におすすめ記事を設置 目次・見出し・引用デザインの変更 メイン・サイドバーエリア変更点 サムネイル画像のサイズ調整 はてなスターとタグ非表示 メインコンテンツエリアとサイドバーの幅変更 レスポンシブデザインへ変更 レスポンシブデザインの設定 デバイスごとの設定 おわりに <スポンサーリン
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第4弾は、UIに一貫性・統一感を持たせるためのデザインテクニックです。 UI & UX Micro-Tips: Volume Four. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. デザイン要素に一貫性を持たせる 2. ホワイトスペースはたっぷり使用してください 3. 冒頭のパラグラフをスタイルして、ユーザーを引き込む 4. 短いパラグラフを効果的に使用する 5. カラーパレットを定義し、デザインに統一感を持たせる 6. アイコンをグリッドシステムで使用する際の注意点 はじめに 次のプロジェクトのため
先日、妻とセルフのガソリンスタンドに行きました。 車の外で妻が「給油口開けて～」と言ったので、ハンドルの右奥にあるレバーを引っ張り待っていたのですが… 「早く開けてっ！」とちょっと強めに言ってきたので「開けてるだろ～（怒）」と確認したら… 間違えてボンネットのレバーを引いてボンネットを開けていました！ (ﾟдﾟ) ！ どぉ～もぉ～ポルですヽ(^o^)ﾉ 食欲の秋！ 皆さん、そろそろ忘年会のシーズンがやってまいりましたね！ 秋は美味しい食材が豊富で、会食の機会も増えると思います。 歳を重ねると、ちょっとお高い日本料理店に行くことだってあるでしょう。 彼女や奥様を喜ばせようと、たまにはちょっと背伸びをして、高級寿司店に連れて行くことだってあると思います。 皆さん日本料理店や普通のお寿司屋さんに行って困ることありませんか？ お品書き読めますか？ お品書きや、メニューに出てくる意味不明の言葉に、頭
12月7日、「豚組しゃぶ庵β」が始まります｜ひとし
豚組オーナーの中村です。 以前このエントリーでもご報告したとおり、豚組しゃぶ庵は当初予定していた閉店時期を一年延期し、2021年末まで営業を続けることとなりました。そこでこれを期に営業内容をリニューアルし、「豚組しゃぶ庵β」という新たなコンセプトで展開します。（コンセプトとして『β』としていますが、正式な店舗名は『豚組しゃぶ庵』のままです） その新コンセプトに基づいた「豚組しゃぶ庵β」ですが、いよいよ12月7日(月)から営業を再開することとなりました。10月末の一時休業から1ヶ月強。お待たせしました。ようやく再始動です。 今回のリニューアルの目的は、「コロナに最適化した店舗に生まれ変わる」ことです。お店の営業方針やオペレーションなどを根本から見直し、これからの新しい環境に最適化させるための実験の場として、1年という期間限定の挑戦を行います。 本記事では、豚組しゃぶ庵βがどのような考え方でど
This page collects all the familiar navigation patterns for structuring iOS apps, like drill-downs, modals, pyramids, sequences, and more! Think of it as an unofficial bonus chapter for Apple’s Human Interface Guidelines, written by someone who cares deeply about well-crafted user interfaces. A typical iOS application has a fixed architecture—often a hierarchical tree with multiple levels. This ri
Merpay Advent Calendar 2020 の16日目は、メルペイ Android チームの yhanadaが担当します。 著者のメルカリ/メルペイでのAndroidエンジニアとしてのキャリアは、12月でちょうど4年になりました。チーム内での役割としては、通常の機能開発以外に、DEX(Developer EXperience)改善というプロジェクトで、リファクタリングを行ったり、ルールを考えたり、不要なものを取り除いたり、などエンジニアの負担を減らす活動を行っています。 つまりDEX改善の対象となるのは、リファクタリングなどのコード改善だけではなく、時に他チームとの交渉や調整など組織的な部分もエンジニアリングの対象に含まれます。 本記事では、このDEX改善活動の紹介を行うとともに、過去のブログ記事「マルチモジュールなプロジェクトにおける画面遷移の実装」での残課題であった、マルチ
社外にも公開しているSmartHR Design Systemは、ライティングに関するガイドラインも充実しています。この記事では、UI文言を検討したいと思ったときにそれらのガイドラインをどのように活用するとよいのか、おすすめの参照方法を紹介します！ チェックリスト的に参照したいライティングスタイル ライティングスタイルには、UI文言に限らずヘルプページやリリースノートなどにも適応したいガイドラインがまとまっています。 基本的かつ具体的な内容で、数も多くないので都度チェックリスト的に参照するのがおすすめです！ヘルプページやリリースノートも含めて、開発に関わる文言や文章を書く機会に参照すると、自然と頭に入っていきます。 迷ったときに参照したい用字用語
iOSアプリによく使用されているナビゲーションのパターンとそれぞれの特徴を紹介します。 情報の階層ツリーを行き来するための構造型ナビゲーション、ユーザーの注意を引くためのオーバーレイ型ナビゲーション、特別なコンテンツで使用する埋め込み型ナビゲーションなど、最近のアプリに必須のナビゲーションばかりです。 Modern iOS Navigation Patterns by Frank Rausch 下記は各ポイントを意訳したものです。 ※元サイト様のライセンスに基づいて翻訳しています。基づいてというのは、貢献部分に関して同ライセンスも含みます。 最新のiOSのナビゲーションパターン 構造型ナビゲーション オーバーレイ型ナビゲーション 埋め込み型ナビゲーション 参考資料 最新のiOSのナビゲーションパターン この記事では、ドリルダウン、モーダル、ピラミッド、シーケンスなど、iOSアプリを構造化す
Prettier がデフォルトでインデントのためにタブを使うべきかどうか、現時点での私の考えです。 useTabs のデフォルト値を true にするという提案 Prettier には useTabs というオプションがあり、インデントのためにタブを使うかどうかを boolean で指定できます。デフォルトでは false が設定されています。 2 年ほど前に Prettier v2 の準備をしているときに Change useTabs to true by default という、useTabs のデフォルト値を true に設定することを提案する issue が作成されました。 この issue での議論は活発に行われ、建設的なコメントや逆に全く建設的でない人格を批判するようなコメントなど、実に多くの意見が寄せられました。 この issue が作成れたのは v2 をリリースする直前だっ
はじめに サイオステクノロジーの伊藤と申します。今回から数回にわたりデジタルコンテンツのコントラストというテーマで、WCAG2のコントラスト基準とWCAG3で検討が進められている新しい基準APCAについて解説していきます。 対象読者としては、ウェブサイトやアプリケーションなどデジタルコンテンツの制作に携わるデザイナーやエンジニア、アクセシビリティに関心のある方を想定しています。 現在勧告されているWCAG2の達成基準では、テキストや視覚要素のコントラストが一定の基準を満たす必要があります。たとえば、レベルAAでは文字色と背景色のコントラスト比が4.5:1以上であることが要求されます。 図1 テキストとの視認性を確保するために、背景色とのコントラスト比を考える必要がある しかし、人間の目は明るい色と暗い色のコントラストを認識する際に、明るい色の相対輝度が高いほど視認性が高くなるという特性があ
金属・木材加工機械のB2Bサイトの情報アーキテクチャを、調査に基づいて全面的に見直したところ、見つけやすさが85％向上した。 Quantifying UX Improvements: A Case Study by Kate Moran on January 31, 2021 日本語版2021年7月7日公開 定量的なUX指標を使用すると、エクスペリエンスの質を経時的に追跡して、それをどのように改善していけばいいかを確認することが可能になる。UX指標は、UXの専門家が自分たちの作業の影響と質を測定し、そうした影響を第三者に伝えるのに役立つ。 UXベンチマーキングのプロセスでは、エクスペリエンスの重要な側面を表す指標を1つ以上選択し、それらの指標を追跡して、デザインの介入がそうした側面にどのような影響を与えるかを確認することになる。 以下のケーススタディでは、あるチームがUX指標を使って、自分
Building a sidenav component Stay organized with collections Save and categorize content based on your preferences. In this post I want to share with you how I prototyped a Sidenav component for the web that is responsive, stateful, supports keyboard navigation, works with and without JavaScript, and works across browsers. Try the demo. If you prefer video, here's a YouTube version of this post: O
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
個人ブログの Next.js v13 移行でやったことまとめ
Home :: Modern Python Developer's Toolkit
jQueryを使わずにスライドメニューを実装しよう
プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.6
WebページやスマホアプリのUIに役立つ、知っておくと便利なCSSの小技
CSS Flexboxでアイテムを左と右の両端揃えにする実装テクニック
タブやアコーディオンの非表示コンテンツにはhidden="until-found"を使うべし – TAKLOG
メルカリは「軽トラ」の検索結果をどう改善したか？ 商品検索におけるUI/UXと、新たな挑戦
CSS Flexboxでナビゲーションを実装する時に役立つ、オートマージン（margin: auto;）の便利な使い方
BI/ダッシュボード導入を成功に導くための5つのポイント - Qiita
MuscleWiki - Simplify your workout
CSSのみで実装するボタン、テキストリンク、hoverスタイル19選 | Pulp Note
動きが気持ちいい！Web制作の参考UIインタラクション、アニメーション60個まとめ
dToF/iToF LiDARセンサの原理や製品について - arutema47's blog
ファストフード店のメニューが“見づらく”作られている、納得の理由
【2024年】ハンバーガーメニューの作り方決定版【コピペ可能】 | techlab / baigie
アコーディオンのアイコン：どのシグニファイアが最適か
WebサイトのUIにさまざまなフローティング要素を実装するためのJavaScriptのライブラリ -Floating UI
外国人から見た名前入力に関するBADなUIデザイン｜CULUMU / インクルーシブデザインスタジオ
UXデザインにおける「けもの道」現象とは デザイン会社 ビートラックス: ブログ
Vim Racer - An Online Game for VIM Navigation
はてなブログテーマ「Neumorphism（ニューモーフィズム）」のデザイン変更まとめ - 書く、走る。
プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.4
日本料理に使われる謎の言葉、名前。食材や料理の種類、お品書きやメニューの読み方を解説！ - イギーとポル 福岡グルメ
Modern iOS Navigation Patterns · Frank Rausch
エンジニアの体験を改善する | メルカリエンジニアリング
UI文言を検討するときのSmartHR Design Systemの歩き方｜稲葉志奈
iOSアプリによく使用されているナビゲーションの最新パターンとそれぞれの特徴
Prettierはデフォルトでインデントのためにタブを使うべきなのだろうか
第1回 デジタルコンテンツの視認性とWCAG2のコントラスト比の課題 | gihyo.jp
UXの改善を数値で示す：ケーススタディ
Building a sidenav component | Articles | web.dev
l.smartnews.com
anond.hatelabo.jp
gr-kit.shop
www.yomiuri.co.jp
ymadakana.com
theriver.jp