はじめてWEBサイトを受注制作した話

Diary 2020/07/09

はじめてWEBサイトの制作の
ご依頼をいただきました

このたび、洋画家 矢澤みずき様のサイトを制作させていただきました。

私、「空蝉」でWEBサイトのテンプレートの配布をしていますが、自分のサイト以外は作ったことがありませんでした。
(デザインだけは、クラウドソーシングでコンペの経験はありますが・・・)
今回、はじめて、ご依頼をいただいて制作をしたので、記録として経験談を書いてみたいと思います。

きっかけは「空蝉」からのお問い合わせ

ご依頼のきっかけとなったのは、「空蝉」のテンプレートでした。
テンプレートを使ってサイト制作をされていて、わからない点をお問い合わせいただいたのですが、そのお返事をしたところ、WEB制作を依頼するとしたらおいくらか、と聞いてくださったのです。

正直、私はまだプロといえるような知識も技術も経験もありません。
ちょうど5月末でパート勤務していた会社を退職し、webデザイナーとして仕事をする基盤づくりをはじめよう!と思っていた矢先のことでした。
それを正直にお伝えしたところ、ご理解くださった上で、ぜひ実験台にして下さいとおっしゃってくださったのです・・・!神!

そうして、受注制作の一連のフローを勉強しつつ、実践する機会を与えていただいたのでした。

受注制作でやったこと

今まで、webデザイナーの勉強はいろいろやってきました・・・
しかし実践ははじめて!
すべてにおいて勉強でした。
以下、やったこととその流れ。

  1. ヒアリングシートの記入のお願い
  2. 契約書の作成→締結
  3. 制作スケジュールの作成
  4. ワイヤーフレームの作成
  5. デザインカンプの作成
  6. コーディング
  7. テスト環境へのUP
  8. 納品
  9. 請求書の作成
  10. 領収書の作成

都度都度、メールでやりとりして確認しながら進めました。
気づけば、1~10まででひと月かかってました😅
ひとつひとつ簡単に振り返ってみます。

ヒアリングシート

これは、今まで見てきた講座や本から、必要な項目を集めて作成しました。
空蝉でも依頼フォームを作って依頼をもらっていたので、それも練習になりました。
作成したものをDropboxで共有、記入してもらいました。

契約書の作成

正直、これが一番頭を使ったのではないかと思う・・・!
制作に関しては今までいろいろ勉強してきたけど、契約に関してはほとんど勉強してませんでした。
そんなのずっと先の話だと思っていたから・・・
(なんなら経験することもないと思ってた)

まず、「フリーランス」「webデザイナー」などの契約書テンプレートをネットであさり、いくつかを照らし合わせて、重複する項目、自分で必要そうな項目をまとめて作ってみました。
しかし不安。本当にこれでいいのか・・・
そんな中で見つけたこちら。

【値上げします】フリーランスのための契約書・注意点⁽ひな形コピペOK⁾【120年ぶりの民法改正】WEBデザイナー、コーダー、動画編集者、プログラマー、イラストレーター、ライター等|#りん様note【フリーランス/YouTube/WEBデザイン/動画編集/サムネ制作】|note

追加の作業をお願いされたけど値上げ交渉しにくい… クライアント(お客様)の返信が遅くて作業が進まない… 納品後に無料で変更依頼された… 瑕疵担保(契約不適合)責任が話題になっているけどわからなくて不安… フリーランスクリエイターなら1度は感じた事があるお悩みかと思います。 わたしも同じです、胃が痛くなることもありました。 しかし当noteの契約書を使ってからは1度も、上記の悩みを感じるような状況になっていません。 (ここで言うクリエイターとは… お客様に依頼されて作ったものにお金が発生する人。WEBデザイナー、コーダー、動画編集者、プログラマー、イラストレーター、ライター等)

悩みましたが、結局購入しました。もしかしたら、今後も使うかもしれないし!
結論から言えば、買ってよかったと思っています。
自分で作ったものとだいたいは一致していたので、これで大丈夫なんだと確認できたし、こういう項目もあったほうがいいな、というものもありました。

以上を経て、なんとか契約書を作成。

そしてオンライン締結。

クラウドサイン|Web完結・印紙税0円の電子契約サービス

無料で契約締結ができるウェブ完結型のクラウド契約 CloudSign(クラウドサイン)。契約書の保管・管理にも利用可。契約書だけでなく、発注書・請書・納品書・検収書・請求書・領収書など、さまざまな対外的なやりとりにご利用いただけます。

すごい世の中です。なんでもあります。

制作スケジュールの作成

いつまでに何をするかの目安を確認・共有したかったし、契約書で、「~~~の後、〇日以内に×××する」みたいな記述が出てくるのが大混乱をきたしそうだったので(私が)、カレンダー風にまとめてDropboxで共有しました。

ワイヤーフレーム、デザインカンプの作成

これらは、作成後メールで送付→確認をしてもらいました。
作成したものがそのままOKになることなどない、とクラウドソーシングのコンペに当選した時に痛感しているからです・・・!
修正ありき。そのための余裕を持ったスケジュール計画だいじ。

コーディング~納品

デザインが完成していれば、コーディングは作るのみ。
この作業が一番たのしい・・・!
まあ、テンプレートでやっていないことをいろいろやったので、悩んで時間がかかったりしましたが・・・
コーディングして、私のサーバーで稼働確認をして、ファイル一式をzip圧縮して、納品は完了。

請求書、領収書の作成

請求書や領収書は、会計ツールで作成可能だろうと思っていたので、いずれ使おうと思っていた会計ツールを試してみました。

弥生会計オンライン

マネーフォワード クラウド会計

この両方を試してみました。
会計ツールとしてはまだ使っていないのですが、請求書や領収書を簡単に作れるので良いです。
領収書はマネーフォワードの方だけですが。
私は家の家計簿もマネーフォワードでつけているので、仕事用もこっちかなあ。吟味中。

総じて、めちゃくちゃ勉強になりました

制作そのもの以外の部分も含め、全体の流れを実践できたこと。
テンプレート作成とは違う、中身のあるサイトを作れたこと。
テンプレートでは使わない技術的なところもチャレンジできたこと。

・・・などなど、本当に、とても勉強になりました。
このような機会をくださった矢澤様には本当に感謝です。

ご紹介:矢澤みずき様のサイト

洋画家 矢澤みずき様のサイト

主に「レースという毛皮や羽毛を着た動物」を描いていらっしゃる洋画家さん。
最初のお問い合わせの際に、WEBサイトのURLを記載されていたので、訪問してみると、なんと幻想的で美しい動物たち・・・!と釘付けになりました。
この絵を載せるサイト、作ってみたいなあ、と思いながらお返事したので、下心が通じてしまったのですね笑
すごいですよね、この繊細なレース・・・
私のお気に入りは、ギャラリーに掲載されている、「Rainbowcape〈虹のレインケープ〉」と「可視のハロ」。
「可視のハロ」は独断でトップページのスライドショーにも入れさせていただいています。

有償でのサイト制作依頼について

いずれ、空蝉でも、有償での受注制作を募集しようと思っています。
以前から考えてはいたのですが、のらりくらりとして準備を進めていませんでした。
今回、見切り発車でいきなりはじめたのは、良いきっかけでした。
ただ、やはりまだ準備が整っていないので、自分なりの基盤を構築してから、募集開始しようと思います。

無償と有償、趣味と仕事の棲み分けや、金額、支払いの方法など、考えることは山積み・・・
勉強と並行して、一歩一歩進んでまいります!