SmartHR Design Systemだれでも・効率よく・迷わずに。SmartHR Design Systemは、すべての人によりよい体験を届けるためのデザインシステムです。SmartHRに関わる人はどなたでも利用・参加できます。 デザインシステムとは？
ユニクロ公式サイトが使えません（ついでにレジも）｜ブラインドライターズ
ブラインドライターズのスタッフは9割が視覚障害者。 先日、みんなで「どうやって服を買うか」の話になりました。 マネキンの服は見えないので、コーディネートが分からない 下着を買いたいけど、店員さんの性別が分からないので声をかけづらい ロービジョンなので黒なのか紺なのかわかりにくく、店で買いづらい などと、たくさんの悩みごとがありました。 確かに、異性の店員さんに下着の相談はしにくいですよね。 タグが読めなければ、サイズも分からない。リアルでの買い物は一人ではけっこう難しそうです。 そんなときに便利なのがECサイトです。 色もデジタル表記になっていればPCが読み上げてくれるので選びやすい 下着も人に頼まなくていいので買いやすい マネキンのコーディネートは見えないので、サイトで確認したい また「リピ買いするならサイト」という意見もありました。確かに見えていないと広い店内のどこにあるのかサッパリ分
UIの色を変えただけで大量のクレームを頂戴してしまった話｜のなと
Webプロダクト開発をしていると様々な諸事情によりUI構成を変えたり機能を増やしたり減らしたりすることが多々あると思います。そんな時に避けられない事態として「UI変更に対するお怒りがユーザーからわんさか届いてしまう」ということがあります。今回はUI上の１要素の色を変えただけで虎の尾を盛大に踏んでしまった事件の話をしようと思います。差し当たりどういうUIをどう変えたのかを明示しておきます。変える前がこちら↓↓ beforeUIほんで変わった後がこちら↓↓ afterUIご覧の通り「作業カード」と呼ばれるコンポーネントの色を「緑＆黄」から「緑塗り＆緑枠線」に変更しました。「え、それだけ？」という声が聞こえてきそうですがそうなんです。それだけなのです。しかしここはレガシードメインのtoB SaaS。toB SaaSではUIの変更がユーザー業務への影響に直結するので軽微な変更を加えるのもハードルが
【総まとめ】2023年世界で話題になったWebデザイン・ベスト50選
「このWebサイト、素敵。」と感じさせるモノとは、一体何でしょう。 それはデザインなのか、それとも機能性なのか、または「このフォント、配色が好き」といった特定のデザイン要素かもしれません。 ずばり、この問題の答えはポンと出せるほど単純ではなく、これらの要素を組みあわせることで、素晴らしいWebサイトは生まれます。 この1年間で、デザイン制作の参考にしたいWebサイトを２００以上紹介してきました。 製品やサービスを販売、紹介するサイトや、実験的なサイト、情報を提供する教育的なサイト、政治的なサイト、そして夢中になる体験型サイトまで、業種もさまざまです。 この記事では、デザインアイデアにしたり、トレンドを分析したり、２０２３年の振り返りに最適な５０のWebデザインを厳選してご紹介します。
BASEのVue.jsコンポーネントの設計について登壇してきました - BASEプロダクトチームブログ
前書き フロントエンドエンジニアの松原(@simezi9)です。 先日10月30日にクラウドワークスさんをお借りして実施したVue.jsの設計勉強会である、Vue.jsアーキテクチャリング勉強会 にて、 BASEの現在のVueコンポーネントの設計に関して登壇してお話してきました。 全体の資料はこちらです もともとBASEではVue.js+TSを採用した大規模なシステムのリニューアルプロジェクトが2018年からスタートしていました。それにあたっての大まかなフロントエンドの構築方針は以前もblogや外部登壇で発表していました。 次世代の管理画面を作るフロントエンドの取り組み - BASE開発チームブログ 次の5年を支えるVue.js製UIコンポーネントライブラリを育てる これまでの発表では大枠の技術スタックやワークフローの話が多かったですが、 今回はVueコンポーネントの設計が勉強会の主眼にあ
「ダークパターンレポート2023」を公表。ECサイトやアプリでの購入経験者799人への意識調査
「ダークパターンレポート2023」を公表。ECサイトやアプリでの購入経験者799人への意識調査 4割強がダークパターン被害を経験。7割強が、ECサイト等の運営企業に対応を求める 企業や行政と伴走し活動を支えるデザイン会社の株式会社コンセント（本社：東京都渋谷区 代表：長谷川敦士 以下、コンセント）は、消費者をだますウェブサイトやアプリのユーザーインターフェースである「ダークパターン」について、全国18歳から69歳までのECサイトやアプリでの購入経験者799人を対象に、見たりひっかかったりした経験やその際に取った行動、認知・理解度などの実態を調査し、「ダークパターンレポート2023」としてとりまとめました。 調査の実施背景 ダークパターンの問題を顕在化し、個人・企業・行政で取り組める社会に ダークパターンとは「消費者の自主性や意思決定や選択を覆したり損なわせたりする選択アーキテクチャを、主に
Adobeユーザーはダウンロードしておこう！ Adobe Fontsで使用できる日本語フォントすべてを一覧できるPDF 2023年最新版
11/15に、Adobe Fontsで使用できる日本語フォントが増えました！ 今回のアップデートでは、マンガ制作用にデザインされたアンティーク書体「貂明朝アンチック」をはじめ、砧書体制作所、FONT1000、視覚デザイン研究所、もじワク研究などの日本語フォントが使用できるようになりました。これらのフォントをはじめ、Adobe Fontsで利用できる日本語フォントすべてが一覧できるPDFも無料でダウンロードできます。 Adobe Fonts日本語書体一覧のPDF 2023年11月版 Adobe Fontsは、Adobe CCのユーザーなら追加料金なしで利用できます。もちろん商用利用もOK、詳しくはライセンスページをご覧ください。 フォントのライセンス -Adobe Fonts 一番安いプランを教えて、とたまにメールがきます。Adobe Fontsが使用できて一番安いのは、InCopy年間プラ
Design Skill Map - メルカリUXデザインチームの専門スキル｜Mercari Design Blog
UX Designチームのasakomです。今回はデザイナーの役割定義の活動の一つとして作成した、”Design Skill Map”についてお話しします。 このSkill Mapは、メルカリUX Designチームで求めるデザイナーの専門スキルを整理したものです。以前紹介したDesign Ladderは、メルカリの行動指針に基づいて作成した、デザイナーに求める態度やマインドセット。今回は専門職としてのデザイナーに必要な技術や知識をSkill Mapとしてまとめました。 UXデザイナーの役割定義や、個人の目標設定、採用の基準作りなど、チームの運用に関わる人や、メルカリのUXデザインチームが求める人材に興味のある方に、ぜひ読んでいただきたいです なぜSkill Mapを作ったかUXデザインチームの役割定義は、チームのミッション達成のために存在します。私たちのチームのミッションは、”メルカリの
第2回 WCAG3のコントラスト基準APCAの考え方と実例 | gihyo.jp
デジタルコンテンツにおけるアクセシビリティ、特にコントラストの基準について解説する連載の第2回目です。前回の記事では、現在のWCAG2のコントラスト基準と課題について解説しました。今回はWCAG3で採用が検討されている新しいコントラスト基準、APCAについて解説します。 APCAとは WCAG 2.0でコントラストの基準が策定されて以降、ディスプレイやWebコンテンツ、CSSの機能、および視覚科学の進歩など様々な状況が変化しました。WCAGの基準についても、コントラストや視認性についてより知覚を正しくモデル化するガイドラインが求められるようになりました。 APCA（Advanced Perceptual Contrast Algorithm）はWCAG3にて現行のコントラストに代わる基準として開発・検討されている、新しいコントラスト基準です。前回紹介したようなWCAG2の基準の課題に応える
第1回 デジタルコンテンツの視認性とWCAG2のコントラスト比の課題 | gihyo.jp
はじめに サイオステクノロジーの伊藤と申します。今回から数回にわたりデジタルコンテンツのコントラストというテーマで、WCAG2のコントラスト基準とWCAG3で検討が進められている新しい基準APCAについて解説していきます。 対象読者としては、ウェブサイトやアプリケーションなどデジタルコンテンツの制作に携わるデザイナーやエンジニア、アクセシビリティに関心のある方を想定しています。 現在勧告されているWCAG2の達成基準では、テキストや視覚要素のコントラストが一定の基準を満たす必要があります。たとえば、レベルAAでは文字色と背景色のコントラスト比が4.5:1以上であることが要求されます。 図1 テキストとの視認性を確保するために、背景色とのコントラスト比を考える必要がある しかし、人間の目は明るい色と暗い色のコントラストを認識する際に、明るい色の相対輝度が高いほど視認性が高くなるという特性があ
TODOは不快になるように残す | Marginalia
実行しなければならないことは、それが実行されないとストレスが溜まるようにデザインする。やる気という積極的なモチベーションが十分にあるなら不要かもしれないが、やる気があるなら大抵の場合はすぐに実行されており、やる気が湧かないからこそタスクとして残るといえる。そういう場合は、やる気とは違う消極的なモチベーションに頼ることをする。 たとえばTODOの管理は、タスクが残っている状態が不快であるようにする。間違っても、タスクが整然と並んでいる様子に満足感を覚えるようなデザインではいけない。残っているタスクが常に意識にちらつき、さっさと片付けないとイライラするような仕方を心がける。たとえばディスプレイや作業スペースにベタベタと付箋を貼り付けるのは、その見栄えが悪いことに意味がある。片付けたくなるように、あえて散らかすことに意味がある。 積読もそうしたデザインと捉えられる。物理的に本を積み上げてデスクや
デザインの「悪い方がよい」原則 The Rise of "Worse is Better"
デザインの「悪い方がよい」原則 The Rise of "Worse is Better" rpg@lucid.com 日本語訳: daiti-m@is.aist-nara.ac.jp 私や Common Lisp と CLOS のデザイナーのほとんどは、MIT/Stanford 方式の設計に親しんでいる。 この方式の核心は、「正しい」やり方をせよ、という ことにつきる。デザイナーにとっては、以下の点をすべて正しく満たすことが 重要である。 簡潔性 デザインは実装と使用法の両面において単純でなければならない。 このとき、使用法が単純な方が、実装が単純なことより重要である。 正当性 デザインはすべての点において正しいものでなければならない。 誤りは許されない。 一貫性 デザインは一貫性を欠いたものであってはならない。一貫性を保つ ためには完全性は少しだけ犠牲にしてもよい。一貫性は 正当性と同
どなたでも利用できる、イラストレーション・アイコン素材集を配布します ｜デジタル庁
※2023年6月27日 「今回配布を予定しているアイコンの例」画像を差し替えました。 ライセンスの記載について追記しました。 デジタル庁では、行政手続をわかりやすくするためのイラストレーションやアイコン素材集の制作をおこなっています。 2023年の始めにプロジェクトが発足し、これまでデジタル庁の四半期報告会見資料や、重点計画資料で活用をおこなってきました。これらの素材集を、府省庁や自治体、事業者の方々など、どなたでも活用ができるように配布をはじめます。 Figma Communityで公開しているデジタル庁デザインシステムから、ウェブやアプリケーションで利用ができる素材を6月中に配布開始予定です。 専門的でわかりにくい行政手続の改善へマイナンバーに関連するデジタル手続は専門用語が多く、イラストレーションやアイコンなどを活用して、ひと目でわかりやすく伝える必要があります。しかし、これまでは政
文字と行間の大きさは何が良い？読みやすさとKPI両立への挑戦
ヤフー株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。LINEヤフー Tech Blog こんにちは、デザイナーの鈴木です。CTO室でユーザインタフェースの研究開発を行っています。 みなさんはスマートフォン向けのアプリケーションやWebページを作成する際、文字と行間の大きさをどうしたらよいか迷ったことはないでしょうか？ 私たちはこの疑問を明らかにするためにクラウドソーシングを用いた大規模な実験を実施し、どんな大きさの組み合わせが適切であるか定量的・定性的な分析を行いました。本記事ではこの実験と分析の結果について述べ、さらにこの知見をヤフーニュースに適用した結果どのような貢献が見られたかお話しします。 予備実験 読みやすさに影響を与えうるフォントプロパティはさまざまなものが考えられます。私たちはその中から文字と行間の大き
ノンデザイナーズ・デザインブック25周年記念🎉 特典PDFを応募者全員にもらえる太っ腹キャンペーンが開催されています
不朽のデザイン書「ノンデザイナーズ・デザインブック」 ついに25周年を迎え、期間限定のキャンペーンが開催しました！ 「ノンデザイナーズ・デザインブック Missing Pages 2023」の特典PDFをなんと応募者全員にもらえる太っ腹キャンペーンです。毎回当ブログで紹介しているので、前回以前のPDFを入手している人は欠かせませんね。もちろん、今回が初めてでも大丈夫！ 142ページの大ボリュームで、「え！無料でいいの？」っていうレベルです。 応募の対象となる人は、「ノンデザイナーズ・デザインブック」の愛読者限定。 さっそく、PDFの入手方法から紹介します。 手順は、3ステップです。 Twitter、Instagram、Facebook、note、個人ブログなどで『ノンデザイナーズ・デザインブック』に関するコメントを投稿。その際ハッシュタグ「#ノンデザ25周年」を入れてください。 ノンデザ2
「システムの画面」と「利用者の認知」のギャップを意識する - ヴェルク - IT起業の記録
boardというSaaSの開発の中で、画面上の文言・配置・全体の流れ等をどのように考えて作っているか、という話です。 一般的なUIの話ではなく、サポートの経験から「認知とのギャップ」という視点で考えてたりするので、それについて書きたいと思います。 人は自分の知識・経験から物事を理解しようとする 人が新しいものを触る際、これまでの知識や経験などと照らし合わせながら物事を理解する傾向があるものだと思っています。 そのため、何か新しいものに触れる際、これまで似たような経験をしたことがあったり、知識があったりするものはスムーズ理解できます。逆に、それが少なかったり似たものがなければ、理解のハードルが高くなると思っています。 そのため、初めてシステムを触る際に、これまでの知識・経験とのギャップが小さければ小さいほど、スムーズに理解できる可能性が高くなります。 boardの画面を考える際、想定ユーザー
Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎
Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎 2023.02.18 ウェブアプリケーションエンジニアを対象に、アクセシビリティの対応について解説した記事。アクセシビリティを向上させるためには、正しいHTMLの書き方が必要である。HTML要素には、アクセシビリティに関する機能が元々備わっているため、適切なHTMLを選択し使用することが大切だ。複雑なUIの場合はWAI-ARIAを使用し、ARIA Authoring Practices Guideに基づき適切に実装する必要がある。UIライブラリ選びの際には、WAI-ARIAに従った実装を行っているかが基準の1つとなる。 この記事は、ウェブアプリケーションエンジニアとして仕事をされているほうを対象に書かれています。日々のウェブフロントエンドの開発の中で意識しておきたい基礎的な内容をメインに記載しています。 そのため、ここ
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Fragment - A Powerful and Versatile complete Font - Free to Try
さっぽろ東急百貨店のUNIQLOの広告が文字の色が全部同じで文字組みだけなのにぱっと頭に入ってくる「文字組みの凄さだ」
PREDUCTS - Desk for Good Work
