Web制作に役立つ情報一覧

すべてのページが美しく、ワクワクする配色のアイデアが満載！ デザインやイラストにおける色の使い方も学べる配色本 -「悩まない」配色の基本

2023/11/20(Mon) 08:57

これまでの配色本とはかなり異なる、ワクワクする素敵な配色を自分でも作れるようになるデザイン書を紹介します。ぼんやりとしたイメージや感覚には頼らず、好きな色や使いたい色から配色を組み立てるプロが設計した実践的な配色本です。実際のデザインに使用されている配色は豊富に収録されており、その配色の意図や考え方もしっかり解説されています。

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

CSSのmargin: auto;の仕組みをおさらい、最近の実装で使用される中央配置やナビゲーションのテクニック

2023/11/17(Fri) 08:51

margin: auto;は非常に便利なCSSで、使用することも多いと思います。そのmargin: auto;の仕組みをおさらいし、最近の実装で使用される中央配置のテクニックを紹介します。また、ナビゲーションでタイトル以外のリンクを右寄せに配置させるなど、便利なテクニックが満載です。

https://coliss.com/articles/build-websites/operation/css/all-about-margin-auto-in-css.html

地味だけど嬉しい新機能！ フォームのセレクトボックスで区切り線にhrを使用できるようになりました

2023/11/16(Thu) 09:04

フォームのセレクトボックスで区切り線にhrを使用できるようになりました。すでにSafariでもサポートされており、これでChorme, Edgeでも使用できます。

https://coliss.com/articles/build-websites/operation/work/select-element-with-horizontal-rules.html

Webデザインで意識したい3つの錯視効果

2023/11/13(Mon) 08:57

「錯視」と言えば、かの有名なエッシャーの立体錯視によるだまし絵や、あるはずの無い色が見えてしまう錯視や直線が曲がって見える錯視などなど、世の中には数多くの錯視効果が存在します。この錯視ってやつ、見た目を狂わせてくるのでデザイナーとしては非常に厄介なもの。錯視による小さな違和感がグッドなデザインを台無しにすることも珍しくありません。

https://note.com/chot_designer/n/n3128ae2086a7

CSSの記述はこれで大きく変わる！ セレクタの適用範囲を設定できる、CSS @scopeの基礎知識と使い方を解説

2023/11/10(Fri) 08:52

CSSのセレクタで深い階層の要素を記述するとき、たとえば.card > .content > img.heroのように長いセレクタになってしまうことがあります。Chrome 118からサポートされたCSSの@scopeを使用すると、セレクタの適用範囲を設定できるので、簡単になります。上記のセレクタは、.card内のimgと記述できます。CSSの@scopeの基礎知識と使い方を紹介します。

https://coliss.com/articles/build-websites/operation/css/css-scope-at-rule.html

デザイナー必見！AIで作業が「10倍」速くなる！Figmaプラグインまとめ

2023/11/09(Thu) 09:17

WebデザイナーやUIデザイナー、クリエイターのみなさんは、日々デザイン作業に追われています。アイデア出し、レイアウト、アニメーションなど、さまざまな作業に時間と労力を割かなければなりません。さらに常に変化するデザインの流行や新しい知識、技術を身につける時間も必要。「できるだけ効率よく作業時間を短縮したい」と思っている人も多いでしょう。そんな悩みを解決するのが、AIを活用したFigmaプラグインです。

https://photoshopvip.net/153089

ロゴデザインのプレゼンは「すべて」を見せれば、うまくいく。

2023/11/08(Wed) 09:05

ロゴデザインのプレゼンテーションでお客様に喜んでもらえると本当に嬉しいですよね。僕はロゴデザインのプレゼンテーションでは、完成したロゴだけではなく、制作時に行なった様々な検証もお客様にお見せするようにしています。

https://note.com/grizzlly_design/n/n393868b9db98

Google Fontsからちょっと面白いフォントがリリース！ 商用利用無料、折れ線グラフや棒データを描くためのフリーフォント

2023/11/07(Tue) 08:49

折れ線グラフを描画するためのフォント「Linefont」、波形・スペクトル・ダイアグラム・ヒストグラムなどの棒データを描画するためのフォント「Wavefont」が、Google Fontsで利用できるようになったので紹介します。

https://coliss.com/articles/freebies/linefont-and-wavefont.html

商用でも完全に無料！ 読みやすくシンプルにデザインされた、美しいサンセリフフォント、コーディング向けフォントも揃ってます -Geist Font

2023/11/02(Thu) 09:42

見出しやロゴ用に読みやすくシンプルにデザインされたGeist Sans、エディタなどのコード表示用にデザインされたGeist Monoがセットになった新しいフォントファミリ「Geist」を紹介します。

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

レトロな雰囲気がかわいい新作日本語フリーフォントがリリース、デザインやイラストに使いたい！ -ビルの谷間と高架下

2023/10/27(Fri) 08:58

「はんなり明朝」「こころ明朝体」をはじめ、最近では「海と山のろごごち」「うさぎと満月のサンセリフ」などのフォントをリリースされているTyping Art様から、完全新作となる日本語のフリーフォントが昨日リリースされました！

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