Web制作に役立つ情報一覧

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

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/

レイアウトデザインにおける縦位置中央の奥深さ

2025/09/09(Tue) 08:54

先日こちらのポスターを拝見し、デザインにおける要素配置の決め方、特に縦位置中央の取り方について奥深さがあると感じたのでまとめておきます。このポスターの最下部、ロゴマーク＋ロゴタイプ＋区切り線＋テキストコピーが並ぶ場面を例に、基準の取り方の例と“混ぜ技”の考え方をご紹介します。

https://note.com/rubul_cc/n/n247048f0a39b

最新CSS＆JSスニペット50選【2025年版】✨実案件でも使えるおしゃれエフェクトまとめ

2025/09/08(Mon) 09:01

ウェブの世界では「ちょっとした動き」や「ユニークな表現」が、デザイン全体の印象を一気に変えてしまいます。今回は、最新のCSS・JavaScriptスニペットを一気にまとめました。どれも実際のプロジェクトでそのまま活用できるだけでなく、学習にも役立つアイデアばかり。「ボタンにさりげないきらめきを加えたい」「ユーザーの視線を引きつけるアニメーションが欲しい」そんなときにサクッと使える便利なデモを集めました。

https://photoshopvip.net/167257

知ってる人だけ得する？映画ロゴフォント無料＆有料コレクション30選

2025/09/04(Thu) 08:54

たった一瞬で、観客の心をつかむ「文字の力」映画のタイトルロゴを目にした瞬間、その作品の世界観や雰囲気を感じ取ったことはありませんか？実はそれこそが、映画におけるタイポグラフィの役割です。

https://photoshopvip.net/167192

モダンCSSで実装された、UIデザイン用の美しいグラデーションとジオメトリックの背景パターン -Pattern Craft

2025/09/04(Thu) 08:53

Webサイトやスマホアプリに最適、モダンCSSとTailwind CSSで作成されたプロ仕様の背景パターンとグラデーションを紹介します。100種類以上の背景パターンとグラデーションはシームレスに設計されているので、あらゆるサイズで利用できます。

https://coliss.com/articles/build-websites/operation/css/css-pattern-craft.html#google_vignette