creatersnest130

WebデザイナーがおすすめするWeb制作で使えるMacアプリまとめ


こんにちは。Webデザイナーのmagarisugiです。
私は現在、ほとんどの作業をMacBook Air 11インチだけで行っています。画面は小さいけれど、電車の中でもカフェでもパっと開いて作業ができるのは細かい作業が多いWebデザイナーにはとっても便利。
今回はWeb制作で使えるMacアプリをご紹介します。

Coda

coda

https://panic.com/jp/coda/

これを起動しない日はないほどの、定番のHTMLマークアップアプリ。iPadアプリの「Diet Coda」と組み合わせるとiPadをサブディスプレイとして利用可能。ちょっと高めだけど、簡易的なFTPや強力な一括置換など、機能はとにかく充実しています。

Sublime Text

Sublime Text

http://www.sublimetext.com/

Codaより硬派にマークアップに集中したいときはテキストエディタのSublime Textを使います。カスタマイズ性が高いので、自分だけのSublimeを作ることができます。人前で作業するときはCodaよりこちらの方が上級者ぽく見えるので「なんだか難しいことをやっているな」と感じ取ってもらえるかもです。

MarsEdit

Mars Edit

http://www.red-sweater.com/marsedit/

WordPressやTumblrなどに対応したブログエディタアプリ。画像のアップロードがエディタへのドラッグ&ドロップだけで完了したり、書いている内容がリアルタイムでプレビューできたり、WordPressの「面倒だな」と感じているところがすべて解決できます。

Transmit

transmit

https://panic.com/jp/transmit/

Codaと同じくPanic社が開発したFTPクライアントソフト。なんといっても転送のスピードが速い!大量のアップロードやダウンロードでも待ち時間がなく、効率的に作業が行えます。ローカルファイルとの同期設定も細かく指定可能。

Adobe Creative Cloud

Adobe Creative Cloud

http://www.adobe.com/jp/creativecloud.html

Webデザインに必須の定番ソフトが月額料金で使えるアドビのサービス。Webデザイナーがもっとも使うのはPhtoshopとIllustratorだと思うのですが、この2つがセットになった割安なプランはないため「コンプリートプラン」を選択するか、それぞれ単体プランで申し込むしかないのが悩ましいところです。

ColorSnapper

ColorSnapper

http://www.colorsnapper.com/

Macの画面のどんなところにある色でも、16進数のカラーコード(#ffffffなど)で取得してくれるアプリ。この色いいなと思ったときに、スクリーンショットを撮ってPhotoshopで開いてカラーピッカーで確認、という手間がなくなります。

xScope

xScope

http://xscopeapp.com/

WEBデザイナーなら誰しも一度はMacの画面に定規を当てたことがあると思います。このアプリは画面上に定規(ルーラー)を表示したり、水平・垂直のガイドラインやカラーピッカーを使うことができます。ピクセル単位でキッチリと考えて設計しておくと、結果としてシンプルなマークアップが行えます。

FontPreview

FontPreview

https://itunes.apple.com/jp/app/fontpreview/id537580561?mt=12

複数のフォントをプレビュー表示することができるアプリ。気がつくとどんどん増えてしまうフォントも、これがあれば簡単に確認できるのでデザインを作るときに役立ちます。

Quick Res

Quick Res

http://www.quickresapp.com/

ディスプレイの解像度を自由に変えられるアプリ。MacBook Air 11インチの狭い画面でも、フルHD(1920×1080)にワンクリックで変更できるので、レイアウトの確認やドラッグ&ドロップの作業が捗ります。小さな文字はつぶれがちだけど、なんとか判読可能なレベルです。

Window Magnet

Window Magnet

https://itunes.apple.com/jp/app/window-magnet/id441258766?mt=12

画面上に開いているウィンドウをキレイにリサイズしてくれるアプリ。キーボードからのショートカットキー操作や画面隅へのウィンドウドラックで素早くリサイズしてくれるので、ひとつずつカーソルを合わせてサイズを調整する手間が省けます。

JPEGmini

JPEG mini

http://www.jpegmini.com/

JPEG画像をキレイなまましっかりと圧縮してくれます。ブロードバンドが普及したとはいえ、クライアント先に完成したサイトを見せたときに「なんか重くない?」と言われるとWebデザイナーとしては冷や汗もの。軽くできるものは軽くしておきたいです。

Atok for 2014 mac

Atok for 2014 mac

http://www.justsystems.com/jp/products/atokmac/

日本語入力ソフト。Mac標準の「ことえり」やGoogleが提供している無料の「Google 日本語入力」もありますが、変換精度や省入力の便利さでATOKを使い続けています。「あり」だけ入れてTabキーを押すと「ありがとうございます」が候補に出る等、素早い日本語入力には欠かせません。

Poedit

poedithttp://poedit.net/

WordPressのテーマやプラグインの翻訳ファイルである「.mo」ファイルを手軽に作成することができます。日本語になっている方が安心感があるし、誤操作も防げるので早い段階で日本語化をしておきたいです。しっかりと日本語化できたら、オリジナルの制作者へ翻訳ファイルを渡すと喜ばれると思います。

A Better Finder Rename

A Better Finder Rename

http://www.publicspace.net/ABetterFinderRename/

複数のファイル名を一括でリネームすることができるアプリ。ファイル名をクライアント先のルールに合わせる必要があるときなどに役立ちます。19.95ドルするアプリのため、ファイル名を変えるだけと考えると高い印象ですが、単純作業を軽減してクリエイティブに集中するための投資と考えれば損はないハズです。

Astro for Facebook Messenger

Astorhttp://astroim.com/

Facebookメッセンジャーアプリ。Facebookをブラウザで立ち上げているとメッセージ以外の通知が気になったり、音が鳴ったりして集中を阻害されるので、専用アプリはオススメです。絵文字やグループへの投稿にも対応しています。

Dialogue

Dialogue

http://www.getdialogue.com/

iPhoneやAndroidスマホとMacをBluetoothで接続し、電話の着信や発信ができるアプリ。作業に夢中になるあまり、スマホに着信があったのに気づかなかったということを防げます。最新のMac OSX YosemiteとiOS8でも同様のことが実現できますが、このアプリならAndroidも対応しています。

ClipMenu

ClipMenu

http://www.clipmenu.com/ja/

コピー&ペーストの機能を拡張するアプリ。複数個のコピーを記憶できるのと、記憶している内容を一気にペーストできるので、「たくさんのタブで開いたWebサイトの内容をひとつのテキストファイルへコピーする」といったときに、コピー&ペーストを繰り返さなくてすみます。

Ember

Ember

http://realmacsoftware.com/ember

お気に入りのWEBサイトのスクリーンショットをスクラップブック的に保存してくれるアプリ。気になるサイトはどんどん保存しておけば、アイデアのストックとして使えます。カテゴリ分けやタグ付けをして整理しやすく便利です。

f.lux

flux

https://justgetflux.com/

目に悪い影響を与えると言われている、ブルーライトを軽減してくれるアプリ。Macの位置情報から日照時間を計算して、昼間は通常の色、夜になるにつれてより赤みがかった色といった風に自動的に変更してくれるため、一日中部屋の中で作業していても日照を意識できる効果もあります。

Chill

chill

https://itunes.apple.com/jp/app/chill/id421696351?mt=12

メニューバーから各種の環境音をBGMとして再生することができます。集中力を高めるのに効果のありそうなホワイトノイズなどのノイズ系や、波音や川の音などの自然音まで。BGM再生時間をタイマー設定することも可能なので、定期的に休憩を挟みつつ作業することができます。

BetterTouchTool

BetterTouchTool

http://www.bettertouchtool.net/

ジェスチャー操作やキーボードショートカットを柔軟に設定できるアプリ。個人的にはGoogle Chormeの「次のタブに移動する」ためのショートカットキーが「Option+Command+矢印キー」という、指が完全にホームポジションから離れる操作だったのを解決できたので助かっています。

LibreOffice

Libre Office

https://ja.libreoffice.org/

クライアントからの作業指示がエクセルファイルでやってきたとき、アップルの「Numbers」より、こちらのアプリの方が再現性が高い気がします。ほかにも、WordやPowerPointと互換性のあるアプリが入った無料のオフィススイートです。

Pages

Pages

https://www.apple.com/jp/mac/pages/

MacのWordソフトという位置づけですが、用意されているレイアウトテンプレートが非常に充実しており、企画の提案書や請求書などを手軽にオシャレなデザインにして説得力のある内容で作ることができます。

OneDrive

OneDrive

https://onedrive.live.com/about/ja-jp/

クラウドにデータを保存するという点だけだと他サービスの方がコスト的に優れていますが、OneDrive上に保存してあるデータは「Excel Online」などのクラウドオフィスアプリで閲覧・編集できるため、オフィス系ファイルを扱うことがあればOneDriveもオススメです。

MacWinZipper

MacWinZipper

http://tidajapan.com/macwinzipper

Mac標準の「圧縮」機能を使って圧縮したファイルをWindowsユーザーが解凍すると、ファイル名が文字化けしていたり余計なファイルが含まれることがあります。MacWinZipperを使えばWindowsでも安心な圧縮ファイルが作れるので、「納品してもらったデータが開けません」という問い合わせを削減できます。

RankGuru SEO

RankGuru SEO

https://itunes.apple.com/jp/app/rankguru-seo/id662946309?mt=12

WebサイトのURLと、調べたい検索キーワードを設定すると、そのキーワードでGoogleやBing、Yahoo!の検索順位が何位なのかを表示してくれるアプリ。一朝一夕では上位に上がるのが難しいSEOですが、こういったツールがあると励みになります。

ProCSSor

ProCSSor

https://itunes.apple.com/jp/app/procssor/id496118569?mt=12

マークアップを手作業で続けていると、CSSファイルの書式がバラバラになってくることがあります。もちろんそのままでも正しく動作はしますが、他のメンバーと共同で作業するときや納品先にソースファイルをチェックするのが好きな人がいるときはこのアプリ。CSSの書式を見やすくキレイに整えてくれます。

VERSIONS

versions

http://versionsapp.com/

バージョン管理のためのSubversionクライアントアプリ。自分のサイトだけを作っているころにはバージョン管理という概念は意識しないかもですが、チームで制作したり作業を請け負ったりするときには「誰が」「いつ」「何を変更したか」を記録しておくために、バージョン管理が大切になります。GUIで分かりやすいアプリです。

Parallels Desktop 10 for Mac

Parallels

http://www.parallels.com/jp/products/desktop/

MacでWindowsを動かそうとすると、アップル純正のBOOTCAMPや、Mac OSを起動したまま使える仮想化ソフトがいろいろありますが、Parallelsは安定感と速度で少しだけ勝っているように思えます。Windowsそのものが求める記憶容量が大きいため、Macの記憶容量をかなり使ってしまうのが難点です。

sauce for mac

sauce for mac

https://saucelabs.com/mac

WebデザイナーとしてはChoromeやFirefoxを使って欲しいのに、クライアント先のPCはWindows7でInternet Explorer8だなんてことはよくあります。このアプリがあればMac上でさまざまなOSやブラウザの見え方がチェックできます。もちろん、正確な表示は実機で見るのが一番です。

Xcode

Xcode

https://developer.apple.com/jp/xcode/

本来はiOSアプリ作るためのアプリですが、iPhoneやiPadのシミュレーターとして使うことが可能なので、iOS版 Safariでの表示確認が手軽に行えます。機能が満載のため、2GB以上の空き容量を必要なのがMacBook Air等では少々つらいところです。

さいごに

いかがでしたでしょうか?Webデザイナーというのはマークアップもあれば画像の加工もあって、幅広い知識と技術が求められます。クライアントからの依頼や納期に翻弄されることもあります。だけど、Web業界の一番グローバルなコンテンツを作っている存在がWebデザイナーです。これからも自信を持って楽しんで制作を続けましょう!

本サイトが運営するWebデザインのオンラインスクールが公開中!
以下のリンクからお申込みで、特別料金の70%OFF!

未経験からプロのWebデザイナーになる! 400レッスン以上の完全マスターコース
こちらのコースは全くの未経験の方が、プロのWebデザイナーとして働けるレベルになることを目的としたコースです。
・全422レッスン & 42時間! 通学スクール80万円相当の内容
・授業×チャレンジ課題で実践的なスキルが身につく!
・過去1100名以上のスクール卒業生を輩出した、 Webサービス運営企業・デザイナー輩出企業だからこそ作れるプログラム

Webやアプリの最新デザインツール Sketch3 |100レッスンの完全マスターコース
Sketch3未経験からプロレベルを目指す、充実したコースです。
Sketch3の単なる機能説明をするような、つまらないコースではなく、アイコン制作、ボタン作成、メインビジュアル制作、Webページの制作など、実際の制作をしながら実践力を身につけます。
1000名以上の卒業生がいる実績ある日本のWebデザインスクールが提供しています。


NESTonlineBlog編集部

NESTonlineBlog編集部です。ご寄稿頂いた記事などを公開していきます。

Next Article【Illustrator】自分だけのオリジナルパターンブラシを作る方法