---
title: "「部分」スクリーンキャプチャやプレーンな枠線の画像に macOS 風のドロップシャドウを追加する"
description: "好むと好まざるとにかかわらず、macOS でアプリ画面全体をキャプチャするキーストローク (⇧- ⌘- 5) は、デフォルトで保存される画像の周囲に控えめなドロップシャドウを追加します。これにより…"
canonical: https://oozou.com/til/add-a-macos-style-drop-shadow-to-your-partial-screen-captures-or-plain-bordered-images-153
locale: ja
date: 2021-08-20
topic: macos
---

# 「部分」スクリーンキャプチャやプレーンな枠線の画像に macOS 風のドロップシャドウを追加する

> 好むと好まざるとにかかわらず、macOS でアプリ画面全体をキャプチャするキーストローク (⇧- ⌘- 5) は、デフォルトで保存される画像の周囲に控えめなドロップシャドウを追加します。これにより…

Published: 2021-08-20 · Topic: [macos](https://oozou.com/ja/til-topics/macos) ([markdown](https://oozou.com/ja/til-topics/macos.md))

好むと好まざるとにかかわらず、macOS でアプリ画面全体をキャプチャするキーストローク (⇧- ⌘- 5) は、デフォルトで保存される画像の周囲に控えめなドロップシャドウを追加します。これにより、スクリーンショットや画像をドキュメントに追加するときの見栄えが良くなります。[ImageMagick](https://imagemagick.org/script/download.php#macosx) ディストリビューションに含まれる convert アプリには、任意の画像 (たとえば .⇧- ⌘- 4 で撮った部分スクリーンキャプチャ) に同じドロップシャドウ効果を追加できる便利なコマンドライン機能があります  

インストールしたら、次のコマンドラインを使って画像にドロップシャドウを付けられます：

```
convert "Screen Shot 2021-07-07 at 09.47.13.png" \( +clone -background black -shadow 80x20+0+15 \) +swap -background transparent -layers merge +repage "Screen Shot 2021-07-07 at 09.47.13.png"
```

実行すると、この画像が  

![](https://oozou.com/images/til/til-153-1.png)

このようになります  

![](https://oozou.com/images/til/til-153-2.png)

プロのヒント：BASH や ZSH の環境に疑似関数を作成できます。たとえば ~/.bashrc ファイルに次の行を追加します：

```
shadow () { convert "$@" \( +clone -background black -shadow 80x20+0+15 \) +swap -background transparent -layers merge +repage "$@"; }
```

その後、(初回のみ) ~/.bashrc ファイルを source して有効化します：

```
source ~/.bashrc
```

これで、コマンドラインから次のように入力するだけで、任意の画像ファイルにドロップシャドウを追加できます：

```
shadow "Screen Shot 2021-07-07 at 09.47.13.png"
```

*(ファイル名にスペースが含まれる場合は、ダブルクォートで囲むのを忘れないでください)*

# ドロップシャドウで PNG 画像を引き立てる

PNG 画像にドロップシャドウを追加すると、視覚的な魅力が大きく高まり、どんな背景の上でも際立つようになります。このシャドウ効果は奥行き感を生み出し、画像をより立体的に見せます。デザイナーやコンテンツ制作者にとって、シャドウ付きの PNG 画像をプロジェクトに取り入れることは、全体の美観を高め、デザインをより魅力的でプロフェッショナルなものにしてくれます。

# CSS でドロップシャドウを追加する方法

CSS で PNG 画像にドロップシャドウを追加したい Web 開発者にとって、box-shadow プロパティは万能なツールです。簡単な例を示します：

css img \{ box-shadow: 10px 10px 20px rgba(0, 0, 0, 0.5); }

このコードスニペットは、不透明度 50% の黒いシャドウを使って、画像に控えめなシャドウ効果を追加します。値を調整して、望みのシャドウの投影と強さに仕上げてください。

# シャドウ付き PNG 画像のクリエイティブな活用法

シャドウ付きの PNG 画像は見た目のためだけでなく、デザインにおいて機能的な役割も果たします。たとえば、シャドウを使うことで、視線を特定の要素へ誘導したり、階層感を生み出したり、フラットなデザインに質感を加えたりできます。Web サイトのデザイン、デジタルアートの制作、プレゼンテーションの準備など、どんな場面でもシャドウはクリエイティブな武器になり得ます。

ImageMagick や CSS のようなツールを活用すれば、PNG 画像にドロップシャドウ効果を簡単に適用でき、インパクトを高めて見る人の注意を引きつけられます。

**以上です。**

---

Contact OOZOU: hello@oozou.com · +66 2544 0000 · https://oozou.com/ja/contact

More for AI agents: https://oozou.com/llms.txt · every page has a markdown twin at its URL plus ".md"