更新日: 2024.07.21 アレンジを新たに５品目加え、19品目に更新 2021.06.02 本記事を公開 皆様へ愛を込めて感謝のメッセージ サイゼイリヤの完全攻略マニュアルを公開して3年、多くの人々に読んでいただけて嬉しい。現在もこのマニュアルが活躍しているようで、みなさんが喜んでいる笑顔が浮かんでくる。もちろん、僕もいつも通りサイゼリヤを楽しんでいる。そして、公開してから約150万PVになっていて想像以上だ。本当にありがとう！ これからも、サイゼリヤで楽しんでいこう。 2024.07.21 マッシこんにちは、フードライター マッシ（＠massi3112） はじめにサイゼリヤが大好きで行くといつもイタリアに帰った気分になる。イタリア流の食べ方を知ると更に美味しくなるだけではなく、カスタマイズして自分にピッタリの味を簡単に作れる。毎日サイゼリヤに行っても飽きない理由は調整できること。ツ
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】 - Qiita
なぜエンジニアが作る画面はダサいのか…?「理由」と「対策」を徹底解説【エンジニア向け画面デザイン講座】UXUIDesignUIデザイン画面設計 1.はじめに エンジニアの私がデザインを本気で勉強した結果、デザイナーとエンジニアはそもそも思考が大きく違っているということがわかりました。 今回は「それ」をデザインに苦手意識のあるエンジニア方にも理解してもらえたらと思い、わかりやすくまとめてみました。 2.アプリの画面デザインを考えてみよう まず、こんなアプリを考えてみてください。 フィットネストレーナーが使うアプリ トレーニングルームでお客様とお話しながら使う 端末はタブレット そして 会員の個人情報確認 前回までのトレーニング状況の確認 次回の予約受付 といったことをします。 使える情報としては、こんな感じです。 あなたならどう画面デザインをするか、もしお時間があったら考えてみてください。
「のどが渇いた」というユーザーに何を出す？ ユーザーの「欲しい」に惑わされない、本当のインサイトを見つけるUXデザイン・UXリサーチ
2022年9月13日 株式会社メンバーズ ポップインサイトカンパニーでのウェビナーのスライドです。「ユーザーが欲しいと言った機能をつけたのに使われない！」という経験はありませんか。プロダクトをつくるとき「ユーザーの心理を理解しよう」とよく言われます。しかし、ユーザーに言われたままやることと、ユーザーが本当に望んでいることは異なります。「UXデザイン・UXリサーチ」は、ユーザーを理解するための専門技術です。ユーザーインタビューやユーザビリティテストを用いてファクトを集めることで、ユーザーの表面的な言葉に惑わされない、本当のインサイトにたどりつくことができます。かんたんなワークも交えながら、体系的に解説いたします。Read less
2022年8月9日 ある企業さまでの研修「45分間で『ユーザー中心のものづくり』ができるまで詰め込む」のスライドです。登壇枠が45分という限られた時間のなかで、UXデザイン・UXリサーチのもっとも大切なエッセンスを凝縮してお伝えするようにしました。Read less
メルカリで値段の「¥マーク」を小さくしたら購入率が伸びた理由、ペイディがサービス名を「カタカナ表記」にする理由など、プロダクトのマーケ施策まとめ30(2023)｜アプリマーケティング研究所
メルカリで値段の「¥マーク」を小さくしたら購入率が伸びた理由、ペイディがサービス名を「カタカナ表記」にする理由など、プロダクトのマーケ施策まとめ30(2023) 2023年に取材した記事から、長く参考になりそうな施策をまとめました。※ 数値等はあくまで取材当時のものです。 1、商品ページの「¥マーク」を小さくしたら購入率アップ（メルカリ）メルカリでは、商品詳細ページの「値段の¥マーク」を小さくしたところ、購入率が大きく上昇した。 理由としては、¥マークを小さくしたほうが、心理的な「価格の圧迫感」が減って、心理的にすこし安く感じるためと考えられている。例えば、¥マークが大きいと桁数が多く感じたり、価格を高めに感じやすい。 この案があがったときには、社内でも懐疑的だったそうだが、テストすると小さな開発コストで大きなリターンを得られる施策になった。 元記事：https://markelabo.c
新型コロナに家族全員感染したので、知見をまとめます。何ぶん個人差の大きいものではありますが、これが地震や台風のような一つの災害の例として、家族で備えるための一助となればと思います。 経緯小学校低学年の子供が高熱、通っている学童で既に陽性者有（小学校で陽性があったと発熱の前日にお知らせが来たが、同じ学童の子だという事は熱を出して学童を休む連絡をした時に知った）。検査して陽性。 2 日後私が高熱、検査して陽性。 夫はその翌日微熱、濃厚接触者として保健所から検査を手配後。陽性確認。 自宅療養約 1 週間の後、私と子供はホテル療養。 やっていた感染対策夫婦共に40代前半、在宅勤務、基礎疾患なし、外食・会食・旅行はここ 1 年半以上なし、手洗い・消毒、マスク（不織布）、出かけたのは近所の小規模なショッピング施設での買い物、人のいない近所のマイナーな公園だけ。とても感染に気をつけていたというよりは、単
Intro こういうタイトルを付けるのはあまり好きではないが、あえてこのようにした。 「ブラウザでキャッシュがヒットしない」 以下は、 Web における Caching の FAQ だ。 サーバで Cache-Control を付与したのにキャッシュがヒットしない サーバで ETag を付与したのに If-None-Match が送られない サーバで Last-Modified-Since を付与したのに If-Modified-Since が送られない 先日も、筆者が書いた MDN の Cache セクションで「記述が間違っているのでは?」と同様の質問を受けた。 Issue about the Age response header and the term "Reload" · Issue #29294 · mdn/content https://github.com/mdn/cont
私たちの日常業務で使われる管理画面は、大量の情報と複雑な機能で構成され、利用難度が高い傾向にあります。検索性の乏しい管理画面の一覧から1つの情報を見つけるために、どれだけの時間を費やしているでしょうか。 1億円の工数をかけて開発した機能も、低品質なデザインでは、機能の存在に気付かれなかったり、間違って使われたりと、期待した業務コストの削減に繋がりません。これでは、1億円を捨てたようなものです。 使い勝手の良くないデザインは、ユーザーだけではなく、開発者にも悪影響を及ぼします。複雑な構造と分かりにくい操作体系の管理画面は、開発やテストの手間を増やし、その後の機能拡張も難しく、改修コストも増大します。 これらのリスクを抑えるためには、UIデザインの基本原則を理解し、適切に管理画面を設計することが重要です。 私たちは管理画面のUIデザインの改善やリニューアルを手掛けることも多いのですが、その経験
Webページやスマホアプリでよく見かけるレイアウト、ナビゲーション、UIコンポーネントなど、それだけを実装するHTMLとCSSのシンプルなコードをまとめたCSS Layoutを紹介します。 それだけを実装するため、HTMLとCSSのコードは非常にシンプル、カスタマイズも簡単だと思います。スニペットに登録しておくと、便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 レイアウトやUIコンポーネントだけを実装するコード CSS Layoutの特徴 CSS Layoutは、よく使用されるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。 CSS Layout 依存関係は一切無し フレームワークは必要無し ピュアCSSで実装、CSS
This is the second 3D model of Nausicaa. This time I created Nausicaa in Toxic Jungle. I hope you feel the atmosphere of Toxic Jungle. My project is still going on.....
ゆかり @miaka720 @kuma_neko_ いつもミックスサンドとコメチキ頼んでお腹パンパンになるので、このメニュー見つけた時はいいじゃん！と思ったけど、この写真じゃちょっと少ないなあ…といつも通り普通に頼んだんですが… 詐欺ですねこれは…コメダをなめていました。 今度頼んでみようと思います。
Contents Command Line Interface Guidelines An open-source guide to help you write better command-line programs, taking traditional UNIX principles and updating them for the modern day. Authors Aanand Prasad Engineer at Squarespace, co-creator of Docker Compose. @aanandprasad Ben Firshman Co-creator Replicate, co-creator of Docker Compose. @bfirsh Carl Tashian Offroad Engineer at Smallstep, first e
乗換案内1872 - ジョルダン
乗換案内1872とは 1872年10月14日(旧暦9月12日)、新橋～横濱間(現在の汐留～桜木町)で日本初の鉄道が開業し、今年(2022年)で150年が経ちました。 この鉄道開業150周年を記念して「もしも鉄道開業時に乗換案内があったら」を実現！ 150年前の運転区間・時刻・運賃で経路検索をお楽しみいただけます。 ※時刻の表記について 鉄道開業当初は、江戸時代からの時刻表記と区別するために「時」を「字」と表記していました。 乗換案内1872ではこれに合わせて検索フォームの時刻で「字」と表記しています。
Mozillaブログより。 エリーゼ・ブランチャード インターネットは私たちの生活のあらゆる場面に浸透していますが、デジタルの世界では当たり前のように使われているものがあります。それは、多くのリンク、特にハイパーリンクが青色であることに気づいたことがありますか? 同僚が何気なく「なぜ、リンクが青いのか」と聞かれた時、私は戸惑いました。2001年からウェブサイトを制作しているユーザ・エクスペリエンス・デザイナーの和tがしは、常にリンクを青くしてきました。私は青の特定の色調を提唱してきました。しかし、「なぜリンクが青なのか」と疑問に思ったことはありません。それはただの事実でした。草は緑で、ハイパーリンクは青です。文化的に、私たちはリンクを青色に関連付けているため、2016年にGoogleがリンクを黒に変更したときには、かなりの混乱が生じました。 しかし今、私は「なぜ、リンクが青なのか」と言う疑
最近スクロールバーを見かけなくなった気がします。ざっと調べてみると、スクロールバーはすでに消え始めており、今のスタンダードはスクロールインジケーターになってる様です。そうかと思えば、そのスクロールインジケーターすら消え始めている状況です。 ▼１．消えゆくスクロールインジケーター1.1 フェイスブックiOSアプリ フェイスブックのアプリでは、もはやスクロールインジケーターすら表示されていません。ご自身のスマートフォンで見てみると、画面右側には何も表示されないはずです。 1.2 電話帳 iOS 実は電話帳からもスクロールインジケーターが消えています。インデックスが表示されているので、スクロールインジケーターとインデックスが重なってしまうのを防ぐためと思われます。 1.3 メモ帳 iOS メモ帳ではスクロールをするまでインジケーターは表示されません。スクロール後は一定時間が経つとスクロールインジ
効率よくコーディングを進めるためにChatGPTを使ってみよう
この記事について この記事は、 Web制作の基礎から学べる「Webコーディングスクール」 などの資料制作をお手伝いして頂いているemiさんによる寄稿記事です。 emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。Webデザインをメインにストックイラストレータ、グッズデザインなどしております。 ChatGPTとは ChatGPTはOpenAIが開発した対話型のチャットボットです。質問を入力すると質問に対する回答が出力されます。 今回はChatGPTを使って、効率よくコーディングを進めてみます。 headタグ内のコードをChatGPTで生成しよう HTMLの大枠をChatGPTを使ってコーディングしてみよう グロナビをChatGPTで生成してみよう ボタンをホバーした時のCSSをChatGPTで生成してみよう H
Webサイトやスマホアプリでよく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのコードがまとめられたコレクションを紹介します。 フレームワークなども便利ですが、それだけを実装するためのコードなので、非常にシンプルでカスタマイズも簡単だと思います。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSSで実装するレイアウト・UIコンポーネント CSS Layoutの特徴 CSS Layoutはよく使われるレイアウトやUIコンポーネントだけを実装するためのHTMLとCSSのコードがまとめられたコレクションです。 MITライセンスで、商用プロジェクトでも無料で利用できます。
「明朝体」だった学校からの手紙が全て「丸ゴシック」に→理由を聞いたら、教頭先生に明朝体を読みづらいお子さんがいることが分かった - Togetter
チョコ黒は研究者になりたい！ @bottiboch 2号が小学生のとき、学校からのお手紙が全て丸ゴシックに変わったの。当時はUDデジタル教科書体がまだなくて、明朝体ばかりだったのよ。なんで変わったのか聞いたら、教頭先生が変えられたと。教頭先生のお子さんが明朝体や教科書体が読みづらいお子さんだったらしくて、読みやすいお手紙を心がけて… チョコ黒は研究者になりたい！ @bottiboch いらっしゃるらしいと…保護者からの評判はとても良かったのよ。 今はPTAからのお手紙以外はUDデジタル教科書体になってる。 加齢による変化で、字を読むのが辛いお年頃にも、読むのが苦手な保護者にも優しい学校からのお手紙って大切よね。
よく使用されるWebページのレイアウトやUI要素91種類をシンプルなCSSで実装するコードのまとめ -CSS Layout
最近のWebサイトで見かける、ページのレイアウトをはじめ、ナビゲーション、フォームのさまざまな入力要素、インタラクション要素、UI要素などのCSSでの実装コードをまとめたCSS Layoutを紹介します。 すべてシンプルなコードで実装されており、外部ファイルやフレームワークは一切必要ないので、簡単に利用できます。 ブックマークや、スニペットに登録しておくと便利ですね。 CSS Layout CSS Layout -GitHub CSS Layoutの特徴 CSS Layoutの使い方 CSS LayoutのレイアウトやUI要素91種類 CSS Layoutの特徴 CSS Layoutは、CSSで作成された一般的なレイアウトとパターンのコレクションです。 依存は一切なし フレームワークも必要なし CSSハックもなし すべて実際の使用例 MITライセンスで、商用プロジェクトでも無料で利用できま
盲目の格闘ゲームプレイヤー「BlindWarriorSven」がEVO2023『スト6』のプール予選で勝利し会場大盛り上がり。サウンドアクセシビリティ機能を利用しエドモンド本田が対空とコンボを華麗に決める
アメリカ・ラスベガスにて2023年8月4日から8月6日にかけて開催される世界最大級の格闘ゲーム大会「Evolution Championship Series 2023（以下EVO 2023）」の『ストリートファイター6』の第1プール予選が現在開催中だ。 多くの名試合が生まれる中、オランダ出身の格闘ゲームストリーマーBlindWarriorSvenの試合が大きな盛り上がりを見せた。 I’m so pleased for @SvenvandeWege getting the win on stage at @evo! pic.twitter.com/xuhP67G6eR — WSO Logan (@WSOLogan) August 4, 2023 BLIND WARRIOR SVEN! @SvenvandeWege #Evo2023 pic.twitter.com/U1Wdc55yrr —
大学在学中＆休学中に複数のIT系スタートアップでのインターンやベンチャーキャピタルでのリサーチバイトを経験後、フリーランスとして独立。現在は「TechCrunch Japan」などでスタートアップ企業のプロダクトや資金調達を中心としたインタビュー・執筆活動を行っている。 From DIAMOND SIGNAL スタートアップやDX（デジタルトランスフォーメーション）を進める大企業など、テクノロジーを武器に新たな産業を生み出さんとする「挑戦者」。彼ら・彼女にフォーカスして情報を届ける媒体「DIAMOND SIGNAL」から、オススメの記事を転載します。※DIAMOND SIGNALは2024年1月をもって、ダイヤモンド・オンラインと統合いたしました。すべての記事は本連載からお読みいただけます。 バックナンバー一覧 市場の縮小、従業員の高齢化に伴う人手不足、進まないIT化──。配車アプリの普及
ユーザインタフェース設計
Myersらの1992年の調査によれば、一般的なグラフィカルユーザインタフェース（Graphical User Interface; GUI）アプリケーション開発でコードの48%、実装時間の約半分がユーザインタフェース部分に割かれているといいます。それだけユーザインタフェースの設計は難しいプロセスなのです。 ユーザインタフェース設計で役に立つ基礎理論や評価手法、支援ツールは、人とコンピュータの関係をよりよくしていく学問 Human-Computer Interaction (HCI) で研究、開発されてきました。ただ、こうした知見を体系化されたかたちで学習する機会は（とくに国内では）必ずしも多くありません。 このWebページでは、自分が研究者になるにあたって知っておきたかった基礎的なことを、参考文献を挙げながら紹介します。想定している読者層は HCI を専門にする学生や、ユーザインタフェー
こんにちは、HR業界でアプリマーケティングをしている宮﨑です。 ・アプリのアップデート前後のUI変化 ・Push通知など気になったGrowth施策 こうしたものを「#アプリノック」としてTwitterで投稿すること3ヶ月。300本以上のネタが溜まってきました。 今回のnoteでは「フォッグの消費者行動モデル」というフレームワークを使ってまとめていきます。 行動 = 動機 × 実行能力 × きっかけ ザックリいうとユーザーに何か行動を促す際に「動機/実行能力/きっかけ」の3要素をどう揃えるか？というモノ。 詳しくは深津さんの記事がとってもわかりやすいのでおススメです。 アプリノックがUI改善の勘所だけでなく、Growthの知識も一緒に学べるコンテンツになっていくと嬉しいです。 それではいってみましょう！ 【動機】がないと、やる気にならない①慣れない体験にはイメージ作りを よくわからない体験は
こんにちは、越川です。 皆さんは構成図を描く機会ありますか？ 僕の場合、内部のメンバーやお客様との議論の場で、構成図を描いて図解ベースで説明することが多いです。実際に描いてみると色々と考慮すべき点が多く、今回は自分なりに普段意識している点を言語化してみようと思います。 なぜ構成図を描くのか 構成図を描く際に意識している３つのこと 1. 導線 2. 引き算思考 1. 主役を決める 2. 読者を想定する 3. 高さや大きさを揃える さいごに なぜ構成図を描くのか 構成図のメリットは相手に伝えたいことをシンプルに伝えられる点だと思います。文章で書くと沢山書かなければいけないことが構成図を使うとスムーズに相手に伝わります。例えば、以下の文章を読んでみて下さい。 ユーザーはDNS登録されたFQDNへHTTPSアクセスする CloudFrontはBehaviorに指定されたALBにHTTPSリクエスト
「画像AIに絵を描いてもらうためのテキストを作るAI」が公開 どのような文章を入力したらいいのか分からないとの声を受け開発
テクノロジースタートアップのデジタルレシピは、「画像生成AIに絵を描いてもらうためのテキスト作成支援AI」を公開しました。無料で利用できます。 AI画像生成ツール用にテキストを生成ジェネレーター ユーザーが入力したテキストをもとに画像を生成するとして話題の「画像生成AI」ですが、デジタルレシピは「どのような文章を入力したらいいのか分からない」というSNSでの声が多かったことからジェネレーターを開発したとのこと。 テキストボックスに日本語で文章を入力（推奨は全角500文字以上）、絵のスタイルを指定しボタンを押すと画像生成AIに読み込ませるためのテキストが生成されます。 「AI画像生成ツール用にテキストを生成ジェネレーター」を使って筆者が「Midjourney」で生成。テキストは日本語で「2人の少年が、草原でサッカーボールを蹴って遊んでいます。空は晴れていて気持ちよさそうな天気です。よく見ると
決め手は「QRコード」 都営地下鉄、ホームドア設置もうすぐ100％に 車両改修費20億円→270万円：東京新聞 TOKYO Web
東京都営地下鉄の駅のホームドア設置率が来年2月までに100％になる。4路線のうち、多くの私鉄が乗り入れる浅草線が最後の難関だったが、スマートフォンでおなじみの技術を生かし、数十億円と見積もられた車両改修費を抑え、低コストで全駅設置にこぎ着けた。その技術とは―。（三宅千智）
以前まではJavaScriptでないと実装できないと思われていたものも、最近ではHTMLとCSSのみで実装できるものが増えてきました。HTMLとCSSには新しい機能が追加され、そして古いブラウザのサポートも必要なくなり、より簡単に実装できます。 実はJavaScriptを使用せずに、HTMLとCSSで実装できるUI要素を紹介します。 You can create these elements without JavaScript by Adrian Bece (@AdrianBDesigns) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レスポンシブ対応のテキスト省略 スター レイティング ツールチップ・ドロップダウンメニュー モーダル フロートするラベル アコーディオン・トグル 終わりに はじめに スマホやWeb
Innovative Tech： このコーナーでは、テクノロジーの最新研究を紹介するWebメディア「Seamless」を主宰する山下裕毅氏が執筆。新規性の高い科学論文を山下氏がピックアップし、解説する。 米ミシガン大学、米フロリダ大学、電気通信大学による研究チームが発表した論文「You Can’t See Me: Physical Removal Attacks on LiDAR-based Autonomous Vehicles Driving Frameworks」は、自動運転車の周囲を検知するセンサーにレーザー光を物理的に照射して、選択的に障害物を見えなくする攻撃を提案した研究報告だ。偽の情報を注入するスプーフィング攻撃で自動運転車の物体検出モデルに影響を与え安全を脅かす。 自動運転車の知覚システムは、LiDARやカメラ、レーダーなどのセンサーを活用して、障害物回避やナビゲーション制
GPT-3を使って自分だけのAIアシスタントを作る第一歩 - Taste of Tech Topics
皆さんこんにちは。健康診断の結果がちょっと気になる年齢になってきたSsk1029Takashiです。 GPT-3を扱ってチャットボット作ってみる記事の第2弾になります。 第1弾のこちらもぜひご覧ください。 acro-engineer.hatenablog.com 前回は質問応答システムとしてGPT-3を活用しましたが、今回はAIアシスタントとしてGPT-3を活用してみます。 AIアシスタントとは何かというと、Google Homeのように命令を入力すると、それに沿った処理を実行してくれるシステムを指します。 ChatGPTとの違いは命令の結果は必ずしも文章生成だけではないということです。 ChatGPTでは文字列を入れて、要求に沿った文字列を返します。 対して、AIアシスタントでは、カレンダーに予定を入力したり、アラームを設定したりなど、具体的なタスクを実行します。 この記事では、前回に続
最近のラインディングページで見かけるデザインやアイデア、コピーライティングがまとめられたSaaS Pagesを紹介します。 ヘッダやフッタのデザイン、ナビゲーションのアイデア、CTAや価格一覧やFAQのコンポーネントなど、インスピレーションが刺激されます。
Parrots in captivity seem to enjoy video-chatting with their friends on Messenger
みんな個人でプログラム書いて便利になってるの？
Pythonが流行っているけれど、どうも便利になってない。 自分はプログラマーではないので、スキルが足りてないだけなのかもしれないけれど・・・。 例えば動画を編集していてDaVinciと他のソフトを連携したいなと思っても、そういうのはググっても出てこない。 Photoshopのプラグインとして機械学習を使ったものを入れたいと思っても、ググっても出てこない。 Pythonからエクセルを動かすのは、試してみたが、VBAマクロの方が楽に感じる。操作を記録する機能はあるし、そこから不要部分削ったりすればよく、 Pythonでエクセル動かそうとすると読みにくいし何やってるか結局わからない。 プログラマーの人はエクセルなどを嫌うけれど、matplotlibを細かい調整しようとすると調べて描画し直してを繰り返さないとならず、 GUIでポチポチ調整する方が楽に感じてしまう。 個人でGUIを作るとして、ボタ
はじめまして、ティアフォー技術本部 Planning / Controlチームで開発を行っている堀部と申します。 今回は状態推定の王道技術「カルマンフィルター」が実際に自動運転で用いられるまでの道のりやノウハウなどを書いていこうと思います。 みなさんはカルマンフィルターという言葉を聞いたことがありますでしょうか。 カルマンフィルターとは「状態推定」と呼ばれる技術の一種であり、自動運転においては現在の走行状態、例えば車速や自分の位置を知るために用いられます。 非常に有名な手法で、簡単に使えて性能も高く、状態推定と言えばまずカルマンフィルターと言われるほど不動の地位を確立しており、幅広いアプリケーションで利用されています。 使い勝手に定評のあるカルマンフィルターですが、実際に自動運転のシステムとして実用レベルで動かすためには多くの地道な作業が必要になります。 この記事では、カルマンフィルターが
サイゼリヤが新しい注文方法を導入している。これまでは、各テーブルに置いてある注文用紙に利用客が番号を記入して店員に渡すスタイルだったが、どのように変わったのだろうか。筆者が都内の店舗で体験した内容を交えながら解説する。 テーブルで見つけた小さな「札」 入店後、店員に案内されてテーブルに移動すると、長方形の小さな札を見つけた。札には「いらっしゃいませ」「テーブル番号24」「注文用QR」といった情報が記載されている。見た目は、小売業界で導入が進んでいる電子棚札（画面が電子ペーパーになっており、価格などをリアルタイムに変更可能）に似ている。「この小さな札は何だろう？」というのが最初に見たときの感想だ。
モバイルファーストのウェブデザインは、デスクトップで閲覧する際に重大なユーザビリティ上の問題を引き起こす。長いスクロールページにコンテンツが過度に分散され、余白が広がり、画像やフォントが拡大されるため、ユーザーが情報を把握し、理解することが難しくなるのである。 The Negative Impact of Mobile-First Web Design on Desktop by Kim Salazar, Tim Neusesser and Nishi Chitale on October 13, 2023 日本語版2024年2月6日公開 最近のウェブサイトの多くは、モバイルファーストなアプローチでデザインされている。こうしたページをデスクトップデバイスで表示すると、コンテンツが過度に大きく引き伸ばされて見えることがある。画面を覆い尽くすような画像、肥大化したテキスト、過剰な余白のせいで、
「WEB屋しか使わない単語だから…」サイトの上にある押すとメニュー出てくる3本線のアイコンは「ハンバーガーメニュー」というらしい
まいか🌽 @maikasan そういや会社でウェブ屋さんと電話してて「ハンバーガーメニューをクリックしてもらうと…」って説明されて「なん？て？マック？？造語？」と思いつつ適当に流してしまったんだけど、後で調べたらサイトの上にある押すとメニュー出てくる3本線のアイコンをそう呼ぶらしい事を初めて知ったのであった。
学んだことが実生活に役立つのは嬉しく、意欲にもつながるね。 比較的元気な人が多い大学という施設向けの表現はあるので、他で導入するときはその施設なりの工夫が要りそう。
この記事は Front-End Study #3 で発表されたライブコーディングの内容を記事にしたものです。記事中のソースコードは GitHub でご覧いただけます。 この記事は、これまで一般的なフロントエンドエンジニアだった私が一年ほどアクセシビリティーについて勉強する上で 「最初に教えてくれればよかったのに〜！」と思った内容 を React と Next.js を用いて紹介するものとなっています。 読み終わった後に次にコードを書く際にふと意識できるようなアクセシビリティーの普遍的な事実を紹介し、最後に今後の React の動きについて軽く触れるものになっています。目次は次のとおりです： 基本事項 SPA のルーティングによる問題 リッチなコンポーネントでの例 Jest + React Testing Library でのテスト Reactとアクセシビリティーの今後の動き 役に立つweb
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
サイゼリヤの完全攻略マニュアル｜マッシ｜エッセイスト・ライター
45分間で「ユーザー中心のものづくり」ができるまで詰め込む
新型コロナにおける子供からの家庭内感染 傾向と対策｜ai
ブラウザでリロードしながらキャッシュの挙動を確認してる全ての開発者へ | blog.jxck.io
【2024年6月版】管理画面のUIデザインにおける25の改善ポイント | ベイジのUIラボ～業務システムとSaaSのUIを考える
よく見かけるレイアウト・UIコンポーネント、それだけを実装するHTMLとCSSのシンプルなコードのまとめ
Nausicaa in Toxic Jungle - 3D model by Granicoph
コメダ珈琲店、安定の写真詐欺をしてしまう「絶句」「正気を疑うサイズ」
Setting「設定です」 Configuration「設定です」 Preference「設定です」／Options、Flags、Properties「俺が、俺達が設定だっ！」【やじうまの杜】
Command Line Interface Guidelines
なぜ、ハイパーリンクは青色なのか?
消えゆくスクロールバー｜3inowayosuke
文章レイアウトだけで読む速度が2倍に? 「読書アシスト」の読みやすさの理由
よく使われるレイアウトやUIコンポーネント、それだけを実装するためのHTMLとCSSのシンプルなコードのまとめ
廃業寸前の地方タクシー会社が生んだ配車システムで業界変革、電脳交通が5億円調達
アプリのアップデート300本ノックから学ぶUI改善のヒント｜宮﨑 晃
構成図を描く際に気をつけていること - NRIネットコムBlog
HTMLとCSSも進化している！JavaScriptを使用せずに、HTMLとCSSだけで実装できるUI要素のまとめ
自動運転車の視界から“人だけ”を消す攻撃 偽情報をLiDARに注入 電通大などが発表
Web制作者は要チェック！最近のランディングページで見かけるデザインやアイデアのまとめ -SaaS Pages
Engadget | Technology News & Reviews
カルマンフィルターが自動運転の自己位置推定で使われるまで - TIER IV Tech Blog
「この小さな札は何？」 サイゼリヤの注文方法が激変！ 「メニュー番号を手書き」からどう進化したのか
モバイルファーストのウェブデザインがデスクトップに及ぼす悪影響
大学の１階に設置された「学生が作った最寄り駅の時刻表」必要だったものってこれだ！と褒められる
今からでも遅くない！誰も教えてくれなかった React とアクセシビリティーの世界
koikokoromillefeuille.hatenablog.jp
ameblo.jp/ohohohoho12345
l.smartnews.com
mitusaburo.com
note.com/bungo401
www.tv-tokyo.co.jp