無料化され、かなり進化した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ピクセルにデザインされています。
イラストでキャラクターを塗るときの参考になる！ 色選びに悩む人にお勧め -肌の色から決めるキャラ塗り配色レシピ
Post on:2026年5月15日
※本ページは、アフィリエイト広告を利用しています。
キャラクターを塗るときに肌の色、髪の色、瞳の色は、どうやって選べばよいのか。いつも同じような色を選んでしまう。そんな色選びに悩んでしまう人にお勧めのイラスト用の配色本を紹介します。
色選びに迷ったときは「主役の1色」を決めると、あとは相性の良い色を組み合わせるだけで、キャラクターに使用する色を決めることができます。まずは「肌の色」を決めて、その色にあった影、髪、瞳など、キャラ塗りに役立つ配色レシピが満載です！
TextExpanderの代替にEspansoを使ってみたらかなり良かった！ Mac, Win, Linux対応の無料アプリ -Espanso
Post on:2026年5月14日
これまではmacOSでTextExpander（買い切り版の古いやつ）を使用していたのですが、先日macOSの通知で「macOSの次のバージョンからIntel用アプリが使用できなくなる」と告知をされたので、代替アプリをいろいろ試してみて一番よかったのが、Espansoでした。
macOS, Windows, Linux対応のテキスト拡張ツール「Espanso」の導入方法や使い方を紹介します。オープンソースなので、無料で使えます。
これは便利！ ロード時に表示するスケルトンを実際のUIから抽出して自動生成してくれるフレームワーク -Boneyard
Post on:2026年5月13日
Webサイトやスマホアプリのロード時に、実際のUIから抽出したピクセルパーフェクトのスケルトンを自動生成してくれるフレームワークを紹介します。
React, Vue, Angularなどに対応しており、数行のコードを記述するだけで、あらゆるUIのスケルトンを自動生成できます。
下記のGIFアニメーションだと分かりにくいですが、スケルトンにはキラッとひかるshimmerなども用意されています。
