名刺デザインのバリエーションを広げる！構図を活用したラフ作成のコツ
デザインの方向性を早期に固めてクライアントの要望を整理するため、基本構図を活用した名刺デザインの複数案（ラフ）作成の実践例をご紹介します。 なるべく早くお客様と方向を一致させるために クライアントと私たちの間で、デザイン […]
Photoshopが起動画面で動かなくなった時の対処法
Photoshopが起動時の読み込み画面でフリーズして開かないトラブルを、Creative Cloudの「Adobe Fonts」設定を変更することで即座に解決・緊急起動させる手順を解説した記事です。 起動時に、Phot […]
Figmaのインスタンスが編集できない？切り離しで解決！
Figmaのコンポーネント（インスタンス）で、「特定の要素だけデザインや形状を変えたい」ときの解決策である「インスタンスの切り離し」の手順を初心者向けに分かりやすく解説します。 特定のインスタンスだけ形やパディングを変え […]
Figmaコンポーネントとは？初心者が挫折を乗り越え「便利さ」を実感した話
デザイン制作で避けて通れない「修正作業」。何度も同じ変更を繰り返す「チマチマ作業」から卒業するための強力な味方、Figmaのコンポーネント機能について解説します。 今回はコンポーネントの話です。 コンポーネント、最初、意 […]
figma｜作ってたら「このframe、要らないのでは？」がじゃんじゃん出てくる問題
「パディングが反映されない」といったトラブルの多くは、無意識に作った「不要なフレーム」が原因です。本記事では、グラフィックデザイナー出身の筆者が、Figmaのレイヤー構造を整理し、自分もコーダーも迷わないデータを作る方法 […]
Figmaオートレイアウト攻略｜要素を横に移動できない時の解決法
Figmaのオートレイアウト使用中に、要素を思い通りの場所に配置・移動できずに困った際のステップバイステップの解決ガイドです。 力づくでは動かない！オートレイアウトの「戻る」問題 前回の『Figmaのオートレイアウトで要 […]
Figmaのオートレイアウトで要素が逃げる！後付けで文字を重ねる解決法
Figmaのオートレイアウトを設定した後、要素の上に文字を置こうとして「シュッシュと逃げられた」経験はありませんか？本記事では、その原因と確実に重ねる手順、そして便利な最新機能について解説します。 webデザイン初心者で […]
Next.jsでブラウザAPI使おうとしたら「window is not defined」って怒られた
Next.jsで開発してると必ず出くわすエラーです。 最初のうちはもちろん、もう知ってるはずなのに、ついwindow.localStorageと書いちゃってまたこのエラーが出ちゃうことも珍しくないです。 一応、モジュール […]
ボタンのテキスト長くしたら、隣のアイコンがぺしゃんこに。flex-basisが原因だった
「送信」って書いてあるボタン、あとから「お問い合わせ内容を送信する」に文言を変えたくなること、ありますよね。先日、まさにその修正をすることになって、テキスト変えるだけなら余裕だと思って、ささっと変更したんです。 そしたら […]
inputのフォーカス外れ？コンポーネント内のコンポーネント定義のバグ
プロジェクトで、検索フォームコンポーネントを作成していたのですが、テキスト入力欄に文字を入力するたびに、謎のフォーカス外れが発生してました。 こんな感じです。ユーザーからしたら単純なバグでは済まない、明らかにUXが損なっ […]