« ありがたいまとめ。「利用者の属性に依存せずに（誰でも・いつでも・どんな状況でも）、格差無く、情報を享受できることです。また、その度合いです」「良い意味で先入観をぶち壊して、新しい視野が開けると思いますよ」。
アクセシビリティからデザインを学ぼう | UX MILK
Category Archives: デザイン / UIUX
知っておくと役立つ！CSSの疑似要素:beforeと:afterを使用したUI要素を実装するテクニックのまとめ | コリス
« ちゃんと覚えておかねば。「クリック・タップ可能領域を広げたり、:afterと:beforeのどちらを使うべきかなど、知っておくと役立つ疑似要素のテクニック」。
お肉のフリー素材サイト oniku images｜宮崎県小林市
« これは小林市の大英断。お肉画像っていつでも不足気味。「世界中の誰でも無料で使用できます。みんなが使えば、社会全体の肉画像レベルはきっと上がる。世界が少しだけ、幸せになると信じています」。
CSSを書くのが劇的に楽になる！ユーティリティファーストのCSSフレームワーク「Tailwind CSS」 | コリス
« 便利そうなのでメモ。取り入れてみたい。「フロントエンドの開発者がTailwind CSSを実際に使い始めたら、CSSを書くのが劇的に楽になった話を紹介します」。
UXライターやデザイナーが道路標識から学べること | UX MILK
« 確かにわかりやすくてインパクトもある。なるほど。「標識はその一瞬でも分かる優れたものでなければいけません」「道路標識から学べるUXの最大のレッスンは『スキャナビリティ（可読性）』の重要性」。
CSSで実装した斜めのラインがギザギザになってしまうのを回避し、滑らかなラインで実装するテクニック | コリス
« 諦めんでも良かったんか…。「CSSで実装すると角度やカラーを変更できる利点がありますが、斜めのラインがジャギってギザギザになってしまうことがあります」。
Webページ上にLEGO?のようなブロックでさまざまな形を作成できる超軽量JavaScriptライブラリ -LegraJS | コリス
« どこかで試したいが、どこでやろう…。「矩形や枠線をはじめ、ラインや楕円やベジェ曲線やグラフやアートなどもブロックで簡単に作成できます」。
レスポンシブの確認が簡単になる！複数のスクリーンサイズで同時にできるChromeの機能拡張 -ResponsiveViewer | コリス
« 便利そうなのでメモ。「複数のスクリーンサイズを同時に確認できたらいいのにと思っていた人に朗報です。先日リリースされたばかり」。
トグルスイッチの誤用をやめよう | UX MILK
« この辺はきっちり意識していかねば。かなり曖昧やった…。「トグルスイッチとトグルボタンをデザイナーは混同しがちです。両方とも状態を管理しますが、トグルスイッチとトグルボタンには根本的な違いがあります」。
HTMLとCSSも進化している！JavaScriptを使用せずに、HTMLとCSSだけで実装できるUI要素のまとめ | コリス
« CSSすげー。すごい世の中になったもんや。「HTMLとCSSには新しい機能が追加され、古いブラウザのサポートも必要なくなり、より簡単に実装できます」。
WordPress（ワードプレス）で簡単にABテストができるプラグインまとめ｜ferret
« 便利そうなのでメモ。どこかで試す。「ここにピックアップしたWordPressのプラグインは、ABテスト専用とは限らず、ABテストを含めた様々な機能を持つものもあります」。
レスポンシブWebデザイン表示一括確認Chromeエクステンション・「ResponsiveViewer」 | かちびと.net
« いつもお世話になっております。「同様のツールは数多に存在しますので若干今更感あるネタですが試しに使ってみたら割と便利だったのでご紹介」。
AIを駆使して、アニメ絵やフィギュアなど背景を消してくれるツールが超高精度！以前から話題だけどさらに精度が上がったらしい – Togetter
« 謎の技術（誉め言葉）。「やべーよ、なんでも切り抜いてくれる」「サムネ作りめちゃくちゃ捗ります」「どういうアルゴリズムなんだろ…」。
はっきりと分かるようにデザインされたUIは、最高のUI | コリス
« そうなんですよね…。「多くのデザイナーが日々、使いやすいデザインについて模索しています」「すっきりデザインされたUIよりも、はっきりと分かるようにデザインされたUIの方が使いやすい最高のUI」。
Appleの商品ページに使用されているスクロールに合わせて動画を再生するエフェクトを実装するスクリプト -Scrolleo | コリス
« どこかで試す。「Appleの新商品は商品自体にワクワクするだけでなく、商品の見せ方・ページのデザインに注目する人も多いと思います」。
UXデザインにアニメーションを導入するときに注意すべきこと | UX MILK
« そうよね。アニメが合わないサイトもあるし。「サイトの要素にアニメーションを加えることのメリットを最大限に享受するためには、ブランドとターゲットユーザーを可能な限り理解する必要があります」。
Web制作者が苦痛だと感じているselect要素の不満点と美しくスタイルするテクニック | コリス
« ありがたいまとめ。「制作者が苦痛だと感じるselect要素の不満点、select要素をクロスブラウザ対応で美しくスタイルするテクニック、select要素に対するブラウザの進化の紹介」。
UXデザインと「流行」の見落とされがちな影響 | UX MILK
« ここを見失うとツラい。大事。「最新のトレンドを取り入れるには注意が必要です。取り入れようとしているトレンドは、ユーザーに役立つのか、それとも単にクールで最新のものであるだけなのかを考えてみましょう」。
ボーダーアニメーション効果を実装できるCSSコードスニペット8選 枠線に動きをつけるサンプル｜SeleQt
« 良い時代。「現在、ボーダーは色の効果だけではなく、動きも追加できます。このような効果は要素が画面に表示される際に、ユーザーが直面するそのものに追加できるのです」。
HTMLにclassを加えるだけで、画像のさまざまなエフェクトを簡単に実装できるCSSの超軽量ライブラリ -Izmir | コリス
« めっちゃ使いたい。「デスクトップではホバー時のエフェクトとして、スマホではフォーカス時のエフェクトとして適用されるので、どちらでも楽しめます」。
CSSは奥が深い！セレクタの書き方・命名や管理を改善する5つの原則 | コリス
« この辺も見ていきたい。大事ですよね。「プロジェクトの規模が大きくなり、携わる人数が増えるにつれて、問題はますます明らかになり、将来的に深刻な問題を引き起こす可能性があります」。
UIのデザインでよく見かける、目の錯覚による違和感を取り除くデザインテクニックのまとめ | コリス
« これはありがたいまとめ。「WebページやスマホアプリのUIをデザインした時に、数値上は均整がとれているのに、人の目の錯覚で違和感を感じることがあります」。
CSSのメディアクエリ「prefers-color-scheme」でダークモード対応にする方法と注意点 | コリス
« どこかで試す。「ダークモードに対応するWebサイトやスマホアプリが増えてきました。ほんの数行のCSSのみでダークモードに対応する方法と注意点を紹介します」。
ナニコレ珍フォント！ヘルベチカに似ているけど、カーニングが異常に難しいフォント -Hellvetica | コリス
« Hellベチカ！こういうの好き。「ヘルベチカに似たフォントですがカーニングがめちゃくちゃになります」「ハロウィンの雰囲気をカーニングで表現したとのことです」。
非デザイナーの僕がデザインぽいことをする時に使う便利なツール18選｜かずたか
« どこかで使う。「デザイン優先度の低い機能の追加や修正などをすることはたまにあるので、今回はそういった時によく使っていたり、最近見つけた便利なツールをご紹介しようと思います」。
これは楽しい！本物の絵筆のように描けるPhotoshopのブラシ素材 -Kyle Brushes | コリス
« ありがたいまとめ。「Photoshopのブラシの可能性がまた広がりました」「今回紹介するブラシは、Kyle T.Webster氏の2019年夏のブラシ。新しいブラシが23種類」。
CSSで見出し固定＋レスポンシブ対応の表を作成 | Webクリエイターボックス
« 昔、やりたかったヤツ…。「表のレスポンシブ化はなかなか難しく、様々な手法で実装できます。今回紹介した技が正解とは限りませんが、参考にしていただけますと幸いです」。
UIにダイナミックなアニメーションを盛り込める20の無料ツール | UX MILK
« 試したくなる。「アニメーションを短い時間で消滅する、ある種の無駄な要素だと考えているなら、それは間違いです」「アニメーションは演劇のようなものです。動的な側面を活用する必要があります」。
ページ上のあらゆる要素をドラッグ・リサイズ・スケール・回転・ワープ・グループ化・スナップ操作を可能にする万能JavaScriptライブラリ -Moveable | コリス
« 便利そうなのでメモ。「単体で利用でき、React、Preact、Angular、Vueにも対応しています」。
素人が作ったチラシを、プロのデザイナーが作るとこうなる→デザイナーのすごさや、視覚効果の重要性がよくわかる例です – Togetter
« 考えさせられる。「初見だと学校プリントかな？と」「御名答。これを作ったのは過去に学級だよりをよく作っていた元教頭先生です」。