CSSだけでWebページをダークモード対応。ついにChromeにも対応した prefers-color-scheme が超便利

prefers-color-scheme という設定値を使うことで、Webページをかんたんにダークモード対応させることが可能です。Chromeでも本日公開された76から対応されたので、かんたんに紹介します。こちらもあわせてどうぞ↓。 prefers-color-scheme とは media queryの1種で、CSS上からユーザーがOSでダークモードをONにしているかどうかを判別できます。たとえば、普段は白い背景のWebページを、ダークモードをONにしているPCから見た場

CSS1行で美しい背景ぼかし・すりガラス表現！ついにChromeにも対応したbackdrop-filterが超便利

これまでWebデザインにおいては実装が難しかった背景ぼかしの表現が、backdrop-filterというCSSで超かんたんに表現できるようになりました。 これまでこれまでCSSでは、「filter:blur();」プロパティを使用することで要素自体をぼかすことはできたのですが、iOSのように重なった背景をぼかすことはできませんでした。 そのため、背景ぼかしを表現するためには、背景要素を2重にして重なっている部分のみぼかす等の非常に面倒なハックが必要で、あまりWebにおいて

iOS13のSF SymbolsをSketchやXDで使う

SF Symbols をデザインファイル上で使うのに少しつまずいたので、使い方を共有しておきます。 SF Symbolsとは SF Symbols は先日のWWDC19の中で発表された、Apple公式のアイコンフォントです。用意された数多くのアイコンを、気軽にアプリの中で使用できます。アイコンのラインの太さを9段階から選べます。 SketchやIllustratorの中で使うには1.まず、こちらのサイトからSF Pro フォントをダウンロードし、インストールします。すで

いちばん詳しい Sketch / XD / Figma / Studio の比較 〜6. まとめ

Sketch, XD, Figma, Studio を比較する連載記事の6番目です。今回で終わりです。 1. 導入と背景知識 2. 基本項目の比較 3. デザイン機能比較 4. シンボルとスタイル 5. プロトタイピングとコラボレーション 6. まとめ ◀イマココ 今回はまとめです。各ツールの総括と、補足的な情報、ここまで比較しての結論などを書きます。 各ツールの総括各ツールについて、特徴などの総括です。詳細はいままでのnoteでぜひ。 Sketch: ★ 歴

いちばん詳しい Sketch / XD / Figma / Studio の比較 〜5. プロトタイピングとコラボレーション

Sketch, XD, Figma, Studio を比較する連載記事の5番目です。 1. 導入と背景知識 2. 基本項目の比較 3. デザイン機能比較 4. シンボルとスタイル 5. プロトタイピングとコラボレーション ◀イマココ 6. まとめ 今回はデザインに画面遷移やアニメーションをつける「プロトタイピング」機能と、複数人での作業や情報共有の機能についでです。 プロトタイピング機能とは画面遷移やアニメーション、インタラクションを作成する機能です。UIデザイ

いちばん詳しい Sketch / XD / Figma / Studio の比較 〜4. シンボルとスタイル

Sketch, XD, Figma, Studio を比較する連載記事の4番目です。 ※ 2019年5月追記: XDのシンボルについての大幅なアップデートに対応して、内容をかなり修正しました。 1. 導入と背景知識 2. 基本項目の比較 3. デザイン機能比較 4. シンボルとスタイル ◀イマココ 5. プロトタイピングとコラボレーション 6. まとめ 今回はUIツールの肝とも言える、「シンボル」の機能や管理性能、「スタイル」の機能、デザインシステム・コン

いちばん詳しい Sketch / XD / Figma / Studio の比較 〜3. デザイン機能比較

Sketch, XD, Figma, Studio を比較する連載記事の3番目です。 1. 導入と背景知識 2. 基本項目の比較 3. デザイン機能比較 ◀イマココ 4. シンボルとスタイル 5. プロトタイピングとコラボレーション 6. まとめ 今回は基本的なデザイン作成に関する機能についての比較です。 操作感・UI ツールの操作のしやすさ、UIについての評価です。まず、基本的な操作感・キーボードショートカット・UIの構成はどのツールもかなり似ています（XDは

いちばん詳しい Sketch / XD / Figma / Studio の比較 〜2. 基本項目の比較

Sketch, XD, Figma, Studio を比較する連載記事の2番目です。 1. 導入と背景知識 2. 基本項目の比較 ◀イマココ 3. デザイン機能比較 4. シンボルとスタイル 5. プロトタイピングとコラボレーション 6. まとめ 今回は料金や利用環境など、各ツールの基本的な項目についての比較を紹介します。 対応デバイス環境 Figmaのみ、ブラウザ上で動くWebアプリケーションです。MacOS, Windows用のデスクトップアプリもあります

いちばん詳しい Sketch / XD / Figma / Studio の比較 〜1. 導入と背景知識

平田です。普段は個人のブログに記事を書いているので、ちゃんとしたnoteを書くのはこれが初めてです。 Sketch, Adobe XD, Figma, InVision Studio について徹底的に比較を行ったので、知見をまとめたいと思います。量がかなり多いので、いくつかの記事に分けて紹介します。 1. 導入と背景知識 ◀イマココ 2. 基本項目の比較 3. デザイン機能比較 4. シンボルとスタイル 5. プロトタイピングとコラボレーション 6. まとめ 今回

5年間放置してた (ROM専だった) noteに記事を投稿してみることにした。いま書いてる。

noteはじめてみた　まだよくわかってないけどすごくすてきなサイトデザイン