• Home
  • twitter
  • Facebook Page
  • google+
  • RSS
  • follow us in feedlyfeedly
  • Contact Form
OPEN
2013/01/31

Macユーザの私がWeb制作を行う上で使用しているアプリ・ツール・サービス・ブックマークレットなどのまとめ

Web制作に使用しているツールまとめ
昨年より、5年間やっていたDTPの部署からWeb制作の担当と相成った私。
正直、まだまだお勉強中のWeb制作なのですが、ちょいとここいらで今自分が使用しているアプリ・ツール・サービスなどをまとめておこうと思います。


デザインに使用しているアプリ

まずはデザインに使用しているアプリ。

Adobe Photoshop・Illustrator

Skitched 20130131 005213
デザインに使用しているのはAdobeのPhotoshopとIllustrator。(CS5)

 

Photoshopスクリーンショット
DTPのころから使っているので非常に慣れているのはいいのですが、おかげさまで新しい環境に飛び込む勇気がなく、いつか覚えようと思っているFireworksに手を出す時間がございません。
まぁそのうち…うん…。

どんな風にIllustratorやPhotoshopを使用しているのかは、以下の記事をごらんくだしあ。

これが出来れば中級者!Illustrator初心者のための「ロゴ作成講座」
画像をコミカルに加工しよう!Photoshopなどで集中線を描く方法!
[Photoshop]OS XやiOSでよく見る布のテクスチャ上にロゴを乗っけて自分用のiPhone5壁紙を作成してみたので手順メモ

 

コーディング

Sublime Text

コーディングに使用しているのは主に高機能が売りのテキストエディタ「Sublime Text」

 

Sublime Text 2スクリーンショット
美しいビジュアル面はもちろんですが、そのカスタマイズ性の高さ、ショートカットの豊富さなどで私もメロメロになってしまいました。もう…戻れないの…あの頃には…
なんかSublime Text 3のベータ版が登場したりしているので今後にも注目なのです。

高機能テキストエディタ「Sublime Text 2」をDLしてみた&導入したプラグイン

 

Dreamweaver

Dreamweaver
「あの頃」使っていたエディタ(?)。
現在ほとんど使うことはないのですが、imgにMapを埋め込む際と、tableを弄る時にはこちらの方がよろしいのでたまに使用しています。

 

TextExpander

TextExpander

スニペットと呼ばれる省略形を打ち込むことでそれに対応する定型文を入力してくれるアプリ、TextExpander。
様々なコードを登録してありますので、コーディングには欠かす事の出来ないアプリです。

[動画あり]快適な文字入力には絶対に欠かせないアプリ、TextExpanderで使用中のスニペットをまとめてみた

価格: ¥3,000 (記事公開時)
カテゴリ: 仕事効率化

FTPクライアント

FTPのクライアントは「Transmit」を使用中。

 

Skitched 20130131 011716
以前はCyberduckやForkLiftを使用していたのですが、どうも私の環境では安定性が悪く…いろんな方にお勧めされたTransmitに乗り換えたところこれが快適。おかげで自家用車もトラックになりました。免許無いけど。

価格: ¥2,950 (記事公開時)
カテゴリ: 仕事効率化


 

その他便利アプリ

CSS3 Toolkit

CSS3 Toolkit
グラデーションやBox Shadowなど、CSS3でのデコレーションをするためのコードを吐き出してくれるアプリ。「CSS3 ジェネレーター」にわざわざアクセスするまでもない時にはこちらを使用しています。
超簡単にCSS3スタイルの作成&コード生成をしてくれる「CSS3 ジェネレーター」まとめ

価格: ¥250 (記事公開時)
カテゴリ: グラフィック&デザイン

 

Sauce

Sauce
Mac OS上でWin IEを始めとする様々なブラウザでのチェックができるアプリ「Sauce」。Parallels Desktopなどの起動を必要とせず、簡単なWin環境でのブラウザチェックが出来てしまうシロモノです。

Webデザイナー・コーダー必見の神アプリ!MacでWindows IEなどのブラウザチェックが出来る「Sauce」が便利すぎてヤバイ

価格: 無料 (記事公開時)
カテゴリ: 開発ツール

 


LiveReload

LiveReload
htmlやcssを保存した時に自動でブラウザをオートリロードしてくれる「LiveReload」。ブラウザでのチェック時、リロードという一手間を省くことが出来て地味に便利。
詳しくはSou-Lablogさんの以下の記事をどうぞ。最近貢ぎ物が無いので悲しいです。

サイト作成にLiveReloadはあると捗る。【Win】 | Sou-Lablog

 

Paparazzi!

Paparazzi!
Webページのスクリーンショットが簡単に撮れるアプリ、それが「Paparazzi!」
作業内容を上司に見せる時なんかに使っております。割と使用頻度高し。
無料です:)

[Mac]Webページのスクリーンショットが簡単に撮れるアプリ「Paparazzi!」が便利

 

Evernote

Evernote
Web制作においての私のEvernoteの使い方は、素敵なデザインをクリップしたり、使えそうな素材を紹介したサイトを保存しておくなど、主にWebクリップが中心。
[Evernote]超具体的使用例!ノート総数「12800」現在の私のノートブック晒し

 

Webサービス・ブックマークレットなど

最後はWebサービスやブックマークレットなど。Winでも使えるね!やったね!

Snippi

Snippi
まずはよく使うコード類をまとめて管理&共有できるサイト、「Snippi」
サイト作成の際に毎度使うような頻度の高いコードをまとめて置いてあります。

Snippi

 

XRAY

XRAY
超絶簡単にCSSプロパティを確認できるブックマークレット、「XRAY」。
Firebugを起動するまでもねえ!みたいな時に大活躍です。

WebページのCSSプロパティ・値をワンクリックで表示してくれるブックマークレット「XRAY」が神便利!!



そんなわけで、現在私がWeb制作の際に使用しているツールのまとめでした。もっと色々便利なツールを勉強して、効率の良い作業をしてみたいものです:)

関連:超簡単にCSS3スタイルの作成&コード生成をしてくれる「CSS3 ジェネレーター」まとめ
関連:デザイナーの私が色選択に迷った時に使用している配色ツール・カラーチャートなどのまとめ
関連:無料!Web・DTPデザインに大活躍してくれる、私がよく使用している写真、Web用素材・テクスチャ・イラスト配布サイト15選!

SPONSORED LINK

FB Comments

About This Site

Mac,iPhone,Evernote,Web,Foodを中心に様々な情報をお届けするブログです。
ふざけた文体が目につきますが、本人はいたってふざけております。
ご意見・ご感想は info[at]ozpa-h4.com もしくはコンタクトフォームまでどうぞ。
広告掲載、執筆、取材などの依頼も受け付けております。
さらに詳しく

SNS

×