Web制作に役立つ情報一覧

これなら簡単で便利！ 色彩トーンを使ったUIデザインにぴったりな配色を生成するオンラインツール -Kigen Color Generator

2025/10/17(Fri) 08:56

指定したカラーをベースにシェードのバリエーションを生成し、色彩トーンを使ったUIデザインにぴったりな配色を生成するオンラインツールを紹介します。このツールのUIも非常に洗練されており、操作性も非常に快適です。

https://coliss.com/articles/build-websites/operation/work/kigen-color-generator.html

CSSの新しい関数「color-scheme()」を使用すると、カスタム関数であらゆる型の値を設定できるようになります

2025/10/16(Thu) 08:59

先日、CSSワーキンググループでCSSの新しい関数としてcolor-scheme()が追加され承認されました。ブラウザに実装されるのはまだ先ですが、この関数を使用すると、要素で使用されているカラースキームを取得でき、さらには@containerクエリとif()関数の両方で使用できます。

https://coliss.com/articles/build-websites/operation/css/combining-css-custom-functions-and-css-if.html

HTML・CSSだけで作れる！リストのホバー演出アイデア集

2025/10/14(Tue) 09:01

リスト項目のホバー演出は、その要素がクリック可能であることを伝えるだけでなく、操作の気持ちよさや、コンテンツの世界観を表現することにも役立ちます。今回の記事では、HTMLとCSSだけで実装可能なリスト項目のホバー演出のアイデアを紹介します。

https://ics.media/entry/251010/

無料＆商用OK！ピクセル（ドット）フリーフォント20選｜レトロなのに新しい魔法の書体

2025/10/08(Wed) 08:55

まるでゲームの世界から飛び出してきたようなカクカク文字。レトロでかわいい雰囲気が人気の「ピクセルフォント」は、SNSのタイトル画像やロゴデザインにもぴったり。最近では、Y2Kやネオレトロの流行とともに再注目されています。

https://photoshopvip.net/167477

新作の日本語フリーフォントがリリース！ タヌキの耳がぽこっとついたかわいいフォント「ぽこミミフォント」

2025/10/01(Wed) 09:01

「くるん・デコ」「ninaSchoolgirl」「になロマン」「最強少女」「薄幸少女」など、楽しくてかわいいフリーフォントをたくさんリリースされている213ちゃんから、新作フリーフォントがリリースされました！

https://coliss.com/articles/freebies/free-font-pocomimifont.html

ウェブサイトの CSS を解析してくれる「Online CSS Code Quality Analyzer」

2025/09/25(Thu) 09:04

CSS Code Qualityは、ウェブサイトの CSS を解析して「パフォーマンス」「保守性」「複雑さ（複雑度）」の観点からスコアを付け、改善案を出してくれるツール 入力方法として、URL を指定してそのサイトの CSS を分析したり、CSS ファイルをアップロードしたり、あるいは直接 CSS のテキストを入力したりすることができます

https://phpspot.org/blog/archives/2025/09/_css_online_css.html

デザイナーの成果を左右する「言葉」

2025/09/24(Wed) 08:55

言葉もデザインの一部である デザインの世界には、「良いデザインは説明しなくても伝わる」「使い方を説明しなくても自然に使えるものが理想だ」といった通説があります。確かに完成したプロダクトは直感的に使えるのが理想です。でもだからといって「デザイナーに説明能力が不要」ということにはなりません。むしろ、デザイナーの成果を最大化するためには、Figmaを使いこなせるのと同じくらいに「言葉」という道具を使いこなす必要があります。

https://note.com/sansan_cpo/n/n59e155f82c43

CSSに問題がないか、保守性・複雑性・パフォーマンスの面から解析し、改善点を教えてくれるツール -CSS Code Quality Analyzer

2025/09/19(Fri) 08:51

Webサイトに使用されているCSSをはじめ、自分で書いたCSSに問題がないか解析し、改善点を教えてくれる無料ツールを紹介します。CSSは、保守性、複雑性、パフォーマンスの面から解析され、問題がある箇所はどのように改善するればよいかも教えてくれます。

https://coliss.com/articles/build-websites/operation/css/css-code-quality-analyzer.html

UIデザインに使用するカラーのコントラストをチェックできる、使いやすくて、アクセシビリティを重視したツール -Contrastly

2025/09/17(Wed) 09:00

UIデザインでカラーを決めるときに、カラーのコントラストを確認することは必須です。コントラストをチェックできるツールはたくさんありますが、Tailwinds CSSのカラー、16進数コンバーター、コントラストの確認がひとまとめになった便利ツールを紹介します。

https://coliss.com/articles/build-websites/operation/work/tailwind-colors-contrast-checker.html

AIを使って優れたコンテンツを書く方法（7つのベストプラクティス）

2025/09/11(Thu) 08:56

この記事は、Backlinkoの「How to Use AI for Writing Exceptional Content（7 Best Practices）」を翻訳したものです。ここ最近のGoogleコアアップデートでは、事例やユーザーが生成したコンテンツなど、体験に根ざしたコンテンツが評価されやすい傾向が見られます。

https://seojapan.com/column/column-15063/