「ポートフォリオサイト」ができたら、次は今までの勉強をお金に換えるフェーズです。
ちょっと変わった方法で初案件を受注したのでシェアします。
ポートフォリオサイト制作の完全ロードマップはこちら↓
ポートフォリオサイトの作り方【初心者向け完全ロードマップ!】
TOTO ポートフォリオサイトが完成したので、ロードマップをまとめてみました! GIGLIO 勉強になったな~。 【Day 128】 ポートフォリオサイト公開 / 何のアイデアもないまま作り始めたのに
この記事はこんな人にオススメ
- ひと通り勉強したのでそろそろ案件を受注したい。
- クラウドソーシングで提案しているが、案件が取れない。
もくじ
WEB制作の初案件へのフロー
- その①:Progateで勉強する
- その②:ポートフォリオサイトを作る
- その③:それを持ってクラウドソーシングで受注!
がド定番ですよね。
(余計なくだりをスキップしたい方は「ココをクリック」してスキップ)
それももちろん良いんですけど、せっかくなら何か面白いことやりたいなーと思っていたところ…
11月発売&絶賛ヒット中のビジネス書『新世界』を全ページ無料公開します(西野亮廣)|新R25 - シゴトも人生も、もっと楽しもう。
「大丈夫、行けるよ」
あのキンコン西野さんが新刊「新世界」を発売1ヶ月で全文無料公開!
相変わらず面白いことを次から次へと仕掛ける人ですよね。
その中に「ホームレス小谷」さんの話が出てきます。「自分の1日を50円で売る」人です。
この話はずいぶん前から知っていたんですが、自分には関係ないと思ってたんです。
要はマネタイズのポイントを後ろにズラすことによって、普通より多くの見返りが得られる。
みたいなことなんですが、自分もそんなんやってみたい!ってことで考えてみました。
【Day 144】
LP(ランディングページ)500円で作ります /
詳細はココナラ [coconala]の商品ページをご覧ください↓https://t.co/42or9DJLyH
ご相談はDMからでもお気軽にどうぞ。#拡散希望#LPfor500#100DaysOfCode#Progate https://t.co/YYdObHfsxL
— へぼちゃんず | ¥500でLP作る人 (@HEBOCHANS) 2019年1月13日
ココナラとは
はじめての方へ(ココナラとは) | ココナラ
はじめての方向けココナラ初心者ガイドページです。知識・スキル・経験など、みんなの得意をサービスとして出品・購入できる日本最大級のスキルマーケット。
一言でいうと自分のスキルを販売できるメルカリ、ですね。
ちょうど自分のアイコンを似顔絵で描いてもらうなら、この人!って方をTwitter上で見つけて、その方がココナラに出品されてるのを知ったタイミングだったので、点と点がつながった感じです。
さらに制作中だった「ポートフォリオサイト」の中のスライダーが当然、模写コーディングだけだったので、ここを案件で埋めたい!と考えていたところでした。
クラウドソーシングで受けた案件を自分の成果物としてポートフォリオに載せられるケースは中々ないと思います。
スライダーは9枚あるので、とりあえず9件!でも100件くらいやったら相当おもしろいのではと思っていたら…
あの、はにわまんさんが既にやられてた!
ココナラは稼げる?実績ゼロから月10万円稼ぐようになるまで | HPcode
ランサーズ、クラウドワークスなど様々なスキルをお金に変えるサービスがあるかと思いますが、ココナラが一番ハードルが低く仕事を受けられます。 今ではコーダーと生意気に名乗ってますが、ココナラを始めた時は、なんの実績もない状態からスタートしました。 そこからコツコツを仕事を積み重ねていった結果、今では月10万円ほどは安定して仕事をいただけるようになっています。
我々Web制作を勉強する者がググる先々で必ず出会う大きな背中…
その名も、「はにわまん」さんがなんと駆け出しの頃にWordPressのカスタマイズを500円で100件やっていたというのです!さらに…
#閃きプロフロゴ という企画
こんな感じであなたのロゴを、プロフィールから閃きで作ります。
希望者はこのツイートを「作成希望!」と引用RTして下さい。
全員はお約束できませんが、なるべく対応します! 拡散RTも大歓迎です! pic.twitter.com/YEPrv1j0NZ
— AKILA™ (@AKILA_Design) 2018年5月6日
Twitterのプロフィールからあなたのロゴを閃きで、しかも無料で作るという「AKILA」さんの企画です。
あのiSARAの新しいロゴもこの企画から生まれたものだったんですね。
速攻でnoteもポチッちゃいました。
無料で100人のロゴデザインしたら人生変わった話|AKILA™|note
どうもAKILAです。 2018年5月から半年かけてTwitter上にいる100人の方のロゴを、プロフィールから閃きでデザインし、ヘッダーにして無料プレゼントするという企画、略して #閃きプロフロゴ を行いました。 その結果、人生が大きく変わってしまったので、 私が100人のロゴをデザインして起こった10のことを紹介します。
ココナラに出品
ここまで刺激を与えられたら今度は自分の番です。
早速ココナラに登録、ヘッダー画像をPhotoShopで作り、出品!
Twitterでも告知して、あとは受注を待つのみです。
はにわまんさんの記事にもある通り、ココナラの良い所はこの受け身な所です。
クラウドソーシングのように検索して提案するという積極性がいりません。
500円でLP(ランディングページ)作ります LP制作って2万円位~が相場だと思うんですが | LP(ランディングページ)制作 | ココナラ
500円でLP(ランディングページ)作ります!いわゆる「ペライチ」ではなく、HTML/CSS/jQueryを用いてゼロからコーディング/デザインをさせていただきます...
依頼が来ない…
想定内ではありましたが、LP(ランディングページ)を500円で作ります!というこの企画。
お気に入りにちょこちょこ登録はされるものの肝心な依頼は入りません。
有料オプションを新たに設定してみたり、キャッチコピーを変えてみたりもしました。
あくまで受け身なので以降はほったらかしでWordPressの勉強を始めていました。
すると出品から9日後…
ダイレクトメッセージが!
破格だと逆に怪しい
かなり怪しまれてしまいましたが、ダイレクトメッセージでのやりとりの末…
ついに初案件を受注!
ご依頼内容
- 競馬情報のメルマガのLP
- デザインはおまかせ
- テキストと画像数枚の用意がある
- 納期はなるべく早いとありがたい
テキストをメッセージでもらい、画像はzip形式でいただきました。
「Pinterest」で「競馬」で検索したLPを見ていただきイメージカラーだけ決めてもらいました。
緑色を使っていただくイメージであまり怪しくないような感じが理想、とのことでした。
Day1「製作開始」
正式にご依頼をいただいたのが夜遅くだったので、翌日から制作を開始しました。
Day 1でやったこと
- いただいた画像サイズがバラバラだったので、PhotoShopでサイズを統一
- スライダーの設置
- Google Fontsの設定
- 全体的にひと通りコーディング
- 出来てる分のレスポンシブ対応
進捗状況を毎日報告
クライアント様から言われたわけではありませんが、毎晩その日の進捗状況をメッセージとスクショで報告しました。
スクショはおなじみChromeの拡張機能「Full Page Screen Capture」で行いました。
Day2
Day 2でやったこと
- テキスト・画像の追加
- テーブルの設置
- faviconの設定
- ほぼ完成
テキストとイメージ画像を追加でいただきました。
またテキストの一部をテーブルで、というご要望もいただいたので実装しました。
ほぼ完成したのでSEO的に必要なmeta descriptionに記載する概要をクライアント様に考えていただくようお願いしました。
head内に書くべきタグを総まとめ:SEO対策に有効なものは?
head内に書くべきタグを総まとめしました。大手メディアが実際にどんなタグを入れているのかも紹介しています。
Day3
Day 3でやったこと
- ファーストビューの変更
- 見出しの追加
- イメージ画像の追加
- レスポンシブ対応
- 動作確認
- 完成!
テキストがメインのLPなので、あまりテキストが続かないように見出しと画像を追加。
ファーストビューも変更し、自分なりに満足の行くものになりました。
meta descriptionに記載する概要もいただき、いよいよ完成。
今回はあまり特別なことはしていないので、各ブラウザとWindowsでの動作確認も滞りなく終わりました。
オシャレな海外の画像はO-DANで
O-DAN - Cross-searching high-quality free stock photo site
O-DAN is a high-quality free stock photo sites cross-searching service.
Day4「納品」
Day 4でやったこと
- 最終確認
- サーバーへのアップロード
完成してすぐ納品ではなく、敢えて1日置いて最終確認の時間を持ちました。
寝て起きて改めて見たら良くなかったり、新たな気付きがあるかもしれないからです。
無事クライアント様からオッケーをいただき、基本はzip形式での納品なのですが、サーバーへのアップロードまでお願いしたいということだったので、有料オプションを追加で購入いただきました(これも500円)。
サーバーはお名前.comのもので初めてではありましたが、ググりつつ何とかアップロードはできました。
しかしここで問題が!
CSSがまったく効いていない…
アップロード先も問題なさそうだし、画像は反映されているのにCSSだけがまったく効いていない…。
パスもちゃんと通してるし、なんでナンデなんで???
最後の最後にさんざん悩んだ挙げ句の答えは…
パスはlink rel="stylesheet" href="css/style.css"なのに、フォルダ名はCSSと大文字にしてたからでした。
ローカル環境ではきちんと反映されていたので、しばらく気づきませんでした。
初案件を終えての感想
良かったこと
- WEB制作でお金を稼げた
- ヒアリングから納品(サーバーへのアップロード)まで全行程を体験できた
- クライアント様が良い人だった
何はともあれWEB制作でお金を稼ぐことができました。
自分のスキルを売って稼ぐという経験ができたことが1番です。
画像は私のスマホの待ち受けです↓
クライアント様が良い人だったので、最初から最後までリラックスして作業できたように思います。
反省点
- デザインの勉強が必要
今の自分のベストを尽くしたつもりですが、デザインに関しては(当然ですが)まだまだ勉強が必要なのを痛感しました。
デザインはセンスではなく、知識らしいので「やってはいけないデザイン」から早速読み始めています。
心がけたこと
これだけです。先人がみんな言ってるので間違いないです。
評価★★★★★いただきました!
まとめ
【12月受注結果 計:60万円】
制作会社 42万円🎉
ココナラ 19万円🎉今月目標だった50万、なんとか達成しました…!
炎上案件入って、昨日まで本当に死ぬかと思った……。
でもこれはまだスタート地点。
来月からもっと視座を上げていく!isaraきてメンタルブロックが一気に何層も外れたのを感じる。
— クメ@web制作&コーダー (@sota_edu) December 28, 2019
2019年1月追記。
のちに僕はiSARAというバンコクのノマドエンジニア育成講座の5期に参加するのですが、上記の6期生・クメちゃんのツイートをご覧ください。
ただの企画ではなく、ちゃんと設計すれば「クラウドソーシング」や「制作会社」以上の軸になるかもしれません。
おわり
今回は以上です。初案件のフローと感想をまとめてみました。
「ココナラに出品して依頼を待ちつつ、クラウドソーシングで提案」ぜひお試しください(500円である必要はありませんよ)!