カメレオンデイズ

読者です 読者をやめる 読者になる 読者になる

カメレオンデイズ

7色の顔を持つdoubleMの「非」日常✦ 今日は何して遊ぼっか?

【ブクマ推奨!】WEBサイト制作時の面倒な作業を自動化するための8つの小技

デザイン ツール

デザインしているさまを後ろから覗き込んでいた友人に「きゃー!なにこの、めくるめく感じ!」と言われたdoubleMです。

なんだかよく分からないコメントですが、こう言われるのはコマンド使いの宿命だそうです。

f:id:doubleM:20160628214117p:plain

先日、【html】<li>タグ内の変数の書き換えをExcelで効率化して、リストを量産する方法 - カメレオンデイズというエントリーで友人プログラマに助けられた話を書きました。

この手の効率化の話って、意外と色んなところに転がってるんじゃないかなと思ってまして、私が助けられたお返しに、誰かの役に立ちそうなことを私も考えてみよう、というのが今回のブログの趣旨です。

この記事の狙い
「この作業って地味にめんどくさいんだよね。」を機械化、自動化する!

↓ご存知でしたか…?↓



 100枚の画像リサイズは一瞬でできる

複数枚の画像をリサイズしたい時、PhotoshopやWEBツールを利用するのもいいですが、Automatorを使えば一瞬だって、ご存知でしたか?

手順1. リサイズしたい画像をまとめる
手順2. オートメーターを起動→新規→ワークフロー
手順3. 下の画像の通りに、ファイル及びアクションを配置
手順4. 右上の「実行」を押したらハイ完成

f:id:doubleM:20160619010421p:plain

※画像の設定だと、結果はデスクトップに書き出されます。

注意点
サイズは「長辺」で合わせてくれるらしいので
縦長画像と横長画像が混在している時には、
縦長・横長2回に分けて処理すると良さげです。

 JPEG→png変換は10秒でできる

同様に、JPEG→ png変換だって、Automatorを使えば一瞬でできてしまうんです。例えばWEB制作などで、色々な場所から色々なファイル形式で画像が届いてしまった時などに使いたい機能ですね。

手順1. 拡張子変換(あるいはファイル形式変換)したい画像をまとめる
手順2. オートメーターを起動→新規→ワークフロー
手順3. 下の画像の通りに、ファイル及びアクションを配置
手順4. 右上の「実行」を押したらハイ完成

f:id:doubleM:20160627173654p:plain

※拡張子はBMP,PNG, JPEG,TIFFから選択できます。

 ファイル名の連番書き換えは30秒でできる

手順1. リネームしたいファイルをまとめる
手順2. オートメーターを起動→新規→ワークフロー
手順3. 下の画像の通りに、ファイル及びアクションを配置
手順4. 右上の「実行」を押したらハイ完成

f:id:doubleM:20160627174757p:plain

この通り結構細かく指定ができるので、事前にネーミングルールを決めておくと良いですね。
f:id:doubleM:20160627175032p:plain

WEBやアプリ系の膨大な画像パーツを管理するのにも非常に便利ですよ!
※個人的には、数字を3桁に(3ではなく、003に)する設定があるのが最高だな、と思っています。

 その画像ファイルは80%サイズダウンできる

WEBサイトを作る際や、ブログを投稿する際、画像ファイルが重すぎて表示が遅くなる、という問題が発生することが有りますね。そんな危機を回避するために便利なのがこのツール、TinyPNG。
tinypng.com

手順1. 容量ダイエットしたい画像をまとめる
手順2. 上記URLにアクセス
手順3. 画面の真ん中に画像をドラッグアンドドロップ
手順4. 圧縮されたファイルをダウンロードしたら、ハイ完成!

ファイルにもよりますが、70〜80%程度の容量削減が見込めます。特に、容量リミットのあるバナー画像などにはうってつけなんじゃないでしょうか。

 そのPDFファイルは70%程度は圧縮できる

DTPデザインなどをする際、pdfファイルを扱うことがありますね。画像を大量に含むファイルの場合、こちらも容量がすごいことになってしまうケースがままあります。そんな時にはSmallpdf。
smallpdf.com

手順1. 容量ダイエットしたいPDFを用意する
手順2. 上記URLにアクセス
手順3. 画面の真ん中にファイルをドラッグアンドドロップ
手順4. 圧縮されたファイルをダウンロードしたら、ハイ完成!

 サンプルテキストはジェネレーターで作れる

サンプル書類を作るときやWEBサイトを作る時…あるいはなにか、説明書とかでもいいですね。そういったモノを作成するときの「サンプルテキスト」。「さんぷるてきすとサンプルテキストSample Text…」とかっていちいち入力するのって面倒じゃないですか?
そういった場合に使えるのが、ダミーテキストジェネレータ。

英語版だとこの文章で作るのが主流で
www.lipsum.com
日本語でおすすめなのはこちらです。
ダミーテキストジェネレータ | Web制作小物ツール - dounokouno.com

他にもいくつか候補はあるものの、古典文学の引用文とかですと、結局中身に目が行って気になってしまう問題などもありますし、シンプル・イズ・ベスト、ということで今回はこちらをピックアップしてみました。

 文字カウントはWordを使わなくてもできる

Wordなんて使ってねーし!!という方も、まぁまぁ、お聞きくださいよ。WEBサイトやバナー制作をデザイナーに頼んだ際、キャッチコピーやテキストを「何文字以内でください」なんて言われることは無いですか?
1文字ずつ数えるのは結構辛いと思うので、こんなツールをブックマークしておくと便利ですよ。
www.nummoji.kenjisugimoto.com

手順1. 直接入力か、コピペするだけ!

「空白をカウントしない」とか、「半角英数字2文字で1文字」といった、かゆいところに手が届く設定項目が準備されているのが素敵ですよね✦

 お願い:画像を送るならまとめてzipファイルに

最後の1個はゴメンナサイ、デザイナーからの「お願い」です!

複数枚の画像を送ってくださる際、1枚1枚メールに添付してくださったり、なぜかExcelに張り付けて送ってくださる方をよくお見かけします。
3枚以上の画像をやり取りする際は、(Google Driveのリンクを共有してくれ、とまでは言いません!)せめて、まとめて1つのzipファイルにして送ってください!!

zip化の手順は下記の通りです。
手順 1. 送りたい画像を フォルダにまとめる
手順 2. Windowsの場合は右クリック→ 「送る」→圧縮 (zip 形式) フォルダーを選択。Macの場合は「MacWinZipper」のアプリをインストールするのが便利です。

これをやっていただけると、添付する側もダウンロードする側も1度の手間で済みますので、お互い無駄な時間が省けますよ♪

いかがでしたか?

お役に立ちそうな項目はありましたでしょうか??
前半にMac限定の項目が多かったのが気がかりですが、知らなかった!という方はぜひ、ご活用いただければ幸いです。
そしてそして、いいじゃーん✦と思ってくださった方はぜひ、シェアして広めて下さいなm(_ _)m