UIデザインはもちろん、イラストや紙のデザインにも対応！ カラーパレットをAIで生成できる完全無料ツール -EnigmaEasel
Post on:2026年5月27日
ここ1,2年でAIによる便利なツールが増えてきました。ここで紹介するのはそれらの便利なAIツールの中でもかなり実用的で、これまでの定番ツールも同時に利用できるお勧めツールです。
プロンプト（日本語）で「夕陽のカラーパレットをつくって」とお願いできるのはこれまでもたくさんありましたが、ここからさらにその色合いを調整したり、特定の色をロックしたり、配色理論（類似色・補色・3色配色など）に基づいたカラーパレットを生成したり、WCAGに準拠したコントラスト比を考慮したり、実践的なツールです。
UIデザインはもちろん、ブランディングやプロダクト、さらにはイラストや紙のデザインもサポートしているカラーパレットを生成できます。
Bartenderの代替にThawがお勧め！ macOSのメニューバーのアイコンを常に表示・非表示にできるオープンソースのアプリ
Post on:2026年5月26日
macOSのメニューバーにたくさんのアイコンが表示されて邪魔！ という人に便利な無料アプリを紹介します。
Thawは常に表示するアイコンと非表示するアイコンを設定でき、「…」をクリックすると非表示に設定したアイコンが表示されます。簡単に言うとBartenderのオープンソース版のようなものです。私はBartender、そしてIceを使用していましたが、この記事で紹介するThawに変更しました。
最近はサブスクが増えて、気がつくとけっこうな金額になっていたりするので、代替できるものは代替にしています。
HTMLはそのままで、classを加えるだけですべてが魅力的に変わるモーションファーストのCSSフレームワーク -AliveUI
Post on:2026年5月25日
HTMLによるマークアップはそのままで、classを加えるだけで、あらゆる要素に奥行き、モーション、インタラクションを与えて、WebサイトやスマホアプリのUIに新たな息吹をもたらすCSSのフレームワークを紹介します。
各要素はより明確に構造化され、カードやタブには深度コンテキストが加わり、ボタンにはクリックを促すアクションが加えられ、フォームには息吹が与えられます。
無料化され、かなり進化したAffinityで何ができるのかが分かるデザイン書 -Affinity入門 無料ではじめるプロ並みデザイン
Post on:2026年5月22日
※本ページは、アフィリエイト広告を利用しています。
Affinityが無料化されて半年が過ぎようとしています。リリース直後はインストールがうまくいかないなどの問題がありましたが、現在はそういった問題はなくなりました。
無料化されて大きく変わったのが、3つのアプリが1つに統合されたこと、そしてCanvaとの連携です。大きく進化したAffinityで何ができるのか、Canvaとの連携やCanva AIで何ができるのかが分かるデザイン書を紹介します。
フォント好きは要チェック！ 和文フォントと欧文フォントの混植をブラウザ上で簡単に試すことができる便利サイト -MOBULA
Post on:2026年5月21日
フォントの混植とは、日本語のテキストは和文フォントで、英語のテキストは欧文フォントで表示したり、またよくあるのがひらがなフォントに漢字が揃っているフォントを混植したり、2つのフォントを組み合わせて使用することです。
通常、混植するにはAdobe IllustratorやInDesignなどのソフトウェアが必要ですが、ブラウザ上で混植を試すことができる便利なサイトがローンチされました！
HTMLの新しい要素「<install>」はJavaScriptなしで、Webアプリのインストールが簡単にできるようになります
Post on:2026年5月20日
安定版のサポートはまだ先ですが、Chrome 148+でフラグを有効にすることで、HTMLの新しい要素「<install>」が利用できるようになっています。
<install>でインストールボタンを設置すると、JavaScriptなしで、Webアプリ（複数可）のインストールが簡単にできるようになります。
Install web apps with the new HTML install element
by Patrick Brosset
install-element -GitHub
Web制作者の腕試し！ 指定されたレイアウトをCSS Flexboxで実装するパズルゲーム -flexboxle
Post on:2026年5月19日
flexboxleは、CSS Flexboxをマスターするための毎日楽しめるパズルゲームです。CSS FlexboxのプロパティやTailwind CSSのクラスを使用してHTMLを記述し、目標のレイアウトに合わせて要素を配置します。
利用にあたって、登録やログインなど面倒なことは必要ありません、誰でも無料で利用できます。
職人技が光る美しいアイコン素材！ CSSの各プロパティや値をデザインしてアイコン化 -Cascade Icons
Post on:2026年5月18日
コードを理解するデザインツール向けに、CSSの各プロパティや値をデザインしてアイコン化したCascade Iconsを紹介します。
display: flex;, display: grid;はもちろん、position: sticky;, padding, margin, text-align, opacity, box-shadow, border-radiusなど、なじみ深いプロパティや値が15x15ピクセルにデザインされています。
