【月10万稼ぐ】本物のWeb制作3ヶ月独学ロードマップ

【無料】自作「WordPressテーマ」作り方|ポートフォリオに最適

本記事は『3年間で3度の挫折をした筆者』が独学・完全初心者の方でもWordPressでオリジナルテーマを自作し、Web制作会社に提出しても恥ずかしくないポートフォリオを作れるようにサポートします。この記事を読めば基本的なHTML・CSSのスキルがある方なら、2週間でテーマを自作できます。

 

下の画像のようなWordPressテーマを自作できるようになります(リンクが付いてます)

 

この記事の信頼性(ゆうけんブログの筆者はこんな人)

  • 現役Webデザイナー兼エンジニアが執筆
  • 最高月収7桁超のフリーランス
  • 完全未経験から独学でWeb制作スキルを習得
  • Twitterフォロワー数2,000人超(→@twinzvlog_yk
  • Web制作のメンター経験多数
  • 認定ランサー(ランサーズ最高ランク)

 

【本編】WordPressテーマを無料で自作!ポートフォリオに最適|レスポンシブや日本語の対応は?

さて、ここからはWordPressテーマを自作して公開するまでの具体的なステップをご紹介していきます。

自信を持ってWeb制作会社に提出できるようなポートフォリオを作れるようになるので期待して読み進めてくれればと思います。

【この章の流れ】

 

  • レンタルサーバーを用意
  • 自作テーマにおすすめのYouTube動画を紹介
  • 動画の学習方法
  • 自作テーマをより効果的なポートフォリオに
  • 自作テーマをWeb上に公開する

 

『ほんとに作れるのかよ』と疑問に思っている方もいると思いますが、筆者は実際にこの通り実践したことでWeb制作会社との営業の際に非常に評判の良いポートフォリオを作成することができました。結果として継続的にWeb制作のみで月収80万円を稼げているので信頼してもらって問題ナシかと思います。WordPressテーマの自作で失敗したくない方はこのまま読み進めてください。

 

STEP1.【自作テーマの事前準備】レンタルサーバー&ドメインを用意

自作テーマを作る前に「事前準備として」レンタルサーバー&ドメイン(サイト公開に不可欠なサービス)を用意しておきましょう。

Web制作会社やクライアントに、ポートフォリオの自作テーマを確認してもらうためには、ドメインとサーバーを契約してWeb上に公開することが必須となります。
(無料サーバーでも公開可能ですが、大きな広告がついたり容量が小さすぎたり、登録が面倒だったりします。。)

 

こちらの記事を読んで今すぐサーバーを用意しましょう!

【徹底解説】ポートフォリオおすすめレンタルサーバーと公開方法|無料/有料比較あり

この記事で紹介している「ConoHa WING」を導入した場合、業界最安値のサーバー費用に加えて独自ドメインも無料で付いてくるので超お得です。それと、操作がものすごく簡単です。

 

STEP2. 無料の動画教材でWordPressテーマを自作しよう

先に言っておきます。このYouTube動画は英語音声です。

日本人の方なら『うわ、英語か〜。絶対ムリ』と感じますよね。わかります。筆者も同じく日本人で英語が大の苦手。それでも『Web制作で食っていきたい(中級者以上を目指す)なら、英語音声での学習は必須』ということを覚えておいてください。と、厳しいことを言いましたが、実際やってみると英語音声なんて聞き取れなくても画面の動きどおりにやっていれば問題なくこなせるはずです。

 

この動画の内容

 

  • HTML&CSSでのページコーディング
  • JavaScriptの実装
  • PHPの基礎的な文法
  • WordPressのインストール
  • WordPressのローカル環境の構築
  • WordPressテーマのファイル構造の理解(Template Hierarchy
  • WordPressテーマHTML&CSS、JavaScriptを流し込み
  • カスタム投稿タイプの実装(記事の投稿機能)
  • 固定ページの作成
  • コメント欄・サイドバーの作成と配置
  • Contact Form 7(プラグイン)にてコンタクトフォームを設置

動画のレッスン時間

約4時間

 

筆者のレビュー

まず言わせてください。この動画はインドなまりが強いし、はっきり言って、なに言ってるかはさっぱりわからないかもしれません。それでも、おすすめしたい。『無料だから』という軽い話ではなく、この動画だからです。筆者はこの動画教材がYouTubeではなく、別のプラットフォームで5万円で有料販売されていてもおすすめします。それだけ価値のある動画教材なんです。その理由を3つお話します。

  1. 上の講座内容を見ていただければ分かる通り、無料なのに内容が超有料級スクール並に濃い
  2. たったの4時間の動画で『現場で使える』WordPressスキルを習得できる
  3. Web制作会社にも評価されるポートフォリオを作れるようになる

いかがでしょうか。ちなみに筆者はこの後ご紹介する学習方法で動画を効率的に使い倒し、2週間でWordPressテーマを自作し、それをもとにポートフォリオサイト完成させることができました。

 

前置きはここまでとして、実際にやっていただくのはこちらの動画になります。

How to Make a Custom Website from Scratch using WordPress (Theme Development) – 2019 Tutorial

 

動画教材の学習方法

上の章でご紹介したYouTube動画の学習方法を説明していきます。2週間以内にWordPressテーマを自作したい方はこの通りに実践してみてください。『WordPressもPHPもなにもできなかった筆者』が2週間ぽっちでWordPressテーマを自作できた内容なので初心者の方にはとにかくおすすめしたいです。

 

 2週間でWordPressテーマを自作する動画学習法(4ステップ)

  1. 1周目は動画の動きを理解しながら視聴する(コードは書かない)
  2. 2周目は1.5倍速で理解を深める
  3. 3周目で動画を見ながらゆっくり完全模写
  4. テーマを少しアレンジしたりして詳細まで理解を深める

この流れで実践していただければ2週間ほどでWordPressのオリジナルテーマを作れます。当然ですが、実案件でも使えるレベルのWordPressスキルが身につきます。『ほんとかよ〜』と思っている方は騙されたと思ってとりあえずこの方法通りに実践してみてください。

 

注意

概要欄の『Design Source Code』から動画で使うファイルはダウンロードできます。『Theme Source Code』は有料ですし、動画通りに作れば同じオリジナルテーマを作れるのでダウンロード不用です。

 

どうしても理解できない内容がある方や、メンターを希望される方はTwitterのDMへどうぞ(フォロワーさんのみ返信いたします)

 

STEP3. 自作テーマをより効果的なポートフォリオにアレンジ

この章を書かれていることを実践すれば、あなたのポートフォリオサイトがより効果的になります。そしてWeb制作会社への営業や転職活動の際にも担当者に好印象を与えることができるかと思います。それでは見ていきましょう。

 

トップページのメインビジュアルを動画にする

こちらはWeb制作会社との実案件でも使用頻度の高いWebデザインなので必ず押さえておきましょう。下のコードはコピペだけで『動画の自動再生・繰り返し再生・スマホでも支障ナシ』とかなりの優れもので、実は調べても中々見つからないコードなのでこの記事をブックマークするか、コードを保存しておくことを推奨します。

 

コードを見る
<video width="" height="" preload="none" src="<?php bloginfo('template_directory'); ?>/img/main-video-top.mp4" loop playsinline autoplay muted></video>
video {
  width: 100%;
}

 

自動で画像が切り替わるスライダーを設置

こちらもかなり使用頻度の高いWebデザインです。自分で調べると実装するのに意外にも苦労してしまうと思いますが、今回は下のコードをコピペして大幅に時間を短縮しましょう。

こちらのページのトップビジュアルのようになります。

コードを見る
<div class="slide">
  <div class="slide-img">
    <img src="<?php echo get_template_directory_uri(); ?>/img/top1.png" alt="">
    <img src="<?php echo get_template_directory_uri(); ?>/img/top2.png" alt="">
    <img src="<?php echo get_template_directory_uri(); ?>/img/top3.png" alt="">
  </div>
</div>
.slide {
  position: relative;
  width: 100%;
  height: 800px;
  overflow: hidden;
}

.slide img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  height: auto;
  opacity: 0;
  animation :slideshow 24s linear infinite;
  filter: brightness(105%) contrast(105%) saturate(120%);
}

@keyframes slideshow{
  0%{
    opacity: 0;
  }
  10%{
    opacity: 1;
  }
  28%{
    opacity: 1
  }
  38%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}

.slide img:nth-child(2){
  animation-delay: 8s;
}

.slide img:last-child{
  animation-delay: 16s;
}

@media (max-width: 1200px) {
  .slide {
    height: 700px;
  }
}

@media (max-width: 900px) {
  .slide {
    height: 600px;
  }
  .top-banner p {
    font-size: 16px;
    text-align: center;
    line-height: 1;
    writing-mode: vertical-rl;
    display: block;
    letter-spacing: .3mm;
    font-weight: 500;
  }
}

@media (max-width: 600px) {
  .slide {
    height: 360px;
  }
  .top-banner p {
    font-size: 11px;
    text-align: center;
    line-height: .5;
    writing-mode: vertical-rl;
    display: block;
    letter-spacing: .3mm;
    font-weight: 500;
  }
}

@media (max-width: 350px) {
  .slide {
    height: 320px;
  }
  .top-banner p {
    font-size: 11px;
    text-align: center;
    line-height: .5;
    writing-mode: vertical-rl;
    display: block;
    letter-spacing: .3mm;
    font-weight: 500;
  }
}

 

ページ内スクロールアニメーションを導入

これは定番ですね。ページ内スクロールのアニメーションが付いてないホームページは最近はあまり見ないくらいです。なのであなたのポートフォリオにも必ず付けるようにしましょう。jQueryコードをコピペするだけで実装できるのでパパッとやってしまいましょう。

 

コードを見る
$(function(){
  $('a[href^="#"]').click(function(){
    let speed = 500;
    let href= $(this).attr("href");
    let target = $(href == "#" || href == "" ? 'html' : href);
    let position = target.offset().top;
    $("html, body").animate({scrollTop:position}, speed, "swing");
    return false;
  });
});

 

【応用編】Skillshareでより高度な学習を始めよう

Skillshareとはアメリカ発祥の年額制の動画学習サービスです。よくUdemyと比較されるサービスですが、

  • Udemyよりもクリエイティブに特化している
  • より応用的な講座が多い
  • とにかく安い・・!!
  • 日本語音声がない

これらが大きな特徴です。

つまり、実際の案件をこなしていく際にも『これやっておいてよかった。。』と思えるような講座が多く配信されています。

そして何よりも、安いです。。

年額99ドル(11,000円ほど)、つまり月々約900円の計算になります。

しかも、初回のみ2週間無料で利用できるので、気に入らなかった場合は即解約もOK!

特にWordPressの講座は山ほどあるので、中級レベルへの階段を上りたい方はぜひ受講してみてください。

 

Skillshareを見てみる >>

 

MEMO

ちなみに、筆者のおすすめ講座は『The Complete WordPress Theme Development Course』です!

筆者はこの講座を受講したことでWeb制作会社との案件対応も楽々こなせました。多分ですが、UdemyにもYouTubeにもこれ以上の講座は存在しません。

 

【保存推奨】現役Webデザイナーの筆者が重宝している参考サイト&ツール

最後に現役Webデザイナーの筆者が実際に使っていて『もう、ほんと頭が上がりません。』と日々感じている参考サイトと無料ツールを9つご紹介します。全て保存必須です。使用頻度が高いのでブックマークバーに表示することを忘れずに!

  1. Flexboxを習得するなら
    日本語対応!CSS Flexboxのチートシートを作ったので配布します
  2. Gridレイアウトを習得するなら
    CSSグリッドレイアウトで、サイズが違う複数のボックスをタイル状に配置する
  3. HTML/CSSで困ったら
    HTML&CSS入門 Webデザインをイチから学ぼう
  4. Sass/Scss→CSSへの変換ツール
    SassMeister
  5. CSS→Sass/Scssへの変換ツール
    CSS 2 SASS/SCSS CONVERTER
  6. 画像圧縮ツール
    TinyPNG
  7. 動画圧縮ツール
    VideoSmaller
  8. フリー素材(画像)
    O-DAN(オーダン)
    Unsplash
  9. フリー素材(動画)
    Pexels動画
  10. 【応用編】動画学習サービス
    Skillshare

 

STEP4. 自作テーマをWeb上に公開しよう

  1. WordPress管理画面にログイン
  2. 左にあるメニューの『外観→テーマ』を選択
  3. 『新規追加』を選択
  4. 『テーマのアップロード』を選択
  5. 『ファイルを選択』からテーマをアップロード
  6. 『今すぐインストール』を選択

以上でテーマのアップロードが完了です!

 

『絶対にリモートワーク!』という方におすすめの求人サイトをご紹介!

クラウドテック
Web制作案件の数
(5.0)
案件の単価
(4.0)
使いやすさ
(5.0)
案件獲得効率
(5.0)
初心者向け
(5.0)
オススメ度
(5.0)
総合評価
(5.0)
この講座のポイント

対象
Webデザイナー・エンジニア・グラフィックデザイナー・PM・マーケター・ライター

 

公式サイト
クラウドテック公式ページ

特徴

  • クラウドソーシング企業大手のクラウドワークスが運営する求人サイト
  • 実務未経験者でもOK
  • 登録社数14万社
  • フリーランス・個人事業主向け案件がケタ違いに多い
  • 報酬額や勤務地・職種など希望が通りやすい
  • Web制作・コーディングの高単価案件が多い
  • リモートワーク案件数は業界トップクラス
  • 最短3日で案件を獲得できる

 

現役Webデザイナーの筆者イチオシの求人サイト!フリーランス向けWeb制作案件なら確実に業界トップクラス。営業かけずに案件に困らなくなる一番の近道です。

ふたご

 

無料で登録してみる >>

 

 

『Web制作会社の直営業』で案件獲得したい方におすすめのやり方【筆者実証済み】

Web制作の仕事のとり方が分からない人に捧ぐ『直営業』の教科書

値段
(5.0)
学習しやすさ
(5.0)
わかりやすさ
(5.0)
熟練度
(4.5)
初心者向け
(5.0)
オススメ度
(5.0)
総合評価
(5.0)
この講座のポイント

値段
2,980円

 

この講座の特徴

この講座ではショーへーさんがフリーランス2年目で月収7桁を達成するまでに蓄積したWeb制作「直営業」ノウハウの全てが詰まっています。読んでみるとわかりますが、そのまま使えて普通に契約取れます。

 

コピペOKの営業メールのテンプレートも記事内に貼ってあり、要点まで詳しく解説してくれています。正直これを読んで実践すれば、メール営業で50件送って返信が1件も来ないなんてことは起こり得ないと断言できます。大丈夫です。普通に返信がきます。

 

また、メールに添付するポートフォリオの作成方法や、概算の見積もり金額の相場等も記載されており、初心者にはかなり嬉しい内容が盛り沢山です。エンドクライアントへの直営業のやり方にも触れているので、「高単価案件が欲しい方」「自由に制作したい方」にとっては喉から手が出るほど有益な情報ですよね!

 

今Web制作営業で苦労している方、全員に読んでもらいたいNo.1の商材です。冗談抜きで案件に困らなくなります。

ちなみに、以前はnoteで販売されていた商材ですが、現在はBrainでのみ販売されています。

 

この講座の内容(目次)

  1. 直営業に必要なスキルレベルと準備物紹介
  2. 直営業で意識するべき3つのポイント【本質】
  3. おすすめの営業先と見つけ方紹介
  4. 相手に響く提案文を書くコツ
  5. 提案文のテンプレ公開+解説
  6. 【第2の選択】エンドクライアントに直営業して『作って楽しい』案件を取ろう
  7. 【追記】直営業の成功率をさらにあげる小技
  8. 【追記】副業で案件を取りたいという方へ
  9. 【追記】キャリアの短さや副業であることをプラスに変えるコツ

 

この講座の特典

  • 直営業用の提案文テンプレート
  • 提案文の添削 1回無料

 

Web制作『直営業』の教科書

 

 

まとめ

最後まで読んでいただきありがとうございます。今回の記事では筆者の実経験をそのまま書かせていただきました。ご紹介したWordPressテーマの自作方法で学習してもらえれば必ず2週間以内にテーマを作成できるのでぜひ実践してみてください。

  • レンタルサーバーを用意
  • 自作テーマにおすすめのYouTube動画を紹介
  • 動画の学習方法
  • 自作テーマをより効果的なポートフォリオに
  • 自作テーマをWeb上に公開する

以上でした。

『テーマは作れるようになったけど、どうしたら案件を獲得して稼げるようになるんだろう』とお悩みの方はWebデザイナーロードマップをご覧ください。

もし質問やご相談があればいつでもTwitterのDMへきてください

Twitterで相談する