PowerToys：開発者が知っておくべきWindows神ツール
「彼女の下着は何色？」のコント、おもしろいですね！ それでは、そのコントの続きを想像しながら、PowerToysがいかに私たちの日常を助けてくれるかを、楽しく見ていきましょう！
コント
彼女の下着は何色？
開発者A
「ふぅ、やっと画面のデザインが固まったな…」
開発者B
「お疲れさん！ 画面の配色、すごくいい感じだね！」
開発者A
「ありがとう！ でも、この前の画面で使ったボタンの青、もう一度使いたいんだけど…」
開発者B
「あー、あの絶妙な青ね！ 色コード覚えてる？」
開発者A
「それが…覚えてないんだよなぁ。またFigmaを開いて、スポイトで色を拾って、コードをコピーして…うーん、めんどくさい！」
開発者B
「そうだよね。色って、いつも気になっちゃうよね…」
開発者A
「それにしても、画面全体の色のバランスって大事だよね。統一感がないと、見にくくなっちゃうし…」
開発者B
「その通り！ まるで、彼女の下着の色を合わせるみたいにね！」
開発者A
「えっ…？」
開発者B
「あ、いや、違う違う！ 彼女の下着の色って、彼女自身の気分や、ファッションと合わせたりするじゃない？ それと同じで、画面の色も、アプリケーション全体のテーマや、ユーザーの感情に合わせる必要があるんだ！」
開発者A
「…なるほど。でも、下着の色を合わせるのは、ちょっと難しそうだな…」
開発者B
「いや、大丈夫！ そのためのツールがあるんだよ！」
開発者A
「え、下着の色を合わせるツール？」
開発者B
「違う違う！ 色を拾うツールだよ！ これを使えば、彼女の…いや、画面のどの色でも、一瞬で色コードを調べられるんだ！」
開発者A
「すごい！ それ、詳しく教えてよ！」
開発者B
「もちろん！ そのツールこそが…『PowerToys』さ！」
「PowerToys」は、Windowsの標準機能にはない、かゆいところに手が届く便利なツール集です。開発者である私たちにとって、日々の作業効率を劇的に向上させてくれる、まさに「神ツール」と言えるでしょう。
特に、コントで登場した「Color Picker（カラーピッカー）」は、その代表格です。
即座に色をキャッチ
画面上のどんな場所の色でも、ショートカットキー（デフォルトはWin + Shift + C）を押すだけで、スポイトツールが起動します。
ブラウザや画像編集ソフト、PDFドキュメントなど、アプリケーションを問わずに色を拾えるため、「あの色、なんだっけ？」と悩む時間がなくなります。
多様な色フォーマットに対応
拾った色を、HEX、RGB、HSLなど、様々なフォーマットで表示してくれます。
Web開発ではHEX、デザインツールではRGBやHSLなど、用途に合わせてすぐにコピーできるので、変換の手間が省けます。
色の履歴を保存
一度拾った色は履歴として残るので、「さっきの青、やっぱり使いたいな」という時でも、すぐに参照できます。
これにより、複数の色を比較しながらデザインを進めることも容易になります。
PowerToysは、Microsoft Storeから簡単にインストールできます。
Microsoft Storeを開く
Windowsの検索バーに「Microsoft Store」と入力して起動します。
「PowerToys」を検索
ストアの検索窓に「PowerToys」と入力します。
インストール
検索結果から「Microsoft PowerToys」を選択し、「入手」ボタンをクリックします。
インストール後、PowerToysを起動すると、様々なツールの設定画面が表示されます。
PowerToys自体はGUIツールなので、直接コードを書いて操作するわけではありませんが、開発作業においてどのように活用できるか、具体的な例を見てみましょう。
例
Webサイトのカラーリングを参考にしたい場合
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>My Web Page</title>
<style>
.header {
/* PowerToysのColor Pickerを使って、
素敵なWebサイトのヘッダーの色を調べ、
ここでペーストする。
例えば、#1A73E8 のような青色
*/
background-color: #1A73E8;
color: white;
padding: 20px;
}
.button {
/* ボタンの色も、カラーピッカーで拾った色に統一！
先ほどの青色より少し明るい #4285F4 にしてみよう。
*/
background-color: #4285F4;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
}
</style>
</head>
<body>
<header class="header">
<h1>Welcome!</h1>
</header>
<main>
<button class="button">Click Me</button>
</main>
</body>
</html>
このように、PowerToysのColor Pickerを使えば、他のサイトやデザイン資料から直接色コードを取得し、CSSにサッと貼り付けることができます。
PowerToysは、Color Picker以外にも、画面を分割してウィンドウを整理する「FancyZones」や、ファイル名を一括で変更する「PowerRename」など、開発者の作業を効率化するツールが満載です。
