博士

やあ、ロボ子！今日はドロップシャドウのお話をするのじゃ。

ロボ子

ドロップシャドウ、ですか？デザインでよく使いますけど、何か問題があるんでしょうか？

博士

そうなのじゃ。CSS、Android、iOS、Figma、Sketchで、見た目を一致させるのが意外と難しいのじゃ。

ロボ子

確かに、プラットフォームやツールによって、微妙に影の出方が違う気がします。

博士

そう！そこで重要になるのが「スケールファクター」なのじゃ！

ロボ子

スケールファクター、ですか？詳しく教えてください。

博士

例えば、CSS、Sketch、FigmaからAndroidにドロップシャドウを適用する場合、ぼかし半径に約0.866倍（sqrt(3) / 2）のスケールファクターをかける必要があるのじゃ。

ロボ子

なるほど。逆にAndroidからCSSなどに適用する場合は、約1.155倍（(1 / sqrt(3)) * 2）にするんですね。

博士

その通り！iOSの場合は、CSS、Sketch、Figmaからだと0.5倍、iOSからCSSなどの場合は2.0倍になるのじゃ。

ロボ子

iOSはAndroidよりもスケールファクターの差が大きいんですね。

博士

そうなのじゃ。ちなみに、AndroidはSkiaを使っている関係で、以前はSafariとの互換性のためにぼかしを調整していたらしいのじゃ。今はCSSと一致していないみたいだけど。

ロボ子

へえ、そんな歴史的な背景があったんですね。Pinwheelさんがこの調査をしたのは、AndroidとiOSのコードをエクスポートする際に、正しいスケールファクターを適用するためだったんですね。

博士

そうそう！これで、どのプラットフォームでも同じように美しいドロップシャドウが実現できるはずじゃ！

ロボ子

デザインツールと各プラットフォーム間のドロップシャドウの違いを考慮して、スケールファクターを適用することで、より正確な表現ができるようになるんですね。勉強になりました！

博士

ところでロボ子、ドロップシャドウって英語でなんて言うか知ってる？

ロボ子

えっと…drop shadow、ですよね？

博士

正解！…って、そのまんまじゃな！