営業ナシでWeb制作案件が舞い込んでくる”新世代”戦略 ▶︎

【裏ワザ】WordPressテーマを無料で自作!ポートフォリオにも最適

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

 

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

 

この記事の信頼性(筆者はこんな人)

  • 現役Webデザイナーが執筆
  • 継続して月収80万円超のフリーランス
  • 完全未経験から独学でWeb制作スキルを習得
  • TwitterにてWeb制作のメンター経験多数(→@twinzvlog_yk
  • 認定ランサー(ランサーズ最高ランク)

 

【WordPressテーマを自作する前に】HTML・CSSの基礎がわからない方へ

まずは下の記事にてWeb制作スキルの基礎を身に付けましょう。

WordPressテーマを自作する上でHTML・CSSの理解は必須となります。よりスムーズにテーマ作成をするためにまずは基礎的な学習は終わらせましょう。

 

記事内でも紹介されていますが、特に以下の講座は必ず受講するようにしてください。

 

【もう失敗しない】Udemy『Webデザイン』おすすめ講座7選|独学向け

 

【本編】WordPressテーマを無料で自作!ポートフォリオにも最適

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

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

【この章の流れ】

 

  • 自作テーマにおすすめのYouTube動画を紹介
  • 動画の学習方法
  • 動画で作った自作テーマをWeb上に公開
  • 自作テーマをより効果的なポートフォリオに

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

 

自作テーマにおすすめのYouTube動画を紹介

先に言っておきます。この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周目は動画の動きを理解しながら視聴する(コードは書かない)
  • 2周目は1.5倍速で理解を深める
  • 3周目で動画を見ながらゆっくり完全模写
  • テーマを少しアレンジしたりして詳細まで理解を深める

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

 

注意

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

 

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

 

動画教材で作った自作テーマをWeb上に公開

ここまで実践していただいた方はオリジナルテーマを自作できたかと思います。ただ、Web制作会社やクライアントにポートフォリオとして確認してもらうためにはドメイン・サーバーを契約してWeb上に公開しなければなりません。

下の記事で書かれている手順通りに作業をしてもらえれば1時間以内にあなたのポートフォリオをWeb上に公開できます。

ちなみに下の記事で紹介しているConoHa WINGを導入した場合、業界最安値のサーバー費用に加えてドメインも無料で付いてくるので超お得です。

ぜひ今すぐ公開してみましょう!

 

【失敗しない】ポートフォリオサイトにおすすめのサーバーと公開方法|WordPress編

 

自作テーマをより効果的なポートフォリオに

この章を書かれていることを実践すれば、あなたのポートフォリオサイトがより効果的になります。そして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;
  });
});

 

【保存推奨】現役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動画

 

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

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

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

 

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

特徴

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

 

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

ふたご

 

無料で登録してみる >>

 

 

まとめ

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

  • 自作テーマにおすすめのYouTube動画を紹介
  • 動画の学習方法
  • 動画で作った自作テーマをWeb上に公開
  • 自作テーマをより効果的なポートフォリオに

以上でした。

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

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

Twitterで相談する