スタパ齋藤のApple野郎

iOS/macOS初心者向けアイコン考、そして自作アイコン沼へ!?

えっ、iOSでデキるのに、macOSではできない?

 経緯は省くが、Mac超初心者のお手伝いをした。Macを手軽に使えるようにしたのであった。

 具体的には……あーそうスか、Webブラウザとかよくわからないけど、とにかくMacでそのWebサイトが表示できればいい、と。じゃあショートカット作りますんで、いつもコレをダブルクリックしてくださいネ……てな感じで超初心者が手軽に特定Webページにアクセスできるよう、MacでURLのショートカットを作成したのだが、ちょっと驚いた。

 え〜? アレってiOSやiPadOSだとデキるけど、macOSだとデキないの? マジ!? と。

 たとえば、iOSやiPadOSで、よくアクセスするWebサイトをアイコンとしてホームに登録する。Webブラウザを開いてお気に入りから目的のページを開くより、ホーム画面のショートカットをタップして目的のページを開いたほうが手っ取り早いので、そうしている人は少なくないと思う。

iPhone(iOS)でWebページへのショートカットをホーム画面上に作る方法。ショートカットを作りたいWebページを開き、画面下の共有ボタンをタップする。続いて「ホーム画面に追加」をタップ。その後、必要に応じてショートカットの名前を変えるなどして「追加」をタップすると、ホーム画面にWebページへのショートカットが作成される。このアイコンをタップするだけでWebページを開くことができる。

 いつものWebページを素早く開けるので、なかなか便利な方法である。まあ登録しすぎるとホーム画面がごちゃごちゃしちゃうけど。

 Mac(macOS)でも、デスクトップ上や各種フォルダ内にWebページへのショートカットアイコンを作ることができる。作るのはお手軽。URLをドラッグ&ドロップするだけ……なのだがッ!!!

Mac(macOS)のWebブラウザSafariで、特定のWebページへのショートカット(アイコン)を作る方法。ショートカットを作りたいWebページを開き、URL表示部(アドレスバー)をクリック。Webページのアイコン(ファビコン)が表示されるので、その部分をドラッグ&ドロップしていく。
ショートカットを作成したい場所(デスクトップやフォルダ内)にアイコンをドラッグする。
アイコンをドロップすればショートカット作成完了。以降はこれをダブルクリックするだけで、特定のWebページが(デフォルトのWebブラウザで)開かれる。Google Chromeなどでも同様にショートカットを作成できる。
ところがしかし!!! ショートカットは(.weblocファイル形式で保存されるため)どのアイコンも同じ。「@HTTP」って書いてある書類マーク。どのWebサイトへのショートカットなのかは、ファイル名で判別するしかない。

 あら〜いつもこういうショートカット使わないから知らんかった〜。macOSのWebページショートカット、不便。パッと見ではどのサイトへ飛ぶのかよく分からない。iOSやiPadOSだと、ショートカットはWebページのアイコンであるファビコンになるので一目瞭然。でもmacOSだとおんなじアイコン〜地味だし不便だし、それに超初心者には不親切かも!!! というわけで、このあたりを攻略してみた。

ファイルやフォルダを好みのアイコンにする方法

 Webページへのショートカットアイコン、やっぱり独自のアイコン・グラフィックであったほうが、超初心者として迷うことなく使えるだろうなぁ……ということで、ショートカット毎に違うアイコンを使う方法を以下にてご紹介。macOS上のファイルやフォルダに幅広く適用できる標準的なアイコンカスタマイズ方法だ。

まずアイコンにしたい写真やイラストなどのグラフィックを用意する。この画像を開いてコピーするが、ここではmacOS標準「プレビュー」アプリを使っている。
プレビューアプリで画像を開いてコピーするだけ。もちろんcommand+Cでもいい。
続いて、用意しておいたWebページへのショートカットアイコン(.weblocファイル)を右クリックして「情報を見る」を選ぶ。ファイルの「情報ウィンドウ」を開くわけですな。情報ウィンドウはcommand+I(アイ)や、画面左上アプリケーションメニューのファイル>情報を見るでも開ける。
情報ウィンドウが開くので、左上にある小さなアイコンマークをクリックする。
小さなアイコンマークが選択された状態で、ペースト(command+V)を実行し、先ほどコピーした画像を貼り付ける。するとすぐにアイコンが変わる。
はい、オリジナルグラフィック・アイコンの出来上がり♪ もちろん普通のファイルやフォルダと同様に扱える。

 こんな感じで、ファイルやフォルダを自由なアイコンに変えて便利化できる。とくに珍しくないmacOSのカスタマイズ機能なので、知っている人は「だよね」であるが、知らない人は「あら楽しそう!」と思うかもしれない。お手軽なのでお試しあれ。

 なお、アイコンをもとに戻す場合は、上記の情報ウィンドウ上の小さなアイコンを選んだ状態でdeleteキーを押せばOK。カット(command+X)を実行してもいい。

 また、複数のファイルやフォルダのグラフィックを一度で変えることも可能。複数のファイルなどを選んだ状態で、optionキーを押しながら画像ファイルを右クリックして「インスペクタを表示」を選ぶ。そこで開いたウィンドウに対し、情報ウィンドウで行ったのと同様の画像ペースををすればいい。

複数のファイルなどのアイコン・グラフィックを一気に変える場合、optionキーを押しながら画像ファイルを右クリックして「インスペクタを表示」を選ぶ。インスペクタとは、多数のファイルの情報をひとつのウィンドウ上で次々と見ていく方法。option+command+Iや、画面左上アプリケーションメニューでoptionを押しながらファイル>インスペクタを表示でも開ける。なお、アイコン・グラフィックを追加する対象のファイルなどの選択は、インスペクタ起動前でも起動後でもOK。
インスペクタウィンドウ上の小さなアイコンを選択して画像をペーストすればいい。
複数のファイルのアイコン・グラフィックを一気に変更できた。同様の手順で画像をdeleteもしくはカットすれば、複数のファイルのアイコン・グラフィックをもとに戻すことができる。

 それと、ファイルやフォルダによっては「アーッ!!! 画像をペーストしてアイコンのグラフィックを変えたら、元に戻せなくなったーッ!!!」というケースが出てくるかもしれない。とくにアプリ。メーカー独自のグラフィックのアイコンとなっていたりするが、そのアイコン・グラフィックを上書きしちゃったってケースですな。それを戻すのは多少手間がかかるのと、そもそもユーザーがアプリを書き換えるのはよろしくないので、そーゆーコトはやらないのが無難。やるならご自分で生成したファイルやフォルダで♪

アプリにはそれぞれ独自のアイコン・グラフィックがある。ここにユーザー独自のグラフィックをいきなりペーストしてしまうと、このアイコン・グラフィックがもとに戻せなくなったりする。ので、そういうコトをどうしてもしたい場合、情報ウィンドウ上の小さなアイコンを選んだ状態でコピーするなどし、元々のグラフィックを保存しておくのも、ひとつの手だ。アプリの「パッケージの表示」から、リソースの「.icns」ファイルを探してもとのグラフィックを取り戻せるが、やや手間がかかるのでここでは割愛する。
このアプリの場合、1024×1024ドットのグラフィックを取り出せた。これを背景が透明な.pngファイルで保存しておけば、手軽にアイコン・グラフィックを書き戻せたりはする。

部分的に透明なアイコンを使いたい!!!

 ファイルやフォルダやアプリのアイコンをよく見ると、四角ではなく複雑な形をしていることがわかる。形状に合わせて部分的に透明化してあるわけですな。富士山の写真を四角くトリミングして作ったアイコンと、macOS上の各種アイコンを比べてみよう。

わりと一般的なアイコン。アイコンの角が丸みを帯びている。それをほかのアイコンや背景に重ねると、アイコン背景が透明になっていることがわかる。
タコの顔や足のカタチに合わせて部分的に透明になっている。
けっこう凝った背景透明化が施されたアイコン。ただし、透明化された部分はクリックしても反応しないので、過度な透明化は不便を招くこともある。

 てゅーか、背景の透明化とかデキるんなら、やっぱりそうしたいじゃ〜ん!!! その方法も案外簡単であったりもするので、背景を透明化して「独特のカタチがあるアイコン」を作ってみよう。以下に手順をご紹介。

まずアイコンにしたい画像を用意。手順の途中で画像が.png形式に置換されてしまうので、オリジナル画像のコピーを使うのが無難だ。背景が同色で同程度の明るさで、アイコンになる画像部分と明瞭な差があると「背景の透明化」をしやすい。画像はmacOS標準「プレビュー」アプリで開く
メニューから、表示>マークアップツールバーを表示を選択。
画像上部にマークアップツールバーが表示される。これは画像に注釈を付け加えるなどするためのツール群で、けっこう多彩な画像処理を行える。
マークアップツールバーの左側からインスタントアルファを選ぶ。イメージから背景を削除(透明化)するためのツールだ。
インスタントアルファを選んだら、透明化したいエリアにマウスポインターを合わせて僅かにドラッグさせる。すると透明化される部分の色が変わっていく。
「このエリアが透明化されればいいかな」と思ったところでドラッグを止め、deleteキーもしくはcommand+X押す。
背景を透明化すると、画像ファイルは透明化に対応した.pngファイルに置き換わる。ここでは「変換」をクリック。
変換するとこんな状態になり、グレーの部分は透明化されたエリアを示す。ここでcommand+Cもしくはメニューからコピーを選び、背景透明化後の画像をコピーする。以降は、前述のオリジナル画像をアイコン・グラフィックとして設定した手順と同様だ。なお、この時点で「まだ透明化したいところが残っている」という場合、インスタントアルファでその部分を指定してドラッグし、deleteキーもしくはcommand+X押すことを繰り返せばいい。
左は背景を透明化した画像を適用したアイコン。右はそのアイコンをほかのアイコンに重ねた様子。猫の背景が透明化されているのがわかる。

 といった感じで、より本格的なアイコンを自作することができる。必要なのはアイコン作成のための画像のみ。ほかはmacOSの基本機能で行えるので、興味があればぜひお試しを。

 なお、背景透明化については、より高機能な画像処理アプリがあると、細かい部分までキッチリと作り込める。また、より手軽に背景を透明化するアプリも多々あるので、凝りたい方はそういうアプリもチェックしていくと、オリジナルアイコン自作沼にハマれて愉快かもしれない。

スタパ齋藤

1964年8月28日デビュー。中学生時代にマイコン野郎と化し、高校時代にコンピュータ野郎と化し、大学時代にコンピュータゲーム野郎となって道を誤る。特技は太股の肉離れや乱文乱筆や電池の液漏れと20時間以上の連続睡眠の自称衝動買い技術者。収入のほとんどをカッコよいしサイバーだしナイスだしジョリーグッドなデバイスにつぎ込みつつライター稼業に勤しむ。