Figmaを使いこなしたいと感じているあなたへ。オブジェクトに立体感を出す影（shadow）の付け方がわからない、あるいは影の種類や調整方法で悩んでいる方は多いはずです。この記事では、影の種類、基本設定、実践テクニック、CSSへの活かし方などあらゆる面から解説します。影を自在に操ることでデザインの質が大きく向上します。最後まで読めば、あなたのデザインに合ったshadow設定をマスターできます。
目次
Figma 影 shadow 付け方：影の種類と基本操作を理解する
影を付ける第一歩は、影の種類と基本操作を理解することです。Figmaには主に2種類の影エフェクトがあります。Drop shadow（外側に落ちる影）とInner shadow（内側に押し込まれたような影）です。これらを適切に使い分けることで、デザインに深みと質感が出ます。まずはこれらの影の特徴と基本的な設定項目（Offset X/Y、Blur、Color/Opacity、Spread）を押さえましょう。最新情報によると、Shadow spreadも対応オブジェクトでは使用可能になっており、CSSのbox-shadowとほぼ同等の挙動が得られるようになっています。
Drop ShadowとInner Shadowの違い
Drop Shadowはオブジェクトの外側に影を落とし、背景との距離感や光源の方向を表現するのに適しています。Inner Shadowはオブジェクト内部に影が入り込むエフェクトで、押し込まれたような表現やボタンの押された状態などに使われます。影の形や方向の違いを使い分けることで、インターフェースのUI／UXが向上します。
影の設定項目の意味
影の設定には次のような主要パラメータがあります。まずXとYで影の方向を決定し、Blurでぼかし具合を制御します。ColorとOpacityで影の色と透明度を設定し、Spreadで広がりを調整できます。Spreadは四角形や楕円、フレームなど一部のオブジェクトでのみサポートされます。これらを調整することで、柔らかな影やシャープな影を思い通りに表現できます。
影の操作手順：Figmaでshadowを付ける基本操作
具体的な手順は以下の通りです。オブジェクトを選択 → 右側のサイドバーでEffectsセクションを開く → 新しい効果を追加 → ドロップシャドウかインナーシャドウを選択 → 各種パラメータを調整。これでオブジェクトに影を付けられます。複数の影を重ねることも可能で、より複雑で深みのある表現を作れます。
影の設定を調整して理想的な立体感を出すコツ
影の種類や基本操作を理解したら、次は調整して表現力を高める段階です。理想の立体感を出すには、様々なパラメータの微調整と、それに伴う光源の方向性やデザインの一貫性を考慮する必要があります。複数の影を組み合わせたり、色味や透明度を調節したりすることで、より自然で説得力のある視覚効果を得られます。
光源の方向を意識したX／Yオフセット
影のXおよびYのオフセットを正しく設定することで、光源の位置が感じられる立体感が生まれます。例えば、上から光が当たるイメージなら影は下に落ち、右側からの光なら影は左側に出ます。光源の位置を想定して設定することで、影が自然でリアルになります。
BlurとSpreadで影の柔らかさと広がりを操作
Blurを大きくすると影がぼけて柔らかな印象になります。逆に小さくするとシャープで硬い印象になります。Spreadを適用すると影の広がりを調整できますが、すべてのオブジェクトで使えるわけではありません。四角形や楕円、フレーム系で対応しており、それ以外では無効になっていたり表示されなかったりすることがあります。
色味と透明度で雰囲気を統一する
影の色は必ずしも黒だけではありません。光の色や背景色とのコントラストを考え、グレーや濃い色などを使い分けることで雰囲気が変わります。透明度も重要で、高すぎると影が不自然に見え、低すぎると目立たなくなります。デザイン全体のテーマや配色とのバランスを取りながら設定しましょう。
実践：ボタン、カードなどに応じた影の付け方事例
実際のデザインでは、用途に応じて影のバリエーションが求められます。ボタンやカード、モーダル、アイコンなどそれぞれに適した影の質とスタイルがあります。この章では代表的な事例を見ながら、shadow設定の具体的な値や組み合わせのヒントを紹介します。こうした実践例を参考にすると、自分のプロジェクトにも応用しやすくなります。
押せるボタンに適した影の事例
ボタンには、ホバー時やデフォルト時に視覚的な変化がある影が効果的です。通常時には控えめなDrop shadowを使い、少しぼかして透明度を低めに設定。ホバー時にはオフセットとぼかしを強め、影を濃くすることで押せる感を出せます。色は背景とのコントラストを意識しましょう。
カードレイアウトに立体感を与える影の付け方
カードデザインには少し強めの影を付けると、背景から浮き上がった印象になります。例えばDrop shadowのX=0、Y=4px、Blur=16px、Color=黒／グレー系、Opacity=15-30％くらい。角丸を持つカードならSpreadが使える場合に広げて柔らかくする。重ねるカードやスクロールするカードにも有効です。
アイコンやテキストへの影の応用
アイコンやテキストには影を付けることで可視性やアクセントが上がります。特に背景に同系色がある場合は、影を使って輪郭を際立たせることが可能です。テキストシャドウはCSSのtext-shadowに対応し、FigmaでもPreview／Devモードで確認できるようになっています。軽度のぼかしと低めの透明度が自然です。
Coding／CSSに落とし込む際の注意点と方法
デザインだけでなく、コーディングとの連携を考えると、Figmaで設定した影をCSSで再現できるかどうかも重要です。最新情報では、Figmaでの影効果はCSSのbox-shadowおよびtext-shadowと対応しており、Shadow spreadなどもCSSとの整合性が取れるようになっています。開発者に渡す際にスムーズになる方法や限界も把握しておきましょう。
box-shadow／text-shadowとの対応関係
Drop shadowおよびInner shadowは、選択したオブジェクトの種類によってCSSのbox-shadowまたはtext-shadowとして出力されます。CSSで再現する際にはXオフセット、Yオフセット、ぼかし（blur）、広がり（spread）、影の色および透明度を同じように設定する必要があります。Figmaで事前に設定を確認できるDevモードやInspectモードが役立ちます。
対応外のオブジェクトや制約
Spreadが使えないオブジェクトや、内部構造によって shadow の透過部分が表示されないなどの制約があります。例えば、オブジェクトがストロークのみかつ塗りがない場合、またはフィルの透過率やブレンドモードにより表示が制限されることがあります。こうした点はデザインとコーディングの両方で確認が必要です。
開発者とのハンドオフ手法
影の設定値を正確に伝えるために、Figmaで影スタイルをEffect Stylesとして保存し、それをチームライブラリで共有する方法があります。これにより、デザインと実装で影のズレが少なくなります。さらにDevモードでCSSコードを確認できるので、そのままコピーできるケースも多くなっています。
よくある疑問と失敗を避けるヒント
影を使いこなすには、小さな失敗や誤解を避けることが大切です。影が暗すぎる、ぼかしが強すぎる、背景との馴染みが悪いなどの問題では、デザイン全体のバランスが崩れます。ここではよくある疑問とその解決策を紹介します。失敗を未然に防ぎ、クオリティの高い見た目を保ちましょう。
影が目立ちすぎる／不自然になる原因
影が暗すぎたり、透明度が高すぎたり、ぼかしが少ないと不自然になります。特に背景と影色のコントラストを無視すると、影だけが浮いて見えることがあります。自然な見た目を目指すなら、影色をやわらかめにして透明度を落とし、ぼかしを使って輪郭をぼかすと良いです。
Spreadが反応しない／使えないケース
Spread設定がグレーアウトして使えないことがありますが、これはオブジェクトの種類やフィルの状態によるためです。例えばオブジェクトのフィルが透明かストロークのみの場合、またはクリップコンテントの設定がオフの場合などです。これらを適切に設定し直すことでSpreadが有効になります。
複数の影を重ねて使うときの注意点
複数の影を重ねることで奥行きのある表現が可能ですが、設定を重複させすぎると重たくなってしまいます。影の透明度やぼかしを少しずつ変えることで自然なレイヤーを作ることができます。また、重ね順も意識して、薄い影を下に、濃い影を上にするとバランスが取りやすくなります。
まとめ
この記事ではFigmaで影（shadow）を付ける方法を、影の種類から基本操作、調整のコツ、実践例、コーディングとの連携、失敗を避けるヒントまで包括的に解説しました。これらを身につけることで、あなたのデザインには確かな立体感と上質な雰囲気が備わります。
まずはDrop ShadowとInner Shadowの違いを理解し、パラメータを使いこなすこと。次に実践例を試して、影の色や透明度、ぼかし具合を調整しながら自分のスタイルを確立すること。そして最後にCSSなどへの実装も意識し、チームで共有できる影スタイルを活用すること。これらを繰り返すことで、デザインの完成度が格段に上がります。
コメント