「Ameba」15年の負債を払拭するカラーパレットのメソッド | CyberAgent Developers Blog
「Ameba」は2020年に16周年を迎える長寿サービスです。 プロダクトチームはPC / SP / iOS / Androidと4種類のデバイスに対応しており、15年という歳月を経た結果、管理の追いつかない画面、レガシーなコード等に苛まれるようになってきました。 「Ameba」開発チームではそのような、過去の遺物に開発リソースを割かれる状態を「負債」と呼び、その解消のために日々戦っています。 さらに、「Ameba」には現在10名ほどのデザイナーが携わっており、それぞれが異なる施策や領域を対応していることも相まって、施策を経る毎に、「Ameba」内でGUIに関する、共通の意識や見解を持つことができなくなっていました。 この状態を打開し、「Ameba」プロダクト再興の礎を構築しようと、今年度からデザインシステムの開発をスタートしました。 今回はそのデザインシステムの中でも真っ先に取り組んだ要
クイックサマリー ‐ 私たちは一連の短い記事で開発者とデザイナーにとって有用なツールやテクニックを紹介しており、直近の記事ではCSS監査ツールとCSSジェネレータを取り上げました。この記事ではタブやテーブルからトグルやツールチップまで、信頼性の高いアクセシブルなコンポーネントを見ていきます。 目次 以下にすべてのアクセシブルなコンポーネントをアルファベット順に記載しました。目次をスキップするか、スクロールして1つずつお読みください。 :focus styles autocomplete buttons carousels "close" buttons content sliders checkboxes color systems color palettes comics component libraries cookie consent prompts dark mode data
明度を用いて配色を直感的に行うコツ／たじま ちはる（HUMORE） #ノンデザ25周年｜ノンデザイナーズ・デザインブック【日本語版公式】
『ノンデザイナーズ・デザインブック』25周年記念、特典PDF「Missing Pages 2023」からの抜粋です。 25周年キャンペーン情報 特典PDF「Missing Pages 2023」のpp. 65-69に掲載しています。 配色を直感的に行うための明度の使い方を3つのステップで紹介します。 このテクニックは、『ノンデザイナーズ・デザインブック』の第5章で説明されるコントラストに関連しています。 色の三属性と色相環本題に入る前に、配色の基礎知識として色の三属性と色相環について説明します。 色の三属性とは、「色相（色味）、明度（明るさ）、彩度（あざやかさ）」を指します。これらの属性を調整することで、扱える色の幅が広がります。 色相環とは、色を円環状に配置して表したもので、色相を体系的に捉えられます。 Step 1 | 色の選択に役立つ明度チェック1-1. 印象をコントロールするコツ色
今日からはじめる！ WEBアクセシビリティ対応｜リクルート Air ビジネスツールズ プロダクトデザイン
こんにちは、リクルートでプロダクトデザイナーをやっているmunazoです。 私はWebアクセシビリティの対応が強く求められるプロジェクトに参加したのですが、WCAGなどの規格は初学者からすると難しく、正直何から始めていいかわかりませんでした。 Webアクセシビリティ難しすぎる問題という記事に書かれているように、私も同じようにアクセシビリティは難しいと言う印象が強かったのですが、実際にやり始めてみると、簡単に始められる事も多くあると言うことに気付きました。 この記事では、アクセシビリティに対応したいけど始められていない・・ と言う方向けに、具体例を交えて対応のポイントをご紹介します！ こう言う人向け ・必要性は分かっているけど、何から始めたらいいかわからない ・WCAGなど、難しそうな印象で手をつけられていない・・ ・自分は知らなくても、他の人がやってくれると思ってしまっているはじめにWCA
しかし、実際のデザインではこの表にないフォントサイズやウェイトを使いたい場合もあるでしょう。その場合には、シミュレータやルックアップテーブルを参照することで、より精度の高い確認が可能になります。 ルックアップテーブルでフォントサイズとウェイトから必要なコントラストを確認する シミュレーションの説明の前に、より細かい基準がどのように定められているか見るために、APCAのルックアップテーブルを見てみましょう。 このルックアップテーブルは、WCAG3のシルバーレベルを満たすための基準を示しています。ブロンズレベルに追加して、この基準に準拠することでより精度の高いコントラストの確保が可能になります。 以下は、公式のシミュレーションサイトAPCA Contrast Calculatorにあるルックアップテーブルのスナップショットです。ページの下部、APCA Font Table: Silver Le
「UIデザイナーのスキルマップ」にアクセシビリティスキルを入れた話 - Chatwork Creator's Note
こんにちは。プロダクトデザイン部マネージャーの @cw-take です。 今年Chatworkのプロダクトデザイン部で「UIデザイナーのスキルマップ」をつくりました。 この記事では簡単なスキルマップの説明をした上で、アクセシビリティスキルを掘り下げて紹介したいと思います。 UIデザイナーのスキルマップ スキルマップ作成の背景 新しいデザイナーの入社をきっかけに、今年プロダクトデザイン部では価値観の相互理解などお互いを知るための取り組みをおこなってきました。 「UIデザイナーのスキルマップ」をつくったのもこういった取り組みのひとつです。 スキルマップを使いUIデザイナーそれぞれが持つ強みを可視化し共有することで、 伸ばしたいスキルについてお互いが支援できる環境 をつくりたいと考えました。 スキルマップの12項目 スキルマップの項目は「プロダクトデザイナーのスキルマップを考えてみた : cou
カラーピッカーやコントラストチェッカーを備え、Mac/Winのクロスプラットフォームに対応したカラーマネージメントツール「Swach」のBeta版がリリース。
コントラストチェッカーやカラーピッカーを備え、Mac/Winのクロスプラットフォームに対応したカラーマネージメントツール「Swach」がリリースされています。詳細は以下から。 Swachは米バージニア州のShip Shape Consulting LLC.が新たに開発＆公開したカラーマネージメントツールで、Ember.jsとElectornを利用しmacOSとWindowsのクロスプラットフォームに対応しています。 Swach is a robust color management tool for the modern age. It allows you to collect colors and organize them into palettes. macOS High Sierra (10.13) or newer Windows 8 or newer Ubuntu 18.0
【おすすめ】テレワーク・持ち運びに便利なモバイルモニター EVICIV EVC-1504 4K - Coffee Break
新型コロナの影響で、テレワークしをている方も多いのではないでしょうか。とはいっても、自宅の環境は職場と比べて同じとはいかないので、最低限の環境でなんとか仕事をしているという方もいるんじゃないかと思います。 私の場合、職場のモニター２台にしていますが、自宅ではノートPC一台だげなので、EXCELやパワーポイントなど資料を作成するときは、画面一つでは不便が生じていました。モニターを追加するにも机が狭く置き場所がないので、購入することに踏ん切りがつかないまま、いままでなんとか乗り切っていました。 そこで、この問題を解決出来る、おすすめのモバイルモニターを見つけ、さっそく購入しましたので、ご紹介します。 モニターの選定条件 商品の仕様 モバイルモニター到着 各ポートにケーブルを接続 モニター設置後はこんな感じ iPhoneを接続してみました まとめ 今回、購入した商品一覧 モニターの選定条件 今回
これは フェンリル デザインとテクノロジー Advent Calendar 2023 15日目の記事です。 こんにちは。大西です。年に一度くらいしか書かないnote、今年も一度しか書かずに終わりそうです。 私は視覚科学を勉強しています。特に文字の認識に関する研究が好きです。 文字について考えるのが楽しすぎて、博士号をとりました。今回は久しぶりに自分の専門領域の話を書きます。 IT業、しかもHCDを掲げて仕事をしている身ではありますが、実は私、WCAG関連の話題があまり好きではありません（個人的な見解です）。中でも、「4.5:1以上のコントラスト比がないとアクセシビリティ対応が不十分」のようにいわれがちな、コントラストチェッカーの結果を見るのが一番苦手です。チェッカーでの計算に限界があることを理解して使ってほしい、結果に一喜一憂するくらいなら輝度を実測しちゃえばいいのに、などと歯がゆい思いを
web専門知識ゼロからコーポレートサイトをリニューアルしました（後編）- 採用したweb技術と導入意図 - NBDC
Freepik Storysetのイラストを改変して使用 本稿では、NBDCサイトをリニューアルするに当たって使用した様々なweb技術の概要と導入意図を紹介します。今まさにサイトのリニューアルを検討されている方の参考になれば幸いです。 現代のwebサイトは、多くのセマンティック技術に裏支えされています。ごく簡単ではありますが、その拡がりを知る一助になればとも思います。 なお、NBDCサイトのリニューアルの経緯や設計意図については「web専門知識ゼロからコーポレートサイトをリニューアルしました（前編）- サイト方針検討から情報設計まで」をご覧ください。 レスポンシブデザインでモバイル環境に対応する 新サイトでは、レスポンシブデザインを採用しました。これにより、モバイル端末の小さな画面でも読みやすくなりました。 レスポンシブデザインは、PCのような大きな画面を持つ端末向けのインターフェイスと、
本記事は、デジタル庁が作成した「ウェブアクセシビリティ導入ガイドブック」の内容コピーライトポリシーに準じて転載をしています。 「ウェブアクセシビリティとは何か？」からはじめて学ぶ人にとって、非常に有益な情報となっています。手元に置きたい場合は、ぜひデジタル庁のサイトで、「ウェブアクセシビリティ導入ガイドブック」を、ダウンロードして振り返りながら活用してください（Web担編集部）。 ウェブアクセシビリティ導入ガイドブックとはウェブサイトで発信される情報、情報システムで提供されるサービスは、インターネットとブラウザがあれば時間と場所を問わず利用することができ便利です。また、利用者が、見やすい・使いやすい方法を選んで使うことができる、柔軟性の高いメディアでもあります。 インターネットを使った情報発信ができるようになったことで、情報へのアクセスのしやすさ、つまりアクセシビリティは格段に高まりました
はじめに最近、AIによる画像生成サービスが多く出てきて、デザインを含めたクリエイティブにかかわる方は関心があるのではないでしょうか。 議論が起こっている、AIの学習元データの著作権の問題も気になります。 ただ、今回は純粋に、自分の専門スキルであるUIデザインをAIは行うことができるのか気になり、実際に試したことをまとめました！ 結論「取って代わることはない。専用の学習をさせれば、グラフィックのアイディエーションに使うことができそう。」 上記の結論に至った理由を、検討過程とともに説明していきます。 検討過程使用ツールAI生成ツール：Midjourney UIデザインツール：Figma Midjourneyの様子 検証Ⅰ AIにUIはデザインできるのかMidjourneyにUIの画像を生成してもらいます。 今回は未来のUIデザインを目指してそれとなくプロンプトで指示をします。 （noteにイン
なぜカラーアクセシビリティが重要なのか？
なぜカラーアクセシビリティが重要なのか？ 使う人を意識したデザインカラーは、コミュニケーションの強力な手段であるとともに、アクセシビリティを向上する強力なツールとなります。本記事では、自分の好きなスタイルに合うカラーを選びつつ、制作におけるAdobe Colorの活用方法について解説します。 画像提供：マニーシャ グプタ(Manisha Gupta） カラーは、あらゆる製品の見た目や雰囲気に大きな影響を与えます。使う人を意識したデザインをおこなう場合、カラーはコミュニケーションの強力な手段であるとともに、アクセシビリティを向上する強力なツールとなります。教育サービス大手Pearson所属のデザイナーであるアリソン マーフィー（Alison Murphy）氏に、「あなたにとってデザインにおけるアクセシビリティとは何ですか？」と尋ねたところ、このような答えが返ってきました。 「ユニバーサルデザ
「Alienware AW3225QF」をレビュー。4K/240Hzの量子ドット有機ELモニタを徹底検証 : 自作とゲームと趣味の日々
2024年02月24日23:30 （注：商品価格は執筆当時のものです。販売ページリンクにはアフィリエイトを含みます） 「Alienware AW3225QF」をレビュー。4K/240Hzの量子ドット有機ELモニタを徹底検証 wisteriear コメント(0) タグ ：#レビュー#モニタ_レビュー#G-Sync_モニタ_レビュー#240Hz＋_モニタ_レビュー#FreeSync_モニタ_レビュー#4K_120Hz+_モニタ_レビュー#HDMI2.1_モニタ_レビュー#有機EL_モニタ_レビュー スポンサードリンク DELLのハイエンドゲーミングブランド Alienwareから発売された、有機ELパネルに量子ドット技術を組み合わせたQD-OLEDパネルを採用する、4K解像度かつ240Hzリフレッシュレートの32インチ湾曲ゲーミングモニタ「Alienware AW3225QF」をレビューします
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
アクセシブルなフロントエンドコンポーネントの完全ガイド - 前編 | POSTD
第3回 APCAを活用して文字の視認性を確保したデザインを実践する | gihyo.jp
視覚科学者がAPCAについて考えてみた｜Madoka Ohnishi
ウェブアクセシビリティ：よくある6つの質問に回答 | ウェブアクセシビリティ導入ガイドブック
UIデザイナーにAIは取って代わるのか Midjourneyを使って現役UIデザイナーが試してみた｜横田奈々