2026年5月
CSS-in-JSをやめて「CSS Modules + Tailwind」のいいとこ取りする
以前までEmotionやstyled-componentsなどがメインでしたが、最近はスタイリングを CSS Modules + Tailwind CSSのハイブリッドに移行しています。CSS-in-JSがしんどくなった […]
Figmaのインスタンスが編集できない？切り離しで解決！
Figmaのコンポーネント（インスタンス）で、「特定の要素だけデザインや形状を変えたい」ときの解決策である「インスタンスの切り離し」の手順を初心者向けに分かりやすく解説します。 特定のインスタンスだけ形やパディングを変え […]
Figmaコンポーネントとは？初心者が挫折を乗り越え「便利さ」を実感した話
デザイン制作で避けて通れない「修正作業」。何度も同じ変更を繰り返す「チマチマ作業」から卒業するための強力な味方、Figmaのコンポーネント機能について解説します。 今回はコンポーネントの話です。 コンポーネント、最初、意 […]
figma｜作ってたら「このframe、要らないのでは？」がじゃんじゃん出てくる問題
「パディングが反映されない」といったトラブルの多くは、無意識に作った「不要なフレーム」が原因です。本記事では、グラフィックデザイナー出身の筆者が、Figmaのレイヤー構造を整理し、自分もコーダーも迷わないデータを作る方法 […]
Figmaオートレイアウト攻略｜要素を横に移動できない時の解決法
Figmaのオートレイアウト使用中に、要素を思い通りの場所に配置・移動できずに困った際のステップバイステップの解決ガイドです。 力づくでは動かない！オートレイアウトの「戻る」問題 前回の『Figmaのオートレイアウトで要 […]
Figmaのオートレイアウトで要素が逃げる！後付けで文字を重ねる解決法
Figmaのオートレイアウトを設定した後、要素の上に文字を置こうとして「シュッシュと逃げられた」経験はありませんか？本記事では、その原因と確実に重ねる手順、そして便利な最新機能について解説します。 webデザイン初心者で […]
justify-contentに頼らない「Flexbox×margin: auto」で手軽レイアウト
Webサイト作ってるとき、レイアウト調整といえば、大抵Flexboxを使っています。 でも実装しているときに気づくのが、親要素（Flexコンテナ）にてjustify-contentだけで配置しようとしすぎちゃう点。 それ […]
ボタンのテキスト長くしたら、隣のアイコンがぺしゃんこに。flex-basisが原因だった
「送信」って書いてあるボタン、あとから「お問い合わせ内容を送信する」に文言を変えたくなること、ありますよね。先日、まさにその修正をすることになって、テキスト変えるだけなら余裕だと思って、ささっと変更したんです。 そしたら […]