本文へジャンプ

【今更デビュー】食わず嫌いしていた「Macのショートカットアプリ」に沼った話。UI/UXの美しさとおすすめレシピ4選

Posted by INH
「MONSTER REPORT」先輩モンスターたちが、仕事・就活・カルチャーについてリアルに綴るコラム

※まず冒頭で言わせてください。Windows派の皆さん、今回はMac限定のお話ですみません......!
(もしWindowsで同じような爆速自動化ツールをお使いの方は、ぜひこっそり教えてください!)

皆さんは、Macの中にずっと居座っている紫色のアイコン、「ショートカット」アプリを活用していますか? blog_261009_0.png

「AIになんでも頼める時代だし、今更ローカルの自動化ツールなんて......」
「存在は知っているけど、プログラミングっぽくて難しそう」
何を隠そう、私自身がずっとそうやってスルーし続けてきた一人でした。

実はこのアプリ、iOS時代のサードパーティアプリ『Workflow』(2014年〜)から数えると10年以上の歴史があり、MacにもmacOS Monterey(2021年)から標準搭載されている大ベテランです。ずっと身近にありましたが「自分には関係ないや」と食わず嫌いしていました。

ですが、日々積み重なる地味な手作業に限界を感じ、重い腰を上げて触ってみたところ......「なんでもっと早く使わなかったんだ!!」と大後悔。

日常の細かなストレスが1タップで消し飛ぶ快感はもちろん、アプリ自体の「UI/UXの美しさ」にすっかり沼ってしまいました。今回は、ディレクター視点での気づきと、実際に作って「地味に業務が楽になった」おすすめレシピをご紹介します。

感動した「ショートカットアプリ」の優れたUI/UX

実際に使ってみてまず衝撃を受けたのが、「プログラミング特有の難しそうな威圧感」が徹底的に排除されていることでした。

気になって少し調べてみたところ、このアプリの原点となった『Workflow』は、2015年に優れたアプリに贈られる「Apple Design Award」を受賞しており、Appleに買収された後もその優れた設計思想が継承されています。

ディレクターやデザインに関わる視点から見て、特に「ここがすごい!」と感じたUI/UXのポイントが3つあります。 blog_261009_1-1.png blog_261009_1-2.png

  • プログラミング感を消す「カードデザイン」と色分け
    処理の1ステップが親しみやすい「角丸のカード」で表現されており、機能(画像処理・テキスト・制御など)ごとに直感的なテーマカラーで整理されています。難解なコード画面ではなく、レゴブロックを眺めているような心理的ハードルの低さがあります。

  • 「1つの自然な文章」になる穴埋め式の設計
    パラメータ設定の入力フォームではなく、UI自体が[ 選択した画像 ] の [ 横幅 ] を [ 800px ] にリサイズして [ 保存 ]のように、人間が読む自然な文章として成り立つようデザインされています。見た瞬間に「何が起こるか」を理解できます。

  • アクセシビリティまで配慮された美しい情報構造
    上から下へと「水が流れるように」データの受け渡しが可視化されており、視覚的にも迷わないストレスフリーな構造になっています。 「誰でも直感的に自動化を組めるようにする」というデザインの執念を感じ、画面を眺めているだけでもワクワクしてしまいました。

実はめちゃくちゃ簡単! ショートカットの基本の作り方

「でも、作るのが難しいんでしょう?」と思った方、安心してください。プログラミングの知識は不要で、基本はたったの3ステップです。

  1. 「+」ボタンで新規作成
    Macの「ショートカット」アプリを開き、右上にある「+」を押して新規キャンバスを開く
  2. アクション(処理のブロック)を選ぶ
    画面右側のライブラリから、やりたい操作を選び、中央のキャンバスに並べる
  3. 実行方法(入口)を決める
    右側の詳細設定から「クイックアクション」にチェックを入れる

レゴブロックを組み立てるように「入力(インプット)→ 処理 → 出力(アウトプット)」の順番でブロックを並べるだけで、自分だけの自動化ツールが完成します。

実際に作った「ショートカット」4選

それでは、私が業務で手放せなくなった自作ショートカットをご紹介します!

1. 資料作成の救世主!「大量画像の一括リサイズ」

プレゼン資料や提案書を作るとき、スクリーンショットや撮影素材を大量に配置しますよね。しかし、高画質な画像をそのまま貼り付けると、資料のファイルサイズが激重になってしまいます。

これまではPhotoshopでアクションまたはバッチ処理や、Finderのクイックアクションでどうにか対応していましたが、Photoshopは立ち上げるまでに地味に時間がかかる...クイックアクションはもう少し自分にあわせた設定もしたい...。そこで「選択した複数の画像を、アスペクト比を保ったまま一括で横幅指定サイズに縮小する」ショートカットを作成しました。

ここが便利:
Finderで大量の画像を選び、右クリック(クイックアクション)からポチッと押すだけ。一瞬で軽量化された画像が生成されます。資料作成のテンポが劇的に上がりました。

blog_261009_2.jpeg

複数ファイルを選択して右クリックすると、指定の場所に画像が保存され、終わったら通知も届きます。

blog_261009_3.png

事前に規定のサイズを指定することも、作業ごとにサイズ指定をすることも可能です。

2. 抜け漏れゼロへ!「選択テキストからのリマインダー/カレンダー登録」

ディレクターという職種柄、チャットやメール、議事録から「〇月〇日までに〇〇を提出」「〇日にミーティング」といったスケジュール登録の作業が山のように発生します。

カレンダーアプリを開いて、タイトルを入力して、日時を選んで......という工程が地味に面倒だったのですが、「テキストを選択してショートカットを起動すると、そのままリマインダーやカレンダーの登録画面に飛ぶ」仕組みを作りました。

ここが便利:
指示文やメッセージのテキストをハイライトしてキーを押すだけ。入力の手間が浮くだけでなく、「後でカレンダーに入れようと思って忘れていた」というヒューマンエラーを防げるのが、地味に大きいです。 blog_261009_4.jpeg

応用でカレンダーへの登録も可能です。

3. 脳のモードが切り替わる!「案件一括オープン機能」

複数の案件を並行して回していると、案件ごとに開くWebサイト(Backlog、Notion、Figma、ドキュメント、テスト環境URLなど)が散乱しがちです。

Chromeの「ブックマーク」だと1点ずつしか開けないし、「タブグループ」で保存しておくと常にタブバーが狭くなって視界がごちゃつく+案件が複数ある場合なんていわずもがな......。

そこで、「リストから案件名を選ぶと、その案件に必要なWebサイト群が一気にババッとブラウザで開く」ショートカットを作りました。

ここが便利:
画面がスッキリ保てるのはもちろん、「A案件のサイト群を閉じて、B案件のサイト群を一括で開く」ことで、頭の中の思考モードや気持ちが一気に切り替わるのが最大のメリットです。 blog_261009_5.jpeg

リスト機能を流用しているので複数の案件の登録が可能です。ショートカットも登録してあるため、呼び出しも簡単!

blog_261009_6.png

4. 案件開始時の儀式を爆速化!「子フォルダ付きの案件フォルダ一括生成」

新案件が始まるたびに発生するフォルダ作成。「01要件定義」「02デザイン」「03素材」などの決まったフォルダ階層を、毎回手動で作るのは地味に面倒ですし、日付や案件名の表記ブレも起こりがちです。

そこで、「テキスト(案件名)を選択して右クリックするだけで、今日の『日付_選択テキスト』が入力されたダイアログが立ち上がり、OKを押すだけで指定場所に子フォルダ構造付きの親フォルダを一括生成する」ショートカットを作りました。

ここが便利:
チャットや仕様書にある案件名をハイライトしてポチッと押すだけ。一瞬でキレイに整ったフォルダ階層が完成します。手入力による命名ミスや表記ブレが一切なくなり、案件開始時の「地味な準備ストレス」が完全にゼロになりました! blog_261009_7.png

作っていて気づいた「これ、画面遷移やフローチャートを描く思考と同じだ!」

いくつかショートカットを組んでいてハッとした気づきがありました。 この「処理のカードを並べて繋いでいく」作業って、私たちが日常的にやっている「ワイヤーフレームの画面遷移図」や「業務フロー図(フローチャート)」を描く思考そのものなんです。

コードをガリガリ書くのではなく、「この入力(インプット)に対して、次にこの処理をして、条件によって分岐して、ここに出力(アウトプット)する......」と、思考のプロセスを可視化していく作業。

直感的な画面で組み上げられる優れたUIだからこそ、日頃のディレクション思考(整理力)をそのまま活かせるめちゃくちゃ面白い体験でした。

おわりに

自分の手で組み上げた小さな仕組みが「カチッ」とハマり、目の前の面倒な作業が一瞬で片付く瞬間は、ちょっとしたアハ体験のような快感があります。 そして何より、「プログラミング感を消し、誰でも使えるように工夫されたUIデザインの凄さ」を体感できたのが大きな収穫でした。
「ずっとそこにあったのに使っていなかった」という方、ぜひ今日から Macの「紫色のアイコン」を叩いてみませんか?
(「こんな便利なショートカット使ってるよ!」「Windowsならこれがおすすめ!」という知恵があれば、ぜひ教えてください!)

「MONSTER REPORT」先輩モンスターたちが、仕事・就活・カルチャーについてリアルに綴るコラム
Recent Entries
MD EVENT REPORT
What's Hot?