Web制作に役立つ情報一覧

創作者向けの配色本が面白くて、すごい！ イラストやマンガなどの世界観作りにぴったりな配色本 -物語を感じる配色アイデア

2024/11/25(Mon) 08:52

イラストやマンガなどの世界観作りにぴったりな配色本が登場です！その名もずばり「物語を感じる配色アイデア」恋愛、青春、ミステリー＆ホラー、SF、ファンタジー、歴史＆時代をテーマにした配色がぎっしり詰まっており、ページをめくるたびに新しい世界観に出会えます。

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

CSSのwidth: 100%;のより良い代替手段として、stretchキーワードが実はかなり便利です

2024/11/22(Fri) 09:01

幅いっぱいの要素から左右のマージンを引きたいときに、こういうCSSを使用すると思います。width: calc(100% - 48px); 便利なCSSですが、マージンを計算する必要があり、デザインの変更があった際はCSSも変更する必要もあります。そこでstretchキーワードを使用すると、便利です。要素はオーバーフローせずに使用可能なスペースいっぱいに表示され、マージンの計算も必要なくなります。

https://coliss.com/articles/build-websites/operation/css/css-stretch-keyword.html

検索ボリュームはどう調べる？調査ツールやキーワード選定方法を解説

2024/11/21(Thu) 09:02

キーワードの検索ボリュームは、SEOの難易度を判断する上で大きな基準となるものです。ここでは、検索ボリュームの重要性やツールを使った調べ方、キーワード選定において検索ボリュームをどう考えるかについて解説します。

https://www.seohacks.net/blog/6281/

ウェブデザイナーが理解しておきたい「2つの解像度」（前編）

2024/11/20(Wed) 08:55

デザイン制作の中で「解像度」ということばを耳にすることがあると思います。よくわからない…なんとなく理解はしてるけど説明はできない…という方のために、「ウェブデザイナーが理解しておきたい「2つの解像度」のうち、「ピクセルがいくつあるのか」という「画像解像度」についてご説明します。

https://note.com/spicagraph/n/n37b58dfc0ce0

Webサイトのデザインをより良くするにはどうすればよいのか！ 洗練されていく工程が詳しく解説された良書 -WebデザインプロセスBook

2024/11/18(Mon) 08:56

こういうデザインの解説書は、初めてです！デザイナーは何を考え、どのように作っていくのか。ヒアリングから始まり、ワイヤーフレームを設計し、デザインカンプに落とし込み、最終形までチェックバックを重ねてブラッシュアップをするまでのデザイナーの意図や考え、デザインのテクニックなどを細かく解説したデザイン書を紹介します。

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

配色カラーパレットの基本とFigmaでの使い方徹底ガイド

2024/11/15(Fri) 09:01

無料のFigmaライブラリとこの完全ガイドで、理想のカラーパレットを作ろう！色彩理論やアクセシビリティの基本、さらにオンラインやFigma内で使える便利な配色ツールを一挙にご紹介します。

https://photoshopvip.net/161710

色は1つで十分！プロが教える、UIデザインを引き立てる色彩テクニック

2024/11/14(Thu) 09:19

色彩理論より実用的なアプローチが必要　多くの本や記事で取り上げられる色彩理論やカラーパレットの方法論（例: 分割された補色パレット）は、実際のデザイン現場で役に立たないことが多い、と現役デザイナーのエリック・D・ケネディ氏は指摘しています。

https://photoshopvip.net/161663

商用利用も無料、ポテ字フォントがリリース！ ほくほくのフライドポテトのようなかわいいフリーフォント -ポテジフェイス

2024/11/14(Thu) 09:18

今回は、文字のデザインにフライドポテトが取り入れられた「ポテジフェイス」ほくほくのフライドポテトのような、おいしそうなかわいいフォントです。

https://coliss.com/articles/freebies/free-font-potejiface.html#google_vignette

CSSのデバッグにAIがどのように役立つか、Chrome 131のデベロッパーツールでAIアシスタントが使えるようになります

2024/11/13(Wed) 08:57

CSSの検証やデバッグに、デベロッパーツールを使用している人も多いと思います。そんなデベロッパーツールですが、Chrome 131からAIアシスタントが使えるようになり、AIがCSSの検証やデバッグにどのように役立つかを紹介します。

https://coliss.com/articles/build-websites/operation/work/ai-assistance-for-developer-tool.html#google_vignette

UI用のアニメーションがかわいくて楽しい！ 商用利用も無料、アニメーションで動くアイコン素材 -pqoqubbw/icons

2024/11/12(Tue) 09:03

WebサイトやスマホアプリのUIデザイン用にかわいくて楽しいアニメーションで動くアイコン素材を紹介します。ハンバーガー用の×に変化するアニメーション、＠を一筆書きで描くアニメーション、時計の針がくるくる回るアニメーションなど、ReactのモーションライブラリFramerを使用した動くアイコンがたくさん揃っています。

https://coliss.com/articles/freebies/pqoqubbw-icons.html