WordPressでのWeb制作の見積金額は? 見積ワークショップ開催レポート #WordFes

みなさんこんにちは。Misocaのトヨシです。

8月29日に開催されたWord Fes Nagoya 2015(http://2015.wordfes.org/ )というWordPressのイベントで「WordPressを用いたWeb制作の見積ワークショップ」を開催しました。とても好評なワークショップになりましたので今回はそのレポートをお届けします。

25人ほどの方に参加して頂き、こちらが用意した架空の案件についてWordPressを使った場合の見積を作って皆で発表しました。

このワークショップの目的

Web制作の見積は難しいです。
同じページ数の案件でも、相手の予算や納期、利用者数などで大きく変わってきます。

Web制作の見積で金額に関する正解は一つではありません。しかし、ワークショップを通じて、他の人からやり方や考え方を学ぶことができるのではないかと思い企画をしました。

また、Misocaを提供する会社としてMisocaで提供している「作る仕組み」以外に、「どう考えるか」というところもサポートできればという思いも込められています。

今回の架空案件

今回は街の内科・外科クリニックの案件にしました。誰もが知っていて、サイトの規模が大きすぎない案件がいいという点からの選択です。
サイトのページ数としては10ページ程度です。

ガイダンス

イベントの流れと、見積のコツについて少しお話させていただきました。私の方からは見積で大切なこととして

1.クライアントの目的を達成する
2.プロジェクトの優先順位をクライアントと明確にする(予算・品質・納期)
3.クライアントの要求を満たすものにする

という3つを紹介しました。

チーム分け

4人か5人でチームを作って取り組んでもらいました。チームの構成としては、未経験者だけのチームが出来ないようにだけ調整をしました。

見積タイム

いざ見積タイムです。

「有料の広告は出稿するの?」「写真撮影はプロに頼むの?」など、気にしだしたらキリがない部分がありますが、今回は価格を競うものではないので、各チームが勝手に仮定を作って見積をしていいことにしました。

それぞれのチームで

「へー、そこから順番に考えるんですね。うちとはちがうなあ」

とか

「時給で考えるんですか?日給で考えるんですか?」

などいろいろな意見交換がされ盛り上がりました。

発表

見積が終わったら各チームで発表です。

WordPressのイベントですので、どういったプラグインを使うのか、カスタマイズをするのかといったところから始まって、なにを重要視するのか、なにを見積に入れてなにを入れてないのかといった点について発表してもらいました。

各チームの見積

チーム名:コーダー命

見積金額:842,400円

チーム:KKSY

見積金額:702,000円

チーム:めがね

見積金額:655,560円

チーム:NTTYT

見積金額:378,000円

チーム:スティーブン

見積金額:939,060円

最優秀見積賞

発表後に皆で投票して一番納得感のあった見積を決めました。

結果は僅差でしたが「めがね」が最多得票を得、弊社からレッドブルが贈呈されました。

イベントの反省

・見積時間35分は短かった(みなさん頑張ってくださった)
・発表の時に話して欲しいポイントを決めておいたほうがやりやすかった
・見積用紙は下書き用を用意しておいたほうが良かった
・「どういう順番で考えた」などをメモしてもらったりすると面白かったかも

開催してみて

金額にはこだわらないと書きましたが、Web CreaterのWeb白書などによると、これぐらいの規模の案件だと、個人で20万円〜、法人で60万円〜で受注されることが多いようです。

みなさんが出してもらったものは30万円〜90万円程度で、ここからクライアントの必要なことと、そうでないことを調整していくと一般的な金額に収まるのだろうと感じました。

ワークショップ終了後には何人もの参加者から、他の人の見積のやりかたが聞けて参考になったという嬉しい声をもらえました。
作成した見積は会場の後ろに提示されていたのですが、参加者の方が他チームの見積書を見ながら感想を言い合うなど、皆さん最後まで熱心に参加してくださいました。

また案件を変えたりして、いろんな場でワークショップができればと思います。
もしワークショップ開催ご希望の方がいらっしゃったら是非ご連絡ください。

フリーランス必見!私がフリーランス時代のウェブ制作に実際に使っていた厳選アプリ・ウェブサービス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 までお気軽にご連絡ください。

便利なタスク、ToDo管理サービス「remember the milk」

rtm

沢山のスマートフォン用アプリがある中、シンプルで使いやすいタスク、ToDo管理サービス、リマインダを探している方におすすめのサービス「remember the milk」をご紹介します。

こんな課題を解決!

  • 使いやすいタスク管理サービス、リマインダを探している
  • 出先でスマフォに簡単にToDoを入力したい
  • 毎日見るものだからシンプルでかっこいいものがいい

特長・主な機能

rtm_page

  • 様々なタスク(ちょっとしたもの、重要なもの、当日など)に対応し、優先順位が付けられる
  • ほとんどの機能をスマフォで実行できる
  • 自然語入力、リピート入力に対応(今日ー>2013年2月3日、毎火曜日ー>毎週火曜日)メールの記述方法にも省略形が使える
  • 様々な言語用のAPIアプリのマッシュアップがいろいろある

iPhoneの画面

rtm_iphone

Googleカレンダーのマッシュアップ

google_clend

まとめ

見た目がとてもシンプルで、ウシのアイコンが可愛い愛すべきアプリ。
なんと2004年から開始され、今まで続いているのがすばらしい。

remember the milk
http://www.rememberthemilk.com/

チーム開発にフォーカスしたチャットサービス「idobata」

Idobata_top

開発者は作業の効率化のために、色々なサービスを利用しながら開発をしていますが、そんなニーズにフォーカスした開発者の井戸端会議グループチャット「idobata」をご紹介します。

こんな課題を解決!

  • 開発用の時に使う、軽くて早いチャットサービスを探している
  • 他の開発用サービスと連携したい
  • なるべく簡単にチャットの更新をチェックしたい

特長・主な機能

Idobata_singin

  • 速く、軽く、IRCライクなUI
  • デスクトップ通知(Google Chromeのみ)
  • iPhone対応
  • Gravatarでアイコンの表示
  • 無限にさかのぼれるログ

まとめ

使ってみると、インターフェースがシンプルでオシャレです。

また、人を招待するのが簡単で、Hooksには今時のテクノロジが並んでいるので開発者は気分よくチャットが出来そうです(開発者じゃなくても使いやすそうです)。

なお、idobataのWEBサイトに「※BETA期間中は無料でお試しいただけます」という表示があるので、今のうちに触って今後の検討をするといいかもしれません。

idobata
https://idobata.io/ja/home

チームの情報を共有するコラボレーションツール「co-meeting」

co-meeting_top

会議等のコミュニケーションを効率化して、
ビジネスに集中する時間を増やしたいとお考えの方は多いはず。
今回はそんな方におすすめのコラボレーションツール「co-meeting」をご紹介します。

こんな課題を解決!

  • 会議の出席メンバーの時間調整に苦労している
  • 議事録をスムーズに記録、共有したい
  • リアルタイムに計画を立てたり相談をしたい

特長・主な機能

co-meeting_pc

  • 全ての議論をそのまま記録
  • プロジェクトや組織ごとにメンバーを管理する階層がわかりやすいチャット
  • 欠席者にも会議内容が共有出来る

まとめ

使ってみるとわかるのですが、打ち込まれたことがどんどん送信されてくるのでChatWorkなどにくらべとてもライブ感があります。またChatWorkだとつい古い話が流れてしまうことがおおいのですが、co-meetingではスレッド構造になっていたり、チャットルームの扱いが会議単位前提になっているなど使い勝手のよさを感じます。

co-meeting
https://www.co-meeting.com

無料のクラウド型ビジネスチャットツール「ChatWork」

chatwork_top

毎日の仕事のやり取りで、メールに時間が取られすぎたり、お互いがオンラインでないとつながらなくて困っている方、そんな方に今回はそれらの問題点を解決したクラウド型ビジネスチャットツール「ChatWork」をご紹介します。

こんな課題を解決!

  • 社内のやり取りをクラウドチャットツールで効率化したい
  • シンプルに仕事のタスク管理をしたい
  • 大人数のグループチャットがしたい
  • 容量の大きなファイルを送信したい
  • 相手がオフラインでも送信したい
  • ライブチャットで動画を見ながら会議したい

特長・主な機能

PC WEB画面

chatwork_PC_WEB画面

スマートフォン画面

chatwork_スマートフォン画面iphone

  • クラウド型のチャット
  • 容量の大きなファイルをクラウドで保管、管理できる
  • すべてクラウドで管理されるので、パソコン等の環境に依存しない
  • スマフォ等、マルチデバイスに対応
  • グループチャットの参加メンバー数の制限がない(パーソナルプランの場合)

まとめ

ChatWorkを使うと、社内の「各プロジェクトごとのスレッド」や「タスク管理」がスムーズにできて、かつビジネスツールなのに他のチャットツール(例:twitter)のように気さくに楽しく使えるので、いいツールだと思いました。

ChatWork
http://www.chatwork.com/ja/

オフィススイートソフトのクラウド版「iWork for iCloud」

iCloud_top

今回はiWorkのクラウド版「iWork for iCloud」(2014年1月30日現在ベータ版)をご紹介します。

「iWork」とは

アップルがMac用に開発したオフィススイートソフト。
ワープロソフト(Pages)と、プレゼンテーションソフトウェア(Keynote)と、表計算ソフト(Numbers)の3つをまとめたもの。今まではMac用でしたが、Webブラウザベースになるので、Windowsからも利用出来るようになりました。
オフライン版iTunes Storeで販売されていますが、iCloudからは今のところ無料で使えます。

こんな課題を解決!

  • クラウド上でオフィスツールを使いたい
  • 無料のオフィスツールを使いたい
  • MacとiOSを常に同期させたい

今の所iWorkでできて、iWork_for_iCloudにできないこと

  • 日本語のフォントはヒラギノと明朝のみ対応
  • アニメーション(keynote)
  • Windowsの場合InternetExplorerでは使えない、フォントが少しずれることがある

特長・主な機能

  • 同じAppleIDのiCloud対応デバイスは、自動で同期&バックアップしてくれる
  • iCloudの管理画面から簡単に操作できる

iCloud Keynote(プレゼンツール)の画面

icloud_keynote

iCloud Pages(ワープロソフト)の画面

icloud_pages

iCloud Numbers(表計算ソフト)の画面

icloud_numbers

まとめ

元々有料アプリだったものが、クラウド上では無料になっていたので驚きました。
まだ少し使いにくい部分もありますが、Googleドキュメントに劣らぬクラウド上の便利ツールになりそうです。
今までオフィス系のソフトに触れたことがない方は、この機会にiWorkに触れてみてはいかがでしょうか?

iCloud
https://www.icloud.com/

参考記事:

共有機能が便利なオンラインストレージサービス「BOX」

オンラインストレージサービス「BOX」TOPpage

オンラインストレージサービスを使っている人は多いと思いますが、日本語対応のサービスでとどまってしまうことが多いと思います。今回は日本語非対応のサービスの中でおすすめの「BOX」をご紹介します。
「BOX」はPersonal(無料/10GB)、Starter($5/1ユーザー/月 100GB)、Business($15/1ユーザー/月 100GB)、Enterprise($35/1ユーザー/月 Unlimited)があります(2014年1月30日現在)。

オンラインストレージサービスとは?

サーバーマシンのディスクスペースをユーザーに貸し出すサービスで、インターネット経由で割り当てられたスペースを自由に読み書きができ、他人にも公開できるものもある。「Dropbox」「Evernoet」「iCioud」など多くのサービスがある。

DropBoxとの違いは?

DropBoxが個人向けに始まったのに対して、Boxははじめからビジネスユースに設計されていますのでより、会社などでのニーズに応えるような機能がたくさんあります。例えば共有に関する細かい設定ができたり(あるユーザは読み込みしかできない、別のユーザは編集ができるなど)、ToDo管理などができたりします。

こんな課題を解決!

  • 無料のオンラインストレージサービスが使いたい
  • 何でもシンプルに、安全に共有したい
  • メールで共有場所を知らせたい
  • スマートフォンで共有機能を管理したい

特長・主な機能

スマートフォンとPCで使えますが、出来ることが少し違います。

スマートフォン

オンラインストレージサービス「BOX」iPhone

  • 画像、動画、音、Office系のデータの閲覧
  • iPhone内からデータをアップロード
  • メールで共有場所を管理、通知

PC(Web)

オンラインストレージサービス「BOX」PC

  • 画像、動画、音、Office系のデータの閲覧、アップロード、ダウンロード
  • メールで共有場所を管理、通知
  • 保存ファイルの削除
  • タグ付け&タグ検索
  • 検索機能

まとめ

「BOX」は10GB無料で、スマフォアプリもあって便利なので使わない手はないと思いました。英語のサービスはいつも避けてしまいがちですが、使い方もシンプルでわかりやすいので大丈夫でした。

BOX
https://app.box.com/home/

クラウドで使うノート「Evernote」

Evernote_top

日々の生活のなかで保存しておきたいいろいろなことをブログ、日記、カメラ、ビデオなどに留めている方は多いと思います、そんな人に向けて(あまりにも有名で紹介するまでもないかもしれませんが)今回は「Evernote」を紹介させていただきます。

こんな課題を解決!

  • 大切な情報を自分のスタイルで保存したい
  • 覚書をすぐに取り出せるようにしたい
  • ノートを常に持ち歩きたくない

特長・主な機能

Evernote_page

  • すべてのデバイスを同期する
  • 好きなものを記録する(情報、音、写真など)
  • お気に入りのWebサイトを保存
  • 他の人と情報を共有、編集することが出来る
  • 旅行の計画が立てられる

まとめ

Evernoteを使って自分の好きな情報を集めていると、いつの間にか、その情報が宝物になっていることに気づきます。
日々の生活の中で記憶しておくのが難しいことが簡単に取り出せるのはとても便利だと思いました。

Evernote
http://evernote.com/intl/jp/

中小企業向けのクラウド会計ソフト「ネットde会計」

ネットde会計トップ画面

中小企業の会計業務で、入力する人が複数であったり、項目が多い場合は何かと大変なことも多いと思います。
今回はそんな方におすすめのクラウド型会計ソフト「ネットde会計」をご紹介します。

こんな問題を解決!

  • 中小企業でクラウド会計ソフトを使って効率化をすすめたい
  • 複数の経理担当者で同時作業を進めたい
  • 帳簿をしっかりと使いたい
  • 使いにくいシステムや、古いシステムをどうにかしたい

特長・主な機能

ネットde会計

元祖クラウド会計ソフトといってもいい実績のある会計サービスです。自動入力はありませんが銀行データのCSVから帳簿の入力ができます。

サポートが手厚いのが特長で、電話ではもちろんメールでいつでも使い方などについて相談ができます。またセキュリティもデータベースを取り扱う会社が運営しているということや、ASP・SaaS安心・安全信頼性認定制度の認定を受けるなどしていることから安心感がありますね。

  • クラウド会計ソフトなので、インターネットがあればどこでも利用できる。
  • 経理レベルに合わせた多彩な入力方法。
  • CSVインポート機能。
  • 自動学習機能があり、2回目以降は自動で仕訳の作成ができる。
  • 入出金を登録するだけの日計表入力。

まとめ

ネットde会計は帳簿機能とヘルプ機能がとても充実していて読みやすいので、経理の専門家はもちろん、初心者にも使いやすいように思いました。

ネットde会計
http://www.netdekaikei.jp/

最新記事