Progate終わったらやること3つを紹介します。
結論から言うと、模写コーディング・PSDからコーディング・ポートフォリオ作成です。
目次
Progate終わったら1：模写コーディング
模写とはLPなど既存サイトを真似て作ることです。
私は10個くらいサイトを模写してから案件を始めました。
模写コーディングの方法
以下の記事で無駄な作業はせず、効率的に模写を進めていくための方法を解説しています。
私が言う模写とはコードをコピペするのではなく、自分でデザイン通りに作ってみることです。わからなかったら参考サイトのコードを参考にする、と言う感じです。
おすすめの模写サイト
おすすめの模写するサイトを紹介します。
模写サイトは、案件で頻出のデザインを選ぶのが効率的です。
レベル1~5にわけてLPのオススメ模写サイトを紹介しています。
模写コーディングは辛い
Progateも辛かったと思いますが、模写コーディングも結構辛いです。
どうしてもわからない場合は、見本のサイトをChromeの検証で見て、サイトのコードを見てカンニングしましょう。
実際のコーディングでは、わからないところはググりつつ行い、今カンニングしても、本番でできるようになれば良いのでOKです。
Progate終わったら2：PSDからコーディング
実案件の予行演習
次に実際の案件の予行演習として、PSDのデザインデータ（Photoshopデータ）からコーディングをしましょう。
特に制作会社からいただく案件では、PSDのデザインデータからコーディングすることが多いからです。
PSDデータからコーディングする流れ
実案件でPSDのデザインデータからコーディングする流れは、以下の通り。
- psdのデザインデータをもらう
- psdの画像・データ書き出し
- コーディングする
具体的には以下の記事をどうぞ！
Progate終わったら3：ポートフォリオ作成
最後に自分のポートフォリオサイトを作成をしてみましょう。
自分のプロフィールやスキル、実際に作ったサイトへのリンクなどを掲載し、受注しやすくするためです。
と言っても、ここはやってもやらなくてもOKだし、時間をかけなくてもOK。
ちなみに私はポートフォリオサイトを持っておらず、ブログでホームページの作り方とか、デザインの内容を発信して、ブログから受注した経験があります。
ポートフォリオの作り方
Web制作初心者がポートフォリオサイトを作る場合、簡易的に作る人が多いです。
難易度順にポートフォリオの作り方のパターンを紹介すると以下の通り。
- resumeなど簡単ポートフォリオツールを使う
- WordPressブログを作って、固定ページ1ページをポートフォリオにする
- HTML/CSSテンプレートで作る
- 一から自分で作る
resumeなどポートフォリオツール
resumeはポートフォリオ用に作られたサイトです。
デザインもよく、一時期話題になったポートフォリオ作成ツール。
コーディングは不要で、自分でテキストを書き込むだけでOK。1番簡単な方法。
WordPressブログ
ブログも始めたい人はWordPressの固定ページ1ページをポートフォリオページにすると良いかと。
HTML/CSSテンプレート
無料のデザイン性の高いHTML/CSSテンプレートを使う方法。
エディタを使って内容を書き込む必要はありますが、基本コーディングはなしです。
ただし、サーバー・ドメインを自分で取得しCyberduckなどFTPツールでアップロードが必要です。
一から自分で作る
自分で一からコーディングし、ドメイン・サーバーを契約してFTPでアップロードする方法。
コーダーでもデザインがダサくならないように作りましょう。
この方法で作ってた人がデザイナーでなくても、デザインがダサいと実際に制作会社にみてもらった時に評価が微妙だったと言ってました。
ポートフォリオに入れる実績
ポートフォリオに入れるものとして最低限必要なのは、以下3つです。
- 簡単なプロフィール
- これまでの実績
- 連絡先
- スキル
これまでの実績は、模写コーディングで作ったサイトをスクショして、Google Driveに格納してリンクさせればOK。
模写コーディングや自分で作ったオリジナルサイトをサーバー上にアップしている人は、そのリンクを貼ります。
地域で営業するフリーランスでSEOからの流入を狙う場合は、「地名＋ホームページ作成」などのキーワードで上位に来れたらラッキーですね。
Progate終わったらやること3つ終了後は営業
上記3つがこれだけ完了したら、次は実際の営業に進みましょう。
現実的な営業方法
1番現実的な営業方法はこれです。
営業せずに受注する方法
少し難しいですが、営業せずに受注する方法もあります。
