Web制作に役立つ情報一覧

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

2024/10/15(Tue) 08:59

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

https://photoshopvip.net/161153#google_vignette

かなり詳しくてよく分かる良書！ デザインシステムの作り方、導入・運用も学べる解説書 -つくって、みなおす、デザインシステム

2024/10/15(Tue) 08:58

Webサイトやスマホアプリの制作・開発にデザインシステムを取り入れるといいと聞くけど、どこらへんが有用なの？ 導入する実際の手順を教えてほしい、という人にお勧めの解説書を紹介します。デザインシステムを作る前の準備から、実際の作り方、Figmaを使った導入方法、完成した後の運用方法まで、ていねいに詳しく解説されています。

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

これでCSSのみで実装できる！ スクロール方向に合わせてヘッダを非表示・表示する方法を解説

2024/10/11(Fri) 09:03

Webページを表示し、スクロールダウンするとヘッダが非表示になり、ページのどこからでもスクロールアップするとヘッダが再び表示される、というのを見たことがあると思います。これまでは実装するにはJavaScriptが必要でしたが、CSSのみで実装できる方法を紹介します。

https://coliss.com/articles/build-websites/operation/css/css-hide-header-when-scrolling-down.html

コピペで使える! HTMLのチェックボックスを独自のデザインで実装する方法

2024/10/10(Thu) 08:57

チェックボックスは、HTML・CSSで独自にデザインすると手間のかかる要素です。ほとんどの場合は、<input type="checkbox" />を利用することになりますが、以下の課題があります。標準のinputタグはブラウザごとに見た目が異なり、利用できるCSSプロパティにばらつきがある。実装方法が複数存在し、どの方法が適しているか判断しにくい。チェックボックスには複数の状態が存在し、用意すべき見た目がわかりにくい。

https://ics.media/entry/241004/

Googleの画像生成AIツール「Image FX」とは？実際に使いながら機能やコツを解説します

2024/10/08(Tue) 08:58

今回は、まるで一眼レフで撮影しているかのようにハイクオリティな画像が生成できる「ImageFX」をご紹介します！しかも無料で使用できるという優れもの……。基本的な機能や使用する際のコツなども詳しく紹介しているので、ぜひ参考にしてみてください！

https://liginc.co.jp/651507

デザインの疑問がこれで解ける！ プロのデザイナーとして必要な知識が得られる良書 -デザインの基本ノート［第2版］

2024/10/07(Mon) 09:04

プロのデザイナーに必要な知識を身につけたい、デザインのしっかりしたテクニックを学びたい、著作権やデザイン料の算出方法はどうすればいいの。そんなデザインの疑問を一気に解決する、プロのデザイナーとして必要な知識をていねいに詳しく解説したお勧めの良書を紹介します。

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

【商用可】デザインの印象を一変させる、現役デザイナー厳選の無料フォント集 Best Free Fonts

2024/10/04(Fri) 08:57

今回新たにご紹介するが、現役デザイナーが商用ライセンスのおしゃれなフリーフォントのみを厳選した『Best Free Fonts』という特別なライブラリです。

https://photoshopvip.net/160983#google_vignette

商用利用も無料！ これはすぐに使いたくなる、美しい丸ゴシック体のかわいいフォント「とよまーる」

2024/10/03(Thu) 09:23

私のお気に入り「かもめ明朝（紹介記事）」をはじめ、「築豊35ポイントゴチック」「トレゴ」「新レトロ丸ゴシック」「築豊明朝」など、オールドスタイルの日本語フリーフォントをリリースされている文字魚さんから新作フォントがリリースされました！今回リリースされた「とよまーる」は、丸ゴシック体のかわいいフォント。単に角が丸いだけでなく、丸ゴシックの柔和さをフォントのデザイン全体で表現されています。通常版（有料）とフリー版（無料）の2種類があります。

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

次に流行るフォントは何？おすすめ最新フリーフォント50選

2024/09/30(Mon) 09:26

このリストでは、10年以上にわたってフリーフォントの収集を続けつつ、毎年デザイントレンドのチェックを行っている筆者が見つけた、おすすめの最新フリーフォントをまとめています。

https://photoshopvip.net/160863#google_vignette

これで簡単に実装できる！ カードやパネルをドラッグアンドドロップで移動できるレイアウトに変換するスクリプト -Swapy

2024/09/27(Fri) 09:12

数行のコードを記述するだけで、カードやパネルをドラッグアンドドロップで移動できるレイアウトに変換するJavaScriptを紹介します。他のフレームワークやライブラリへの依存はありません。また、ReactやVueやSvelteなどと一緒に使用することもできます。

https://coliss.com/articles/build-websites/operation/javascript/drag-to-swap-layout-swapy.html#google_vignette