CREATOR BLOG

10分の導入時間で2時間短縮!?これだけは外せないツールまとめ

2014/05/21
編集部
  • このエントリーをはてなブックマークに追加

0521_takano

こんにちは。
4月よりアライドアーキテクツの船員となりましたデザイナーの高野祥と申します。

■まずは自己紹介

大阪生まれ東京育ちの85年世代、以後お見知りおきを。

WEBデザイナーになるまでは
85年生まれる→高校卒業後バンドマンになる→心折れる→今に至る
という感じです。

初心者歓迎!おすすめツールいろいろ

新人さんもそろそろ慣れてきて、業務に集中し始めたころだろうと思い、
僕が働く上でこれは鉄板というツールを紹介したいと思います。
(Macでしか使えないツールも多いですがご容赦ください)

もうWEBツール、Photoshop関連などごちゃまぜでいきます。
中級者以上の方には少し退屈かもしれませんが今回は初心者にターゲットを絞りたいと思います。
そしてDropboxとかEvernoteみたいな超メジャー級のは省いていきます。

ではさっそくおすすめのツールを紹介していきます!

■wordmark.it

http://wordmark.it/

このツールは自分のPCに入っているフォントを一覧表示出来ます。
シンプルな見た目で中々よいです。
同類のサービスでYour PC's Font Viewer!!というものもあります。
好みで使い分けてみてください。

■Webデザイン黄金比計算ツール

http://zapanet.info/blog/item/1298

よく見たらブログの一部でしたねここ。
このサイトは黄金比を計算してくれます。
「あー自由にサイズ決めていいけど逆に迷うなぁ」
なんて時は役に立ちます。黄金比に頼りすぎると思考停止しますので注意しましょう。

ちなみに!
どこかで見たのですがフォントのサイズも黄金比は使えるみたいです。
例えばh2のフォントの大きさが12ならh1は19前後みたいな。
(12×1.618=19.416)
大体僕はいつも違和感感じるのでその後少しいじりますが笑

■PathCon

http://bootgraph.com/pathcon/

これはWindowのパス(¥¥192.168.0.〜っていうの)をMac用に変換して
くれるツールです。
ディレクターはファイルのやりとりで文字化けすると怒られるのでWindows、
デザイナーはMacっていうのは本当によくあるので地味に便利です。

使用例としては
ディレクター「素材ここに入れたから作業よろしくね〜」
デザイナー「あーWindowのパスだこれ、一からフォルダたどっていくの面倒だなぁ」
っていう時に役に立ちます。
このツールでで変換したマック用のパスを「⌘+K」で出てきた画面に入力すればすぐに
階層に入れます。

■DropJPG

http://dropjpg.en.softonic.com/mac

このツールはかなり使います。
この矢印のアイコンにPSDを放り込むと勝手にJPGを書き出してくれます。
(おそらく画質は100%で書き出されるので容量は重いかも)
いちいちPhotoshop開いて別名保存とかウェブ用に保存をしなくていいので便利です。

■BetterTouchTool

http://blog.boastr.net/

このアプリはMagicMouseやTrackpadなどの様々なデバイスのジェスチャーに、
コマンドや機能を割り当てることができるアプリ、だそうです。
というのも自分はWindows 7のAeroスナップみたいな機能しか使っていないからです。
エクセルとか右端持って広げるのが面倒という時に上にグイッとやって全画面表示にすると
ストレスがないです。おすすめ。

■FormatMatch

https://itunes.apple.com/jp/app/formatmatch/id445211988?mt=12

こちらはコピーしたテキストの余計なフォーマットを省いてくれるアプリです。
たとえばどこかのWEBサイトからテキストコピーしてEvernoteに貼りつけよってなった時に
フォントの大きさとか太さ、色まで一緒にコピーされて直すのが面倒な時に重宝します。
このアプリを起動しておけば純粋な文字だけをペースト出来ます。

ここからPhotoshop関連

■Skala Preview

http://bjango.com/mac/skalapreview/

こちらは非常に優秀なアプリです。
どういうアプリかというと今Photoshopで作業している画面をそのままスマホにリアルタイム同期で表示してくれます。
主な用途としては640pxで作ってるスマホ用サイトの表示をリアルタイムで確認しながら作っていく、
というような使い方をします。
今まではいちいち画像を書き出してDropboxとかに入れてそれを見に行ってーとかなり面倒だったのですが
このアプリが登場してからはもうそんな面倒なことはしなくて済むようになりました。
注意点としてはこれを開いている間、かなり動作が重くなるので確認の時以外は閉じておいた方がいいかもしれません。

逆に言うとこれPCサイト作ってる時に使うことあるのかな?って感じではあるのでなにかいい用途がある!って
方は教えていただけますでしょうか。

■Corner Editor

http://photoshopscripts.wordpress.com/2013/02/03/corner-editor-photoshop-script/

photoshop CCになってからは角丸も調整できるようになりましたが
それ以前のバージョンを使っている人におすすめです。
一度角丸長方形ツールで配置しちゃうと縦幅だけ縮めたりした場合角丸がひどいことになりますが
このツールを使えばまたきれいな角丸に調整することができます。便利です。

使い方としてはこちらの記事がとてもわかりやすかったので
貼っておきます。
http://coliss.com/articles/build-websites/operation/design/photoshop-jsx-corner-editor.html

■Renamy

http://www.renamy.com/

これは複数レイヤーのリネームができるようになるPhotoshopプラグインです。
僕は飾り系の素材で使ってるレイヤーは一括変換で「飾り」とかの名前に変更する事が多いです。

 

と、色々と紹介させていただきましたが他にもまだまだあります。
全部は書ききれないので今回はよく使うやつをピックアップしました。
少しでも業務の役に立つことがあれば嬉しいです!

それでは次回の航海までお元気で!

 

 

Recent Entry

CSSの単位まとめ pxからvm/vh/vmin/vmaxまで

レスポンシブHTMLメールを作ってみての感想

CSSのリファクタリングでした5つのこと

大人が読んでも頭を使う絵本の紹介

サイト内にうまくInstagramを取り入れてるサイト11選

Category

Archive