【フリーランス】リモートに強いエージェント5社
10万円給付金で始められる無料プログラミングスクール5つ(就職可能)
50,000円がもらえる!フリーランスエージェントの紹介キャンペーン

【前編】知り合いのHP制作を受けた時の流れを実例とともに公開

Web転職する
駆け出しフリーランスや独学のWebデザイナーはまず最初に知り合いのHP(Webサイト)制作するという人は多いかと思います。
自分は最初の頃知り合いのHPを作ったりクラウドソーシングで受注した時は本当に手探りでした。

しかしその後大手制作会社で5年の制作経験とフリーランスになって先日初めて知り合いのHPを制作した経験から、過去の自分のように

 

HP制作の流れが知りたい。

まず何をしたらいいかわからない。

 

という人に向けて、知り合いのHP制作を受けた時の流れや、やりとりで注意すべきことを書いていきます。

ヒアリング

なにわともあれまずはヒアリングしなければ始まりません。企業の場合は、担当者が慣れている場合あらかじめ要望や仕様がフォーマット化されていて向こうから提示されることもありますが、知り合いともなるとHPについて詳しくない人が多いです。そのためこちらから要望や仕様を引き出す必要があります。

ヒアリングシートなるものをどこからかダウンロードするのもいいですが大体evernoteやお使いのメモ帳に下記をヒアリングして書いておけば大丈夫です。

・サーバー契約・ドメイン取得はどちらがやるか
・ドメインの希望はあるか(こちらで取る場合)
・サイト名
・ターゲットユーザー(ペルソナ)
・デザインテイスト
・キーワード(SEO対策が必要か)
・レスポンシブデザインかPC専用か
・コンテンツ、素材、原稿
・予算
・公開日
・公開後の運用予定
・参考サイトがあるか
自分が今回制作したサイトを例に一つずつ見て行きます。

サーバー契約・ドメイン取得はどちらがやるか

サーバー契約・ドメイン取得はこちらでということでした。
知り合いが分からなそうでしたら率先してやりましょう。

ドメインの希望はあるか

サイト名

今回の場合保育園サイトだったため、保育園の名前をメモ。

ターゲットユーザー(ペルソナ)

すべてのHPは何らかの目的があります。目的を明確にすることでブレのないサイトが作れます。
どういう人がターゲットなのかは細かく確認しておきましょう。

自分が制作した保育園の場合

保育園が決まる前の選んでる人
選びに来るよりそこしかない人

ということでしたので、営業色が強くないけど見やすくやパッと見の安心感が必要だということがわかります。

デザインテイスト

ターゲットに関連してデザインのテイストも聞いておきましょう。
子供を預けるという責任から「安心感」とやさしいイラストで「柔らかい」雰囲気のテイストに決まりました。

参考サイトがあるか

関連して参考サイトがあるかを確認します。なければ後々2~3サイト参考を提案するといいです。

コンテンツ

次は盛り込みたいコンテンツですね。知り合いからどんどん引き出して、絞るなりグルーピングして整理することが重要です。
・TOPページ
・-about
     -理念
     -目標
     -ねらい
     -入園までの流れ
・一日の流れ
     -一日の流れ
     -保育時間
     -行事
・料金、FAQ
・先生の紹介
・アクセス
     -施設概要(写真)
     -アクセス
     -お問い合わせ(電話番号、メールアドレス)
大体こんなコンテンツに決まりました。
素材は、画像やロゴデータなどですね。有無を確認しましょう。そして、原稿(サイト内のテキスト)はどちらが用意するかは決めておきましょう。基本は先方に用意してもらうものですが、まれに考えて、や適当に書いといて~など言われる場合があり、その場合見積を高くすることになります。

予算

予算や上限はあるか聞きます。
保育園のサイトは20万円でした。

公開日

公開日を聞いておきます。

公開後の運用予定

公開後の運用は誰がするかを確認します。

スケジュール

スケジュールを決めます。
エクセルなどで細かく作る場合もありますが、知り合いのサイト程度であればメールに文字で書いてしまっていいかと思います。
下記のような出し方です↓
・コンテンツ(ページ項目)、見積提出
~2/8
・ワイヤーフレーム構成(構成をexcelデータで確認いただきます。)
・資料や文言をいただきます。
~2/17
・デザイン(画像でデザインの確認いただきます。)
~3/3
・コーディング(ブラウザで表示確認いただきます)
~3/10
・公開
~3/15

見積り

スケジュールを出したら見積です。
ヒアリングの時に予算を聞いていたらそれで作るべきですが、あまりにも安い場合は交渉の余地ありです。といってもいくらで出すかは初めのうちは難しいものです。

そういう時は工数で出すと良いです。時給いくらもらいたいか、何時間かかるかを元に金額を算出します。

何時間かかるかわからないくらいの頃は安くやってあげるのもいいと思います。経験を積んで工数を計算できるようになりましょう。

まとめ

次回の記事ではWF、デザイン、コーディングと実際の制作について書いていきます。

【無料】WebIT系優良就活・転職サイトまとめ
レバテックキャリア
レバテック キャリア

レバテックと言えば、フリーランスエージェントが有名ですが、
そのノウハウをそのままにIT・Webの業界や技術に精通した専任のスタッフが正社員の転職求人を紹介してくれます。
自分も利用した時は条件面交渉もがんばってくれました。

Tech Stars Agent

1. エンジニア経験のあるコンサルタントのみ担当!
2. IT・WEB・ゲーム業界特化の専門エージェント
3. 転職だけでなく、独立の支援も行っています
4. エンジニア限定イベントへのご招待も!
厳しい審査を通過した、厳選された求人のみを紹介しているので、
安心して転職を行うことができます。

マイナビクリエイター

転職サイトでは3本の指に入るマイナビですが、マイナビクリエイターはその中でもWeb職・ゲーム業界に特化しています。
つまり求人数が多いことはわかるのですが、量よりも質を重視しているとエージェントの方が仰っていたので、よりお勧めできます。

Web転職する
フォローする
プロフィール
hoshi

フロントエンドのフリーランスとして週5フルリモートで働いてます。

営業

Webデザイナー(アルバイト)

Webデザイナー(正社員)

フロントエンドエンジニア(正社員)

フリーランスとして独立しました。

詳細なプロフィールはこちらを参照ください。

フリーランスエージェントとは28社と面談・取材してきました。

【完全版】フリーランスエージェント28社面談を受けた現役が比較・おすすめランキングを作った

このブログでは、自身の経験からフリーランスを目指す方や駆け出しエンジニアの方に向けてWebを仕事にする方法やトレンド情報をアウトプットしています。

・フリーランスエージェント紹介キャンペーン
・転職やプログラミングの悩み相談
・仕事の依頼

など、各種お問い合わせはこちらからお願いします。

フォローする
hoshilog

コメント

タイトルとURLをコピーしました