ココナラでWordPressのホームページ制作案件をやったので、体験談を書いていきます。
・WordPressでホームページ制作の案件をやりたいけど、実際どういう風にやるんだろう？
・制作期間は？
・流れはどんな感じ？
という方は、ぜひ読んでみてください。
なぜココナラがいい？
まず、なぜココナラがいいのかというと、サービス内容、料金など、自由に決められるからです。
他のクラウドソーシングサービスは初心者にはちょっと敷居が高いんですよね。
自分のレベルにあった案件がほとんどない。だいたいデザイン込みだったり「経験者求む」だったり納期が短かったり。
いいのがあっても応募が殺到してたりして、そんな中応募するのは尻込みしてしまいます。
でもココナラならサービス内容、料金、納期など、自分で自由に設定できます。自分のレベルに合ったサービスが提供できるので無理がありません。
詳しくはこちらに書いてます↓
【体験談】HTML CSS初心者が稼ぐならココナラがおすすめ。クラウドワークスは難しい | プログラミング独学の軌跡
案件の内容
今回の案件の内容は以下です。
- 小規模なカフェレストラン。
- WordPressを使ったホームページ制作。
- トップページ、コンセプトページ、メニューページ×2、ギャラリーページ、お知らせ一覧ページ、の計6ページ。ただしWordPressの場合お知らせ一覧ページは自動的に作られるから、実質5ページ。
- 画像や文章はお客様に用意していただく。
WordPressテーマはお客様から特に指定はなかったので、得意なLightning（無料版）を使用しました。
料金は？
料金は基本料金3万円で、メニュー数が多く2ページになったので追加料金をいただいて計3万5千円となりました。
そこからココナラの手数料が引かれて、手元に残るのは約2万7千円。
手数料高いですね…。
ただ他のクラウドソーシングサービスもそれくらいはするので、ココナラが特別高いわけではありません。
ちなみに3万円は最安値に近いです。
値段をいくらにするかは「どれだけ稼ぎたいか」によって変わりますが、値段が安い方が当然ながら依頼は来やすいです。
最初は最安値で依頼を獲得し、実績が増えてきたらもっと高くするのがいいでしょう。
制作期間
制作期間は2週間ちょっと。
といっても私はフリーランスではないので、作業できるのは1日平均2～3時間くらいです。作業できない時間にデザインは考えたり。
トップページは3日くらいで完成しました。
1日目はデザインを考えたり、他のいろいろなサイトを見て参考にしたり。2日目3日目で実際作る感じです。
実際作るといってもお客様のワードプレスではなく、自分のテストワードプレスでです。それをスクリーンショットしてお客様に提案します。
1回でOKをいただけたので、思ったより早くできました。
他のページも合わせて1週間ちょっとで大枠のデザインは完成しました。
メニュー数が多く、レイアウトを考えたり何度か修正したりして、メニューページに結構時間がかかりました。
WordPressのホームページ制作案件の流れ
実際の流れとしては、
まずはホームページの顔となる「トップページ」のデザインを作ります。
画像や文章は仮でもOK。
デザインができたらそれをフルスクリーンショットに撮って、お客様に提案。
場合によっては何パターンかデザインを作り提案します。
コンセプトページ、メニューページ、ギャラリーページなど、他のページも作ります。
トップページと同じく、できたらフルスクリーンショットを撮ってお客様にご提案します。
メニューページはメニュー数が多い場合があるので、先にメニュー表を送ってもらった方がいいです。
お客様のワードプレスに、自分がログインできる用のユーザーを追加してもらい、ユーザーの権限を「管理者」にしてもらいます。
そのユーザーでお客様のワードプレスにログイン。
- 初期設定などをしていく。一般設定やパーマリンク設定、テーマ、プラグインなど。テーマは一応子テーマを有効化しておく。
- 外観→カスタマイズからカスタマイズしていく。
- 自分のテストワードプレスの固定ページ編集画面を開きながら、お客様のワードプレスの固定ページに地道にブロックをコピーしていく。
ブロックはShiftキーを押しながらクリックしていくと複数選択できるので意外と簡単にできます。
ブロックエディタ画像
All in one WP Migrationを使ってデータを移す方法もありますが、お客様のワードプレスのユーザー名とパスワードが変わってしまうので、あまりおすすめしません。トラブルの元。
Ligntningの推奨プラグイン（VK All in One Expantion Unit、VK Blocksなど）の他、必要なプラグインをインストール・有効化します。
- WP Multibyte Patch：日本語でワードプレスを運用するなら入れておいた方がいい。なくてもバグは程ないが、念のため。
- EWWW Image Optimizer：画像を最適化してくれる。お客様がスマホで撮った写真をそのままアップする場合もあるので、入れておいた方が親切。
企業やお店のホームページではコメント欄はないのが一般的です。コメント管理には時間と労力がかかるからです。
コメント欄をなしにするやり方は2通り↓（どちらかでいい）
- ワードプレスの「設定」→「ディスカッション」→「新しい投稿へのコメントを許可」のチェックを外す。ただし過去の投稿のコメント欄は残ったまま。
- Disable Commentsプラグインを使う。過去のコメント欄も消える。同じような名前のプラグインがたくさんあるので注意
まだ投稿のないホームページなら1のやり方が簡単でいいでしょう。既にたくさんの投稿がある場合は2がいいと思います。
Disable Commentsプラグインは、同じような名前のプラグインがたくさんあるので注意してください。
ホームページのURLを「http」から「https」にするために、「SSL設定」というものをします。
SSL設定とは通信を暗号化（HTTPS化）し、個人情報やログイン情報などの盗聴・改ざんなどを防ぐセキュリティ対策です。
これをしないとサイトにアクセスしたときに「保護されていない通信」と警告メッセージが表示されてしまいます。
SSL化の手順↓
- レンタルサーバーでSSL設定をする。（ほとんどのレンタルサーバーで無料SSLを用意してくれています。）
- ホームページがhttpsで表示されるか確認。
- ワードプレス管理画面の一般設定で、http→httpsに変更。
万が一お客様が「いろいろいじって元に戻せなくなった」「ページを削除してしまった」という場合のために、All in one WP Migrationプラグインでパックアップをとっておいたほうがいいでしょう。
手順↓
- お客様のワードプレスにAll in one WP Migrationプラグインをインストール、有効化。
- 「エクスポート」から、バックアップファイルを自分のパソコン内にダウンロード。
- 最後、忘れずにお客様のワードプレスからAll in one WP Migrationプラグインを無効化、削除。
詳しくはこちら↓
ワードプレスでローカル環境から本番（サーバー）環境に移す方法。【All in One WP Migrationプラグイン】| プログラミング独学の軌跡
追加CSSに書いたCSSも、メモを取っておいたほうがいいです。
お客様ご自身でホームページ内の画像や文章を変更したり、投稿を更新できるように、やり方の動画を作ってお渡しします。
作り方は簡単で、自分でワードプレスをいじって変更・更新しているところを画面録画するだけです。必要であればテロップも入れます。
画面録画は、Windowsなら最初から入っているアプリ「Snipping Tool」や「Xbox Game Bar」がおすすめです。
晴れて納品です。
お客様にお伝えすること↓
- アフターサービスがあれば伝える。（納品後〇日間は〇回まで無料で修正します、など）
- 納品後しばらくは修正する可能性があるので自分のユーザーの権限を「管理者」のままにしてもらう。その後「もう大丈夫」ってなったら権限を「購読者」に変更してもらう。
ココナラの場合は出品者（自分）が「正式な納品」にすると、納品完了となります。
あとはお互いに評価をすれば終了です。
ホームページ制作のコツ
ホームページを作るコツを書いていきます。
画像には影を付ける。
ホームページの画像には基本的に影を付けたほうがいいです。
影をつけないとただベタ～っと貼り付けただけの、のっぺりとした印象になってしまいます。
影をつけることで立体感や高級感が出ます。
強い影の必要はありません。うっすらとした影で大丈夫です。
Lightningの場合は画像ブロックの設定の「シャドウ」でできます。
段落（P）ブロックのline-height（行間）は「2」。
段落ブロックはそのままだと行間がつまって見えるため、すこし広めの2にするといいです。
ゆったりとした落ち着いた雰囲気のホームページの場合は2.5や3でもいいでしょう。
Lightningの場合は、段落ブロックの設定の「タイポグラフィ」→「行間」でできます。
アニメーション（Blocks Animationプラグイン）はフェードインが無難。
Blocks Animationプラグインを使って画像などにアニメーションを付けると、よりおしゃれなホームページになります。
アニメーション効果はたくさんあるのですが、「フェードイン」が無難です。
速度は「やや低速」が趣（おもむき）があっておすすめ。
いろいろなアニメーション効果を使ってしまうと統一感のないごちゃごちゃした印象になってしまうので、不必要に変なアニメーションは付けないようにしましょう。
1～2種類にしておく方がいいです。
飲食店などメニュー表がある場合、メニュー表を先にいただく。
飲食店などメニュー表がある場合はメニュー表を先にいただいたほうがいいです。
メニューの数や種類によってメニューページのレイアウトが全然変わってきます。
先に想像でメニューページを作ってしまうと、あとでメニュー表をもらったときに作り直すことになり、二度手間になります。
まとめ
いかかでしたでしょうか？
今回はココナラでWordPressのホームページ制作案件をやった体験談を書いていきました。
- 小規模やカフェレストラン。
- テーマはLightning（無料版）を使用。
- トップページ、コンセプトページ、メニューページ×2、ギャラリーページ、お知らせ一覧ページ、の計6ページ。ただしWordPressの場合お知らせ一覧ページは自動的に作られるから、実質5ページ。
- 制作期間は２週間ちょっと。
- 料金は基本料金3万円+追加料金5千円の、計3万5千円。そこからココナラの手数料が引かれて、手元に残るのは約2万7千円。
ぜひ参考にしてみてください。
ココナラはサービス内容、料金、納期など、自分で自由に決められるのでおすすめです。
ココナラ登録はこちら↓
