macOSのメニューバーにたくさんのアイコンが表示されて邪魔！ という人に便利な無料アプリを紹介します。

Thawは常に表示するアイコンと非表示するアイコンを設定でき、「…」をクリックすると非表示に設定したアイコンが表示されます。簡単に言うとBartenderのオープンソース版のようなものです。私はBartender、そしてIceを使用していましたが、この記事で紹介するThawに変更しました。

最近はサブスクが増えて、気がつくとけっこうな金額になっていたりするので、代替できるものは代替にしています。

Thaw -GitHub

HTMLによるマークアップはそのままで、classを加えるだけで、あらゆる要素に奥行き、モーション、インタラクションを与えて、WebサイトやスマホアプリのUIに新たな息吹をもたらすCSSのフレームワークを紹介します。

各要素はより明確に構造化され、カードやタブには深度コンテキストが加わり、ボタンにはクリックを促すアクションが加えられ、フォームには息吹が与えられます。

AliveUI
AliveUI -GitHub

※本ページは、アフィリエイト広告を利用しています。

Affinityが無料化されて半年が過ぎようとしています。リリース直後はインストールがうまくいかないなどの問題がありましたが、現在はそういった問題はなくなりました。

無料化されて大きく変わったのが、3つのアプリが1つに統合されたこと、そしてCanvaとの連携です。大きく進化したAffinityで何ができるのか、Canvaとの連携やCanva AIで何ができるのかが分かるデザイン書を紹介します。

フォントの混植とは、日本語のテキストは和文フォントで、英語のテキストは欧文フォントで表示したり、またよくあるのがひらがなフォントに漢字が揃っているフォントを混植したり、2つのフォントを組み合わせて使用することです。

通常、混植するにはAdobe IllustratorやInDesignなどのソフトウェアが必要ですが、ブラウザ上で混植を試すことができる便利なサイトがローンチされました！

MOBULA

安定版のサポートはまだ先ですが、Chrome 148+でフラグを有効にすることで、HTMLの新しい要素「<install>」が利用できるようになっています。

<install>でインストールボタンを設置すると、JavaScriptなしで、Webアプリ（複数可）のインストールが簡単にできるようになります。

Install web apps with the new HTML install element
by Patrick Brosset
install-element -GitHub

flexboxleは、CSS Flexboxをマスターするための毎日楽しめるパズルゲームです。CSS FlexboxのプロパティやTailwind CSSのクラスを使用してHTMLを記述し、目標のレイアウトに合わせて要素を配置します。

利用にあたって、登録やログインなど面倒なことは必要ありません、誰でも無料で利用できます。

flexboxle

コードを理解するデザインツール向けに、CSSの各プロパティや値をデザインしてアイコン化したCascade Iconsを紹介します。

display: flex;, display: grid;はもちろん、position: sticky;, padding, margin, text-align, opacity, box-shadow, border-radiusなど、なじみ深いプロパティや値が15x15ピクセルにデザインされています。

Cascade Icons
Cascade Icons -GitHub

※本ページは、アフィリエイト広告を利用しています。

キャラクターを塗るときに肌の色、髪の色、瞳の色は、どうやって選べばよいのか。いつも同じような色を選んでしまう。そんな色選びに悩んでしまう人にお勧めのイラスト用の配色本を紹介します。

色選びに迷ったときは「主役の1色」を決めると、あとは相性の良い色を組み合わせるだけで、キャラクターに使用する色を決めることができます。まずは「肌の色」を決めて、その色にあった影、髪、瞳など、キャラ塗りに役立つ配色レシピが満載です！