web制作実案件の流れ【未経験でもできました】
web制作初心者「web制作の副業で稼ぎたくて、コーディングの勉強を始めたんだけど、web制作ってどんな流れでやるんだろう。実際に経験した人の流れを知りたい！」
こんにちは！スズキです。
今回はweb制作の流れについて書いていきます。
先日にこんなツイートをしました。
https://twitter.com/suzuki99794927/status/1294069861807611904?s=21
なんと、あのイケハヤさん（@IHayato）からweb制作（LP制作）のご依頼を頂き、無事に納品することができました。
これが自分にとって初案件でした。
この記事ではweb制作初心者の自分が実際に経験した、web制作の流れを紹介したいと思います。
また、その中で参考にしたサイトや使用したツールも紹介していきます。
この記事の内容
- 営業
- 構成設計
- ワイヤーフレーム作成
- ライティング
- デザイン
- コーディング
- 請求書作成
- 納品
スポンサードサーチ
web制作の流れ
営業
まずは営業ですね。
営業方法は色々あると思うのですが、例えば以下です。
- クラウドソーシング経由
- SNS経由
- 知り合い経由
自分の場合はSNS経由でした。
きっかけはイケハヤさんの無料メルマガの企画、「ツイッターコンサル」というものに参加したことです。
普段からweb制作の勉強をしていることをツイートしていたため、ご依頼を頂きました。
ただ、これは少し特殊な例だと思うので、未経験の人は「クラウドソーシング」もしくは「知り合いへの営業」が
いいかなと思います。
クラウドソーシングだと「ココナラ」などが有名ですね。
構成設計
案件が受注できたら、さっそく制作していきます。
まずは構成設計です。
いきなりだと難しく感じるかもしれませんが、どのジャンルのLPでも必要な項目はだいたい決まっています。
例えば、
- ヘッダー（キャッチコピーなど）
- メインビジュアル（商品名、画像）
- 導入（関心喚起）
- ベネフィット
- 商品説明
- フッター（プライバシーポリシーなど）
という構成のLPをよく見かけると思います。
必要そうな項目をノートに箇条書きし、削ったり付け足したり並べ替えたりして設計していけばいいと思います。
心配ならこの段階でヒアリングしておけば確実ですね。
ワイヤーフレーム作成
ワイヤーフレームとは、LPのレイアウトを決める設計図のことです。
ワイヤーフレームを作ることにより、どこに何を配置するか、という情報が整理されるため、次のデザイン作成に役立ちます。
ワイヤーフレームを作成するツールですが、自分の場合はまずノートに手書きし、それを元に「Figma」で作成しました。
こんな感じです。
Figmaを使うメリットとしては
- 無料で使える
- web上で使える
- 操作が比較的簡単
などが挙げられます。
特にweb上で使えるのは大きいです。
ワイヤーフレームが完成したら、そのファイルのURLをクライアントに伝えるだけで、確認、コメント、編集してもらうことが可能です。
特にこだわりがなければFigmaでいいかなと思います。
ライティング
続いてライティングです。
設計した構成に沿って文章を書いていきましょう。
私自身もまだまだ勉強中ですが、今回は以下を意識しながら執筆しました。
- その商品に関する情報と競合の商品に関する情報を集める
- その商品を利用することで得られるベネフィットを考える
LPの目的は「商品を紹介し、その商品からベネフィットを感じてもらうこと」ですよね。
この目的を達成するためには、商品の魅力を考えること、競合と比較して勝っている部分を知ることが重要です。
ライティングについて参考になった書籍
デザイン
次にデザインを作成します。
ワイヤーフレームを作成していれば、レイアウトやコンテンツの配置位置などはわかっていると思います。
とはいえ、それだけでは何から手を付ければいいかわかりませんよね。
私はさっぱりわかりませんでした。
そこで取った方法が「参考になりそうなLPデザインを探す」です。
以下のようにLPをまとめたサイトがあります
このようなサイトを利用してイケてるLPを探して、それを参考にしながらデザインを考えていきましょう。
また、デザインを作成するツールもこだわりがなければFigmaでいいと思います。
コーディング
続いてコーディングです。
この記事を読んでいただいている方は、web制作の勉強をしている方が多いと思います。
自分で作成したデザインを元に、練習通りにコーディングを進めてください。
オンラインスクールでコーディングを学びたい方へ
動画でコーディングを学びたい方へ
請求書作成
コーディングまでできたら、納品前に請求書の準備をしておきましょう。
ワードやエクセルで作る人もいると思いますが、自分はめんどうだったので、請求書を作成できるツールを探しました。
色々あるようですが、自分は「MISOCA」を使いました。
「MISOCA」を選んだ理由は、
- 無料で使える
- 操作が簡単そうだった
- PDFで発行できる
などです。
実際に使ってみると、やはり簡単に作成できたのでオススメです。
操作は迷わなかったのですが、請求書の「品番・品名」の項目をどう書くかで迷いました。
調べた結果、自分は以下のようにweb制作の流れをそのまま「品番・品名」の項目に記入しました。
- ランディングページ構成設計
- ランディングページライティング
- ランディングページデザイン
- ランディングページコーディング
各単位は「1枚」にし、それぞれ金額を設定します。
作成できたら、PDFで発行し、メールで送ればOKです。
納品
ここまできたら、いよいよ納品です。
納品方法も色々あると思いますが、自分は完成したLPのフォルダをGoogleドライブに保存し、共有URLをメールで送ってダウンロードして頂きました。
他の方法としてはzip化したフォルダをそのままメールに添付して送付する、というのもアリかなと思います。
また、納品してもいくつか修正点を指摘されると思います。
気を抜かずに対応しましょう。
まとめ
以上が、私が実際に行ったweb制作の流れです。
未経験ですが、なんとか納品まで完了することができました。
最初は不安だらけだと思いますが、調べてみると役に立つ情報がたくさんあり、意外と何とかなります。
ある程度勉強が済んだら、ぜひ実案件にもチャレンジしてみてください。
私も勉強しつつ、実際に行動していきたいと思います。
以上です。
スポンサードサーチ
今回紹介した記事、書籍、ツール
営業
構成設計
ワイヤーフレーム作成
ライティング
デザイン
コーディング
請求書作成
納品