こんにちは、Misocaマーケティングチームの多川（たがわ）です。
今日は私がスタンドファームにジョインする前の「フリーランス時代」（と、その前のウェブ制作会社時代）から培ったウェブ制作のワークフローをご紹介しつつ、各フローをこなすために実際に使っていて、今も使っているアプリやウェブサービスやツールをご紹介したいと思います。
タイトルに「厳選」とつけたのは、私自身が実際にいろいろなアプリやウェブサービスを使ってみて、「この作業をするときはこれが一番使いやすい！」というものだけが今も使い続けているアプリ・ウェブサービスですので、どれも胸を張ってご紹介できるものばかりだからです！
37個と少々多いですが、ど定番なMicrosoft OfficeやAdobe製品もカウントすると37個になってしまいました。
とはいえ、マイナーなアプリ・ウェブサービスや恐らく私しか使っていないアプリ・ウェブサービスもありますので、新しいアプリ・ウェブサービスが見つかって興味を持っていただいたり、「私も便利に使っている！便利だよね！」といった感想を持っていただけたらうれしく思います。
ウェブ制作のワークフロー
まずはじめに、私の場合のウェブ制作のワークフローをご紹介します。
といっても、特殊なことはしていないので、多少の違いはあるかと思いますが、一般的なワークフローとそれほど大きな違いはないかと思います。
- 企画、提案、見積もり、設計
- 制作、開発
- お客様校正
- 公開、納品、請求
以下では各フローで使うアプリやウェブサービスを順番にご紹介しつつ、いくつかのアプリ、ウェブサービスについては補足説明をしていきます。
0. PCと周辺機器
ワークフローとは関係がありませんが、制作に使っているPCと周辺機器をご紹介しておきます。
- PC:
- MacBook Pro 13インチ Retinaディスプレイモデル
- セカンドディスプレイ:
- 三菱の23インチ液晶ディスプレイ
- 周辺機器:
- Apple Wireless Keyboard、Magic Trackpad、Apple Magic Mouse
MacBook Pro 13インチ Retinaディスプレイ
Apple Wireless Keyboard (US)
Apple Magic Trackpad
Apple Magic Mouse
1. 企画、提案、見積もり、設計
- 提案書:
- PowerPoint
- 見積書:
- Misoca、Excel
- サイトマップ:
- PowerPoint
- コンテンツリスト:
- Excel、Googleスプレッドシート
- ワイヤーフレーム:
- OmniGraffle
- 参考サイトのピックアップ:
- ランディングページ集めました、イケサイ
- ダミーテキスト生成:
- ダミーテキストジェネレータ
提案書について
提案書作成にはKeynoteやOmniGraffleも使ってみましたが、A4サイズでプリントアウトすることを考えるとPowerPointがなんだかんだで一番使いやすいです。
Keynoteはプロジェクターに映してプレゼンをする場合にはとてもいいですが、紙の資料には向かないなぁと思いました。
参考
無料配布！私がフリーランス時代に作ったウェブサイトリニューアルの提案書を公開します！
見積書について
見積書にExcelを含めているのは、私がフリーランスになったばかりの頃にはMisocaはまだリリースされていなかったので、Excelで見積書を作っていました。
今はMisocaがあるので、今、見積書を作らないといけなくなったら迷わずMisocaを使います！
今すぐMisocaを使ってみる
サイトマップについて
サイトマップはなんだかんだでPowerPointが一番描きやすいです。KeynoteやOmniGraffle、CacooやMockingbirdは個人的にはイマイチでした。
コンテンツリストについて
サイトマップがPowerPointでA4一枚に収まらない場合には、ExcelやGoogleスプレッドシートでコンテンツリスト（コンテンツを網羅した一覧表）を作る場合があります。
これもフリーランス時代に使っていたテンプレートがありますので、機会を改めてご紹介したいと思います。
ワイヤーフレームについて
ワイヤーフレームの作成にはFireworks、Cacoo、Mockingbirdなどいろいろ試してみましたが、OmniGraffleが一番しっくりきたので愛用しています。
参考サイトのピックアップについて
サイトのデザインについてクライアントとイメージのすり合わせをするために、参考サイトをいくつかピックアップしてそれをクライアントと一緒に見ながらイメージのすり合わせをすることがあります。
参考サイトのピックアップにはランディングページの場合はランディングページ集めました、一般的なウェブサイトの場合はイケサイなどで探します。
あとはクライアントの同業種のサイトをGoogleで検索して探したりもします。
ダミーテキスト生成について
ワイヤーフレームを作っていて、まだページ構成や原稿をどうするか決まっていないときにアタリの文章を入れることがあります。
この「アタリの文章」の生成には自分で作ったダミーテキストジェネレータというサービスを使っています。文字数を指定したり、CMSから出力されることを想定して文章の末尾がトリミングされて「…」になるような場合にも対応しているのでとても便利ですよ！（自画自賛）
2. 制作、開発
- デザイン:
- Adobe Photoshop、Adobe Illustrator、Adobe Fireworks
- HTML、CSS、JavaScript制作:
- Adobe DreamWeaver、Coda 2、ImageOptim
- Flashオーサリング:
- Adobe Flash
- CMS:
- WordPress、Movable Type
- メールフォームシステム:
- TransmitMail
- Gitクライアント:
- SourceTree
- Gitリポジトリ:
- BitBucket
- グループウェア:
- サイボウズLive
- タスク管理:
- サイボウズLive、BitBucket
- チャット（文字、音声、ビデオ）:
- Skype、チャットワーク、Slack
- ブラウザ動作検証:
- VMWare Fusion、modern.IE、iOS Simulator（Xcodeに含まれているアプリ）、Android SDK
- その他開発用:
- git、MAMP、Hoster
デザインについて
私はデザイン制作をしないのですが、私の妻がデザイナーで、妻はAdobe Photoshopを使ってウェブのデザイン制作をしています。デザイン制作を別の会社が担当する場合は、PhotoshopではなくFireworksで作ったデータを貰うこともありました。
まぁAdobe製品については特に説明は必要ないですよね。
エディタについて
昨今はSublime Textがとても人気ですし、Github社が開発しているAtomも徐々に人気が出ているようですが、私はPanic社のCoda 2を愛用しています。
Coda 2が好きな理由は以前、個人のブログに書きましたので、よろしければそちらもご参照ください。
参考
私がSublime Textに乗り換えずにCodaを使い続けている理由 | どうのこうの
TransmitMailについて
CMSを導入しないサイトでお問い合わせフォームは導入したい、といった場合には自作のTransmitMailというメールフォームシステムを使います。CMSを導入する場合はCMS自体やプラグインのメールフォームを使ったほうがいいかと思いますが、そうじゃなくて「全ページ静的だけどお問い合わせフォームは欲しい！」みたいな時にはTransmitMailは便利だと思います！（自画自賛、二回目！）
TransmitMailはHTMLやCSSをかなり自由に組むことができるので、大抵のどんなデザインのメールフォームにも対応できるのも特徴の一つです。プログラムを書くことなくメールフォームを設置できるので、プログラムが苦手なウェブデザイナーさんやマークアップエンジニアさんにぜひ使って欲しいメールフォームシステムです！
3. お客様校正
FTPクライアントについて
MacのFTPクライアントといえばCyberduckが有名ですが、Cyberduckは不安定でよく落ちることがあったので、私はTransmitを愛用しています。
TransmitはWindowsのFFFTPと同じツーペインなUIで、FFFTPの「ミラーリング機能」と同様の機能が備わっていますので、WindowsではFFFTPを使っていた方にもオススメです。
Basic認証について
まだ一般公開したくないサイトで、簡易的な認証方法としてBasic認証をつけたい場合があります。
そんなBasic認証用のコードを生成するのはBasic認証コードジェネレータが便利です。これも自分で作ったウェブサービスですが、めちゃ便利ですよ！（自画自賛、三回目！）
4. 公開、納品、請求
- サーバー:
- さくらのレンタルサーバー、heteml、CPI
- ドメイン管理:
- VALUE DOMAIN
- 請求書:
- Misoca、Excel
- 納品書:
- Misoca、Excel
- 納品資料:
- Excel
レンタルサーバーとドメイン管理について
私がサーバーを手配することは少なかったですが、手配する場合はさくらのレンタルサーバーかhetemlかCPIのどれかを使うことが多かったように思います。
ドメイン管理には個人的にVALUE DOMAINが好きでよく使っています。
納品資料について
納品時にFTPやCMSのログイン情報を記載した資料をお客様にお渡ししていました。この資料はExcelで作っていましたので、また機会を改めてご紹介できればと思っています。
まとめ
いかがでしょうか？ど定番なものもたくさんあったかと思いますが、新しいアプリやウェブサービスの発見になれば嬉しく思います。（特に私が自分で作ったWeb制作小物ツールとか。）
「私もこのアプリ使ってます！便利ですよね！」といった感想や、「そのアプリよりこのアプリの方がオススメですよ！」といった情報などありましたら、 @seikyu_misoca までお気軽にご連絡ください。
