商用でも完全に無料ですごい！ デザインやイラストでかなり使える有料レベルの高品質なテクスチャ素材 -ResourceBoy
個人でも商用でも完全に無料で利用できる、高品質でさまざまな種類が揃った高解像度8K, 4Kのテクスチャ素材を紹介します。 ゴールド、大理石、煉瓦塀、スモーク、花火、蜘蛛の巣、シャドウ、クラフトペーパー、ブラックペーパー、チョークボード、段ボール、デニム地、水彩、グラデーションなどがそれぞれカテゴリごとにまとめてダウンロードできるので、非常に便利です。 難点があるとすれば、ファイルサイズが大きいので、ダウンロードに時間がかかるくらいでしょうか。 ResourceBoy ResourceBoyはテクスチャ素材をはじめ、ブラシ素材、グラデーション素材、モックアップ素材など、商用利用無料の数多くのリソースをダウンロードできます。以前にも紹介しましたが、その時からさらにテクスチャ素材の種類が増え、パワーアップしています。 ResourceBoy ライセンスは独自で、個人でも商用でも無料、ロイヤリティ
これは便利！ HTMLはdiv要素一つ、あとはCSSをコピペするだけで100種類のツールチップを簡単に実装できる -CSS Tooltips & Speech Bubbles
HTMLはdiv要素一つだけ、あとはCSSをコピペするだけで約100種類のールチップとスピーチバブルを実装できるCSS Tooltips & Speech Bubblesを紹介します。 このツールチップって実装すると、けっこう面倒ですよね。ベタ塗りのツールチップをはじめ、グラデーションの枠、しっぽの位置、しっぽの形状など、さまざまなデザインが、ここを見ればコピペで簡単に実装できます。 CSS Tooltips & Speech Bubbles CSS Tooltips & Speech Bubblesを作成したのは以前紹介したCSS Loaders（紹介記事）やCSS Ribbon Shapes（紹介記事）と同じ作者で、前回はCSSで実装されたローダーとリボンでしたが、今回は100種類のツールチップとスピーチバブルです。
これでもうUIデザイン用の高品質なSVGアイコンに困らない！ 商用利用無料、改変も自由な太っ腹ライセンス -blendicons
WebサイトやスマホアプリのさまざまなUIデザインにぴったりな、シンプルなソリッド・ベタ塗りからおしゃれなカラーまで揃ったSVGアイコンが完全無料で利用できるblendiconsを紹介します。 アイコンはなんと、200,000個以上！ ベーシックなUIをはじめ、ショッピングサイト、タッチジャスチャー、日用品や家具、飲食物、スポーツ、ミュージックなど、多種多様なアイコンが揃っています。 blendicons Blendiconsはデザイナーやデベロッパーが容易に必要なアイコンを手に入れられるように、200,000個以上の高品質なアイコンを作成し、ダウンロードできるようにしたサイトです。 アイコンの利用にあたっては個人でも商用でも無料で、Webサイトやスマホアプリをはじめ、プレゼンや印刷物などあらゆる用途に利用できます。アイコンをカスタマイズして利用することもOKです。ただし、アイコン素材をそ
Web制作者はブックマークしておくと便利！ 各UIコンポーネントのさまざまな実装方法のまとめ -The Component Gallery
Webサイトやアプリでよく使用される各UIコンポーネントのさまざまな実装方法がまとめられたThe Component Galleryを紹介します。 コンポーネントは再利用可能な単一の部品として利用でき、実装するコードや名前の付け方など、Web制作者には非常に勉強になると思います。 The Component Gallery The Component Galleryの特徴 The Component Galleryの利用方法 各UIコンポーネントのまとめ The Component Galleryの特徴 The Component Galleryには、実際のデザインシステムで使用されているUIコンポーネントがまとめられています。フロントエンドのデベロッパーとして毎日経験する問題を解決するために作成されました。 The Component Gallery コンポーネントや要素に名前を付けるの
なにこれ便利すぎる！ WebページのURLを入力すると、編集可能なFigma用に変換できるプラグイン -html.to.design
WebページのURLを入力するだけで、編集可能なFigmaデザインに変換できる無料プラグインを紹介します。 AppleなどのWebページを1クリックで変換するのはもちろん、日本語のWebページでも問題なく動作しました。Webデザインの勉強用に、既存サイトをリニュアールする用にも便利ですね。 html.to.design -Figma URLを入力するだけでFigmaに変換 html.to.designの利用方法 html.to.designの使い方 URLを入力するだけでFigmaに変換 html.to.designは、URLを入力するだけでFigmaに変換できる無料のプラグインです。さまざまなWebページを編集可能なFigmaデザインに変換します。 すべてをゼロから作成することなく、別のWebサイトを使用して独自のデザインのインスピレーションを得られます。 既存のWebサイトをリデザイン
分かると、実に、おもしろい！ QRコードの仕組み
少しマニアックな知識、QRコードの仕組みを紹介します。 QRコード決済、リンクをQRコードで提供するなど、日常的に使用されているQRコードにあるそれぞれのパターンがどのように機能しているか、どういう役割をしているのか、なぜ上下逆さにしても読み取れるのか、なぜ一部が隠されても読み取れるのかなどが分かります。 QR codes by Dan Hollick (@DanHollick) 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに QRコードの仕組み 終わりに はじめに QRコードがどのように機能しているのか、疑問に思ったことはありませんか？ 控えめに言って、実に、おもしろい！ 注意: この記事⬇では非常にマニアックな内容が含まれています。 QRコードの仕組み QRコード（Quick Response code）は自動車部
これがユーザーの信頼を失うデザインだ！ 最近のUIで見かけるダークパターンのしっかりとした知識が身につくデザイン書 -ザ・ダークパターン
ダークパターンとは、WebサイトやスマホアプリのUIをユーザーに惑わせるデザインにし、ユーザーの個人情報や時間やお金をかすめ取る手法です。 たとえば、知らない間にメール配信が登録されていたり、料金に手数料が加えられていたり、登録は簡単なのに退会が難しかったり、キャンセルがクリックしにくいようにデザインされてたり、さまざまなダークパターンが存在します。 最近のダークパターンをはじめ、さまざまなダークパターンを反面教師として学び、制作側として気をつけたいポイントが解説されたデザイン書を紹介します。 ユーザーとして騙されないように知識を増やしておくのにも有用です。 著者は「UXライティングの教科書（紹介記事）」や「ザ・マイクロコピー（紹介記事」などでお馴染みの仲野 佑希氏。これまではライティング主体の解説書を紹介してきましたが、本書はダークパターンの解説書です。デザインによるダークパターンだけで
神アップデート！ Win, Mac, Linux対応、クラウドでの同期機能も備えた最強のコードスニペットマネージャー -massCode
HTML, CSS, JavaScriptをはじめとしたさまざまな言語に対応、クラウドでの同期機能も備えたオープンソースのコードスニペットマネージャー「massCode」がv3に神アップデートされたので、改めて紹介します。 macOS, Windows, Linux対応、日本語の入力など日本語環境も完全サポート。クラウドで同期できるので、すべての環境で同じコードスニペットを使用できます。 非常に快適で高速に動作し、VS Codeとの連携でさらに便利になっています！ massCode massCode -GitHub massCodeの特徴 massCodeのダウンロードとインストール massCodeの使い方 massCodeの特徴 massCodeは、デベロッパー向けのコードスニペットマネージャーです。ライセンスはGNUで、オープンソースなので商用でも無料で利用できます。 macOS 1
ブックマークしておくと便利！ 背景、テクスチャ、パターン、シェイプ、グラデーションなどを生成するSVGツールのまとめ
WebサイトやスマホアプリのUIデザイン、イラストなどにもぴったりな背景、テクスチャ、パターン、シェイプ、グラデーション、装飾グラフィック、カラーパレットなどのSVGを生成するオンラインツールを紹介します。 ネオンカラーや美しいグラデーションをはじめ、アイソメトリックやスパイラルなどの幾何学形状、波線や等高線やねじれ線、ぼかしやノイズなど、いざという時にブックマークしておくと便利です。 fffuel -free SVG makers fffuelでは背景やテクスチャをはじめ、パターン、シェイプ、グラデーション、装飾グラフィックなどを生成するSVGツールがたくさんリリースされています。生成されるフォーマットはすべてSVGで、PNGに変換したい場合は変換ツールをご利用ください。 生成した素材は、個人でも商用プロジェクトでも無料で利用できます。 ツールはかなりたくさんあり、その中からいくつか紹介
フォントが大好物な人に朗報🎉 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フ
HTMLはシンプルなまま、Webサイトの見栄えをよくするclassレスの超軽量CSSフレームワーク -Almond.css
HTMLはシンプルなままで、モダンなWebページを簡単に作成できるclassレスの超軽量CSSフレームワークを紹介します。 ポートフォリオやブログなどをさくっと作成したい時に便利です。少し手を加えて、CSSリセットとして利用するのもありかもしれません。 Almond.CSS -GitHub Almond.CSSの特徴 Almond.CSSのデモ Almond.CSSの使い方 Almond.CSSの特徴 Almond.CSSは、シンプルなWebサイトの見栄えをより良くするためのclassレスのCSSスタイル集です。CSSのスタイルを正規化してクロスブラウザで同様のエクスペリエンスを提供したり、カスタムスタイルを追加してちょっとしたスパイスを加えることもできます。 HTMLのセマンティックなタグとAlmond CSSを組み合わせるだけで（JavaScriptは不要です）、モダンなWebページが
シンプルなHTMLで、モダンなWebサイトをすばやく簡単に作成できるクラスレスの超軽量CSSフレームワーク -Simple.css
その名の通り、シンプルなHTMLで、Webサイトをすばやく簡単に作成できるクラスレスの超軽量（4kB）CSSフレームワークを紹介します。 シンプルなWebページ、ポートフォリオやブログなどをすばやく作成したい時に便利で、レスポンシブにもダークモードにも対応しています。また、CSSリセットとして利用するのもありかもしれません。 Simple.css Simple.css -GitHub Simple.cssとは Simple.cssのデモ Simple.cssの使い方 Simple.cssとは Simple.cssは、セマンティックHTMLをすばやく簡単に見栄え良くするクラスレスのCSSフレームワークです。「クラスレス」とは、CSSまたはHTMLのどこにもCSSのclassがないことを意味します。 MITライセンスで、商用プロジェクトでも無料で利用できます。 classのないプレーンなHTM
CSSによるレイアウトの崩れやおかしな挙動を解決するテクニックのまとめ -Defensive CSS
WebページやUIコンポーネントのレイアウトの崩れ、おかしな挙動にあらかじめ対応しておくためのCSSのテクニックを紹介します。 FlexboxやCSS Gridによるレイアウトの崩れ、テキストが長いコンテンツ、固定の幅・固定の高さによるレイアウトの崩れ、子アイテムが増えすぎたり減りすぎたりで崩れたりなど、起こりがちな問題を解決する実践的なテクニックが満載です。 Defensive CSS by Ahmad Shadeed 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに Flexboxでの折り返し スペースの確保 テキストが長いコンテンツ 画像の伸縮を防止する スクロールが連鎖するのを回避 CSS変数のフォールバック 固定の幅・固定の高さによるレイアウトの崩れ 忘れがちな背景の繰り返し 垂直のメディアクエリ justif
2022年、注目しておきたいCSSの新機能のまとめ
2022年に注目しておきたいCSSの新機能を紹介します。いくつかの機能はすでに1つ以上のブラウザでサポートされており、他のブラウザもそれに続く予定です。 ビューポートではなく親コンテナに応じてスタイルを定義できる「コンテナクエリ」、詳細度とスタイルの順序を明示できる「カスケードレイヤー」、相対色構文が追加された「カラー関数」、Safariの100vhを解決する新しいビューポート単位「svh」など、今すぐにでも使用したい機能ばかりです。 Photo by Jr Korpa on Unsplash CSS in 2022 by Bramus 下記は各ポイントを意訳したものです。 ※当ブログでの翻訳記事は、元サイト様にライセンスを得て翻訳しています。 はじめに 注目の新機能（クロスブラウザでサポート） まだ先の新機能（実験的/シングルブラウザでサポート） 停滞している新機能 Safariは「新し
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
こんなデザイン書を待っていた！ 日本語フォントを使ったデザインの基礎知識と実践テクニックがしっかり学べる解説書 -タイポグラフィが上手くなる本
カラー生成のこんな便利ツールがあったとは！ ベタ塗りのカラーと同じに見える半透明のカラーを生成するツール -Alphredo
フリーフォントの作者様に感謝！ 最近リリースされた日本語フリーフォントのまとめ -2022年上半期
商用利用無料、国内のフリーイラスト素材の総まとめ
もっと早く知りたかった！ 認知心理学による使いやすいUIデザイン、実務に役立つ知識をしっかり学べるデザイン書 -UIデザイン必携
VSCodeを使う人におすすめの解説書！ Web制作の効率アップにつながる操作方法を詳しく解説 -Visual Studio Code完全入門
