請求書サービスMisoca

フリーランス必見!私がフリーランス時代のウェブ制作に実際に使っていた厳選アプリ・ウェブサービス37選

こんにちは、Misocaマーケティングチームの多川(たがわ)です。

今日は私がスタンドファームにジョインする前の「フリーランス時代」(と、その前のウェブ制作会社時代)から培ったウェブ制作のワークフローをご紹介しつつ、各フローをこなすために実際に使っていて、今も使っているアプリやウェブサービスやツールをご紹介したいと思います。

タイトルに「厳選」とつけたのは、私自身が実際にいろいろなアプリやウェブサービスを使ってみて、「この作業をするときはこれが一番使いやすい!」というものだけが今も使い続けているアプリ・ウェブサービスですので、どれも胸を張ってご紹介できるものばかりだからです!

37個と少々多いですが、ど定番なMicrosoft OfficeやAdobe製品もカウントすると37個になってしまいました。

とはいえ、マイナーなアプリ・ウェブサービスや恐らく私しか使っていないアプリ・ウェブサービスもありますので、新しいアプリ・ウェブサービスが見つかって興味を持っていただいたり、「私も便利に使っている!便利だよね!」といった感想を持っていただけたらうれしく思います。

ウェブ制作のワークフロー

まずはじめに、私の場合のウェブ制作のワークフローをご紹介します。

といっても、特殊なことはしていないので、多少の違いはあるかと思いますが、一般的なワークフローとそれほど大きな違いはないかと思います。

  1. 企画、提案、見積もり、設計
  2. 制作、開発
  3. お客様校正
  4. 公開、納品、請求

以下では各フローで使うアプリやウェブサービスを順番にご紹介しつつ、いくつかのアプリ、ウェブサービスについては補足説明をしていきます。

0. PCと周辺機器

ワークフローとは関係がありませんが、制作に使っているPCと周辺機器をご紹介しておきます。

PC:
MacBook Pro 13インチ Retinaディスプレイモデル
セカンドディスプレイ:
三菱の23インチ液晶ディスプレイ
周辺機器:
Apple Wireless KeyboardMagic TrackpadApple Magic Mouse

MacBook Pro RetinaディスプレイMGX72J/A 2600/13.3
MacBook Pro 13インチ Retinaディスプレイ

Apple Wireless Keyboard (US) MC184LL/B
Apple Wireless Keyboard (US)

Apple Magic Trackpad MC380J/A
Apple Magic Trackpad

Apple Magic Mouse MB829J/A
Apple Magic Mouse

1. 企画、提案、見積もり、設計

提案書:
PowerPoint
見積書:
Misoca、Excel
サイトマップ:
PowerPoint
コンテンツリスト:
Excel、Googleスプレッドシート
ワイヤーフレーム:
OmniGraffle
参考サイトのピックアップ:
ランディングページ集めましたイケサイ
ダミーテキスト生成:
ダミーテキストジェネレータ

提案書について

提案書作成にはKeynoteOmniGraffleも使ってみましたが、A4サイズでプリントアウトすることを考えるとPowerPointがなんだかんだで一番使いやすいです。

Keynoteはプロジェクターに映してプレゼンをする場合にはとてもいいですが、紙の資料には向かないなぁと思いました。

参考

無料配布!私がフリーランス時代に作ったウェブサイトリニューアルの提案書を公開します!

見積書について

見積書にExcelを含めているのは、私がフリーランスになったばかりの頃にはMisocaはまだリリースされていなかったので、Excelで見積書を作っていました。

今はMisocaがあるので、今、見積書を作らないといけなくなったら迷わずMisocaを使います!

今すぐMisocaを使ってみる

サイトマップについて

ウェブ制作の厳選アプリ・ウェブサービス36選_サイトマップ

サイトマップはなんだかんだでPowerPointが一番描きやすいです。KeynoteOmniGraffleCacooMockingbirdは個人的にはイマイチでした。

コンテンツリストについて

サイトマップがPowerPointでA4一枚に収まらない場合には、ExcelやGoogleスプレッドシートでコンテンツリスト(コンテンツを網羅した一覧表)を作る場合があります。

これもフリーランス時代に使っていたテンプレートがありますので、機会を改めてご紹介したいと思います。

ワイヤーフレームについて

OmniGraffle - The Omni Group

ワイヤーフレームの作成にはFireworks、CacooMockingbirdなどいろいろ試してみましたが、OmniGraffleが一番しっくりきたので愛用しています。

参考サイトのピックアップについて

サイトのデザインについてクライアントとイメージのすり合わせをするために、参考サイトをいくつかピックアップしてそれをクライアントと一緒に見ながらイメージのすり合わせをすることがあります。

参考サイトのピックアップにはランディングページの場合はランディングページ集めました、一般的なウェブサイトの場合はイケサイなどで探します。

あとはクライアントの同業種のサイトをGoogleで検索して探したりもします。

ダミーテキスト生成について

ダミーテキストジェネレータ  Web制作小物ツール - dounokouno.com

ワイヤーフレームを作っていて、まだページ構成や原稿をどうするか決まっていないときにアタリの文章を入れることがあります。

この「アタリの文章」の生成には自分で作ったダミーテキストジェネレータというサービスを使っています。文字数を指定したり、CMSから出力されることを想定して文章の末尾がトリミングされて「…」になるような場合にも対応しているのでとても便利ですよ!(自画自賛)

2. 制作、開発

デザイン:
Adobe Photoshop、Adobe Illustrator、Adobe Fireworks
HTML、CSS、JavaScript制作:
Adobe DreamWeaver、Coda 2ImageOptim
Flashオーサリング:
Adobe Flash
CMS:
WordPressMovable Type
メールフォームシステム:
TransmitMail
Gitクライアント:
SourceTree
Gitリポジトリ:
BitBucket
グループウェア:
サイボウズLive
タスク管理:
サイボウズLiveBitBucket
チャット(文字、音声、ビデオ):
SkypeチャットワークSlack
ブラウザ動作検証:
VMWare Fusionmodern.IE、iOS Simulator(Xcodeに含まれているアプリ)、Android SDK
その他開発用:
git、MAMPHoster

デザインについて

私はデザイン制作をしないのですが、私の妻がデザイナーで、妻はAdobe Photoshopを使ってウェブのデザイン制作をしています。デザイン制作を別の会社が担当する場合は、PhotoshopではなくFireworksで作ったデータを貰うこともありました。

まぁAdobe製品については特に説明は必要ないですよね。

エディタについて

Coda

昨今はSublime Textがとても人気ですし、Github社が開発しているAtomも徐々に人気が出ているようですが、私はPanic社のCoda 2を愛用しています。

Coda 2が好きな理由は以前、個人のブログに書きましたので、よろしければそちらもご参照ください。

参考

私がSublime Textに乗り換えずにCodaを使い続けている理由 | どうのこうの

TransmitMailについて

TransmitMail サンプル

CMSを導入しないサイトでお問い合わせフォームは導入したい、といった場合には自作のTransmitMailというメールフォームシステムを使います。CMSを導入する場合はCMS自体やプラグインのメールフォームを使ったほうがいいかと思いますが、そうじゃなくて「全ページ静的だけどお問い合わせフォームは欲しい!」みたいな時にはTransmitMailは便利だと思います!(自画自賛、二回目!)

TransmitMailはHTMLやCSSをかなり自由に組むことができるので、大抵のどんなデザインのメールフォームにも対応できるのも特徴の一つです。プログラムを書くことなくメールフォームを設置できるので、プログラムが苦手なウェブデザイナーさんやマークアップエンジニアさんにぜひ使って欲しいメールフォームシステムです!

3. お客様校正

FTPクライアントについて

パニック - Transmit - Mac OS X FTP + SFTP + S3 アプリケーションの完成形

MacのFTPクライアントといえばCyberduckが有名ですが、Cyberduckは不安定でよく落ちることがあったので、私はTransmitを愛用しています。

TransmitはWindowsのFFFTPと同じツーペインなUIで、FFFTPの「ミラーリング機能」と同様の機能が備わっていますので、WindowsではFFFTPを使っていた方にもオススメです。

Basic認証について

Basic認証コードジェネレータ  Web制作小物ツール - dounokouno.com

まだ一般公開したくないサイトで、簡易的な認証方法としてBasic認証をつけたい場合があります。

そんなBasic認証用のコードを生成するのはBasic認証コードジェネレータが便利です。これも自分で作ったウェブサービスですが、めちゃ便利ですよ!(自画自賛、三回目!)

4. 公開、納品、請求

サーバー:
さくらのレンタルサーバーhetemlCPI
ドメイン管理:
VALUE DOMAIN
請求書:
Misoca、Excel
納品書:
Misoca、Excel
納品資料:
Excel

レンタルサーバーとドメイン管理について

私がサーバーを手配することは少なかったですが、手配する場合はさくらのレンタルサーバーhetemlCPIのどれかを使うことが多かったように思います。

ドメイン管理には個人的にVALUE DOMAINが好きでよく使っています。

納品資料について

納品時にFTPやCMSのログイン情報を記載した資料をお客様にお渡ししていました。この資料はExcelで作っていましたので、また機会を改めてご紹介できればと思っています。

まとめ

いかがでしょうか?ど定番なものもたくさんあったかと思いますが、新しいアプリやウェブサービスの発見になれば嬉しく思います。(特に私が自分で作ったWeb制作小物ツールとか。)

「私もこのアプリ使ってます!便利ですよね!」といった感想や、「そのアプリよりこのアプリの方がオススメですよ!」といった情報などありましたら、 @seikyu_misoca までお気軽にご連絡ください。

請求書サービスMisoca
やよいの青色申告オンライン
フリーランスブック

ビジネステンプレート

経理の教科書

人気記事

便利な見積項目リスト

最新記事

カテゴリ