こんにちは！株式会社Rabeeの新人デザイナーのakaneです🏋 今回は、Webデザインで「紙っぽさ」を出す方法を考えてみました。参考事例も掲載しながら紹介していくので、どうぞ最後までお楽しみください！ はじめに：「紙っぽさ」とは？私が言う「紙っぽさ」とは、おもに「雑誌っぽさ」のことです。Webデザインだけど、雑誌っぽい。ディスプレイに映っているけれど、エディトリアル感がある。 たとえば、以下のようなデザインは私にとって「紙っぽい」例です。 出典：六本木未来会議出典：DMN出典：ぼくのおじさんどうして、私はこれらを雑誌のようだと感じるのでしょう？自分なりに考えたポイントを、ひとつずつ紹介していきます。 その①：文字が「組まれて」いる最初に挙げたWebサイトのひとつをよく見てみると、画像左上にある「NO. 153」の文字のうち、「NO.」だけが縦向きになっています。「NO.」と「153」を
KFCのアプリやばすぎて笑う
KFCのアプリが最近リニューアルされたんだけど、稀に見るやばい出来になってて笑える。 これまでのアプリは特段大きな不満もなく使えるものだったのに、何故かいきなりアプリが刷新された。 【新アプリの惨状】 ・これまでのアプリでは会員未登録でもマイルが貯まる仕様だったが、新アプリ移行後は会員登録しないとマイルが貯まらない仕様に。 で、会員未登録のままアプリをアップデートしたユーザーのマイルはすべて消滅。 ・アップデートで未登録会員のマイルが消滅する旨について碌な告知もなかった。 ・アプリに合わせて（？）リニューアルした公式サイトが内容すっからかんでやばい。 https://www.kfc.co.jp/ ・会員登録しようとすると入力画面の携帯電話番号と郵便番号を入力出来る桁数が足りず詰む。 ・ログインの為にワンタイムパスワードが必要だが、送られてくるSMSのパスワードが空欄で詰む。 ・そもそもたか
「ExcelのフォントをMeiryo UIにしてる人の資料はマジで安心感があって信頼できる」資料に使う文字フォントにも色々な宗派があって時に聖戦が起こる
ぴよすけ @piyopiyosakana1 ExcelのフォントをMeiryo UIにしてる人の資料はマジで安心感があって信頼できる。 逆に、他のフォントは開いた瞬間、テンション下がって眺める気になれない。 2024-04-12 20:54:10
“消えない広告” ×マークが押せません!? | NHK
スマホを使っていて、イラッと感じること、ありませんか。 「×マークが小さくて、消そうとしたら、意図せず広告に触れてしまった」 「×マークを押そうとしたら、急に広告が動き、誤って広告サイトに飛んでしまった」 ウェブでの不快なことを聞いたある調査では、「広告を誤って押してしまったり、押しそうになった」と答えた人が、最も多いという結果でした。 実は、これ、「ダークパターン」と呼ばれ、世界で問題になっています。 （デジタルでだまされない取材班 芋野達郎） 押す気はないのに、広告を… マーケティングのリサーチ会社「クロス・マーケティング」が、20代から60代の1100人に、ウェブサイトやアプリを利用している際に感じる不快なことを、複数回答でたずねました。 すると、最も多かったのは『広告が表示され、押す気はないのに誤って押してしまった（押しそうになった）』で、29.5％、およそ3割にのぼりました。 続
こんにちは！東芝UIデザインチームnote事務局の小林Jです。 みなさんは「使いやすさ」について、どのように考え、どのようにデザインしていますか？ちゃんと「使いやすい」ものづくりができているか不安になったことはありませんか？ そんな時によりどころになるのが「人間工学」です。 「人間工学」とは、人間にとって使いやすく、安全な道具や製品、システムを考える学問です。人間特性をもとに環境や道具の使い勝手などを研究する学問でもあります。 「人間特性」とは、知覚から認知、身体に至るまで人間特有のあらゆる機能や性質のことです。どうしてそのような行動をするのか、という原理を知っていることが、モノづくりや仕組みづくりをする人たちにはとても大切なんです。 弊社デザイン部門には人間特性ワーキンググループという専門チームがあり、デザイン部門内で情報共有や勉強会を行っております。 noteにも「人間工学シリーズ」と
こんにちは！株式会社Rabeeのデザイナーのakaneです🐏 今回は、ヘッダー（グローバルナビゲーション）のデザイン事例を調べてみました！パターンごとに分類しながら紹介していくので、どうぞ最後までお楽しみください✍ はじめに：グローバルナビゲーションとは？グローバルナビゲーションとは、Webサイトの全ページに共通して表示される「主要なコンテンツへの案内リンク」です。 一般的には画面上部のヘッダーに設置されることが多く、ユーザーが「今、どこにいるのか？」「目的のページはどこか？」と迷わないように誘導する大切な役割があります。 どんなサイトを作るときもほとんど必須のパーツですが、わたしは気付けばいつも似たようなレイアウトを使いがち…。そこで今回は、グローバルナビゲーションのデザインを100事例見比べて分類してみます🔍 ・ ・ ・ 1. スタンダード型まずは、一般的に「ヘッダー」の言葉で想像
コンビニコーヒー「R買ってL注いだ」窃盗告白に議論沸騰、「犯罪者も被害者も生まないシステムを」犯罪機会論の視点 - 弁護士ドットコムニュース
弁護士ドットコム 犯罪・刑事事件 コンビニコーヒー「R買ってL注いだ」窃盗告白に議論沸騰、「犯罪者も被害者も生まないシステムを」犯罪機会論の視点
すべてのフォームが要件を満たしている場合のみ、送信できます。 フォームバリデーションのデザイン 上記の例では最低限のHTMLのみ実装されています。しかし、実際のサイトではバリデーションエラーをユーザーにフィードバックする必要があります。よりユーザビリティの高いフォームでは、以下の点を検討する必要があります。 エラー時のスタイル エラーメッセージの出し方 バリデーションエラーの表示タイミング 以下では、それぞれについて深堀りします。 エラー時のスタイル エラーを検知する方法として、CSSには:valid疑似クラスと:invalid疑似クラスがあります。これらの疑似クラスは『CSS疑似クラスを活用した、モダンでインタラクティブなフォームの作り方』でも紹介されている、バリデーションエラーが起きている要素にのみ適用されるクラスです。 しかし、この疑似クラスには欠点があります。required属性を
増えるタッチパネルに困ってます 視覚障害者には何も伝わらず 「世の中は便利になるけど」増す生きづらさ：東京新聞 TOKYO Web
荒川区町屋の職場近くのスーパーでは、支払い方法をタッチパネルで選ばなければいけない。全盲の長島さんは店員に操作してもらっている。カードの暗証番号は知られたくないので、スマートフォンのバーコード決済を使う。混雑時は店員に申し訳ないと、買い物には行かないようにしている。 銀行のATMは、一部の操作がタッチパネルでないとできない。行員に暗証番号を口頭で伝えて入力してもらう必要がある。視覚障害のある仲間も、マイナ保険証の利用時にタッチパネルで暗証番号の入力を求められ困っている。「信用はしているが、個人情報が守られているだろうかという不安は消えない」
グラフィック系の開発者であるニキータ・リシッツァ氏が、「自身のプロダクトのあらゆる場所で使用している」と述べるお気に入りのテクニックである「指数平滑法」について解説を投稿しました。 My favourite animation trick: exponential smoothing | lisyarus blog https://lisyarus.github.io/blog/programming/2023/02/21/exponential-smoothing.html リシッツァ氏は下図のようなトグルボタンを例に解説を行っています。クリックすると「オン」「オフ」が切り替わります。まだアニメーションを何も設置しておらず、トグルボタンは左端と右端を瞬間移動しています。 機能的にはアニメーションが設定されていなくとも問題はないのですが、アニメーションを設定することでユーザーは何が起こって
アプリ インフラ構築 保守運用 ケンタッキーフライドチキン 公式モバイルアプリ、公式Webサイト（2024年3月末まで提供） ケンタッキーフライドチキン(以下、KFC)の公式モバイルアプリ、及び、公式Webサイトをリニューアル。企画、運用設計、UI/UX設計、デザイン、開発を担当しました。 今回リニューアルでは、ユーザーにより直観的に情報を提供できるUI/UXと、それを実現可能なシステムをクライアントとともにアイデアを出し合いながら設計しました。公式モバイルアプリと公式Webサイトの更新方法を一元化し、フロントエンドからバックエンドまで、一貫した設計・管理・運用とデータ更新を双方で共通化することで、日々の運用負荷を軽減し、ユーザーに素早く情報を届けることを可能にしました。 また、赤と白を基調とした、KFCのブランドイメージをより印象付けるデザインを企画しました。 *2024年3月末まで提供
Guppi @clgldh2119 大学4年間この機能のおかげで いくつもの課題たちを助けられたが 社会人になりOutlookになったせいで 添付忘れ今のところ2回してる。。。。 Gmailに甘やかされた証拠。。 x.com/shinagawajp/st… 2024-04-19 20:38:40
北海道テレビがコナミとのコラボにより野球中継画面がパワプロ仕様に→｢アウト表示が出るせいで普段の試合では感じることのないイライラ感がある｣
HTB北海道テレビ @HTB_kouhou ♪onちゃん6⃣ﾁｬﾝHTB！でおなじみ、HTB北海道テレビの公式アカウントです＊YouTubeもﾌｫﾛｰお願いします＊ #水曜どうでしょう #ハナタレナックス #おにぎりあたためますか #イチモニ #イチオシ ◆SNS利用規約htb.co.jp/htb/shisei/sns… youtube.com/c/HTB6CH HTB北海道テレビ @HTB_kouhou ＼#イチオシファイターズ⚾／ オリックス🆚北海道日本ハム あす5/4(土)ごご1時からHTBで放送📺 GW特別企画🎏 人気ゲーム「#パワプロ」とコラボ！ プロ野球中継の画面表示がほぼパワプロ⁉ ゲームのデータで選手の特徴もわかりやすくお伝え！ ファイターズ戦観戦チケットなどが当たるプレゼントも🎁 pic.twitter.com/vAuRWSoST7 2024-05-03 13:0
個人ゲーム制作の理想と現実私は個人でゲームを制作をすると同時に、ゲーム制作を通じてより社会を良くしていきたい、と考えている者です（その辺のくわしい話はこちら）。 近年、インディーゲームと呼ばれる、個人や小規模で作成したゲームがランキング上位に入るような機会も増えると同時に、個人でも無料でゲームを作れる環境が大分整ってきました。 将来のなりたい職業ランキングに「ゲームクリエイター」、が入るような時代になり、「ゲームを実際に自分でも作ってみよう！」と思っている人もきっと多いと思います。 しかし、実際のところゲームを完成させたり、継続して作っている人の数は、体感そこまで増えていないと感じます。 その理由はなにか？ そこにはゲーム制作を始めると感じる、理想と現実の大きなギャップが要因の一つにあると感じています。 具体的なギャップの中身としては、 ・プログラミング知識が必要だが、難しくて挫折 ・時間
Linearのリニューアル記事がすごく良かった。 A design reset (part I) How we redesigned the Linear UI (part Ⅱ) その記事の中で「LCHカラースペース」について書かれていた。知らなかったので調べてみると、以下の記事を見つけた。 この記事の内容を抜粋しながら、自分用に簡易なメモとしてまとめる。 LCHとは？LCHは簡単に言うと、異なる色相でも同じコントラストに見えるように構成されたカラースペース。 1976年に国際照明委員会 (International Commission on Illumination, CIE) によって最初に定義された色空間であるため、CIELAB とも呼ばれている。 LCH は、Lightness（明度）、Chroma（彩度）、Hue（色相）の略。 HSL と LCH の違いLightness（明度
寺田 学（@terapyon）です。2024年4月の「Python Monthly Topics」は、Python Web UIフレームワークの1つであるStreamlitを使ってWindowsやmacOSのデスクトップアプリを作る方法を解説します。 目的・モチベーション Pythonで自動化のスクリプトを作ったり、JupyterLabやColaboratoryでデータの可視化を行うことがあります。これらを作成者以外の多くの方に利用してもらう方法として、Webシステムやデスクトップアプリとして提供する方法が考えられます。 Webシステムの構築やデスクトップアプリの作成となると、技術的なハードルがあります。他には、時間的なコストに見合わないという状況もあり得ます。 Python Web UIフレームワークを使うことで、比較的少ないコードでWeb UIからスクリプトの実行や可視化をするアプリ
ネット記事に発信元情報 偽情報の拡散抑止、来年開始へ ｜ 共同通信
全国の新聞社やテレビ局、IT企業、広告代理店が加盟する団体が、偽情報の拡散を抑止するため、インターネット上の記事や広告に発信元の情報を付ける技術の開発を進めている。ユーザーが発信元を確認して、信頼できる情報かどうかを判断しやすくする。 この技術は「オリジネーター・プロファイル（OP）」と呼ばれ、記事や広告に、第三者機関が確認した発信元の企業情報やコンテンツの編集方針をひも付け、表示する仕組み。来年、米グーグルの「クローム」などの閲覧ソフトにこの機能を追加できるようにする計画だ。 ネット上には真偽不明の情報も多い。報道機関の配信記事の見出しや内容を改ざんするケースも発生している。生成人工知能（AI）の技術進化で、コンテンツが真正かどうかを見極めるのが難しくなっている。 OPの技術研究組合の理事長は「日本のインターネットの父」と呼ばれる村井純・慶応大教授が務める。村井氏は「偽情報の拡散が抑制さ
ウェブページ上には「クレジットカード番号」「郵便番号」「電話番号」といった数値の入力欄が存在することがありますが、実装方法によってはブラウザの挙動によって入力内容が変化してしまったり、テンキーでの入力を受けつけなくなってしまったりします。そこで、数値入力欄の実装時に気を付けるべき点をまとめてみました。 KeyboardEvent - Web API | MDN https://developer.mozilla.org/ja/docs/Web/API/KeyboardEvent Why the GOV.UK Design System team changed the input type for numbers – Technology in government https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-desig
meta社製StyleXやChakraチームのPanda CSSなど、CSSフレームワーク界隈は大盛り上がり。そんな各CSSフレームワークはどのような仕組みで動いているのか、自らも「Kuma UI」というCSSフレームワークを作っている観点から深掘りしていきます
This guide is open source, please go ⭐️ it on GitHub and make suggestions/edits there! https://github.com/FrontendMasters/front-end-handbook-2024 1. Overview of Field of Work This section provides an overview of the field of front-end development/engineering. 1.1 — What is a (Frontend||UI||UX) Developer/Engineer? A front-end developer/engineer uses Web Platform Technologies —namely HTML, CSS, and
近年、AIの進化によりソフトウェア開発のプロセスが大きく変化しています。これまで手作業で行われてきた画面設計やプログラミング作業も、AIの登場により驚異的なスピードに進化しています。今回は、その中でも私が実際に使っている2つのAIツール、UizardとUI Sketcherについて紹介します。 なお、本記事では医師と患者を繋ぐマッチングサービスという架空のサービスを例に話を進めます。 Uizard: サービス概要からUIデザインを自動生成 Uizardは、画面設計作業を劇的に短縮する革新的なAIツールです。このツールを使えば、サービス概要を入力するだけで、わずか数分で美しく洗練されたUIデザインが生成されます。つまり、開発者は時間をかけてUIデザインを考える必要がなくなり、その時間を他の重要な作業に集中することができます。 Uizardの使い方 メニューから Generate with A
Appleがスマホの画面を認識できるマルチモーダルLLM「Ferret-UI」を発表、SiriがiPhoneアプリのUIを理解できるようになる可能性も
Appleの研究者が、スマートフォンのアプリUIを理解するために設計したマルチモーダル大規模言語モデル(MLLM)の「Ferret-UI」を開発したという論文を、未査読論文リポジトリであるarXivで公開しました。 [2404.05719] Ferret-UI: Grounded Mobile UI Understanding with Multimodal LLMs https://arxiv.org/abs/2404.05719 Apple teaching an AI system to use apps; maybe for advanced Siri https://9to5mac.com/2024/04/09/ferret-ui-advanced-siri/ ChatGPTのようなチャットボットAIシステムのベースとなっている大規模言語モデル(LLM)は、主にウェブサイトから収
こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです。 今回は、LPや提案資料などでよく使用されるデザインパーツ「ステップ・フロー」のUIを集めてみました。 「パーツ別デザインまとめ」シリーズも第３弾となりました。 今後も地道にUIパーツの収集・調査を続けていく予定です！ （前回までの記事も是非ご覧ください ↓） はじめに「ご利用の流れ」や「お申込の流れ」など、時系列に並んだ項目をわかりやすく可視化する手段として用いられるステップ・フローのセクションは、サービスやプロダクトを訴求するLPや提案資料にかかせない存在です。 今回はそのステップの整列パターン別に、PC・SPでどのようにレスポンシブされるのか？という調査も含めデザインを収集しました。 💡横に整列宅トラカードの中に手順の概要やイラストをまとめている形式です 中身の情報量によりますが、4ステップ程度だと丁度よいサ
待ち受けにしてるうちの犬、なんか当然のように時間より前にいるし、救急車呼ぶときもこいつがいる真っ白な空間を通らないといけない
原口フ二ャオ @haraguchitachi 待ち受けにしてるうちの犬、なんか当然のように時間より前にいるし、救急車とか呼ぶときもこいつがいる真っ白な空間を通らないといけないのマジでやばい pic.twitter.com/FBNKUmcyBw 2024-04-23 21:58:57
「業務システムの画面デザインを作るときに参考になるサイトってある？」 「使いやすいUIにするにはどのようなポイントに注意したら良い？」 業務システムは操作性が命。システムの画面デザインが優れていないと、ユーザーが不便に感じてしまうかもしれません。使いやすいシステムを構築するには完成しているデザインやUIを参考にし、開発中の業務システムにうまく取り入れる必要があるでしょう。 そこで本記事ではデザイン・エンジニアリング両面からサービスの設計・開発を行っているFlowzが以下の内容について詳しく解説します。 業務システムの画面デザインサンプル7選 画面デザインにおける5つのポイント 改善すべき画面デザインの特徴 デザインのサンプルを探している方はもちろん、画面を設計する際に意識すべきポイントについても解説するので、ぜひ最後までお読みください！ なおFlowzではデジタル領域でのサービス設計、プロ
ノベルゲームやアドベンチャーゲームの制作に使える主要なノベルエンジンをまとめました。RPGなどを制作するツールでノベルエンジンとしても利用できるものは除いています。 ノベルエンジンの演出には固有の特徴のあるものも多いもの。そうした違いもできるだけ紹介しました。 スクリプトをツール内のUIで入力できるものや、素材がプリインストールされているものは操作が簡単なことが多く、初心者向き。慣れてくると、テキストエディタなどで一括操作が可能なコマンドを入力するタイプのほうが便利かもしれません。 自分の制作スタイルに合ったノベルエンジン探しの参考にお役立てください。
Making of “Kindolphin” | 麦 Baku
group_inou / HAPPENING group_inouとAC部のミュージックビデオ作品『HAPPENING』をWebアプリ化しました。デザインと実装は僕一人です。元のビデオがGIFアニメ縦長漫画が歌詞に合わせて自動スクロールする仕様だったので、GIFの質感をロスレスかつ自分のペースで楽しめるように、某電子書籍アプリのような体裁でインタラクションできるようにした次第です。 We have just released a Webtoon app that highlights the lyrics of group_inou's music video "HAPPENING". You can switch between Japanese/English, change colors, stop and have a close look, or just scratch and
株式会社RabeeでUI/UXデザインをしているmayukiです 0→1を生み出す瞬間、プロジェクトのエンジンとなれるようなばちイケデザイナーを目指しています。 突然ですが…こんなお困りごとありませんか？💭 「デザイナーとしてクライアントの要望をうかがう際に、何を聞いたらいいかわからない」 「ヒアリングしてきたものの、いざ手を動かし始めたらわからないことがポロポロ…」 「クライアントに聞きたいことがたくさん出てきてしまった…」 今回は、webサイトやアプリのデザインの制作を受注する想定で、クライアントへの初回ヒアリングをする際にデザイナーとして聞くべき最低限のことをまとめました。 ※保存版のためなかなか長い記事となっています。 この文章はこんな方におすすめです ・デザイナーになりたてのジュニアクラスの方 ・スクールに通ったり独学で勉強したのでそろそろクラウドソーシングでお仕事を受けたい方
こんにちは！株式会社Rabeeでデザイナーをしています、nanamiです。 最近、プロダクトやサービスの内容を紹介する手段として、イラストやモーショングラフィックなどを用いた動画が使用されているのをよく見かけます。 そこで今回は、サービスの内容を1~2分でまとめたサービス紹介動画を複数ピックアップし、その構造を分析してみることにしました。 はじめに本記事を書くに至った経緯私は現在、映像のデジタル合成やモーショングラフィックの制作などができるAdobeのソフト“After Effects”の学習をしています。 直近のゴールとして、モーショングラフィックを用いたサービス紹介動画を作れるようになろう！ということで、今回の記事はその学習の一環としてまとめました✍️ 動画で伝えるために大切なことAfter Effectsのスキルも重要なのですが、サービス紹介をする上でより重要なのはそのストーリー構成
システム開発においてテストの自動化は欠かせない要素になってきている。継続的に開発を進めながらサービスを成長させるモダンな開発スタイルは、高い頻度でテストすることで品質を担保しているからだ。一方、自動テストを実施したいと考えながらも、実行まで至らない、実行し始めてもうまく継続できていないという開発者も少なくないだろう。本セッションでは、ソフトウェアテストの専門企業である株式会社ヒューマンクレストの浅黄友隆氏が、UI層を操作するE2Eテストの自動化の取り組みについて具体的に紹介した。本レポートでは、自動テストを進める際に現れる2つの山と激しい環境変化にどのように対応するのか、そのポイントを解説する。 自動テストを進めるうえで直面する2つの課題と環境変化 株式会社ヒューマンクレスト 取締役 兼 技術推進本部 本部長 / テスト自動化研究会（STAR） 浅黄友隆氏 セッションの前半で、浅黄氏は自動
BARフロントえんどう #2 「CSS Library / Framework」での登壇資料
こんにちは、MLOpsチームです。先日OCRモデルを学習するためのアノテーションにおいて、作業効率を検証するためのPoCとしてアノテーションUIを開発しました。本記事ではこのアノテーションUIにおける工夫について、試用によって得られた知見をまじえつつ紹介します。 はじめに アノテーションUIを開発することとなった背景について説明します。 アノテーションUIとは アノテーションUIは機械学習の学習データを作成するためのUIです。アノテーションUIはアノテーション作業の効率に強く影響し、アノテーション作業によって得られる学習データの量は機械学習の精度に大きく寄与します。したがって、アノテーションUIは機械学習において最も重要なコンポーネントのひとつといえます。 UIを開発した背景 キャディではOSSツールなどのUIを用いてアノテーションが行われていましたが、ここに独自の工夫を導入すれば入力効率
5年後、生成AIでエンジニアの仕事はどう変わるのか？ メルカリ、LayerX、Algomaticの3社が語るAIへの取り組み
生成AIの技術革新が相次いだ2023年、生成AIを本格的に業務やサービスに導入する企業が増える中、生成AIの最前線に取り組むエンジニアは、現状をどう観察していて、今後どうなっていくと考えているのだろうか。本セッションでは、メルカリ、LayerX、そして2023年に創業したばかりのスタートアップAlgomaticの3社が集い、事業フェーズの異なるそれぞれの視点から、生成AIへの現状の取り組みや、今後期待する変化について語った。 生成AIへの3社の取り組み 「生成AIを本気で推進するトップランナーが語る！AIの展望2024年とその先」と題したパネルディスカッションでは、PIVOT 蜂須賀大貴氏がモデレーターを、メルカリ 石川佑樹氏、LayerX 松本勇気氏、Algomatic 南里勇気氏がパネリストを務めた。 冒頭で蜂須賀氏は「他の2社に負けない生成AIへの取り組み」というテーマを提示し、各社
HTML-first, framework-agnostic implementation of shadcn/ui - franken/ui
Coming Soon We're sorry, but this feature is not yet available. We are working hard to make it happen as soon as possible. Thank you for your patience and understanding. Please check back later for updates. Just a demo The element you clicked is for demonstration purposes only and does not lead to actual content. Everything you see here is a simulation intended to demonstrate how the UI elements m
与作さん(YsK439) @YsK439 音楽レーベルの主宰 @diversesystem クリエイティブに関わる雑用やゲーム開発協力が仕事です。重度のライトゲーマー。昔は音ゲーとガンシューのスコアラーやってました。 DiverseSystemの事はDiverseSystemにお問い合わせ下さい。 gamersnest.com
We are excited to announce support of submenus in the latest release of React Spectrum and React Aria! In the process of adding this feature, we found ourselves solving some unique challenges while working to make submenus user-friendly and accessible across an array of devices and input types. In doing so, we wanted to share our thought process in solving one of the challenges we faced along the
IIJは、2024年2月7日、ダークパターンやCookie利用における法規制や企業対応をテーマとしたセミナーを開催した。 インターネットが日常生活に必要不可欠で、当たり前に使用するツールとなった現在、消費者は、個人情報を窃取されたり、意図に反した行動を取らされたりしないよう、常に注意しなければいけなくなった。一方で、サイトやサービスを運用する企業側が、プライバシー規制の厳格化と相まって、配慮すべきトピックとなっているのが「ダークパターン」および「Cookieの利用」だ。 本記事では、国内外のダークパターン規制および具体例を紹介するセッションと、ヤマハ発動機やライオンのサイト担当者が登壇したCookieバナー実装がテーマのパネルディスカッションの様子をレポートする。 国内外のダークパターン規制事情、日本でも特定分野やケースで法令違反となることも まずは、「欧米でのダークパターン規制の動向と日
はじめまして、株式会社Rabeeでデザイナーをしているkoppiです🐰🐝 1年目デザイナーが日々の学びをnoteに綴っていきたいと思います。 雰囲気や想いなどをデザインとして具現化するのって難しいですよね。 何かヒントになるようなものがあると嬉しいなと思い…。 今回はペルソナやトンマナを決める際に役立ちそうなブランドアーキタイプ についてお話しします。 アーキタイプとは？アーキタイプとは、心理学者カール・ユングが提唱した概念です。 人々の深層心理に共通して存在している、典型的なキャラクターや象徴を指します。 ブランドアーキタイプとは？ブランドアーキタイプは、その理論を応用したもので、ブランドが持つパーソナリティや特性を表現する枠組みとして使われます。 ブランドは12の主要なアーキタイプに分類されます。 デザインとブランドアーキタイプの関連性デザインを行う際にブランドアーキタイプを活用す
先日リリースされたSafari 17.4をはじめ、まもなくリリースされるChrome 124でフォームコントロールの縦書きモードが正式にサポートされます。これで、すべての主要モダンブラウザでサポートされることになります。 縦書きモードの対象として日本語ユーザーも含まれているのだと思いますが、見慣れぬせいか違和感が、、、縦書きのコンテンツだったらいいのかな。 フォームを縦書きにするには、writing-mode: vertical-rl;を設定します。サポートブラウザは、Safari 17.4+, Firefox 120+をはじめ、Chrome, Edgeも119からサポートされており、間もなくリリース予定のChrome 124で正式にサポートされる予定です。 writing-mode: Vertically-oriented form controlsのサポートブラウザ 詳しくは、下記をご
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Webデザインで「紙っぽさ」を出す方法を考えてみる｜akane
デザインスキルを上げるならこれを読むべし！基本の人間工学記事 3選｜東芝 UIデザイン
ヘッダー（グローバルナビゲーション）のデザイン事例100選｜akane
2024年版 HTMLで作るフォームバリデーション - ICS MEDIA
アニメーションをスムーズに見せるためのテクニック「指数平滑法」とはどんなものなのか？
ケンタッキーフライドチキン 公式モバイルアプリ、公式Webサイト（2024年3月末まで提供） | チームラボ
Gmail、ほんと頭いいな→「わしはこれで1000回命を救われた」「私らがAIに求めてんのこういうことなんよな」
見栄えが悪いゲームは誰も遊ばない！ダサイゲームをこの世から駆逐する！｜ゆーりんち
LCHは、UIにベストなカラースペース｜hirotoarakawa
Python Web UIフレームワークで作るデスクトップアプリ | gihyo.jp
ウェブページに「数値の入力欄」を実装する際はテンキーの存在を考慮する必要あり
現代CSSフレームワークの内部実装とその仕組み
The Front End Developer/Engineer Handbook 2024
AIによる爆速開発：画面設計からプログラミングまで自動化！？ - Qiita
「ステップ・フロー」のUIを集めてみた｜パーツ別デザインまとめ｜nanami
【定石】業務システムの画面デザインサンプル7選！UIを改善するポイントも紹介 - Keeperz
ノベルゲーム・アドベンチャーゲーム開発に便利な主要ノベルエンジンまとめ
【2024年版】デザイナーが初回ヒアリングで聞くこと&聞き方まとめ｜mayuki@Rabee
Webデザイナーが「サービス紹介動画」を構造分析してみた（8事例）｜nanami
ソフトウェアテスト専業企業が事例で語る、UIテスト自動化の始め方と続け方は？
アクセシビリティを考慮したUI/CSSフレームワーク・ライブラリ選定
アノテーションにおけるUIの工夫 - CADDi Tech Blog
「弊社開発事例ではございません」ケンタッキーアプリの旧開発元、無関係をアピール中【やじうまWatch】
なんか本人認証のチェックが出てきたんだけど今俺は何を聞かれている? どうすればいい?「面白すぎて無理(笑)」
Creating a pointer-friendly submenu experience
企業が避けるべき「8つのダークパターン」と「Cookieバナー実装」、IIJが説明 (1/3)
デザインのペルソナ設定やトンマナの決定に役立つ！「ブランドアーキタイプ」とは？｜koppi
フォーム要素の縦書きモードがすべての主要ブラウザでサポートされます！ 見慣れないせいか違和感が