Web制作に役立つ情報一覧

Figma Sidesがすごい！特徴や使用感を紹介します

2024/11/01(Fri) 09:06

UI/UXのデザインツールとして知られるFigmaですが、ホワイトボード機能を持つ「FigJam」に続き、今年6月に新たなプロダクト「Figma Slides」が登場しました。もともとFigmaでスライドを作成していたのですが、Figma Slidesを使い始めてからはとにかく使い勝手が良く、手放せない存在になりました。今回は、Figma Slidesの機能や使用感についてご紹介いたします。

https://liginc.co.jp/651908

ついにCSSだけでwidth: auto;やheight: auto;へのアニメーションができるようになります

2024/11/01(Fri) 08:50

CSSだけでwidth: auto;やheight: auto;にアニメーションできたらいいな、と思ったことはありませんか？
たとえば、下記のようにテキストの量によってサイズが異なるボタンです。これまではCSSでアニメーションするときは、固定値（width: 100px;しかアニメーションが機能しませんでしたが、Chrome 129でサポートされたinterpolate-sizeプロパティやcalc-size()関数を使用すると、簡単にwidth: auto;へのアニメーションが実装できます。

https://coliss.com/articles/build-websites/operation/css/animate-to-height-auto-in-css.html

グラデーションがくすんでしまうのには原因がある、それを自動的に解決して美しいグラデーションを生成できる無料ツール -Gradient Generator

2024/10/31(Thu) 08:53

美しいグラデーションを作成するには、補間するカラーにグレーが含まれないようにすることが重要です。グレーが含まれてしまうと、それがデッドゾーンになり、汚いグラデーションになってしまいます。このグレーのデッドゾーンを回避し、簡単に美しいグラデーションを生成できる無料ツールを紹介します。

https://coliss.com/articles/build-websites/operation/work/gradient-generator-css-svg-export.html#google_vignette

【無料】すぐ使える！トレンドを押さえたPSDテキストエフェクト24選

2024/10/30(Wed) 09:06

今回は、短時間でプロ級の仕上がりを実現できる、使いやすいテキストエフェクト素材を厳選してご紹介します。

https://photoshopvip.net/161500

デザイン作業の無駄を削減！今すぐ使える注目の時短Figmaプラグイン20選

2024/10/29(Tue) 09:10

今のデザイン作業で、無駄な手間や時間を感じていませんか？忙しい毎日のデザイン作業において、時間がかかる平凡なタスクや反復作業はできるだけ省きたいですよね。プロも初心者も関係なく、「これさえあれば」と思うツールがいくつもあります。今回は、作業をシンプル化し、生産性を最大化するために役立つFigmaプラグインをご紹介します。

https://photoshopvip.net/161439#google_vignette

Illustratorに苦手意識がある人に！ デザインするために必要な知識とテクニックが確実に身につく解説書 -はじめてイラレ

2024/10/28(Mon) 08:55

デザイン系のソフトで、その操作が難しいと思われているのがAdobe Illustratorかもしれません。他のソフトは使えるけど、Illustratorはいまいちという人もいると思います。そんな苦手意識を持っている人に、Illustratorでデザインするために必要な最低限の知識とテクニックを確実に身につけることができる解説書を紹介します。

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

すぐにできる！UIデザインが劇的に変わる7つの秘密テクニック

2024/10/25(Fri) 08:51

ウェブ開発者であれば、一度はビジュアルデザインの判断を迫られる場面に遭遇したことがあるでしょう。フルタイムのデザイナーがいない会社で、新しい機能のUIを自分で実装しなければならなかったり、サイドプロジェクトに取り組んでいて、平凡なBootstrapのサイトよりも見栄えを良くしたい場合などもあるでしょう。

https://photoshopvip.net/161401#google_vignette

UI用にデザインされた、かなり珍しいアイソメトリックのアイコン素材！ 商用利用無料、SVGやFigmaも揃ってる -Isocons

2024/10/23(Wed) 09:07

当ブログでもこれまでにSVGのアイコン素材はたくさん紹介してきましたが、アイソメトリックのアイコン素材は初めてです。アイソメトリックのイラストは見かけますが、アイコンはほんと珍しいですね！商用利用、改変、再配布も可で、アイコンのフォーマットはSVGとPNGが揃っています。また、カスタマイズも可能で、アイコンのサイズ、ラインの太さ、角丸、塗りなどに対応しています。

https://coliss.com/articles/freebies/isometric-icons-isocons.html#google_vignette

最近リリースされたCSSの新機能と新しい関数のまとめ

2024/10/17(Thu) 08:52

CSSは気がつくと、どんどん進化しています！先月リリースされたCSS Values and Units Module Level 5のワーキングドラフトでは新しい値と単位、プロパティ、関数が追加されました。それらの新機能と新しい関数を紹介します。

https://coliss.com/articles/build-websites/operation/css/new-values-and-functions-in-css.html

デザイナー必見！たった1分で美しいカラーパレットを作る方法

2024/10/15(Tue) 08:59

「プロジェクトごとに毎回配色を考えるのは面倒だ」と感じたことはありませんか？特に「トーンや明るさを調整するのが難しい」と感じるひとが多いようです。当サイトでは、これまでにも多くの配色ツールを紹介してきましたし、もちろん普段使いできる便利なものばかりです。

https://photoshopvip.net/161153#google_vignette