UIデザインで、なぜダークモードにおけるグレースケールは難しいのか、人がカラーとコントラストを知覚する感じ方
ライトモードだといい感じのグレースケールが、ダークモードにすると特に暗いグレーあたりのコントラストが低くなることがあります。 これは人がカラーとコントラストを知覚する感じ方に関係があります。どのようなメカニズムでそう感じるのか、ダークモードでもいい感じのグレースケールにするにはどうすればよいのかを解説します。 Darkmode by Dan Holick 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 ダークモードのグレースケールを作成するのが難しいのは、なぜだと思いますか？ それは、人がカラーとコントラストを知覚する感じ方に関係があります 👇
分かると、実に、おもしろい！ QRコードの仕組み
少しマニアックな知識、QRコードの仕組みを紹介します。 QRコード決済、リンクをQRコードで提供するなど、日常的に使用されているQRコードにあるそれぞれのパターンがどのように機能しているか、どういう役割をしているのか、なぜ上下逆さにしても読み取れるのか、なぜ一部が隠されても読み取れるのかなどが分かります。 QR codes by Dan Hollick (@DanHollick) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに QRコードの仕組み 終わりに はじめに QRコードがどのように機能しているのか、疑問に思ったことはありませんか？ 控えめに言って、実に、おもしろい！ 注意: この記事⬇では非常にマニアックな内容が含まれています。 QRコードの仕組み QRコード（Quick Response code）は自動車部
これがユーザーの信頼を失うデザインだ！ 最近のUIで見かけるダークパターンのしっかりとした知識が身につくデザイン書 -ザ・ダークパターン
ダークパターンとは、WebサイトやスマホアプリのUIをユーザーに惑わせるデザインにし、ユーザーの個人情報や時間やお金をかすめ取る手法です。 たとえば、知らない間にメール配信が登録されていたり、料金に手数料が加えられていたり、登録は簡単なのに退会が難しかったり、キャンセルがクリックしにくいようにデザインされてたり、さまざまなダークパターンが存在します。 最近のダークパターンをはじめ、さまざまなダークパターンを反面教師として学び、制作側として気をつけたいポイントが解説されたデザイン書を紹介します。 ユーザーとして騙されないように知識を増やしておくのにも有用です。 著者は「UXライティングの教科書（紹介記事）」や「ザ・マイクロコピー（紹介記事」などでお馴染みの仲野 佑希氏。これまではライティング主体の解説書を紹介してきましたが、本書はダークパターンの解説書です。デザインによるダークパターンだけで
フォントが大好物な人に朗報🎉 MORISAWA BIZ UDゴシックとUD明朝がオープンソースになったぞ！！
まさかまさかの朗報です！ MORISAWA BIZ UDゴシックとMORISAWA BIZ UD明朝がGitHubにオープンソースのOFLで公開されています！！！ アップデート情報 4/1 Google Fontsで利用できるようになりました！ Morisawa Inc. -Google Fonts 3/29 v1.001, v1.002がリリースされ、不具合が修正されました。 3/24 HTMLやCSS、JavaScriptなどコードを書く人にどうぞ。 仕事早っ！！ オープンソースになったMORISAWA BIZ UDゴシックのプログラミング用合成フォント「UDEV Gothic」がリリース MORISAWA BIZ UDフォントとは GitHubで公開されているMORISAWA BIZ UDフォント MORISAWA BIZ UDフォントのダウンロード MORISAWA BIZ UDフ
全部、完全に商用利用無料！ UIデザインに適した400種類以上のSVG・Figma用も揃ったシンプルでかわいいアイコン素材 -Doodle Icons
アイコン用のグリッドを使用して手描きされた、ちょっとラフなかわいい感じにデザインされたアイコン素材を紹介します。 15のカテゴリに、400種類以上のアイコンがセットになっており、個人でも商用プロジェクトでも完全に無料で使用できます。フォーマットは.png, .svg, .figが揃っているのも便利ですね。 Doodle Icons -Khushmeen Doodle Iconsの特徴 Doodle Iconsのダウンロード Doodle Iconsの特徴 Doodle Iconsは、イラストレーターでアニメーターでもある@khushmeensidhu氏による、手描きのアイコン素材です。 アイコングリッドを使用して、手描きされたアイコン 15のカテゴリに、400種類以上のアイコン 個人でも商用プロジェクトでも無料で利用できます 帰属は必要ありません アイコンのフォーマットは、.png, .s
最近見かける、粒子の粗いグラデーション！ほんの少しのCSSとSVGで実装できるの知ってた？
CSSとSVGでグラデーションにノイズを与え、粒子の粗いグラデーションを実装する方法を紹介します。 背景など通常のグラデーションに使用するだけでなく、暗くしてシャドウに使用したり、輝度とコントラストを上げてホログラムのような虹色のグラデーションとして使用することもできます。 Grainy Gradients by Jimmy Chion 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに ノイズを加えたグラデーションを生成できるオンラインツール 実装: SVGノイズとCSSグラデーション SVGのturbulenceを使用する SVGとグラデーションを使用してCSS背景を作成する 明るさとコントラストを高める ノイズのカラーが均一でない CSSのブレンド機能 粒子の粗いグラデーションの使用例 さらに詳しく ブラウザのサポー
日本語フォントがGoogle Fontsに大量追加！すべてのフォントが商用利用も無料のフリーフォントです
フリーフォントが大好物な人に朗報です！ 🎉 先週、Google Fontsに日本語フォントが追加されたので、紹介します。これでさらに、たくさんの日本語フォントがGoogle Fontsで使用できます。 新しく追加された日本語のGoogle Fonts 他にもたくさんある日本語のGoogle Fonts Google FontsのライセンスはほとんどがSIL Open Font Licenseで、商用プロジェクトでも無料で利用できます。他に採用されているライセンスはAPACHE LICENSE, VERSION 2.0です。 フリーフォントが大好物な人には、下記もお勧めです！ 2021年用、日本語のフリーフォント523種類のまとめ -商用サイトだけでなく紙や同人誌などの利用も明記 新しく追加された日本語のGoogle Fonts まずは、先週Google Fontsに新しく追加された日本語
CSSの進化がすごすぎる！新しいレスポンシブデザインの実装方法を解説
現在のレスポンシブデザインは、ビューポートにもとづいてレイアウトを最適化しています。しかし、新しいレスポンシブデザインでは、アニメーションが不要なユーザーには動きを少なくしたり（無くしたり）、親コンテナの幅にもとづいてコンポーネントを最適化したり、スコープ付きスタイルやフォームファクターなど、ユーザーの好みや環境に合わせて最適なコンテンツを提供できるようになります。 これらの新しいレスポンシブデザインのコンセプト・実装方法を紹介します。CSSがこれまで以上に進化します。 The new responsive: Web design in a component-driven world by Una Kravets 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 レスポンシブデザインの現状 ユーザーでレスポンシブ コンテナでレス
CSSの中央揃えで、最も万能で信頼できる実装テクニック
CSSは進化が早く、中央揃えのテクニックも一昔前のものよりも確実に使いやすくなっています。天地左右の中央に要素を配置する際に、要素の幅や高さが可変だったり、要素の数が増えても対応する最新の実装テクニックを紹介します。 現在主流の5つのテクニックからそれぞれの特徴と最も万能で信頼できるテクニックを評価します。 Centering in CSS by Adam Argyle 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 1. Content Center 2. Gentle Flex 3. Autobot 4. Fluffy Center 5. Pop & Plop 中央揃えに最適なテクニック はじめに CSSの中央揃えは、ジョークの対象にもなる悪名高い課題でした。しかし今日ではCSSはすべて進化し、素直にこれらのジョー
シンプルなHTMLで、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワーク -new.css
シンプルなHTMLのみを使用して、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワークを紹介します。 シンプルなブログや自己紹介ページなどをさくっと作成したい時に便利で、CSSリセットとして利用するのもありかもしれません。 new.css new.css -GitHub new.cssの特徴 new.cssのデモ new.cssの使い方 new.cssの特徴 new.cssは、HTMLのみを使用してモダンなWebサイトを作成するためのclassレスのフレームワークです。HTMLの実用的なデフォルトのスタイルを活かし、美しく見えるようにスタイルされています。 超軽量4.8KbのCSSフレームワーク。 用意するのは、HTMLファイルのみ。 マークダウンで生成されたHTMLのレンダリング。 シンプルなブログや自己紹介ページに最適。 MITライセンスで、商用プロジェクト
他のCSS本とはかなり異なる！現在、主流の実装・設計方法が徹底解説された良書 -CSS設計完全ガイド
私のCSSはこのままでいいのだろうか、他の人はどのように取り組んでいるのか、CSSのスキルアップを考えているWeb制作者・デベロッパーに、ぜひ手に取ってほしい一冊を紹介します。 本書ではCSSのさまざまな設計手法を解説するだけでなく、最適解となるコードに至るまでの思考プロセスも非常に詳しく解説されています。デベロッパーの頭の中で考えていることが言語化されており、自分のCSSを見直したい人、より効率的なCSS開発を探究している人にお勧めです。 本書は、CSSの中・上級者向けの内容をていねいに詳しく解説したものです。初心者向けのブログやお店ページの例などは一切なく、モジュールベースのコンポーネントやレイアウトが主体で、プロジェクトレベルのCSS設計について解説されています。
最近のロゴのデザインに使われている、注目しておきたいデザイントレンドのまとめ -Logo Design Trends 2020
オンラインで本格的なロゴを作成できる「Logaster」で作成された9,000,000個の中から、2019年に人気だったロゴのデザインを調査・分析し、2020年に注目されるロゴデザインのトレンドを紹介します。 Logasterの中の人から依頼があり、今年も日本語化するお手伝いをさせていただきました。ここに掲載されているロゴのデザインは、小さいサイズならすべて無料で作成してダウンロードすることができます。 ※2022/10: Logasterは買収されました。 また、過去のトレンドと比較してみるのも、面白いです。 2018年、ロゴのデザイントレンドのまとめ 2019年、ロゴのデザイントレンドのまとめ 1. ロゴの単純化 デザインの単純化は今までのトレンドから、確立された哲学へと発展しました。すっきりとした構成により、ロゴの用途が広がり、実用性も向上しています。その結果、ロゴのミニマルなデザイ
素敵な配色本を見つけた！イメージにぴったりな配色が必ず見つかる -配色デザインインスピレーションブック 2
「なんとなくこんな感じ」というイメージから、キーワード、写真、イラスト、デザイン作例、パターンなど、さまざまなアプローチから好みの配色を見つけることができる配色本を紹介します。 デザイナーやイラストレーターだけでなく、趣味でイラストや塗り絵をする人、また企画書やプレゼンなどの資料、ファッションやインテリアなどにも役立つ配色です。 本書は、昨日発売されたばかり！ 去年発売され、当ブログでも好評だった「配色デザインインスピレーションブック」の第2弾です（紹介記事）。第1弾は発売後、書店でもAmazonでも売り切れ状態がずっと続いていました。第2弾となる本書も充実した内容となっており、第1弾を持っている人はもちろん、持っていない人にもお勧めです。
CSSは奥が深い！セレクタの書き方・命名や管理を改善する5つの原則
CSSは簡単なコードで書けます。しかし、プロジェクトの規模が大きくなるにつれ、コードが重複したり、未使用のコードが増えたり、!importantでの上書きが増えたり、読みにくいコードになります。 CSSのセレクタの書き方・命名や管理を改善する、シンプルで非常に効果的な5つの原則を紹介します。 Improve your CSS with these 5 principles by Adrian Bece (@AdrianBDesigns) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに CSSを改善する命名の原則 CSSを改善する詳細度の原則 CSSを改善するDRY原則 CSSを改善する単一責任の原則 CSSを改善する開放/閉鎖原則 CSSを改善する方法のまとめ はじめに CSSは簡単で分かりやすいのに、CSSを書く時に
UIデザイナーから学ぶ！今までのカラーシステムと一貫性を保ちつつ、ダークモードに対応する方法を解説
デザイナーに、構造化が求められる要件がここ数年で急増しています。また、スマホやデスクトップの両方のOSにダークモードが導入されたことで、新たなデザインの領域を増やす必要もあります。 今までのカラーシステムと一貫性を保ちつつ、ダークモードの新しい配色を簡単に適用できるようにするカラーシステムを作成する方法を紹介します。 Dark Mode — Working with Color Systems by Søren Clausen 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 色に役割を割り当てる カテゴリ 1: 色合い カテゴリ 2: 背景 カテゴリ 3: 前景要素 その他の場合 色の割り当て ダークモードへの対応 Sketch用のカラーシステム 色に役割を割り当てる すべてのシステムがそうであるように、最も重要なことは根拠です
PurgeCSSを使用して、CSSファイルから未使用のスタイルを削除する方法
PurgeCSSを使用して、CSSファイルからWebページやアプリで未使用のスタイルを削除する方法を紹介します。 特にCSSフレームワークやライブラリを使用している時は、すべてのスタイルを使うことはないと思うので、劇的な効果があります。 How to Remove Unused CSS by Luca Spezzano 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに PurgeCSSとは ビルドツール JavaScriptフレームワーク PurgeCSSの使い方 PurgeCSSをgulpで実装する方法 PurgeCSSをNuxt.jsで実装する方法 はじめに PurgeCSSを使用すると、制作のワークフローに取り入れてCSSファイルを60%以上削減できます。 未使用のCSSを削減しよう 私はしばらくの間、CSSファイ
PhotoshopやIllustratorの代わりになる！Adobe系ソフトの代替ソフトウェア（有料・買い切り・無料）のまとめ
Photoshop, Illustrator, InDeign, Animate, Lightroom, Dreamweaver, After Effects, Auditionなど、Adobe系ソフトの代替ソフトウェアを紹介します。 有名なものからあまり知られていないものまで、買い切り、オープンソースで無料、日本語対応のものなどいろいろあります。 Photoshopの代替ソフトウェア Illustratorの代替ソフトウェア InDesignの代替ソフトウェア Animateの代替ソフトウェア Lightroomの代替ソフトウェア Dreamweaverの代替ソフトウェア After Effectsの代替ソフトウェア Auditionの代替ソフトウェア 下記ツイートの代替ソフトウェアをまとめたグラフィックはAffinity Designerでデザインされています。 With the re
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
デザインに適したアイコンがこれで見つかる！ UIデザイン用のさまざまなアイコン素材をまとめて比較・カスタマイズ・ダウンロードできる -Iconer
創作のストーリーづくりに目から鱗の解説書！ストーリーの組み立て方、目の導き方、動作の示した方が分かる良書
情報をデザインするこつがよく分かる！デザインの手順がこんなにも詳しく解説された本は初めて -伝わる[図・グラフ・表]のデザインテクニック![情報をデザインするこつがよく分かる！デザインの手順がこんなにも詳しく解説された本は初めて -伝わる[図・グラフ・表]のデザインテクニック](https://cdn-ak-scissors.b.st-hatena.com/image/square/989a806d2ccf27431e67d306fd1bab102cd42f70/height=288;version=1;width=512/https%3A%2F%2Fcoliss.com%2Fwp-content%2Fuploads-202003%2F2020082101.png)
