並び順

ブックマーク数

期間指定

  • から
  • まで

121 - 160 件 / 482件

新着順 人気順

アクセシビリティの検索結果121 - 160 件 / 482件

  • 【iOS14】ドアベルなどの音をiPhoneが聞き取って通知する「サウンド認識」 - iPhone Mania

    イヤホン・ヘッドホンで音楽を聴いていたら、家のチャイムが鳴っているのに気づかなかった。何かいい解決策はないの? iOS14 / iPadOS14から「サウンド認識」機能が追加されました。元々は「アクセシビリティ」に分類されている、聴覚サポート機能の一つです。しかし、iPhoneが聞き取った音を通知してくれる機能は、日常生活で便利に活用することができます。 例えば、イヤホンやヘッドホンで音楽を聴いていると、外部の音を認識しづらくなります。そのため、ドアのチャイムが聴こえなくて応対できない場合があります。「ドアベル」の音を通知するように設定すれば、チャイムの音が聞こえなくて宅配便の荷物を受け取れなかった、といったことを防ぐことができます。「ドアベル」の他にも「水の出しっ放し」などの認識可能な音があるので、お好みで設定することをおすすめします。

      【iOS14】ドアベルなどの音をiPhoneが聞き取って通知する「サウンド認識」 - iPhone Mania
    • 【Ventura】ぼくのかんがえたさいきょうの Mac 初期設定 - Qiita

      はじめに 2023年2月3日、Apple が新型の MacBook Pro / Mac mini を発売しました。 おもわず財布の紐が緩んでポチってしまった方も多いと思います。 そこで、Mac を買ったらやっておきたい初期設定を記事にまとめました😀 参考:おれのおれによるおれのためのMacおすすめ設定 Chrome のインストール まず最初に Chrome をインストールし、アカウントにログインします。 初期設定の過程でいろいろと調べものをしたり、Google ドライブに保存しておいた設定ファイルなどを取り出したりしたいからです。 システム設定関連 1. 入力周りをカスタマイズする これから設定を進める上で、入力でモタつくとイライラするので、まずは入力周りをカスタマイズします。 トラックパッドを最適化 システム設定 > トラックパッド > 軌跡の速さを最速にします。 同時にタップでクリッ

        【Ventura】ぼくのかんがえたさいきょうの Mac 初期設定 - Qiita
      • CSSで画像の上に表示するテキストをより読みやすく、より美しくするテクニック・実装方法のまとめ

        画像の上にテキストを配置する際に、より読みやすく、より美しくするCSSのテクニックを紹介します。 CSSで画像上にテキストを表示する際に起こる問題に対するさまざまなアプローチと解決するための実装方法を解説。また、最近見かけた素晴らしいテクニック、便利なツールなども紹介します。 Handling Text Over Images in CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに テキストを読みやすくするためのさまざまなテクニック グラデーションのオーバーレイを使ったテクニック イージングのグラデーションを使ったテクニック 水平方向のグラデーションを使ったテクニック ソリッドカラーとグラデーションの混合 グラデーションのオーバーレイとtext-shadow グラデーションのオー

          CSSで画像の上に表示するテキストをより読みやすく、より美しくするテクニック・実装方法のまとめ
        • 「Ameba」15年の負債を払拭するカラーパレットのメソッド | CyberAgent Developers Blog

          「Ameba」は2020年に16周年を迎える長寿サービスです。 プロダクトチームはPC / SP / iOS / Androidと4種類のデバイスに対応しており、15年という歳月を経た結果、管理の追いつかない画面、レガシーなコード等に苛まれるようになってきました。 「Ameba」開発チームではそのような、過去の遺物に開発リソースを割かれる状態を「負債」と呼び、その解消のために日々戦っています。 さらに、「Ameba」には現在10名ほどのデザイナーが携わっており、それぞれが異なる施策や領域を対応していることも相まって、施策を経る毎に、「Ameba」内でGUIに関する、共通の意識や見解を持つことができなくなっていました。 この状態を打開し、「Ameba」プロダクト再興の礎を構築しようと、今年度からデザインシステムの開発をスタートしました。 今回はそのデザインシステムの中でも真っ先に取り組んだ要

            「Ameba」15年の負債を払拭するカラーパレットのメソッド | CyberAgent Developers Blog
          • マルスと「熟練が必要なUI」についての議論

            JRの職員がマルスを操作する動画が話題になった。 この動画について、職人性を賞賛する立場と、UIとして問題があるという立場が対立していた。 nobkzさんのこの記事は、「熟練が必要なのはUIとして問題がある」という立場での記述だとおもう。 一連の話題に対して違和感を持ったが、違和感の源泉は明確で、「UIとしてよいかどうか」という立論自体に机上の論理以上のものにならないということもあるが、そもそも「マルスとはどういうシステムなのか」が議論されていないことがおおきい。 わたしもマルスについて名前は知ってはいたものの、具体的にはどういうシステムであるかは知らなかったので、少し調べてみることにした。 マルスについて Twitter(X)で話題になっていたもとの動画はこちらである。 ここだけ取り上げてみて、マルスの良し悪しを論じるのは鉛筆を取り上げて絵の良し悪しを論じるようなものだとおもう。 次の動

              マルスと「熟練が必要なUI」についての議論
            • 三連休はこれで勉強だ! サイボウズ、新人ITエンジニア向け資料を無料公開

              サイボウズは7月14日、ITエンジニア新人研修用の資料を無料公開した。2023年の新人研修で使用したもので、講義資料・動画を用意している。内容はローカライゼーションやアクセシビリティー、セキュリティなど全9種類。 23年の研修では、「新入社員メンバーに、“自信を持ってチームにジョインできた!” (と思ってもらえる)」というコンセプトを設定。新入社員らに「開発・運用本部のチーム/人や体制、風土/文化」「これからのチーム活動となる前提、共通の知識」を学んでもらえるよう、研修内容を設計した。 公開した講義資料のジャンルは「ローカライゼーション」「アクセシビリティー」「Webフロントエンドテストと自動化」「オブザーバビリティ入門」「ソフトウェアテスト」「モブに早く慣れたい人のためのガイド」「セキュリティ」「ITコミュニティー文化と情報発信に共通する成長と貢献の要素」「テクニカルライティング」の全9

                三連休はこれで勉強だ! サイボウズ、新人ITエンジニア向け資料を無料公開
              • 決済チームがテストコードを書く際に気を付けていること - UPSIDER Techblog

                こんにちは。決済チームでエンジニアとして働いている芦川です。 UPSIDER Tech blog 第2弾として「決済チームがテストコードを書く際に気をつけていること」を紹介しようと思います。 TL;DR 100%のテストカバレッジを目指す テストはブラックボックスを優先して記述、どうしても到達できない場合はホワイトボックス 最初のテストケースは、テスト対象が動作する最も一般的なケースであるべき 私たちは日々大量のコードを書いており、そのシチュエーションは多岐にわたります。 そういった環境において、動作確認からのコード改修のコストを考えた場合、自動テストの有無によって生産性に大きく差が出ることは容易に想像ができます。また、既存のサービスに改修を加えるために、そのサービスの概要を把握したい場合、良いテストコードはドキュメントとして役立ちます。 以前、私はテストコードを一切書かないプロダクトの開

                  決済チームがテストコードを書く際に気を付けていること - UPSIDER Techblog
                • 個人的PCまわりセットアップまとめ - Qiita

                  これは何 備忘録も兼ねて、PCのセットアップで自分のやることをまとめてみました。 随時更新していく予定です。 VS Code VS Codeの環境設定 setting.jsonに下記を追加します。 内容はコメントで書いているので、詳細は省きます。 { "editor.fontSize": 12, // フォントサイズを変更 "editor.guides.bracketPairs": true, // 対応している括弧にガイドを表示する "editor.minimap.renderCharacters": false, // ミニマップに実際の文字を表示しない "editor.renderControlCharacters": true, // 制御文字を表示する "editor.renderLineHighlight": "all", // 現在の選択行をハイライトする "editor.r

                    個人的PCまわりセットアップまとめ - Qiita
                  • Latest topics > なぜMozillaはXULアドオンを廃止したのか?(翻訳) - outsider reflex

                    Latest topics > なぜMozillaはXULアドオンを廃止したのか?(翻訳) 宣伝。日経LinuxにてLinuxの基礎?を紹介する漫画「シス管系女子」を連載させていただいています。 以下の特設サイトにて、単行本まんがでわかるLinux シス管系女子の試し読みが可能! « 「同調圧力は忌むべきものだ」と思考停止していたことに気付いた話 Main 「なぜMozillaはXULアドオンを廃止したのか?」に寄せられていた反応を見て、「甘い……甘すぎる……」と思って、W3C信者時代からの価値観に行き着いた話 » なぜMozillaはXULアドオンを廃止したのか?(翻訳) - Aug 22, 2020 (原著:David Teller, 2020年8月20日、CC BY-NC 4.0で公開されている内容の全訳。Qiitaにもクロスポストしています。) 要約:Firefoxはかつて、XUL

                    • 認知負荷の増加がWebサイトに与える悪影響

                      Paul Boag氏はユーザー体験デザイナー、サービスデザインコンサルタント、およびデジタルトランスフォーメーションのエキスパートです。非営利団体や企業向けに、デジタル体験の改善を目指す支援をしています。 あなたのWebサイトは、訪れるユーザーにあれこれ考えさせすぎてはいないですか? ユーザーに大きな認知負荷をかけていて、それによってユーザーがあなたのWebサイトから離脱していっている、ということはありませんか? もしそうならば、これは修正すべき問題で、実際に修正が可能です。 認知的な負荷による影響 この問題はWebデザイナーである私たちと明らかに密接に関連しています。ユーザーが1つのことに集中しすぎて、他の要素に気が付かなかった場合、Webサイトでの重要なCTA(コールトゥアクション)だって気づかれない可能性があるということです。そう、ものごとをクリーンかつシンプルに整理したいというデザ

                        認知負荷の増加がWebサイトに与える悪影響
                      • Web制作者は要チェック!現在のWeb制作に合わせて制作された新しいCSSリセット -Reseter.css

                        現在のWeb制作だと、既存のReset.cssやNormalize.cssには不足を感じると思います。それらの代替手段として制作された新しいCSSリセットを紹介します。 Reseter.cssは各ブラウザの最後から5つ前までのバージョンをサポートし、アクセシビリティにも配慮されており、CSSのテクニックや学びも満載です。 Reseter.css Reseter.css -GitHub Reseter.cssの特徴 Reseter.cssの使い方 Reseter.cssの中身 Reseter.cssの特徴 Reseter.cssは現在のWeb制作に合わせて制作された新しいCSSリセットで、ブラウザによって事前に作成されたすべてのスタイルをリセットします。クロスブラウザのエクスペリエンスを向上させるために、ブラウザのスタイルシートを正規化します。 Reseter.css バグやブラウザの不整合

                          Web制作者は要チェック!現在のWeb制作に合わせて制作された新しいCSSリセット -Reseter.css
                        • 他者の眼になる魔法のようなインターネット体験。”Be My Eyes “ - フジイユウジ::ドットネット

                          目の見えない人が、床に物を落として困っている。 見えにくい視力の方が、説明書の小さい文字が読めずに困っている。 そんなときも目の見える人―――例えばぼくが―――代わりに見て説明すればいい。遠く離れた場所にいる知らない人でも大丈夫。 今日は、そんな超絶すごい体験を作り出してるアプリの話です。 “Be My Eyes”というインターネット体験。 仕事中、机の上に置いてあるスマホが震える。“Be My Eyes”というアプリの呼び出し通知。ちょっと通話する余裕くらいはあるなと思ったら通話に出ればいいし、時間がないときなら他に時間のある人が出てくれるから自分が出なくもいい。 通話に出たら、スマホのカメラを通して目の見えない人から頼まれたものを見て説明する。 「説明書を読んでもらえませんか?電気の消し方を知りたくて。」 「ボタンを長押しすれば電気が消えるって書いてありますよー」 「床に落としたものを

                            他者の眼になる魔法のようなインターネット体験。”Be My Eyes “ - フジイユウジ::ドットネット
                          • 自作チンコントローラーに、TENGAが製品提供。障害と戦う男性の快適なスティック操作を支援 - AUTOMATON

                            格闘ゲーマーの畠山駿也(Jeni)氏は10月31日、自身のTwitterアカウントにて、TENGAから製品を支援提供されると報告した。使い道は、筋ジストロフィー症を患う同氏による自作コントローラーである「チンコントローラー」の緩衝材だという。 【ご報告】 この度、株式会社TENGA様より製品提供のご支援をして頂ける事になりました✨ 自作のチンコントローラーでの練習中にあごを傷めて悩んでいた所、緩衝材としてPOCKET TENGAを加工して使ってみた旨のツイートをした事がきっかけとなりました。@TENGA_PR 今後ともよろしくお願いいたします! pic.twitter.com/gzxSKVubW7 — Jeni / 畠山駿也@Chin Gamer (@jenixo0) October 31, 2022 念のため書き添えておくと、チンコントローラーとは、chin(チン)、すなわち下顎を使って

                              自作チンコントローラーに、TENGAが製品提供。障害と戦う男性の快適なスティック操作を支援 - AUTOMATON
                            • アップル、iPhoneやMacが自分そっくりのAI生成声で話す「Personal Voice」発表。学習もローカルで完結(CloseBox) | テクノエッジ TechnoEdge

                              AIを活用して声を学習し、本人そのままの高精度な声で生成する技術がここ数カ月で大きく進化しています。 RVCというAIボイスチェンジャー機能は、岸田首相の声真似を本人の前でデモするまでになり、AIフェイクボイスの問題が一部で取り沙汰されるようにもなりました。 そんな中、アップルがAIを使った人声の学習・生成機能「Personal Voice」を今年下半期のOSアップデートで提供すると発表しました。 iPhone、iPad、そしてAppleシリコンを搭載したMacで15分、ランダムに表示される150の文章を読み上げるだけで自分の声を学習することができ、テキストをタイプすると自分そっくりな声で相手に伝えることが可能になります。ただし、当初は英語のみです。 テキストした文章を音声化する機能(TTS、Text To Speech)をアップルは「Live Speech」という新機能で提供。これまでは

                                アップル、iPhoneやMacが自分そっくりのAI生成声で話す「Personal Voice」発表。学習もローカルで完結(CloseBox) | テクノエッジ TechnoEdge
                              • 2022年上半期、注目されたUIデザインのテクニックのまとめ

                                デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 2022年上半期に公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2022 by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ダークにデザインする時はホワイトも和らげる 2. フォームのエラーは色だけに頼らない 3. ユーザーが選択したアイテムを目立たせる 4. 細いフォントは暗いカラーにする 5. 次のステップの情報を提供する 6. 最も重要な要素をより目立たせる 7. 検索ボックスの幅は広くする 8. 素早いアクセスは、ナビゲー

                                  2022年上半期、注目されたUIデザインのテクニックのまとめ
                                • 「Ameba」アイコン刷新 一貫性と再現性追求のための設計術 | CyberAgent Developers Blog

                                  GUIにおけるアイコンとは、プロダクトを触れるユーザーに対して、機能や動作を抽象化してシンプルかつ直感的に伝達させる、文字情報に頼らない記号です。 基本的に、記号が内包する意味には受け手によって解釈の余地があるような状態であってはなりません。しかし、ユーザーに対して、シンプルに正しい意味を伝えることが出来るという前提さえ踏まえれば、それを成すスタイリングは作り手やプロダクトによって様々な表現が可能な余地が残されています。 つまり、アイコンは、記号としての機能性に加えて、装飾としての役割も抱く、プロダクトGUIにおけるスタイリング定義の標本となり得るということです。 前段 「Ameba」について 「Amebaらしい」アイコンとは何か 塗りと線のルール 「Amebaらしい」形状 「Ameba Sans」の形状分析と曲率定義 線の太さのルール 命名規則を決める Library化 リプレイス まと

                                    「Ameba」アイコン刷新 一貫性と再現性追求のための設計術 | CyberAgent Developers Blog
                                  • すべてのウェブ開発者へ。人気GitHubリポジトリ9選 - Qiita

                                    本記事は、Simon Holdorf氏による「9 Popular GitHub Repos For Every Web Developer」(2021年4月4日公開)の和訳を、著者の許可を得て掲載しているものです。 こちらもどうぞ すべてのウェブ開発者へ。人気GitHubリポジトリ10選 便利なツール、参考になる例など はじめに GitHubは、最近の(ウェブ)開発に関連するすべてのワンストップショップです。フレームワーク、デモ、あらゆる種類のコレクションなど、GitHubで見つけられないものはないでしょう。しかし、この膨大な量が問題です。あまりにも多くのレポジトリがあるので、おそらく聞いたことのないクールなものがあります。 そこで今回も、知っておくべき最も人気のGitHubリポジトリを紹介することにします。各リポジトリには少なくとも30,000個の星が付いています。 1. Realwor

                                      すべてのウェブ開発者へ。人気GitHubリポジトリ9選 - Qiita
                                    • フロントエンドのテストコードを書くときに大切にしていること - Cybozu Inside Out | サイボウズエンジニアのブログ

                                      こんにちは、フロントエンドエキスパートチームの @mugi_unoです! kintone では フロントエンドの刷新プロジェクト(通称フロリア)が進行中です。 blog.cybozu.io kintone の開発では E2E 主体の自動テストを整備していましたが、 フロントエンドの刷新に合わせて、新たにフロントエンド側でのテストコードを積極的に書いています。 テストを書くことに不慣れなメンバーもいるため、日々 Pull Request 上でのレビューやペア・モブ作業を通じて、知見の共有が行われています。今回はフロントエンド刷新のテストを書いてきた中から、筆者が有用だと感じた知見やノウハウを紹介したいと思います。 目次 💡「実はそれ最初からパスしてるかもしれない」 期待する操作で期待する結果になることを厳密に検証する 他のテストケースによって前提条件を担保する 💡「テストコード上のロジッ

                                        フロントエンドのテストコードを書くときに大切にしていること - Cybozu Inside Out | サイボウズエンジニアのブログ
                                      • Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎

                                        Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎 2023.02.18 ウェブアプリケーションエンジニアを対象に、アクセシビリティの対応について解説した記事。アクセシビリティを向上させるためには、正しいHTMLの書き方が必要である。HTML要素には、アクセシビリティに関する機能が元々備わっているため、適切なHTMLを選択し使用することが大切だ。複雑なUIの場合はWAI-ARIAを使用し、ARIA Authoring Practices Guideに基づき適切に実装する必要がある。UIライブラリ選びの際には、WAI-ARIAに従った実装を行っているかが基準の1つとなる。 この記事は、ウェブアプリケーションエンジニアとして仕事をされているほうを対象に書かれています。日々のウェブフロントエンドの開発の中で意識しておきたい基礎的な内容をメインに記載しています。 そのため、ここ

                                          Web アプリケーションエンジニアのためのウェブアクセシビリティの基礎
                                        • 2022年上半期に読んだ技術書

                                          2022年上半期はとある都合もあってかなりの数の技術書を読んだので、その中でも良かったものとかの感想をまとめておきます。 2022年上半期で一番良かった技術書 A Philosophy of Software Design ソフトウェア設計の目的は複雑さを軽減することであるとして、その複雑さの定義と軽減する手法が書かれています。最近まで2年ほどフリーランスで色んな会社の開発に参加して、DDD的な設計やクリーンアーキテクチャを採用している現場が多かったもののそれらが逆に開発効率を低くしているのではという感想を持っていました。そこでこの本を読み、それらの目的であるはずの「複雑さを軽減する」という視点が抜けていたのかなと気付かされました。コードを読み書きしていて複雑さを感じなければモノリスでもMVCでもいいケースは多いと思います。複雑さを軽減する手法を解説する章では、やりすぎると逆効果であるとは

                                            2022年上半期に読んだ技術書
                                          • CSSとコンポーネント設計に対する考察 - uhyo/blog

                                            近年のフロントエンド開発にはコンポーネントという概念が付いて回ります。React・Vue・AngularといったViewライブラリでは、コンポーネントを定義してそれを組み合わせてアプリを作ります。また、いわゆるWeb Componentsとして知られる仕様群により、ライブラリに依存せずに“コンポーネント”を作ることもできるようになってきています。 コンポーネントは、何らかの機能(あるいは責務)を持った部品です。また、コンポーネントによっては再利用される(アプリ内の複数の箇所から利用される)ことを意図しているものや、そもそもライブラリとして配布されているようなものもあります。アプリの機能の一部分を抜き出したものという見方をすれば、コンポーネントというのは関数にとても類似した概念であることが分かります。 コンポーネント設計によって、言い換えればアプリがどのような機能を持ったコンポーネントたちに

                                              CSSとコンポーネント設計に対する考察 - uhyo/blog
                                            • ICT化と教員削減、「取りまとめから削除」指示 河野行革相

                                              国の予算執行の無駄や事業の効果を外部有識者が点検する「秋の行政事業レビュー」は11月15日、教育現場のオンライン化を取り上げた。席上、有識者が取りまとめで「教育現場のICT化で教務・校務の効率化を進め、教職員数の合理化も進めるべきだ」と指摘したところ、河野太郎行政改革相は「(教育現場のICT化は)技術の導入によって、本当にサポートが必要な児童生徒に先生が寄り添える時間を作っていくところが狙い」と説明し、教職員数の合理化に関わる部分を取りまとめから削除するように指示した。終了後に記者会見した河野行革相は「財政の中で教員数をどうするかという議論と、デジタル化は一つ線を引いて考えるべきだ」と述べ、少人数学級の実現を含めた来年度予算の編成作業が進む中で、学校現場のデジタル化を教職員数の合理化や削減につなげるべきではないとの考えを示した。 教育現場のオンライン化を議題とした「秋の行政事業レビュー」の

                                                ICT化と教員削減、「取りまとめから削除」指示 河野行革相
                                              • 【仕様の読み方】HTMLの要素をどうやって学ぶか

                                                <search>要素がHTML Standardに追加されました。私も初めて出会う要素になるわけですが、とても良い機会なので、私が要素を調べる際にどうやって調べて学んでいるのかを共有したいと思います。これは新しい要素に限らず、既存の要素の調査に応用できると思います。また、初学者はもちろん、マークアップを生業としている方にも参考になると思います。 新要素追加の経緯を調べる まずはHTML StandardのGitHubのPRからスタートするとよいでしょう。議論や更新はGitHubで行われています。たとえば、今回の<search>はAdd the <search> element #7320というPRによって更新されました。 そもそも更新自体のキャッチアップ方法はクローズされたPRを更新順にして確認してもいいですし、更新のみをツイートしている@htmlstandardのTLを確認してもいいと思

                                                  【仕様の読み方】HTMLの要素をどうやって学ぶか
                                                • 【朗報】著作権訴訟で広告ブロッカーが勝訴

                                                  Adblock Plusを運営するeyeo社は、ドイツの出版社アクセル・シュプリンガー(Axel Springer)との長期にわたる法廷闘争でまたもや勝利を収めました。 ハンブルクの裁判所は、「広告をブロックするためにウェブサイトのHTMLコードを変更することで広告ブロッカーは著作権を侵害する」と主張する出版社側の訴えを退けた。 もし裁判所が出版社側の味方をしていれば、広告をブロックしたり、アクセシビリティのためにウェブページの配色を変更したりするなど、ウェブサイトのコードを変更しようとする試みは著作権侵害とみなされ、ウェブサイトの所有者から停止命令を受ける可能性があったかもしれない。 (参考までに、HTMLはウェブの95%を構成している。) eyeoはブログ記事で、拡張機能開発者やブラウザだけでなく、一般のインターネットユーザーも影響を受け、損害賠償の支払いを余儀なくされる可能性があった

                                                    【朗報】著作権訴訟で広告ブロッカーが勝訴
                                                  • 2022年、もっとも注目されたUIデザインのテクニックのまとめ

                                                    デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 2022年に公開した中で最も注目されたUIデザインのテクニックをまとめました。 UI & UX Micro-Tips: Best of 2022 by Marc Andrew 興味がある方は、過去分もどうぞ。 2021年、最も注目されたUIデザインのテクニックのまとめ 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. ダークにデザインする時はホワイトも和らげる 2. フォームのエラーは色だけに頼らない 3. ユーザーが選択したアイテムを目立たせる 4. 細いフォントは暗いカラーにする 5. 次のステップの情報を提供する 6. 最も重要な

                                                      2022年、もっとも注目されたUIデザインのテクニックのまとめ
                                                    • 人類はこの先食っていけるのか。調べてみた。

                                                      地球は人類を養えるのか? この前、国連かなにかの機関の奇抜な髪の色をした専門家が、「ロシアによるウクライナ侵攻と、世界的な干ばつにより、来年の世界の食糧事情が危険だ」というようなことを述べていた。 奇抜な髪の色はともかくとして、おれは、「ロシアによるウクライナ侵攻と、世界的な干ばつが重なったら、世界の食糧事情は危なくなりそうだなー」と思った。一つじゃない、二つだ。二つも大きな要素があったら、危ない。そう思った。 そう思ったおれは、「ひょっとして、地球の人口は地球が人類を養える上限を超えているのでは?」と思った。思って調べた。 まず調べて出てきたのはWikipediaの「適正人口」という項目であった。どこぞのだれかがいろいろな基準で算出した地球の適正人口は15億から20億人だという。 え、そんなに少ないの? というか、いろいろの基準がなかなかハードル高くない? とりあえず、食えることが満たさ

                                                        人類はこの先食っていけるのか。調べてみた。
                                                      • React でデザインシステムを正しく実装する - コンポーネントカタログを超えて | Wantedly Engineer Blog

                                                        Wantedly でバックエンドのテックリード的なやつをやってる @izumin5210 です。半年くらい前から取り組んでいた、UI デザインシステムの React 実装について紹介します。ソフトウェアの設計としても非常にエキサイティングだったので、ライブラリ作ったりするのが好きな人なども楽しんでもらえると思います。 TL;DRWantedly の UI デザインシステムは「WantedlyのUIをデザインする上での共通の考え方とツール&アセット」でありエンジニアとデザイナが効率よくコミュニケーションするための共通言語となるデザインシステムを (Web) Frontend に持ち込む際は、単なるコンポーネントカタログではなく、システムが定義するものと同じレベルの抽象を持つライブラリ・フレームワークとして実装することで、より有効性を発揮するこの話が気になった(Web・モバイル問わず)フロント

                                                          React でデザインシステムを正しく実装する - コンポーネントカタログを超えて | Wantedly Engineer Blog
                                                        • iPhone 12系統のレスポンシブ対応のメモ書き

                                                          今朝発表されたiPhone 12系統のレスポンシブ対応についてのメモ書き。取り急ぎ。 12 Pro Max 👉 428px (3x) PlusシリーズやXR,11,11 Maxの414pxよりも14px広い。 12 / 12 Pro 👉 390px (3x) 6〜8、Xや11 Proの375pxよりも15px広い。 12 mini 👉 360px (3x) ただし、miniの場合は375pxで描写してスケーリング表示するらしい? とは言え、Androidのデバイスの多くは360pxなのでiPhone 12 miniの描写サイズが375pxだろうが360pxだろうが関係なかったりします。 横幅360pxでしっかり表示されていることは必須条件です。 追記1:これからも4インチ(320px)を意識する必要はあるのか? 個人的見解ですが、あります。 理由としてはiPadのSlide Over

                                                            iPhone 12系統のレスポンシブ対応のメモ書き
                                                          • 「ゲーム内のクモ」扱い難しすぎ問題で開発者ら悩む。お約束の敵キャラでも、のっぴきならない恐怖感 - AUTOMATON

                                                            ゲーム開発において、ある共通の問題が存在しているようだ。それは、「クモ」をどう扱うかである。 『V Rising』といえば今月17日に早期アクセス配信を開始し、すでに100万本以上を売り上げた人気吸血鬼サバイバルだ。同作はまだ開発が進む段階ということで、ユーザーからのフィードバックを積極的に受け付けている。そうした議論が交わされる場の一つがコミュニケーションツールDiscordだ。『V Rising』のDiscordサーバーには「コンテンツと機能の提案」チャンネルが存在し、ここでユーザーが直接ゲームへの要望を投稿し、盛り上がっている。 そうしたなか、あるユーザーがユニークな提案を持ち上げた。「“恐怖症”対策モード」を実装してほしいという意見だ。いわく、そのユーザーの友人は「クモ恐怖症」を患っているとのこと。そのため、『V Rising』をプレイするなかで、ボスキャラクターの一体Ungora

                                                              「ゲーム内のクモ」扱い難しすぎ問題で開発者ら悩む。お約束の敵キャラでも、のっぴきならない恐怖感 - AUTOMATON
                                                            • ガラス張りの図書館がある「まちなかリビング北千里」について、蔵書の紫外線対策などを吹田市に質問しました|塩谷舞(mai shiotani)

                                                              昨年11月12日、私の故郷でもある大阪府吹田市にあたらしく出来た「まちなかリビング北千里」ついてTwitterで投稿したところ、さまざまな声が届きました。 その際に投稿した写真がこちらです(一部)。 これらの写真や「場所によって飲食OK」と書いていたツイートの文言などを受けて、「ガラス張りの図書館は、紫外線によって蔵書が退色してしまうのではないか」「高い場所に飾ってある本を手に取ることが出来ないのではないか」「飲食OKの図書館では、本に虫害が発生するのではないか」ほか、多くの懸念の声が、引用リツイートなどで見られました。 夢なの?というような理想の図書館が千里に出来てしまった…… 圧倒的な蔵書数、電源Wi-Fi完備でPC作業OK、場所によって飲食OK、「図書館なのにそんなに…?!」という夜8時までの開館時間。 なにより、窓の向こうの箕面の山々が美しい……。北千里駅すぐ。22日オープンで、h

                                                                ガラス張りの図書館がある「まちなかリビング北千里」について、蔵書の紫外線対策などを吹田市に質問しました|塩谷舞(mai shiotani)
                                                              • 全てのメンバーにアクセシビリティー研修を実施しはじめました + 研修資料を公開します - freee Developers Hub

                                                                こんにちは、 freeeでデザインシステムを作っていたりアクセシビリティーのいろいろをやっていたりする id:ymrl です。 freeeではfreeeアクセシビリティー・ガイドラインを策定して、誰でも使えるアクセシブルな製品開発ができるよう取り組んでいます。これまでも、開発者(エンジニア、プロダクトマネージャー、デザイナー)向けには実習を含むアクセシビリティー研修を行ってきました。 そしてこのたび10月から 対象を全新入社員向けに拡大 してアクセシビリティー研修を行うようになり、あわせて開発者向けの研修も内容を整理したので、今回はその紹介をします。 なぜ全員に研修をするのか これまでのアクセシビリティーの取り組みは、プロダクト開発を中心に進めてきました。「だれもが自由に経営できる統合型経営プラットフォーム」をビジョンに掲げている以上、まずは提供しているSaaSが誰でも使えるものになってい

                                                                  全てのメンバーにアクセシビリティー研修を実施しはじめました + 研修資料を公開します - freee Developers Hub
                                                                • Googleオフィスに警察、社員50人超を解雇 抗議デモ対応が見せつけた“IT界の巨人”の変貌ぶりとは

                                                                  これに対し、今回のデモを組織した団体「No Tech For Apartheid」は「自分たちの労働がアパルトヘイトや大虐殺の原動力となることは望まない」と訴える。Googleに対してイスラエル政府との契約の中止を求めるのは、発端となったプロジェクト・ニンバスの契約を「ガザのパレスチナ人を虐殺するイスラエルへの支援」と見なしていることによるものだ。 社員の解雇について同団体は「言語道断の報復行為」「Googleが自社の社員よりも、虐殺行為をしているイスラエル政府および軍との12億ドルの契約の方を大切にしていることが、これではっきりした」と反発した。 また抗議デモは平和的に行われ、Google社内で器物を損壊したり、同僚を妨害したりもしていないと主張。社員の解雇はGoogleのいう「開かれた文化」の虚偽をさらけ出したと訴え、解雇は不当だったとし全米労働関係委員会(NLRB)に不服を申し立てて

                                                                    Googleオフィスに警察、社員50人超を解雇 抗議デモ対応が見せつけた“IT界の巨人”の変貌ぶりとは
                                                                  • 「良いコードとは何か」で消耗するのはもうやめよう - DMM Developers Blog

                                                                    これはなに? こんにちは、DMM.comのミノ駆動です。 プラットフォーム開発本部 Developer Productivity Group 横断チームにて、 プラットフォームの設計品質向上に取り組んでいます。 さて、ネット上ではソフトウェア開発における「良いコードとは何か」をめぐって、 いろんな意見が交錯したり、 ときには激論を呼んだりします。 収拾がつかないこともしばしばです。 この記事は、良いコードを考えるうえでの要素を整理し、 建設的な議論を助けることを目的とします。 これはなに? この記事の理解目標 良いコードをめぐる議論 議論1: 何をもって良いコードなのか 議論2: 良いコードはどうやったら書けるのか 議論3: 「綺麗なコード(良いコード) vs 動くコード」問題 議論改善のために提案します 提案1: ソフトウェア品質特性の観点でコードの良し悪しを判断しよう 提案2: 原理原

                                                                      「良いコードとは何か」で消耗するのはもうやめよう - DMM Developers Blog
                                                                    • UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ~業務システムとSaaSのUIを考える

                                                                      デザインシステムとは、サービス開発する上で必要となるデザインの概念、スタイルガイド、コンポーネント集などで構成されるデザインのルールです。 Salesforce.comの「Lightning Design System」が2015年に登場して以来、多くの企業がこのデザインシステムを導入するようになりました。 プロトタイピングツールで有名なUXPinが提供するデザインシステムプラットフォーム「adele」では、90個以上(2019年12月現在)ものデザインシステムが公開されています。その企業のラインナップを見ると、大手ITベンダー、SaaSベンダーのみならず、自治体、金融機関、大学など多くの業界で、組織のブランド確立のために、デザインシステムを活用していることが分かります。 GoogleやAppleが提供するデザインシステムは、既に多くのブログで語りつくされていますが、その他の企業でも素晴ら

                                                                        UIデザイナーが知っておきたい海外の優れたデザインシステム17選 | ベイジのUIラボ~業務システムとSaaSのUIを考える
                                                                      • 『フロントエンドの知識地図』出版のお知らせ - ICS MEDIA

                                                                        株式会社ICSの池田・西原・松本の3人で『フロントエンドの知識地図 〜 一冊でHTML/CSS/JavaScriptの開発技術が学べる本』という書籍を執筆しました! ICS MEDIAではHTML・CSS・JavaScriptにおける最新技術をテーマに取り扱っています。ウェブメディアの特性上、記事は断片的な情報となることが多く、体系的な発信が難しいと我々は課題感を持っていました。そこで、この書籍ではICS MEDIAでは発信の難しかった、フロントエンドの全容を一冊で伝えることを目指しています。 2023年11月24日の発売で、Amazonや書店や電子版で購入できます。 Amazon サポートページ 2023年4月に執筆を開始し、フロントエンドのトレンドをまとめてキャッチアップできるようテーマを選定しました。344ページで、紙面はフルカラー。内容の厚みにたいして、定価2,860円(本体2,6

                                                                          『フロントエンドの知識地図』出版のお知らせ - ICS MEDIA
                                                                        • 【翻訳記事】BDDの考案者が執筆した記事「テストについて話し合わなくてはならない」を翻訳しました! - ブロッコリーのブログ

                                                                          目次 目次 はじめに(本記事の見どころなど) テストについて話し合わなくてはならない テストの目的 「うまくいかないかもしれないものは何ですか?」 なぜテストをするのですか? この場合に限り…… テスト駆動開発 〜テストについて語る前に説明が必要です〜 テストについて話しましょう なぜすべてのテストを自動化しないの? テストカバレッジは有用な指標ですか? 「テストをシフトレフトする」とはどういう意味ですか? いつ、どこでテストすべきですか? 十分なテストとはどれくらいですか? おわりに はじめに(本記事の見どころなど) 今回は著者本人の許可をもらった上で、「テストについて話し合わなくてはならない」(原題は「We need to talk about testing」)を翻訳したので紹介します。 dannorth.net 本記事はDaniel Terhorst-North(Dan North

                                                                            【翻訳記事】BDDの考案者が執筆した記事「テストについて話し合わなくてはならない」を翻訳しました! - ブロッコリーのブログ
                                                                          • 清く正しく「サービス共通ヘッダ・フッタ」を実装する - LIFULL Creators Blog

                                                                            フロントエンドエンジニアの嶌田です。今回が LIFULL Creators Blog への初めての投稿です。 「サービス共通ヘッダ・フッタ」は、ただのヘッダ・フッタではありません。ソースコードはいくつものサイトやサービスで使いまわされます。組込み先が持っている CSS によっては表示が崩れてしまうかもしれません。ブレークポイントやコンテンツの幅がそろわないかもしれません。サービス共通で使えるヘッダ・フッタには相応の強さや柔軟さが求められます。 この記事では、LIFULL HOME'S のサービス共通のレスポンシブ版ヘッダ・フッタを実装するために動員した「強く・堅牢に実装するためのノウハウ」を紹介します。 どこにでも組み込めるように実装する 重複しないクラス名ルールを設定する 詳細度や継承とうまく付き合う プレーンな技術を使う ブレークポイントや z-index 等をカスタマイズ可能にする

                                                                              清く正しく「サービス共通ヘッダ・フッタ」を実装する - LIFULL Creators Blog
                                                                            • 【特集】『Outer Wilds』ゾンビに捧ぐ!『Riven』『TUNIC』に代表される「いくつものパズルがひとつの正解を導くパズルゲーム」5タイトルをピックアップ | Game*Spark - 国内・海外ゲーム情報サイト

                                                                              2024年10月24日、『Outer Wilds: Archaeologist Edition』パッケージ版がPS5/ニンテンドースイッチ向けに発売されました。Game*Spark読者の方のなかには『Outer Wilds』に興味を持った方や、もう既にクリアしたという方もいらっしゃることでしょう。そこで今回は『Outer Wilds』と似た志を持ったパズルゲームを紹介していきます。 『Outer Wilds: Archaeologist Edition』出水ぽすか氏がキービジュアル描くパッケージ版がPS5/スイッチ向けに発売!初回特典はつまずきポイントを解説する宇宙飛行士必読のスターターガイドブック | Game*Spark - 国内・海外ゲーム情報サイト 今回の記事で紹介しているものは、単なるステージクリア型のパズルゲームではなく、いくつかのロケーションやステージに謎が用意されており、そ

                                                                                【特集】『Outer Wilds』ゾンビに捧ぐ!『Riven』『TUNIC』に代表される「いくつものパズルがひとつの正解を導くパズルゲーム」5タイトルをピックアップ | Game*Spark - 国内・海外ゲーム情報サイト
                                                                              • 全てを書き換え続ける。N予備校Webフロントエンド実装6年のあゆみ - ドワンゴ教育サービス開発者ブログ

                                                                                はじめに ドワンゴ教育事業 Web フロントエンドチームの berlysia です。 ドワンゴ教育事業が提供するオンライン学習サービス『N予備校』は、この 4 月でリリース 6 周年を迎えました。N 予備校の Web フロントエンドはリリース以来、全面的な書き換えを行い、今も続けています。 この記事では書き換えに伴う N 予備校の Web フロントエンド実装の変遷を説明し、これら書き換えの経験やWebフロントエンドという領域の性質を踏まえて、すべてを書き換え続ける選択をしていることを述べます。 この記事は berlysia が他社様イベント*1にて発表させていただいた話題を元に再構成しています。 speakerdeck.com ※JSConf JP 2021 で発表させていただいた事例とは異なるコードを対象にしています。 はじめに 実装の 5 つの世代 v1 v2 v3 v3(TypeSc

                                                                                  全てを書き換え続ける。N予備校Webフロントエンド実装6年のあゆみ - ドワンゴ教育サービス開発者ブログ
                                                                                • 接触確認アプリ「COCOA」、高齢者・障害者にも使いやすく 22年3月までの達成目指す

                                                                                  厚生労働省は9月8日、新型コロナウイルス感染症の接触確認アプリ「COCOA」(iOS/Android)を高齢者や障害者にも使いやすいようにする方針を発表した。2022年3月までに、「見出しやラベルを付ける」「音声解説を提供する」など38項目を満たすことを目指す。 対応を目指すのは、Webコンテンツの配慮設計(Webアクセシビリティー)について定めたJIS規格「JIS X 8341-3:2016」。全部で61項目の達成基準がある。 「タイトルを付ける」「情報を意味ある順序にする」など25項目の基準を達成するとレベルA、「見出しやラベルを付ける」「音声解説を提供する」など13項目を満たすとレベルAA、「手話の用意」など23項目満たせばレベルAAAになる。総務省は公的機関のサイトなどでレベルAAへの対応を推奨しており、COCOAでもレベルAAを目指すとしている。 関連記事 Webアクセシビリティ

                                                                                    接触確認アプリ「COCOA」、高齢者・障害者にも使いやすく 22年3月までの達成目指す