30分でWordPress企業ホームページ作る方法

Progate終わったらやること3つは模写・PSDコーディング・ポートフォリオ作成です

Progate終わったらやること3つを紹介します。

結論から言うと、模写コーディング・PSDからコーディング・ポートフォリオ作成です。

Progate終わったら1:模写コーディング

模写とはLPなど既存サイトを真似て作ることです。

私は10個くらいサイトを模写してから案件を始めました。

模写コーディングの方法

以下の記事で無駄な作業はせず、効率的に模写を進めていくための方法を解説しています。

私が言う模写とはコードをコピペするのではなく、自分でデザイン通りに作ってみることです。わからなかったら参考サイトのコードを参考にする、と言う感じです。

LP模写コーディング初心者におすすめの方法・無駄な練習をしない方法

 

おすすめの模写サイト

おすすめの模写するサイトを紹介します。

模写サイトは、案件で頻出のデザインを選ぶのが効率的です。

レベル1~5にわけてLPのオススメ模写サイトを紹介しています。

コーディングの練習模写サイト!無料素材配布サイトのおすすめはこれ

 

模写コーディングは辛い

Progateも辛かったと思いますが、模写コーディングも結構辛いです。

どうしてもわからない場合は、見本のサイトをChromeの検証で見て、サイトのコードを見てカンニングしましょう。

実際のコーディングでは、わからないところはググりつつ行い、今カンニングしても、本番でできるようになれば良いのでOKです。

 

Progate終わったら2:PSDからコーディング

実案件の予行演習

次に実際の案件の予行演習として、PSDのデザインデータ(Photoshopデータ)からコーディングをしましょう。

特に制作会社からいただく案件では、PSDのデザインデータからコーディングすることが多いからです。

 

PSDデータからコーディングする流れ

実案件でPSDのデザインデータからコーディングする流れは、以下の通り。

  1. psdのデザインデータをもらう
  2. psdの画像・データ書き出し
  3. コーディングする

具体的には以下の記事をどうぞ!

Photoshopからコーディングする方法【10分】

 

Progate終わったら3:ポートフォリオ作成

最後に自分のポートフォリオサイトを作成をしてみましょう。

自分のプロフィールやスキル、実際に作ったサイトへのリンクなどを掲載し、受注しやすくするためです。

と言っても、ここはやってもやらなくてもOKだし、時間をかけなくてもOK

ちなみに私はポートフォリオサイトを持っておらず、ブログでホームページの作り方とか、デザインの内容を発信して、ブログから受注した経験があります。

ポートフォリオの作り方

Web制作初心者がポートフォリオサイトを作る場合、簡易的に作る人が多いです。

難易度順にポートフォリオの作り方のパターンを紹介すると以下の通り。

  1. resumeなど簡単ポートフォリオツールを使う
  2. WordPressブログを作って固定ページ1ページをポートフォリオにする
  3. HTML/CSSテンプレートで作る
  4. 一から自分で作る

resumeなどポートフォリオツール

resumeはポートフォリオ用に作られたサイトです。

デザインもよく、一時期話題になったポートフォリオ作成ツール。

コーディングは不要で、自分でテキストを書き込むだけでOK。1番簡単な方法。

WordPressブログ

ブログも始めたい人はWordPressの固定ページ1ページをポートフォリオページにすると良いかと。

WordPressブログを5時間で開設・収益化!12690円/年【全手順に画像あり】

HTML/CSSテンプレート

無料のデザイン性の高いHTML/CSSテンプレートを使う方法。

エディタを使って内容を書き込む必要はありますが、基本コーディングはなしです。

ただし、サーバー・ドメインを自分で取得しCyberduckなどFTPツールでアップロードが必要です。

一から自分で作る

自分で一からコーディングし、ドメイン・サーバーを契約してFTPでアップロードする方法。

コーダーでもデザインがダサくならないように作りましょう。

この方法で作ってた人がデザイナーでなくても、デザインがダサいと実際に制作会社にみてもらった時に評価が微妙だったと言ってました。

 

ポートフォリオに入れる実績

ポートフォリオに入れるものとして最低限必要なのは、以下3つです。

  • 簡単なプロフィール
  • これまでの実績
  • 連絡先
  • スキル

これまでの実績は、模写コーディングで作ったサイトをスクショして、Google Driveに格納してリンクさせればOK。

模写コーディングや自分で作ったオリジナルサイトをサーバー上にアップしている人は、そのリンクを貼ります。

地域で営業するフリーランスでSEOからの流入を狙う場合は、「地名+ホームページ作成」などのキーワードで上位に来れたらラッキーですね。

 

Progate終わったらやること3つ終了後は営業

上記3つがこれだけ完了したら、次は実際の営業に進みましょう。

現実的な営業方法

Web制作で受注する営業方法!最も確率の高い2パターン

1番現実的な営業方法はこれです。

 

営業せずに受注する方法

フリーランスが営業なしで案件受注する方法5つ【9割営業なしの経験談】

少し難しいですが、営業せずに受注する方法もあります。