Towards richer colors on the Web
Preface Introduction Colors on the Web CSS Color Color in Chromium Render pipeline Richer colors Some ideas from WebKit High precision colors in Skia Summary In Closing Preface This blog post is based on my talk at the BlinkOn 14 conference (May 2021). You can watch the talk here: Towards richer colors in Blink (BlinkOn 14) And the slides are available here: Towards richer colors in Blink - slides
OMG, SVG Favicons FTW!
This article explores the world of SVG favicons. We cover adding them to HTML, using emojis, inlining them as data URIs, supporting dark mode, and animations. Chinese Version / 中文版 I’ve been working on some side projects recently (Style Check and bedrocss), and as with any project I work on long enough, I got to the point where I wanted to add a favicon. I decided to play around with SVG favicons.
CSSコンテナクエリの登場で、デザインのやり方も考え方も大きく変わる
現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化します。そして、コンテナクエリは親要素のコンテナにもとづいてレイアウトを最適化します。コンテナクエリとは何か、デザイナーのワークフローにどのような変化をもたらすかを紹介します。 今まではビューポート（メディアクエリ）で変化するコンポーネントと影響を受けないコンポーネントの2種類でしたが、これからは親コンテナ（コンテナクエリ）で変化するコンポーネントも必要になります。 CSS Container Queries For Designers by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに レスポンシブデザインの現状 コンテナクエリとは コンテナクエリを念頭に置いたデザイン デベロッパーとのコミュニケーション方法 レスポ
プロのUIデザイナーに学ぶ！UIとUXの印象がよくなるデザインの知識とテクニックのまとめ vol.6
デザインはちょっとした一手間を加えるだけで、ぐっとよくなります。 プロのUIデザイナーによるWebページやスマホアプリのUIとUXを改善するデザインの知識とテクニックを紹介します。 第6弾は、アクセシブルで美しいユーザーインターフェイスを構築するデザインのテクニックです。 UI & UX Micro-Tips: Volume Six. by Marc Andrew 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. スマホアプリではタブバーを常に表示する 2. ウェイトを使用するだけで、強調と階層を作ることができます 3. スマホではタップ可能な領域を広くする 4. サイト内のナビゲーションは一貫性のあるものにする 5. コンテンツが豊富なサイトでは検索を目立たせる 6. 適当にフォントサイズを選ぶのではなく Typ
CSSの論理プロパティの使い方を徹底解説、margin-block-start, margin-inline-endなど
CSSでマージンを与える際に、margin-left, margin-rightのように物理プロパティを使用している思います。もちろん問題はないですが、CSS GridやFlexboxで使われている論理プロパティを使用する機会も増えてくると思います。 CSSの論理プロパティの基礎知識、inlineとblockの仕様、論理として使用できるプロパティ、論理プロパティの実装例を紹介します。 Digging Into CSS Logical Properties by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに writing-modeによるinlineとblockの違い inlineとはどういう意味ですか？ startとendを正しく理解する 論理として使用できるプロパティは何ですか？ 論理プ
Flexboxで実装する定番レイアウトのコードのまとめ
Webページやスマホアプリに使用される一般的な定番レイアウトをCSS Flexboxで実装したシンプルなコードを紹介します。 ヘッダ・コンテンツ・フッタがあるレイアウトをはじめ、サイドバーがあるレイアウト、スマホに対応したカードの配置、高さを揃えたカード、異なる高さのカードを使用した価格表など、コピペで簡単に使用できます。 Evergreen CSS Flex Layouts With Live Demos by Miroslav Nikolov 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. Flexboxで実装するスマホに対応したカードのレイアウト 2. Flexboxで実装する高さが等しい複数のカード 3. Flexboxで実装したカードの高さをコンテンツベースにする 4. Flexboxで実装するコンテン
フォントのサイズ設定は役に立たない、問題点と解決方法
WebページやOSのUI、エディタなどのソフトウェアでフォントのサイズや行の高さを設定した際に起こる問題点と解決方法を紹介します。 Font size is useless; let's fix it by Niki Tonsky 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに フォントのサイズにおけるポイントとは emスクエアとは font sizeにおける問題点 解決方法 line height（行の高さ）もめちゃくちゃです 予測が可能なline height（行の高さ） 終わりに はじめに あなたのお気に入りのエディタに、"font_size": 32を設定するとどうなりますか？ お伝えしたいことがあるので、聞いてくれたら嬉しいです。 実際にやってみました。 私はmacOSでSublime Textを使っています
フィギュアの原型師が「目を造形するときに考えていること」が目からウロコ 「めちゃくちゃ分かりやすい」「これこそノウハウ」
※本記事はアフィリエイトプログラムによる収益を得ています フィギュアの原型師が普段「フィギュアの目を造形するとき」に考えていることを説明したツイートが興味深いと話題になっています。 投稿したのは、フィギュアメーカーの海洋堂から発売されている「ダンボー」フィギュアなどの原型を手掛ける造形師（原型師）の榎木ともひで（@eyewater_e）さん。アニメや漫画でしばしばみられる「斜め顔」――奥の目が細くなり、手前の目は正面から見たときとほとんど変わらない――の表現を、造形で再現しようとしたときの考察をまとめています。 単純に“アニメキャラ”の目を平面上に描いて、それを斜めから見ればいいだけのような気がしますが、実はそれでは例の「斜め顔」のようには見えないことが試してみて分かります。そこで、紙に描いた左右の目の中心から、二つ折りにして角度をつけてみると……かなり近い見え方に（！）。上から見ると、両
コピペで簡単！ヘッダを実装するシンプルなHTMLとCSSの17種類のテンプレート -headers.css
新しいプロジェクトですぐに利用できるようシンプルなHTMLとCSSで実装された、17+種類のWebサイトのヘッダを実装するテンプレートを紹介します。 ヘッダはロゴ、ナビゲーション、検索フォームのシンプルな構成ながら、バリエーションは豊富で、実装コードだけでなく、デザインのアイデアとしても便利です。 headers.css headers.css -GitHub テンプレートは、以下に基づいて実装されています。 シンプルな実装 レスポンシブに完全対応 簡単に編集できるようにSassを使用 アクセシブル オープンソースのプロジェクトで、商用でも無料で利用できます。 2020年9月現在、17種類のヘッダがあり、今後さらに増やす予定とのことです。
ソシオメディア | ヒューマンインターフェース ガイドライン
ソシオメディアがまとめている、ヒューマンインターフェースをデザインする際の指針です。これらは、インターフェースデザインに関する様々な文献と、実際のデザインコンサルティングで得た知見をもとに、ソシオメディアが独自に編纂したものです。継続的に追加・更新していきます。 すべてモデルインタラクションプレゼンテーション
デザインの基本: フォントのカーニングとは、カーニングの基本的なやり方 | コリス
Webでも紙でも文字のデザイン、タイポグラフィは非常に大きな存在です。 文字のデザインで基本となるカーニングについて、基礎知識から基本的なやり方、CSSでのカーニングのやり方までを紹介します。 The Ultimate Guide to Kerning 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 この画像のどこがおかしいか カーニングとは カーニングの基本的なやり方 カーニングはいつ必要なのか カーニングではないもの CSSでカーニング 終わりに この画像のどこがおかしいか この画像のどこがおかしいのか、経験の浅いデザイナーは頭をひねるかもしれません。
良いデザイナーになるために、最初に身につけておきたいデザインの基本の勉強方法 | コリス
良いデザインはある日突然生まれるものではなく、しっかりした基礎に基づいて作られるものです。デザインを実践する前に、最初に身につけておきたいデザインの基本の勉強方法を紹介します。 Before you can master design, you must first master the fundamentals 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 良いデザインは、突然生まれるものではない デザインの基本 その1: 基本はタイポグラフィ デザインの基本 その2: 空白を使ってバランスをとる デザインの基本 その3: サイズを使用してビジュアルの階層を確立する デザインの基本 その4: 意味を伝えるためにカラーを使う 終わりに 良いデザインは、突然生まれるものではない 先週、私はビジターから質問をいただきました。 優れ
Web制作者がチェックしておきたい、最近のWebサイトで見かけるデザインのアイデア -2018年5,6月
デザインで悩んだ時には、新鮮なアイデアに触れてみると良いインスピレーションに繋がります。最近のWebサイトで見かけるデザインのアイデアを紹介します。 今まで使用されてたデザインのトレンドにも一手間加えられて、より使いやすく、洗練されたものになっています。 3 Essential Design Trends, May 2018 3 Essential Design Trends, June 2018 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 スクリーンいっぱいの写真画像 分割スクリーンの新しい考え方 透明度を抑えたカラーオーバーレイ ナビゲーションの小型化 注意を引き付けるカットアウトとレイヤー 早回しの動画 スクリーンいっぱいの写真画像 ヒーローイメージは、スクリーンいっぱいの写真画像でさらに大きくなっています。新しい重要
デザインの基本日記 「配色編」｜Design Beginner
配色がうまくいかない場合の多くはたくさんの色をついつい使ってしまった結果招いていることが多い。まずは2色で配色をしてその上で少しずつ色の調整をすることによって、まとまりのあるデザインが作りやすくなる。 一般的に言われている配色は、ベースカラー7割、メインカラー2割、アクセントカラー1割。一番表現したいことをアクセントカラーにすることで表現したいことが何かはっきりわかりやすくなる。 なんとなく落ち着いていて物足りない場合、色相環で反対の色をアクセントカラーに持ってくるとインパクトがでる。この色相環の反対の色を反対色や補色といったりもする。 逆にガチャガチャして色がうるさい場合は、色相環の隣り合った色数色を選び配色することで全体的にまとまった印象になる。この色相環の近くにいる色のことを近似色と呼ぶ。 配色を決める場合、いくつかの軸があるが、何を表現しなければいけないかというテーマによって配色を
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Behind the feature: shedding light on shadow spread | Figma Blog
Design Systems For Figma
Read and Share Twitter Threads easily!
最近のWebサイトやスマホアプリのワークフロー、モジュール型でパターン主導のデザインシステムを学べる解説書 | コリス
2018年総まとめ: Pocketにたくさん登録されたWeb制作に役立つ記事のまとめ
2017年総まとめ：Pocketにたくさん登録されたWeb制作に役立つ記事のまとめ
