2ヶ月でCore Web Vitals, Lighthouseスコアを大幅改善するために行ったこと - SMARTCAMP Engineer Blog
こんにちは!!！スマートキャンプでエンジニアをしている吉永です！ 自己紹介記事はこちら 前回の記事はこちら 私は現在、スマートキャンプの主力サービスであるBOXIL SaaS（以下、BOXIL）の開発にフロントエンド、バックエンド問わず携わっています。 恐らく新年一発目になる弊社テックブログの記事は私の記事ということで、今年もよろしくお願いいたします。 はじめに なぜパフォーマンス改善を行ったのか Core Web Vitals(以下: CWV), Lighthouseとは？ CWVとは Lighthouseとは CWV & Lighthouseの改善結果 サービスページ(改善前) サービスページ(改善後) レビューページ(改善前) レビューページ(改善後) 改善をするにあたってチームで行ったこと コミュニケーション的なお話 タスクの洗い出し、調査方法 優先順位付け DatadogやSea
そろそろPDFの多用を止めませんか
IT・メディアThe write PDF in red 3D letters standing on a glossy black floor of a room, leaning at its blue wall - 3D rendering illustration PDFが大好きな人々がいる。総務省人事の報道発表には「1月15日付の総務省人事（2名）について、次のとおり発令しました。」とだけ書かれ、「次のとおり」をクリックするとPDFが表示され発令内容が読めるようになっている。 どうしてこんな面倒な方法を取っているのだろうか。 情報が変造されるのを防ぎたい、と説明する人がいる。しかし、世の中にはPDFの中身を書き換えたり、パスワードを消したりできるツールがいくらでもある。簡単なキーワード検索で無料ツールが入手できる。 どんなデバイスでも同じように表示したいため、と説明する人がいる。P
2021-10-122021 年度新卒エンジニア研修についてこんにちは。医療介護求人サイト「ジョブメドレー」の開発を担当しているエンジニアの山田です。 今年の新卒エンジニア研修において、メンターを担当しました。 メドレーでは 2019 年度から新卒採用を行なっており、今年 2021 年度は 5 名の新卒がエンジニアとして入社しました。 例年と同じく 4 月から 9 月にかけて、約 5 ヶ月間の新卒エンジニア研修を実施しましたので、その取り組みを、研修受講者である新卒からの声も交えてご紹介します。 新卒研修の概要今年の新卒研修の最終ゴールは、「メドレーのエンジニアとして、Our Essentials(※) を体現し、顧客へ価値提供できるようになるための基礎を身につけ、経験を得ること」として掲げました。 ※) メドレーの行動原則 メドレーの新卒エンジニア研修では、技術を身につけることだけではな
こんにちは、freeeのUXチームでデザインシステム “Vibes” を作っている id:ymrl です。 ダークモード流行ってますよね。私は最初はしっくりこないなと思っていたんですが、食わず嫌いは良くないと思って試しているうちに、いつの間にかダークモードのほうが落ち着くようになってしまいました。 そしてそうなってくると、だんだん「自分たちの作っているWebサービスもダークモードに対応するべきなのか？」という気持ちになってきてしまい、最近はずっとダークモードのことを考えています。ということで今回はダークモードをやるべきなのか、実現する方法はどうなっているのか、UIデザインで気をつけるべき点何かというのを考える記事を書いてみます。 ※「ダークモード」はApple製品で使われている呼び方で、Androidでは「ダークテーマ」と呼ばれていて、Windowsでは「ダーク○○」のような呼び方をしてい
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第7弾は、テキストや要素をより分かりやすく魅せるデザインのテクニックです。 UI & UX Micro-Tips: Volume Seven. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. メッセージは分かりやすく簡潔に 2. 長文コンテンツには、20ptを試してみてください 3. エラーメッセージは色だけで情報を伝えないように 4. 4ptベースラインと8ptグリッドで調和のとれた縦のリズムを作成 5. 見出しは文字間隔と行の高さを小さくする 6. 要素をよりはっきりと魅せる はじめに 次のプロジェク
入力欄のプレースホルダーって結局どうなの - Qiita
書籍「Webアプリケーションアクセシビリティ1」では、「3.1 ラベルと説明」のところで、紙版にして約1.5ページの分量を割いて、フォーム入力欄のプレースホルダー（<input> 要素や<textarea> 要素の <placeholder> 属性）の問題点を指摘しています。 この本で指摘されているプレースホルダーの問題点は以下の3つです。 プレースホルダーの色が薄く視認しづらい プレースホルダーとフォームコントロールの値との区別がつかない フォームコントロールに値を入力したときにプレースホルダーの値が見えなくなってしまう Webアプリケーションアクセシビリティ さらに、Nielsen Norman Groupによる「Placeholders in Form Fields Are Harmful」（日本語訳: 入力フォームのプレースホルダーを使ってはいけない）で数々の問題点が指摘されている
こんにちは。freeeのUXチームでデザイナーをしている@ymrlです。freeeでは5年半エンジニアをしたあとデザイナーに異動して、もうすぐ2年半になります。UXチームではデザインシステムやアクセシビリティーまわりのことをやりながら、freeeのプロダクトのUIがより良く、より早く作られるためには何をすればいいのかをずっと考えています。 今回は、そんな中で考えた、デザイナーがエンジニアにUIを作ってもらうときに、作ってほしいものがきちんと伝えられるようになる方法を考えた話をします。 「設計資料って何ですか？」freeeのアクセシビリティー・チェック・リストは「対象」を「デザイン」「コード」「プロダクト」の3つに分けていて、それぞれデザイナー・エンジニア・QAがチェックを実施することを想定しています。 このなかで「デザイン」の項目にはいくつか、「設計資料」というのが登場していて、デザイナー
「とりあえずNoto Sans JP」、考え直してみませんか？｜SOMPO Digital Lab デザインチーム
SOMPO Digital Labデザイナーの松葉（ https://twitter.com/tiyou01 ）です。 ウェブサイトやアプリのUIで使う書体、「とりあえずNoto Sans JPで…」と決めてしまった経験はないでしょうか？この記事はそんな「とりあえず」に心当たりのある皆さんに向けて書かれています。 Noto Sans JPという書体Noto Sans JPはAdobeとGoogleの共同開発による書体で、Adobeからは源ノ角ゴシック／Source Han Sans、GoogleからはNoto Sans JPという名称でリリースされました。この記事ではNoto Sans JPの表記で記載します。 2014年にリリースされて以来、Noto Sans JPはUIで利用する日本語書体としてすっかり定着しました。現在はウェブサイトやアプリで見ない日はないと言ってもいいくらいです。
Storybook 腐らせない
この記事は 株式会社ゆめみの23卒 Advent Calendar 2023 8日目の記事です。 現代のWebフロントエンド開発において、コンポーネントの効率的な管理と可視化が求められる中、Storybookは開発者にとって欠かせないツールとなっています。Storybookは、コンポーネントをアプリケーションから隔離して単体で表示できるツールです。 しかし、このように有用なStorybookが「腐ってしまう」ことがあります。この記事で「腐る」とは、コンポーネントをStorybookに表示するための設定であるStoryが最新の状態に更新されていない、またはプロジェクトにとって負債になっている状態を指します。例えば、以下のような状態が「腐っている」状態にあたります。 npm run storybook するとそもそもエラーがでて表示されない Storyの存在しないコンポーネントやコンポーネント
iPadOSがリリースされてから、マウスやトラックパッドが使えるようになり、PCライクな使い方ができるようになりました。 されど、iPadを6年ほど使っている私は思うのです。iPadはPCではなく、より自由度の高いモバイルコンピューターなのだと。 iPadはPCよりもカスタマイズ性が高く、キーボードやトラックパッド、スタンドに至るまで自由に取捨選択することができます。逆に言えば、選ぶアイテム1つで、生産性が大きく変わるデバイスとも言えるでしょう。 そこで今回は、私が旧iPad Pro12.9インチ（第3世代）で、実際に使っている8つのアイテムをご紹介したいと思います。 iPadと一緒に使うアイテムを選ぶ時のポイントiPadまわりのアイテムを選ぶ時、私は以下の3つの基準を持っています。 携帯性に優れているか：出張や旅行、カフェに持っていけるサイズや重量であること使う時にストレスがないか：自分
モダンCSSの機能を使用して、フォームのラジオボタン・チェックボックス・トグルスイッチなどを独自のスタイルで実装するテクニックを紹介します。以前まではdivやspanなど追加のHTMLやJavaScriptが必要でしたが、一切必要ありません。 こういった実装はできないものと思っていたので、驚きました。 Custom Styling Form Inputs With Modern CSS Features 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 モダンCSSの機能を使用した入力フォーム 実装は以前より簡単になりました HTMLは非常にシンプル CSSで入力フォームのスタイルを定義 入力フォームの完成 モダンCSSの機能を使用した入力フォーム 最近ではセマンティックとアクセシビリティの両方を維持したまま、独自のチェックボック
全国1700以上の自治体のワクチン接種予約方法について調べてみたら課題が見えてきた | DevelopersIO
日本でも始まった新型コロナウイルスのワクチン接種。しかし、予約の実態を調べると、そのハードルの高さや自治体ごとに異なる予約方法など、ITやアクセシビリティの課題が見えてきました。 結論 1700の自治体が全て異なる。 職員の方の負担がとても大きい。 アクセシビリティを改善する必要性あり。 今IT業界ができることは何か改めて考える機会となった。 両親のワクチン接種予約がなかなか取れない ある日、高齢の両親に電話で「ワクチン接種どうするの？」と聞いたら、「接種券がすぐに来たから、かかりつけの医者に電話で予約する」とのことで、思ったよりも早くワクチン接種できそうで安心していました。しかし、約1ヶ月経過したある日、ワクチン接種はまだ出来ていなくて、予約すらもできていない。指定された予約開始日に電話してもずっと話し中で、なかなか繋がらない。予約専用のWebサイトもあると聞いていたけど、かかりつけの医
Figmaの使い方はとてもシンプルですが、デザインシステムの作成となると話は別です。 ストレスの多い作業プロセスになりがちですが、幸いにもFigmaにはそんな苦悩から救ってくれる、便利プラグインが数多く公開されています。 プラグインはデザインプロセスに欠かせないツールで、プロジェクト特有の問題点を解決したり、面倒な作業を自動化するなど、時間短縮にもつながります。 しかし、膨大な数のプラグインから自分にあったものを探すのは時間がかかるのも事実。 ここでは、デザインシステムの作成、管理、運用に役立つFigmaプラグイン20個をピックアップしてご紹介します。 無料ダウンロードできる良質UIテンプレート集を活用して、すぐに新しいプロジェクトをはじめてみましょう。 Figma Tokens Figma Tokens プラグインは、プロジェクトの配色や書体、境界線の半径サイズや余白サイズなどのグローバ
『鉄拳8』アクセシビリティ設定に称賛も、一部は頭痛や発作の危険と専門家。原田氏「試しもせず誤解」「全員の特性に合わせたものではない」 | テクノエッジ TechnoEdge
ガジェット全般、サイエンス、宇宙、音楽、モータースポーツetc... 電気・ネットワーク技術者。実績媒体Engadget日本版, Autoblog日本版, Forbes JAPAN他 現在デモ版を無料配布中の格闘ゲーム『鉄拳8』が、いわゆる色弱を含め、さまざまな視覚特性のプレーヤーでも遊びやすくするアクセシビリティ設定で話題になっています。 フィルターによりキャラクターを単色のシルエットにしたり、コントラストを高めて視認しやすくするなど様々な設定が可能で、これまで遊びにくかった、遊べなかったプレーヤーにも門戸を開くものとして称賛を浴びました。 しかし12月27日、ゲームに関するアクセシビリティの専門家でX（Twitter）ユーザーのイアン・ハミルトン氏は、色覚設定オプションの一部がユーザーに頭痛やめまいを引き起こすと指摘しました。 これはSJS | Gatterallという名のXユーザーが
今年2020年を振り返る、AUTOMATONの年末企画第4弾。これまで、各ライターがやりこんだ作品、ベスト短編、思い入れのある作品と企画を分けて掲載してきた（2020 年末企画一覧）。年末最後の企画となる本稿では、1年の総括として各ライターの個人的なゲーム・オブ・ザ・イヤーを紹介したのち、最後にAUTOMATON全体としてのゲーム・オブ・ザ・イヤー 2020を発表する。全体GOTYは、ライター陣の投票により決めたものだ。 『Half-Life: Alyx』 ――今年一番のパラダイムシフト 開発元・販売元：Valve 対応機種：PC 革命が起きた。『Half-Life: Alyx』をプレイした瞬間、今までのゲームとは一線を画す新鮮な体験に脳髄を揺さぶられた。ヘッドクラブを頭から払いのけ、コンバイン兵の射撃から身をかがめる。これらはゲーム内の動作ではなく、すべてプレイヤーの動作としてフィードバ
他社事例から考える、利用しやすいデザインシステムのためのガイドライン作り - enechain Tech Blog
はじめに enechainデザインシステムについて デジタル庁デザインシステム 特徴 Figmaファイル Webサイト GitHub Primer 特徴 Figmaファイル Webサイト Ameba Spindle 特徴 Figmaファイル Webサイト 各デザインシステムの構成まとめ enechainへの反映 Notionでのガイドライン まとめ はじめに こんにちは、デザイナーの渡邉と申します。私はenechainの業務委託メンバーとして、enechainの複数プロダクトを支えるデザインシステムの改善に携わっています。 この記事では、利用しやすいデザインシステムへと改善していく上でデザインチームが取り組んでいたことをまとめます。 enechainデザインシステムについて enechainでは10個以上のマルチプロダクトを開発・運用しており、デザイナーは各プロダクトでUIデザインを担当し
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 UI&UXデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 UI & UX Micro-Tips: Volume One. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. 装飾的な要素をたまに使うのは全く問題ありません 2. UIの要素は互いに区別できるようにする 3. シャドウはわずかな量があるだけで十分 4. 見た目的に分かりやすいフォントを選択する 5. パンくずはユーザーが理解しやすいようにする 6. 彩度の高いカラーは慎重に はじめに 次のプロジェクトのために効率的で美しいUIを作成するとき、デザインをすばやく改善するためにわずかな調整で済むことがありま
リクルートは8月10日、新人エンジニア向けの研修資料を無料公開した。同社の2023年の新人研修で使ったもので、ほとんどを同社のエンジニアが作成した。「JavaScript」や「Webアクセシビリティ入門」「検索結果の品質向上」「エンジニアとしての心構え」など、24種類の資料を公開している。 同社の研修では、技術的内容だけでなく「現代的システム開発概論」「事業価値とエンジニアリング」など、事業企画への理解を深めるための講座も用意。研修は2～3カ月半にかけて実施している。 新卒エンジニア向けの資料だが、かなり高度な内容も取り扱ったという。同社は「常に勉強し続けることが求められるエンジニアという職業の第一歩として、どのように技術を学んでいくべきなのか。その手段や手掛かりを知ることも大きな目的」と説明している。 「分からないことばかりの中で、どのようにそれをそしゃくしていくのかということ。理解しき
2020年9月23日に開催されたCTOmeetupのイベントレポートです。 今回はフリーランスで活躍する田中さんをモデレータとして、サイボウズの佐藤さん、リクルートの古川さんをお招きし、フロントエンドエンジニアの未来についてディスカッションを行いました。 質疑応答も交えながら、組織と個人、両者の視点でフロントエンドという領域の本質が語られた今回。フロントエンドに関わる技術や考え方に興味がある方、開発組織に興味がある方はぜひご注目ください。 【ご登壇者プロフィール】 ●サイボウズ株式会社 執行役員 グローバル開発本部長兼サイボウズ・ラボ株式会社代表取締役社長 佐藤鉄平さん2007年サイボウズにエンジニアとして新卒入社。 グループウェア製品「Garoon」、業務アプリプラットフォーム「kintone」の開発チームを経て、 2016年7月グローバル開発本部長に就任。開発組織とプロダクトのマネジメ
セキュリティ企業のゲヒルンは9月1日、自然災害関連の情報や防災気象情報などをユーザーの位置情報に基づいて配信するスマートフォン向け「特務機関NERV防災アプリ」（iOS／Android）に月額制の会員制度「サポーターズクラブ」を設立したと発表した。新機能の早期提供や会員限定コンテンツなどを用意する。年間6000万円の支出がある防災アプリ事業の収益化を目指す。 月額250円（税込、以下同様）のプランでは、通知を受け取る地点数を従来の3点から6点に増やす他、新機能をいち早く利用できる「アーリーアクセス」、サポーターズクラブ会員であることを示す「デジタル会員証」のアプリ内表示機能を提供する。アーリーアクセスで利用できる機能は、2～3カ月後に全ユーザーに開放する。アーリーアクセスの第1弾では、地震の初期微動（P波）と主要動（S波）の現在地への到達予想時間をカウントダウンする機能を公開する。 月額4
WebサービスやWebサイトを開発するうえで最低限おさえておきたいアクセシビリティのポイントを雑多に挙げてく。ある程度のボリュームになったら記事にする予定。
2020.12.15 働き方 「エンジニアとして働くならGAFAこそが最高峰」と漠然と憧れを抱いているエンジニアは少なくないかもしれない。 けれども、当然ながら４社はそれぞれビジョンも思想も扱うプロダクトも異なる。それはエンジニアとしての働き方にも反映されているはず。漠然としたイメージや報酬の良さに惹かれた転職は思わぬミスマッチを引き起こす可能性がある。 そこで元GoogleのナレッジワークCTO川中真耶さん、元AppleのキャディCTO小橋昭文さんの２人に、Google、Appleそれぞれの企業文化を伺った。 （写真左）株式会社ナレッジワーク CTO 川中真耶さん 東京大学大学院情報理工学系研究科コンピュータ科学専攻修士課程修了。IBM東京基礎研究所に入社し、研究者としてXML、ウェブセキュリティー、ウェブアクセシビリティーの研究に携わる。その後Googleに転職し、ソフトウエアエンジニ
公開日：2021.12.21 更新日：2022.07.07 ちょっと不思議な「珍博物館」の世界―知識と愛情とドラマが詰まったユニークなミュージアムへ行ってみよう 日本には、数えきれないほどたくさんの博物館が存在します。 皆さんが暮らす地域にも、規模を問わなければどこかしらに博物館はあるのではないでしょうか。小さい頃は学校の課外授業で訪問したことがあるなんて方も多いはずです。 しかし、いわゆる「博物館」というイメージからは離れた、一風変わっている、でもとても魅力的な博物館が数多くあるのです。それも北海道から沖縄まで至るところに。 社会人になるまでは博物館に行くことがほとんどなかった私ですが、静岡県にある「怪しい少年少女博物館」（後述します）という珍博物館に行ったことがキッカケとなって、博物館熱が爆発！ マニアックな博物館に行けば行くほど“知らない世界を知る楽しさ”にハマり、「世の中には思った
はじめに はじめまして、今年のRecruit Job for Student 2020 で Web フロントエンドエンジニアとしてアルバイトをしていた井関です。 私は 1 ヶ月のアルバイト期間で、あるプロジェクトに参画してユーザー体験 (以下 UX) を改善する取り組みを行いました。今回改善していたアプリケーションは、目的を達成するまでに入力しなければならないフォームがとても多い、正確な入力が要求される、利用者がとても多いという特徴があります。この特徴に沿って、多くのユーザーがより快適に正しく入力できるフォームを目指して様々な施策を行ったので、調査から改善までの手順や具体的な改善例を開発者の目線から紹介します。 想定読者 UI / UX に興味がある開発者 フォームの改善に興味がある開発者 目次 調査方法 改善のプロセス 実際に見つかった問題と改善例 フォーカスとアウトライン表示 フォーム
Web アクセシビリティに興味があったので、まず機械的なチェックツールから学んで知識を増やそうということでこのサイトに @axe-core/playwright と markuplint を導入してみました。 @axe-core/playwright のセットアップ 既に Playwright が導入されている状況を想定し進めます。まず@axe-core/playwright をインストールします。 pnpm add -D @axe-core/playwright このサイトの場合 VRT として Playwright を動かしているテストがあるので(過去資料)、そのプロセスに同居する形で axe を実行することにしました。 e2e.test.tsimport AxeBuilder from "@axe-core/playwright"; import type { Page, TestI
CSSの@mediaは、スクリーンサイズだけじゃない！ 最近の実装で使用されるメディアクエリのまとめ -mediaquery.style
Webサイトやスマホアプリの実装でよく使用される、CSSのメディアクエリのコードを紹介します。 モバイルファースト用をはじめ、ライトモード・ダークモード用、アクセシビリティ、ホバーエフェクト用、デバイスの向き用など、さまざまなメディアクエリのコードをコピペで簡単に利用できます。スニペットに登録しておくと、便利です。
仮想マシンの作成＆実行アプリ「VMware Workstation Pro」と「VMware Fusion Pro」が無償化されたので実際にインストールしてみた
2024年5月13日(月)に、Windows向け仮想マシンアプリ「VMware Workstation Pro」とmacOS向け仮想マシンアプリ「VMware Fusion Pro」が個人利用に限り無償化されました。既にダウンロードとインストールが可能になっていたので、両アプリのダウンロードおよびインストール手順をまとめてみました。 VMware Desktop Hypervisor Pro Apps Now Available for Personal Use - VMware Cloud Foundation (VCF) Blog https://blogs.vmware.com/cloud-foundation/2024/05/14/vmware-desktop-hypervisor-pro-apps-now-available-for-personal-use/ ・目次 ◆1：Br
Access Accepted第778回：ゲーム業界で急速に進むアクセシビリティへの動き ライター：奥谷海人 ソニー・インタラクティブエンタテインメントが先日リリースした「Access コントローラー」は，誰もが不自由なく楽しめるように5年の歳月をかけて開発されたデバイスだ。アクセシビリティに対するゲーム業界の動きは以前から存在していたが，ここ最近はここ最近はプラットフォーマーや大手パブリッシャの間では，欠かせないものになってきている。 5年の歳月をかけて開発された「Access コントローラー」 ソニー・インタラクティブエンタテインメント（以下，SIE）が先日リリースした「Access コントローラー」は，PlayStation 5用アクセシビリティコントローラキットである。通常のゲームパッドの細かい操作を困難とする，さまざまな障害を持った人もゲームを楽しめるよう，付属するボタンやスティ
こんにちは、id:nanto_viです。この記事ははてなエンジニアAdvent Calendarの1日目の分です。 Webアプリケーションでモーダルダイアログを実現しようとして苦戦したことはないでしょうか？ 自前でHTML、CSS、JavaScriptを組み合わせて実装していくと、フォーカスやスクロールの制御が大変ですよね。そんな悩みを解決してくれるのがHTMLのdialog要素、Webブラウザ組み込みのモーダルダイアログ実装が利用できるという優れものです（モードレスダイアログとしても利用できます）。 dialog要素を使うことで、モーダルダイアログに要求されるJavaScript機能をブラウザが肩代わりしてくれるので、アクセシビリティの確保も簡単になります。 2021年12月現在、ChromeやEdgeはすでにdialog要素に対応しています。FirefoxやSafariの開発版でも対応
よく電子書籍の内容をスクショし、Googleドライブで文字認識させた上でノートアプリにコピペしているのですが、これが中々に面倒くさい… 楽な方法はないかと調べた結果、スクショ部分を自動化することに成功しました。 本記事では以下を解説しています。 AppleScriptを使用してKindleのスクリーンショットを自動化 Xnconvertを使ってトリミング macの標準機能でPDF化 Adobe Acrobat のOCR機能でスキャン ⇦ここだけ有料 管理人 プログラミングの知識はなくてOK！ ※スクショしたファイルを無断で配布すると著作権違反になる可能性があるので、個人の利用の範囲を超えないようご注意ください。 １. AppleScriptによるKindleの自動スクリーンショット手順 まずはじめにAppleScriptを使ってKindleを自動でスクショしていきます。 Apple Scr
![MacbookでKindleのスクリーンショットを自動化&PDF化[スキャンだけ有料]](https://cdn-ak-scissors.b.st-hatena.com/image/square/efe0edce18b2c180c1b2d7b2bae45a889df7f977/height=288;version=1;width=512/https%3A%2F%2Fengineer-ganbaru.com%2Fwp-content%2Fuploads%2F2024%2F02%2Fbalazs-ketyi-Ia4DajEUess-unsplash.jpg)
「この機能のアクセシビリティどうしよう」と思ったら
こんにちは、この記事は Webアクセシビリティ Advent Calendar 2020 の6日目です。 すこし前に、同僚のエンジニアに「Webアプリケーションにドラッグ＆ドロップを使う機能を作ろうとしているんだけど、アクセシビリティは何をすればいいのかわからない」という相談をされる機会がありました。そのときの回答が、実はアクセシビリティを考える上ですごく大事なことだなと思ったので、ちょっと文章化してみることにしました。 相談されたのは「新しい機能で直感的な操作を実現するためにドラッグ＆ドロップを使いたいが、アクセシビリティチェックをパスできない気がする」というような内容でした。たしかに私の会社で運用しているチェックでは、キーボードやスクリーンリーダーによる動作チェックを行っているので、それらではドラッグ＆ドロップの操作ができそうには思えません。 彼のこの相談内容からは「良いものを作ろう」
CSS嫌いがあえてフレームワークまでつくった理由。 NES.css開発者流、「嫌い」を「好き」に変える勉強術【フォーカス】 レバテックラボ（レバテックLAB）
TOPフォーカスCSS嫌いがあえてフレームワークまでつくった理由。 NES.css開発者流、「嫌い」を「好き」に変える勉強術【フォーカス】 CSS嫌いがあえてフレームワークまでつくった理由。 NES.css開発者流、「嫌い」を「好き」に変える勉強術【フォーカス】 2024年4月24日 「NES.css」開発者 ダーシノ SIerでの業務アプリ開発や職業訓練校でのプログラミング講師を経て2015年にさくらインターネット株式会社にフロントエンドエンジニアとしてジョイン。2018年にファミコン風CSSフレームワーク「NES.css」を開発、公開する。人生の目標に「笑って死ぬ」を掲げている。柔道初段。 X ブログ GitHub ファミコン風のデザインのWebページをすぐにつくれる、オープンソースのCSSフレームワーク「NES.css」。フロントエンドエンジニアのダーシノさんが2018年にGitHu
2022年5月27日 著 先週のことですが、政府広報オンラインが、いわゆるアクセシビリティオーバーレイを導入したことを広報していました。公的機関にありがちな横並び意識や、Webアクセシビリティに対する理解不足を背景として、他の省庁や地方自治体においても今後、同様のソリューションの導入が相次ぐことでしょう（誠に遺憾ながら）。 これまで何度か書き記してきた（そしておそらく今後も書き記すことになる）とおり、私はWebアクセシビリティの専門家として、またOverlay Fact Sheetに署名した一人として、オーバーレイソリューションに異議を唱えます。コンテンツがアクセシブルに実装されている前提において、その種のソリューションを導入する必要は、全くありません。 とりわけ政府広報オンラインのような、みんなの公共サイト運用ガイドラインに則り、JIS X 8341-3:2016に基づいてWebアクセシ
ダークモードは人気があるが、必須ではない。ユーザーはダークモードを好むが、ダークモードなしでも行動は変わらない。ダークモードをアプリケーションレベルではなくシステムレベルで考えているからだ。ダークモードをサポートする場合は、ダークモードでよくある問題を避けるために、そのデザインをテストしよう。 Dark Mode: How Users Think About It and Issues to Avoid by Tanner Kohler and Amy Zhang on August 27, 2023 日本語版2024年1月15日公開 ダークモードがかつてないほど流行している。少なくともこのトピックに関する多くのウェブデザインの記事を読む限りでは、ダークモードは必要不可欠とさえ思うかもしれない。しかし、ダークモードを完全にサポートし、「うまく活用する」ためには貴重な時間とリソースを必要とす
Deleted articles cannot be recovered. Draft of this article would be also deleted. Are you sure you want to delete this article? #1.はじめに 私は(筆者は)モバイルエンジニア転職を目指す立場です。個人的にアプリのUIデザイン知識はデザイナーだけでなくエンジニアにも必須だと思っています。私自身がアプリ開発の過程でデザインについて指摘され、「このままデザインに無知では良くないと思った」、「同じような立場の方にモバイルアプリのデザインの事を少しでも知ってもらいたいと思った」その２つの理由から本記事を執筆しました。 現在、エンジニアを目指している方やアプリ開発はしているけどモバイルデザインについて改めて知りたいという方、そのような方向けに改めてiOS・Android双
テキストリンクをホバーした際に、テキストのカラーをスライドのアニメーションで変更させるピュアCSSの実装方法を紹介します。 IEには対応してないけど実装が簡単な方法、IEに対応しているけど実装がちょっと面倒な方法など、プロジェクトの要件に適したテクニックをご利用ください。 4 Ways to Animate the Color of a Text Link on Hover by Katherine Kato 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. background-clip: text;を使ったテクニック 2. widthまたはheightを使ったテクニック 3. clip-pathを使用したテクニック 4. transformを使用したテクニック まとめ はじめに ホバー時にテキストリンクのカラー
はじめに @june29 と申します。minne事業部のシニアエンジニアリングリードを担当しています。 この夏、エンジニア #採用目的フェス を開催します!! - ペパボテックブログ さて、上記の記事の通りペパボは「#採用目的フェス」を開催しておりまして、とにかくエンジニアを採用したすぎて穏やかじゃない気持ちでこの夏を過ごしています。積極採用だ！と鼻息を荒くして毎日のように面談や面接の時間を過ごしていると「よく聞かれる質問」があると気付きます。 「勉強会や読書会は開催されていますか？」 今回はこの質問に答えられるような記事を用意します。他にも知りたいことがあればハッシュタグ #採用目的フェス をつけてツイートしてくださいね、どんどん記事化して回答していきたいと思います。 こんな勉強会が開催されています 社内で情報を集めてみたらけっこうなボリュームになりましたので、古いものは除外して、だいた
ホームページやウェブサイトを制作するなかで、「この作業は苦手」「いつも〇〇でつまづく」など日々格闘しているひとも多いでしょう。 この記事では、そんな面倒なWeb制作を楽にするお役立ち最新オンラインツールをまとめてご紹介します。 頭を抱える配色えらびから、おしゃれイラストのダミー生成ツールや、商用利用もできるHTMLテンプレートなど、時間のかかっていた作業を時短できる新サービスがぞくぞく増えています。 自分だけの最強ワークフロー術として、この機会に活用してみてはいかがでしょう。 カテゴリごとに整理しています、目的にあったお気に入りツールを探してみましょう。 コンテンツ目次 1. Web制作便利ツール 2. 配色ツール 3. デザインコレクション 4. プロトタイプ、アイコンツール 5. コラボ、リモートワークツール 6. 面白、クリエイティブツール Web制作の効率、生産性アップ！話題の最新
Illustrator、Photoshop、InDesignをはじめとしたDTP関連の情報サイト。2005年にスタート。 2020年のまとめとして、最近の案件でのスタディをまとめておきます。 文字校正・編集の具体的なポイント箇条書き「違う」冗長な表現Acrobatでのチェック表記揺れ強調の意味で使う記号企業での方針違い数字（半角、全角、漢数字、ひらく）丸カッコ前後の句点カタカナ語の語尾の音引き音引きと罫線半角のパーレン（丸カッコ）とその前後のスペース二重引用符読点チェック相対的な日付InDesign関連脚注・後注索引索引制作の前に索引の削除リンクチェックアポストロフィ音声によるチェックテキストエディタを活用しようオススメはJedit ΩJedit Ωの基本的な文字編集機能Jedit Ωの「複数一括置換」機能その他グラフィカルな台割まとめオンライン校正支援ツール 文字校正・編集の具体的なポイ
最速でフロントエンドを刷新するための開発フロー - Cybozu Inside Out | サイボウズエンジニアのブログ
こんにちは、フロリアでQAエンジニアをやっている中園です。 現在サイボウズでは kintone のフロントエンドリアーキテクチャプロジェクト（フロリア）と称して、Closure Tools から React へと置き換えるプロジェクトが進行中です。 フロリアの詳細については 次の記事をご覧ください。 今回は、フロリアのチームの一つで、利用者に気づかれない形で React への置き換えを行っている Mira チーム1の開発・テストフローの紹介をします。 "最速で" React に置き換えたい Mira チームはただ React に置き換えるのではなく「最速で React に置き換える」という目標があります。 フロリアの各チームはそれぞれのチームごとにオーナーシップを持っており、チームごとに意思決定を行っています。Mira チームでは「最速で置き換える」という目標に向かって、開発スピードを向上
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
2021 年度新卒エンジニア研修について | MEDLEY Developer Portal
Webのダークモードを実現するには - freee Developers Hub
プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.7
UIデザインをきちんとエンジニアに伝えるための、イケてる設計資料を定義してみた｜ymrl
マストバイ！ iPadの実力を引き出す8つの神器 | ライフハッカー・ジャパン
モダンCSSの機能を使用して、フォームのラジオボタンやチェックボックスを独自のスタイルで実装するテクニック
UI・UXに強い！デザインシステムにおすすめ Figmaプラグイン20選
AUTOMATONライター陣が選ぶ「ゲーム・オブ・ザ・イヤー 2020」 - AUTOMATON
これぞプロのデザイン！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ
お盆休みの勉強にぴったり？ リクルート、新人エンジニア向け研修資料を無償公開
フロントエンドエンジニアの未来戦略～組織・個人における生存戦略～ - FLEXY（フレキシー）
「特務機関NERV防災アプリ」、運用費は年間6000万円 収益化に向け“サポーターズクラブ”設立
Webサービスのアクセシビリティについて 考慮すべきポイントを挙げてく
「まるで正反対」Google・Apple出身のCTO２人が明かす、２社の決定的な違い【川中真耶×小橋昭文】 - エンジニアtype | 転職type
ちょっと不思議な「珍博物館」の世界―知識と愛情とドラマが詰まったユニークなミュージアムへ行ってみよう｜KINTO
フォームが多いアプリケーションの UX 改善 | Recruit Tech Blog
axe-core/playwrightとmarkuplintを導入しアクセシビリティの自動テストをできるようにした
Access Accepted第778回：ゲーム業界で急速に進むアクセシビリティへの動き
HTMLのdialog要素とフォーム機能 - Hatena Developer Blog
MacbookでKindleのスクリーンショットを自動化&PDF化[スキャンだけ有料]
公的機関のWebサイトにアクセシビリティオーバーレイは不要
ダークモード：ユーザーの考え方と避けるべき課題
モバイルアプリにおけるUIデザイン - Qiita
CSSのみで実装できる！テキストリンクのホバー時に、カラーをアニメーションで変更させる実装方法のまとめ
社内で開催されている勉強会を紹介します 2021夏 - Pepabo Tech Portal
めっちゃ楽！面倒なWeb制作から救う最新オンラインツール44個まとめ
文字校正・編集のポイント 2020 | DTP Transit