【Photoshop】「画像アセットの生成」の書き出し先を変更する方法

Web制作を行うにあたって、Photoshopでデザインを作っている方は多いかと思います。デザインが完成したら、コーディングを行う前に行うこととして画像の書き出しがあります。昔はスライスを使って画像の書き出しを行っていましたが、今は「画像アセット」から生成するのが主流かと思います。今日はこの「画像アセット」の書き出し先を変更する設定について書きたいと思います。

「画像アセットの生成」の書き出し先は固定されている

便利な画像アセットですが、この機能で書き出される画像の場所は、PSDファイルと同階層に固定されています。例えばdesignというフォルダにpsdファイルがあれば、生成される画像が格納されるフォルダもそのpsdファイルと同じ階層に生成されるんですよね。

公開用のimgフォルダに画像アセットを生成できない問題

デザインからコーディングまでのサイト制作を一人で行う場合、まずはローカル環境でデザインを作るかと思います。で、デザインが完成していざコーディングを行うにあたっては、例えば「public」という別のフォルダを作り、その中で実際に公開するファイルを作っていく方が多いのではないでしょうか。

でも上に書いた通り、画像アセットで生成されるフォルダはPSDファイルがある場所になるので、生成された画像ファイルを「pubic」の中に用意した画像用フォルダの中に移動させる必要が出てくるんですよね。

図で表すとこんな感じです。

この作業が2度手間だなと感じました。出来れば実際に公開する用の画像フォルダの中に画像が生成される様にしたいですよね。

「シンボリックリンク」という裏技

ここで登場するのが「シンボリックリンク」という仕組みです（Windowsに限定して話を進めます）。このシンボリックリンクとは、あるファイルから特定のファイルやフォルダを参照できる様にする仕組みのことです。詳しい説明は調べていただければと思うのですが、ざっくりショートカットに近い仕組みの様です。これを使うと、擬似的に「画像アセットの生成」の書き出し先を変更することが可能になります。

シンボリックリンク作成前にやっておくこと

シンボリックリンクを作成する前にやっておかないといけないことが2つあります。

①Windowsの権限を開発者モードにする

「シンボリックリンク」の作成にはコマンドプロンプトを使用するのですが、開発者モードでないとコマンドプロンプトで命令を出すことが出来ません。Windowsの設定→「更新とセキュリティ」→「開発者向け」と進んで「開発者モード」をオンにします。

これをやらないと「この操作を実行するための十分な特権がありません。」というエラーが出ます。

②書き出し先フォルダを削除しておく

どのフォルダに書き出すかを決めたら、そのフォルダまでのパスを控えた後、フォルダ自体を一旦削除します。例えば以下の場合であれば、「img」フォルダですね。シンボリックリンクの作成では、リンク先のフォルダを生成する指示を出すので、既にフォルダがあるとエラーが出てしまうんですよね。そもそもフォルダを作っていなければ、この項目はスルーしてもらって大丈夫です！

これをやらないと「既に存在するファイルを作成することはできません。」というエラーが出ます。

シンボリックリンクを作成する手順

では準備が整ったところで、具体的にシンボリックリンクを作成していきたいと思います。シンボリックリンクの作成自体はとても簡単です！まず、［Windowsボタン］＋［R］キーを押し、て「ファイル名を指定して実行」ダイアログを開きます。表示された検索窓で「cmd」と入力して、コマンドプロンプトを立ち上げます。