Web制作に役立つ情報一覧

ロゴはまさに究極のミニマルデザイン！ デザインすることの面白さに気づかせてくれる良書 -カンタンでちょっぴり深いロゴづくり

2026/02/16(Mon) 08:56

本書の感想を一言で言うと、「デザインすることの面白さに気づかせてくれる」なぜこの形なのか、なぜこの文字なのか、なぜこの余白なのか、なぜ太くするのか、なぜこの角度なのか、なぜこの比率なのか、それらの解の1つが本書にあります。最近ではロゴをはじめ、さまざまなデザインをAIで生成できます。しかし、AIが生成したものは既存デザインの再構成なので、どこで見た感じがします。

https://coliss.com/articles/book-review/isbn-9784295207283.html

クリックは「偶然」じゃない。ディレクターとデザイナー、異なる視点で考える「クリック」を生むクリエイティブ

2026/02/12(Thu) 08:51

テーマは、「ディレクターとデザイナー、異なる視点で考える『クリック』を生むクリエイティブ」。今回は、職能の異なる二人が、同じ目的で動画のサムネイルをそれぞれ制作してみたら、どんな違いが生まれるのか？今回は、そのプロセスとアウトプットを通して見えてきた考え方の違いを紹介します。

https://design-note.mixi.co.jp/n/nb03f09e38bb5

オンラインサービスの認証やID管理を設計・実装するときに必要となる知識をしっかり学べる解説書 -はじめてのデジタルアイデンティティ

2026/02/09(Mon) 08:57

「デジタルアイデンティティ」とは、オンラインサービスにログインするときに使用するIDなど、個人に関連づけされた属性情報の集合です。日常的に使用しているログイン認証・当人認証・身元確認といったアイデンティティは、デベロッパーによる緻密な設計の元に成り立っています。

https://coliss.com/articles/book-review/isbn-9784297153762.html

ロゴ事例6選｜実はスゴい！身近なロゴデザインに秘められた「なるほど！」

2026/02/05(Thu) 08:58

あなたの知らないロゴの裏側、覗いてみませんか？毎日何気なく目にしているあのロゴたち。お店の看板、スマホのアイコン、飲み物のパッケージ……気づけば私たちの周りには、たくさんのロゴがあふれていますよね。でも、ちょっと立ち止まって考えてみたことってありますか？「このロゴって、どうやって生まれたんだろう？」「なんでこの色なんだろう？」なんて。

https://liginc.co.jp/674447

「まだそんな古いCSSを使ってるの？」現在では必要のない古いCSSを見つけて、仕様に準拠したCSSを提案してくれるツール -ReliCSS

2026/02/04(Wed) 08:53

CSSの新機能を早く使ってみたいと思うかもしれませんが、その前に古いCSSのメンテナンスをしなくてはと思っている人にお勧めの無料ツールを紹介します。CSSをコピペするだけで、現在では必要のない古いCSSのハックを検出し、W3Cの仕様に準拠したCSSを提案してくれます。

https://coliss.com/articles/build-websites/operation/css/detect-css-hacks-relicss.html

スクロール連動UIはCSSだけで作れる！

2026/02/02(Mon) 09:01

CSSには、スクロール位置が対象コンテンツの「前か」「後か」を判定するのに役立つものがあります。:target-before、:target-after、:target-currentの3つの疑似クラス、scroll-target-groupプロパティを使うと、今までJavaScriptを必要としていたスクロール連動のインタラクションをCSSだけで実現できます。

https://ics.media/entry/260130/

CSSの100vwで水平スクロールバーが表示される問題がようやく解決！ vwにスクロールの幅が含まれなくなります

2026/01/30(Fri) 09:01

Web制作者の長年の悩みがようやく解決されます！CSSで100vwを使用して幅いっぱいにすると、垂直のスクロールバー分が含まれて、水平スクロールバーが表示されてしまいます。この問題はWindowsで起こり、macOSでもクラシックのスクロールバーを使用していると起こります。

https://coliss.com/articles/build-websites/operation/css/using-100vw-is-now-scrollbar-aware.html

UIデザインのクオリティが格段にアップする！ 感覚的ではなく、論理的にデザインを改善するポイントを解説

2026/01/27(Tue) 08:51

WebサイトやスマホアプリのUIを魅力的に、そして一貫性のあるデザインに改善するときに役立つUIデザインの知識とテクニックを紹介します。直感や感覚的な曖昧なものではなく、明確で論理的なガイドラインに基づいて改善することで、UIデザインのクオリティは格段にアップします。

https://coliss.com/articles/build-websites/operation/work/logic-driven-ui-design-tips.html

HTML Living StandardとモダンCSS、最新ブラウザに完全対応！ 目的別で分かりやすいリファレンス本 -HTML＆CSSポケットリファレンス 改訂第4版

2026/01/26(Mon) 08:57

『HTML＆CSSポケットリファレンス』の改訂第4版が、発売されました！先週発売されたばかりの最新刊で、HTML Living StandardとモダンCSSに対応したリファレンス本です。もちろん、最新のブラウザにも対応しており、HTMLとCSSの基礎知識からこれから使うであろう最新機能まで、収録されています。

https://coliss.com/articles/book-review/isbn-9784297153311.html#google_vignette

これはかなり便利！ 1クリックであらゆるWebサイトのデザインやアセットを抽出できるChromeの拡張機能 -MiroMiro

2026/01/21(Wed) 08:53

MiroMiroは1クリックするだけで、表示しているサイトを分析、デザイン要素を抽出、本番環境で使えるアセットに変換するオールインワンの拡張機能です。デベロッパーツールや似た拡張機能よりも直感的に操作でき、かなり便利です。

https://coliss.com/articles/build-websites/architectonics/copy-sites-design-assets.html