(cache)30DAYSトライアル1st【ポートフォリオ〜LP制作実践編】

こんにちは、フリーランスエンジニア兼ディレクターのショーヘー（@showheyohtaki）です。

この記事は『初心者からコーディングの副業で月5万円を稼ぐ』レベルになる30日間の学習ステップ、その後編です。

30DAYSトライアルの概要は↓の記事で解説していますので、興味のある方はこちらからご覧ください。

2019.03.31

30DAYSトライアル【ゼロから始めるコーディング学習】〜導入編〜

『ゼロからプログラミングを学びたい』『プログラミングを通して人生の幅を広げたい』そんな方のために、30日間でできるコーディング学習カリキュラム【30DAYSトライアル】を作りました。第一歩はこの記事から。...

前回の記事はこちら↓

2019.04.01

30DAYSトライアル1st【Bootstrapの基礎〜LP制作編】

この記事は『初心者からコーディングの副業で月5万円を稼ぐ』レベルになるための30DAYSトライアル、その中編です。セカンドステップであるこの記事では、Bootstrapの基礎〜動画でLP制作編までを7日間で進めていきます。...

サードステップであるこの記事では、ポートフォリオ制作〜実践サイト制作編までを13日間で進めていきます。

1. DAY18~20. ポートフォリオサイトを作る
2. DAY21~25. モデルを決めて、実在するお店のLPを作る
3. DAY26~29. 初めての仕事にトライしよう
- 3.1. Facebookを使って身近な人にアプローチしよう
4. 継続的にコーディング副業を続けるためにやるべきこと
5. ポートフォリオ〜LP制作実践編まとめ

DAY18~20. ポートフォリオサイトを作る

ここからはスキルアップ中心の課題から「制作物のアウトプット」にシフトします。

ポートフォリオ作成編

DAY18.『HTMLテンプレートを使ってみよう＋自分のポートフォリオサイトを作ろう①』
DAY19.『自分のポートフォリオサイトを作ろう②』
DAY20.『ポートフォリオを公開しよう』

ポートフォリオサイトを作って公開するまでの流れ

ポートフォリオサイトを作って公開するまでの流れは別途記事にまとめてあります。

以下の記事を参考に進めてみてください。

ついにネット上に「成果物」公開ですね！( ^ω^ )

DAY18〜20のポートフォリオ作成を進めるにあたり、知っておくと便利なTipsは以下に纏めています👍

Tips1. ポートフォリオサイトを作るときの画像探し方法

ポートフォリオやサイトを作るとき、画像探しに困りますよね…。

無料画像を探すなら『O-DAN』がオススメです！

商用利用可の画像のみを
32のフリー素材サイトから
日本語で検索可能

海外のフリー素材サイトはここで一括検索できます↓

O-DAN

ちなみにO-DANは自動翻訳で海外サイトを検索してるので、日本の写真は出てきません。

浴衣の写真がほしくて『夏祭り』と打つと、海外の『Summer Festival』の写真が出てきます笑

日本の無料画像がほしい場合は『タダピク』で検索しましょう！↓

タダピク

Tips2. ポートフォリオサイトの参考（サンプル）

実際に上記の記事通りに作ったポートフォリオサイトがこちらです

Startkit(スタートキット) | 初めてのホームページ専門店

テンプレートは『Karri』を使用。テキスト考える方が難しいですねw

問い合わせフォームもJavaScriptとphpで簡易的に実装してみました。

僕には届かず、入力されたアドレスに自動返信するようにしてますので、よかったら試してみてください。

もし、ポートフォリオサイトが完成した方は、シートを作っているのでぜひご記入を！

「これから作るよ」という方も、先に作った方のサイトを見ると勉強になるのでチェックしてみてください( ^ω^ )

ポートフォリオ用シート

Tips3. Twitterカードを設定してシェアしよう

Twitterでサイトをシェアしたとき、『Twitterカード』を設定しておくと画像や記事の概要が出せます。

「カードの設定はしたはずなのに画像が出ない！」という方は、画像のパスを書いる可能性があります。画像のURLを書きましょう！

その他はこちらを参照↓

Twitterカードとは？使い方と設定方法まとめ

DAY21~25. モデルを決めて、実在するお店のLPを作る

実践編（LP作成編）

DAY21〜DAY25.『モデルを決めて、実在するお店のLPを作ってみよう』

サイト制作用のテンプレートを利用して、実在するお店や会社のLPを作っていきます。

友人のお店のホームページでも、企業サイトでも、趣味のサークルのサイトでも、好きなテーマでOKです。

自分でテーマを決めて、そのテーマに沿ったLPを作ってみましょう！

ここからが本当の実践編です👍

『勉強する人』から『作る人』になりましょう！

サイト制作用のHTMLテンプレートを使って、実在するお店のLPを作る

サイト制作用のHTMLテンプレートを使って、実在するお店のLPを作っていきます。

効率的な作り方は下記の記事で紹介していますので、こちらをご覧ください。

初心者でもオシャレなサイトが作れる！サイト制作に最適なHTMLテンプレート紹介

とはいえ、サイト制作はコーディングだけで完結するものではありません。

要件をヒアリングしたり、問い合わせフォームを作ったり、ロゴを用意したり、、コーディング以外にもやるべきことはたくさんあります。

この先では、そうした初心者でも実践で使える知識やツールを紹介していきます！

Tips4. お問い合わせフォーム実装する

ボタンリンクからGoogleフォームに飛ばす…でもいいんですが、せっかくならフォームから送信できる形にしたいですよね。

フォームを実装するには、PHPやJavaScriptの知識があるとやりやすいですが、今や必須というわけでもなくなってきてます。

初心者でも簡単なフォームの実装パターン2つをご紹介します。

パターン①：Googleフォームで実装する

Googleフォームのパラメータをformのaction・inputに埋め込み、Googleフォームで管理するというやり方です。

サービスの登録なども必要ないので、手軽ですぐにできるいい方法ですね。

ただ、前提知識として

フォームがデータ送信される仕組み
RequestのGET/POSTの違い

くらいは理解しておいた方がいいと思います。
（これはパターン②でも一緒！）

Google Formsを自由なデザインで自サイトに組み込む方法

パターン②：form runを使って実装する

form runとは、フォームの作成・問い合わせの管理ができるWebサービスです。

バリデーションやreCAPTURE機能がついた本格的なフォームを管理画面から作れちゃいます。

また作ったフォームに回答があると、管理画面のデータベースに保存されて返信状況なども管理できるので、サイト制作の実案件でもよく使います。

フォームクリエイターで作ってもいいんですが、せっかくコーディングを勉強してきたので、『コード型で作成する』を選んでポートフォリオの問い合わせフォームとform runが連携するように作ってみてください。

型を作ったら、あとはスクリプトをコピペするだけで実装できます！

form.run

Tips5. オンラインサービスを使ってロゴ・画像を作成する

テンプレートを利用することで工数は削減できても、コーディングだけでは作れない部分もありますよね。サイトロゴやファーストビューの画像などです。

それらロゴや画像作成に便利なオンラインサービスを紹介します！

ロゴ作成に便利なサービス紹介：実用できるものだけ3選

ロゴ作成に便利なサービスのうち「実用的なもの」を3つ選びました。

1つ目はSquarespace Logo。

オシャレでシンプルなロゴメーカー。400 × 400のロゴまでは無料でダウンロードできます。初心者でも使いやすい。

Squarespace

2つ目は、LOGO MAKER。

Squarespace Logoの日本語対応版。ダウンロードするロゴサイズも選べて便利。無料で使えるロゴメーカーの中では一番だと思います。

ロゴメーカー | 【商用利用OK】無料で誰でも簡単に自分のストアのロゴが作れる

3つ目は、LOGASTER。

1分でロゴを作れます。文字を打ち込んでカテゴリー選択すればそれっぽいロゴが自動で完成するので爆速！

LOGASTER | ロゴメーカー | オンラインロゴ作成

画像加工・バナー作成にオススメのサービス「Canva」

サイトバナー作成や画像加工をオンライン上で行えるサービスはCanvaです。

Twitterの背景用・Facebookページ用など、様々なサイズのバナーに対応してます。実用レベルのバナーを手軽に作れるのがポイントです。

グラフィックデザインを無料で簡単作成

ワイヤーフレーム作成にオススメのサービス「Figma」

デザインツールとして有名なのはイラレ、フォトショ、SketchやXDなどですが、オンラインでAdobe XDとほぼ同じことができるサービスがあります。

テンプレを使えば、テンプレの型がそのままワイヤーなので必要ないんですが、もし簡単なワイヤーをクライアントに提出したい場合は『Figma』を使ってみてください。

ちなみにXDでできるレベルのデザインなら、Figmaでも可能です。

Figma: the collaborative interface design tool.

Figmaの使い方解説記事はこちら↓

Tips6. PCやタブレットのブラウザでサイトを表示させてる画像の作り方

PCやタブレットのブラウザにサイトを表示させてる画像ってありますよね。
あれもジェネレーターで簡単に作れます。

オススメのまとめ記事を紹介しておきます↓

簡単便利！サクッとモックアップが作れる便利ツール10選

『デバイス　画像　ジェネレーター』でググると他にもたくさん出てきます！

Tips7. サイトをより見やすくおしゃれにする方法

初心者のうちにありがちなのが、どのサイトも既視感がある構成になってしまうことです。

特にBootstrapを使うと構築の手間は省けますが、デザイナー・コーダー界隈で『Bootstrap臭』と呼ばれる初心者臭さが出てしまいます。

今回は、それを解消するコツをご紹介します。

最初に結論を言ってしまうと『Bootstrap臭を消すコツ＝フォントに気を遣う』ことです。

少しの手間で見た目の印象がガラッと変わるのでぜひ実践してみてください！

Bootstrap臭さを消すのに参考にすべきサイト

まずはこちらのサイトを参考に、文字の行間・文字間・文字色・余白などを調整してください。

うわっ、私のサイトBootstrapくさすぎ!? たった数文字変えるだけでBootstrapのくさみが抜ける7つのCSSテクニック。

また、font-familyでフォントを変更するのもオススメです。

作りたいサイトのイメージにも寄りますが、僕は『M+1』というフォントを使用することが多いです。（Googleフォントでも利用できます）

https://googlefonts.github.io/japanese/#mplus1p

良いデザインのサイトを見ておく

コーディングやデザインを鍛える一番の方法は、『良いものを見てマネする』ことです。

今すぐこんなハイレベルなものを作れなくても大丈夫ですので、まずはいいサイトを多く見て、自分の目を肥やすことから始めましょう。

後々ゼロから自分でサイトを作るようになった際に、これらの積み重ねが活きてきます。

デザインを探すならPinterestが有名ですが、日本の優れたWebデザインを集めたギャラリー＆リンク集『81-web.com 』もオススメです。

また、海外サイトですが『awards』というサイトだと、アップロードされたデザインを世界中のデザイナーが採点していて、どんなデザインが評価されるのか分かるので面白いです。

Tips8. サイトの全画面キャプチャを撮る方法

クライアントに簡易的に確認を取るとき、作ったサイトをポートフォリオに載せるときなど、サイト全体のキャプチャが欲しい場面があります。

FireshotというChromeの拡張機能を使えば、簡単に全画面キャプチャが撮影できます。

検証でレスポンシブ表示にした状態で撮影すれば、その状態のキャプチャも撮れます。

FireShot

Tips9. 実績掲載の許可とレビューをお願いする

実在するお店のLPを作り終わったら、

『実績掲載の許可』
『今回のフィードバック』

をもらいましょう！

実績掲載はもちろん、フィードバックもらうのも大切です。改善材料にもお客様の声にもなりますからね。

Googleフォームでアンケート作れば一瞬です

テストアップ or 公開まで完了されて、次に紹介する実績使用の許可も取れた方は、ぜひ↓のシートに記入いただけると嬉しいです( ^ω^ )

見本になるようなサイトがあれば紹介させていただきます！

30DAYSトライアル実践！LP制作まとめ

DAY26~29. 初めての仕事にトライしよう

実践編（LP作成編）

DAY26〜DAY29.『Facebookを使って身近な人にアプローチ＆初めての仕事にトライしよう』

DAY21〜25で、モデルを決めて実在するお店のLPを作りました。次はいよいよ実践です。

自作したポートフォリオサイト・モデルを決めて作ったLPを営業材料にし、初めての仕事を取りにいきましょう！

以下に具体的な手順を解説していきます。

Facebookを使って身近な人にアプローチしよう

ここまでにポートフォリオサイトを作り、実店舗のLP制作も一通り終わった前提でお話しますね。

一通りLP制作に必要な経験は積めたはず。そしてポートフォリオと初めての案件という目に見える実績もできました。
次は、それらを使ってサイト制作の販売をはじめましょう。

手始めにもっとも効果的なプラットフォームは「Facebook」

もっとも効果的なプラットフォームは『Facebook』です。なぜFacebookなのかを少し解説しておきます。

まず、クラウドソーシング系のサービスでコーディング案件を受けるには、まだスキル的に厳しいです。

その理由は【30日】未経験からコーディングの副業で月5万を稼ぐためのステップにも書きました。

（次のデイトラ2ndまで完了すれば、クラウドソーシングでの案件獲得も可能になります）

またスキル以外にも

競争が激しい
「依頼者 > 制作者」のパワーバランスになりやすい
信頼関係の構築からスタートする必要あり

などの難しさもあります。

副業案件として欲しいのは、ピクセル単位で正確なコーディング力が要求される仕事ではなく、こちらでデザインや構成を決められる『お任せ案件』です。

そして、表現が難しいですが、ある程度の『ゆるさ』を許容してもらえるだけの信頼関係がある人から仕事をもらった方がやりやすいです。

そんな条件を満たす場所が、Facebook。

一旦自分に置き換えて考えてみてほしいんですが、「あなたの知り合いでホームページが作れる人を教えてください」と言われて、何人の顔が思い浮かびますか？

せいぜい1人か2人じゃないでしょうか。 0人の方もいると思います。

前職がWeb関係とか、よほど顔が広い人じゃないかぎり、普通は身近にホームページを作れる友達なんていないんです。

そこであなたがFacebookに「ホームページ制作始めました」と投稿しておけば、もし友達が「ホームページ作ろうかな」と思った時には、あなたに声がかかる確率はかなり高いと思いませんか？

ポートフォリオや作ったLPのリンクも貼りつつ、

「デザインや構成はこちらで作ります」
「完成見本はこん感じです」

と宣言しておけば、『お任せ案件』にできますよね。

Facebookで友達　＝　もともとある程度の面識がある人なので、全く面識のない制作会社からの要望や規約を守りながら仕事するよりもずっとしやすいはずです。

もし難しい要望がきたら、正直に「それはできません」と伝えましょう。
変に期待させて信頼を損ねたり、無理して制作がトラウマになったりしないように、できないことはできないと正直に伝えることも大切です。

OGPタグを設定すればFacebookでシェアしたときの反応率が上がる

Facebookでニュース記事などをシェアする際、画像やタイトルが表示されますよね。あれが表示されるのは『OGPタグ』を設定してるからです。

シェアした時の反応率が劇的に変わるので、必ずOGPは設定をしましょう！

OGPを設定しよう！SNSでシェアされやすい設定方法とは？

Facebookに投稿しよう

上に書いたポイントを抑えつつ、近況報告も兼ねて「ホームページ制作はじめました」とFacebookに投稿してみてください。

ポートフォリオとLPのリンク貼るのは忘れずに！

また自営業の友人など、ホームページを欲してる可能性が高い人には、こちらから声かけしておくべき。メッセンジャーで個別にお知らせしておきましょう。

少し勇気はいるかもですが、せっかく作ったポートフォリオをみてもらう意味も込めて、思い切って投稿してみてください！

どんな反応だったか、Twitterでも教えてもらえると嬉しいです！

これまで様々なものを使ってコーディングしてきました。

ですがコーディングはやらないとすぐに鈍ってしまうもの。

少しレベルの高い練習方法ですが、今後もコーディングスキルを維持 or UPさせ続けるための『実践的なコーディング練習方法』をご紹介します。

継続的にコーディング副業を続けるためにやるべきこと

ここまで、初めての案件を取るためのステップを踏んできました。

最後に、初めての案件を獲得したあと、そのさきにやるべきことをご紹介して終わりにしたいと思います。

それでは、どうぞ。

『模写コーディング』で実践的なコーディング力を伸ばそう

模写コーディングとは、Web上にある本物のサイトを自分でコーディングして再現する、という練習方法のことです。

僕もブログの中で紹介しています↓

フリーランスエンジニアになるための全行程まとめ

※ただし模写コーディングしたサイトを実績としてポートフォリオに掲載するには、サイト運営者の許可が必要です。勝手に掲載しないように注意しましょう（iSaraのサイトは注意点を守ればポートフォリオに利用してOKだそうです）

模写コーディングに役立つ記事

模写コーディングするときに基準にすべきポイントや便利なツールはこちらの記事をご覧ください。

Webサイトをコーディング模写するやり方と使用するツール

特にImage Downloaderは必須です！

レベルの高い内容ですが、コーディング力を伸ばすには、『とにかくコーディングしまくる』に尽きます。

テンプレートをカスタマイズする場合も最低限のコーディング力は必要なので、維持できるように定期的にトライしてみてください

ヒアリングシートを作ろう

今後の営業活動に必要な「ヒアリングシート」を作っておきましょう。

LP作成の依頼を受けた方は感じたと思いますが、どんな情報を元にデザインや構成を作ればいいか悩みませんでしたか？

それを明確にして、制作を楽にするのがヒアリングシートです。

簡単にヒアリング項目例を作ってみましたので、自分が案件交渉した時「コレ聞けばよかったな」と感じたものを追加して、自分のヒアリングシートを作ってみましょう！

ヒアリングシートの例

【このシートを使う人のスキル想定】

見本があれば、シンプルな構成なら0からでもコーディングが可能
テンプレートを利用し、カスタマイズしてサイト制作が可能
デザインツール（adobeなど）の利用はまだできない

【ヒアリング項目】

企業理念・コンセプト
他社と比べた時の強み、自慢、サービスや商品の特徴
サービスや商品のメイン客層（年齢、男女比、仕事帰りのサラリーマンが多いのか主婦が多いのかなど）
HPを訪れた人に見せたいイメージ（例：カッコいい会社、温かみある会社、奇抜なセンスのある会社、技術力の高い会社…etc）
HPに必ず載せたい内容は？（例：会社概要、事業内容、商品紹介、採用についてなど）
追加したい機能などあれば。（例：ブログ、問い合わせフォームなど）
現行サイトがある場合は、現環境についての情報（サーバー情報やWordPress利用してるかどうかなど）

【伝えるべきポイント】

制作費は3万〜5万（とこちらから提案する）
デザインは、ヒアリングした項目を元にこちらでお任せ作成させてもらう

テンプレートを利用して作成する場合は、必ず「ヒアリングシートの項目を元に、デザインはこちらでお任せで作成させていただきます」と伝えて認識を合わせておきましょう。

どこまで要望できてどこからできないのか明確にしておくことで、無駄な消耗を避けられます。

何より大切なのは

「コンセプト」
「サービスの特徴や強み」
「ターゲット客層」

です。お任せとはいえ、ここをしっかりヒアリングして作れば、クライアントの想定イメージから大きく外れたサイトになることはないはず。

サイトの目的は商品や会社の魅力を【伝えること】だという前提を意識してくださいね！

DAY30. 成長し続けるための3つのマインドを持とう

実践編（LP作成編）

DAY30. 『成長し続けるための3つのマインドを持とう』

ここまでの取り組み、本当にお疲れ様でした！

最後にプログラミング初心者の方々に伝えたい「3つのマインド」をご紹介します。

ぜひプログラミングを楽しみつつ、これからも成長し続けてください( ^ω^ )

プログラミング初心者に伝えたい3つのマインド

ポートフォリオ〜LP制作実践編まとめ

以上、DAY18〜DAY30までのまとめでした。

ここまで来られた方は、もう『コーディングの副業で月5万』を稼げるレベルになってるはずです( ^ω^ )

本当にありがとうございました！
これからも教わったスキル、マインドで日々成長し、進んでいきたいと思います！
まずは作成中のLP案件頑張ります！😊#30DAYSトライアル https://t.co/q7WrNucm0r
— ユウト@タイ移住目指してます🇹🇭 (@Kiamamion2) 2019年2月6日

DAY18〜30までは、あえてスキルアップよりも『実践』に重きを置いています。

『3つのマインド』にも書いた通り、「1人前になってから行動しよう」では結果が出ないので勉強のモチベーションも上がりづらいです。

そう思っているうちにプログラミングから離れてしまう人を、これまで何人も見てきました。

ですので、今はまだ1人前じゃなくてもいいんです。できることから実践していきましょう。

今のスキルでできることで、成果物を作ってリリースしてみる。できればユーザーに使ってもらい、マネタイズまでを考えてみる。
勉強→実践→勉強→実践→・・・。
この勉強と実践のサイクルを回すことが、何よりのモチベーションとスキルアップになるんです。
「今の自分なんかじゃまだまだ」と思わず、「まだまだだけど、できることはやってみよう」というマインドでいてほしいと思います。

30日間、本当にお疲れ様でした。

次の記事では、より本格的な『コーダーとして企業と仕事ができるようになる』ための内容をまとめています。

『副業』から『仕事』にステップアップさせるフェーズなので難易度も上がりますが、そのぶん働き方の選択肢も広がりますよ！