WordPressのサイトを生配信でつくってく会動画アーカイブ（#まーちゃんのLP）

登壇者は私ちづみと、6月21日のゼロイチラボ大阪を受講くださったWebライターのまーちゃんで行いました。

500人以上の参加表明はなかなかに緊張しました＾＾；来てくださったみなさんありがとうございました〜！

#今日の積み上げ
継続136日目

💮 WordPressのサイトを生配信でつくってく会

ちづみさん（@098ra0209 ）の勉強会でした！1時間半であんなLPができるなんてすごい✨

作る過程で質問にも丁寧に回答してくれて、本当分かりやすかった！！

snow monkeyもっと勉強しよ😄💪#まーちゃんのLP
— 副業めざすよサラリーマン＠プログラミング (@creator_atsuki) July 6, 2020

めちゃ有益の一言。
正直WordPressの学習って何すれば良いかあまりわからないのですが、オススメの教材だったり、ツール、サイトなんかも教えてくれて、それでLPの制作全体図が無料で学べたのは素敵でした!!
まーちゃんさんの影響でライティングも興味出ましたね😌#まーちゃんのLP
— しゅうへい (@shushu2281) July 6, 2020

このウェビナーではこのようなサイトをつくって行きました。これをつくって行きましょう！（出来上がったらサンプルサイトとして実績掲載OKです！）

LP作成の目的と希望

まーちゃんのLP作成の目的は以下の通りです。

ライターのオンライン講座をやるにあたり、LPを希望
サイト上から申し込みができるもの
サービスの詳細が伝えられるもの
お問い合わせができるもの
ゆくゆくは記事を更新したい

希望予算とデザイン

今回の予算は５万円です

↓参考LP(希望）

黄色テイストを希望です。

また、まーちゃんはhtml.cssの知識がありません。記事に使う見出しやリストなどの知識があるくらい）
そういったお客さんでも管理しやすく作ることも制作者のミッションです！

まーちゃん

難しいことはわからんから、わかりやすいサイトを頼んます〜！

#まーちゃんのLP ではこんなサイトを生配信で約1時間30分で構築しました(実務は12時間くらいで作成)
html.cssがわからんまーちゃんでもブロックで直感的に管理できること、予算内(全て込みで数万円)で低コストな構築に落とし込んだ制作という感じです！

ばーっと作っちゃったので記事にまとめてます😅 pic.twitter.com/PagfiihQQP
— ちづみ (@098ra0209) July 7, 2020

動画と準備物

↓こちらがウェビナーの動画です（限定公開につきシェアは禁止でお願いします）

↓こちらが今回作る実サイトです！

※現在、収録当時から追加したところがあり、現在のものと違う部分がありますが、収録当時のものの再現の内容でご案内させていただきますのでご了承くださいm(_ _)m

作る際はローカル環境でWordPressが作れるLocalを使うといいと思います！

使い方はこちらがわかりやすいです。

↓まずSnowMonkeyを持っていない方は試用版を申請しましょう！（１〜２日程度かかると思います）

画像のダウンロード

↓こちらから画像素材のダウンロードできます

画像ダウンロード

ボタンのカスタムHTMLの記述

ボタンのhtmlは２種類あります。

トップのファーストビューのボタン

一つ目のトップのファーストビューです。

↓こちらのコードをカスタムHTMLのブロックに貼ってください。

<div class="btn-box">
<a href="https://docs.google.com/forms/d/e/1FAIpQLSdbbBDXlTwkxKiDu9fAqMMzEIWl_OoEuHiAEQUDZDHJAm68-Q/viewform" target="_blank" rel="noopener noreferrer" class="btn-flat-border">お申し込みはこちら！</a></div>

中間のボタン

ビミョーにファーストビューのhtmlと違います（中心に置く関係です）こちらの２箇所です

↓こちらのコードをカスタムHTMLのブロックに貼ってください。

<div class="btn-box btn-center">
<a href="https://docs.google.com/forms/d/e/1FAIpQLSdbbBDXlTwkxKiDu9fAqMMzEIWl_OoEuHiAEQUDZDHJAm68-Q/viewform" target="_blank" rel="noopener noreferrer" class="btn-flat-border">お申し込みはこちら！</a></div>

追加cssの記述

動画内に出てくる外観＞カスタマイズ＞追加cssの記述は以下の通りです。

/* ボタン */

.btn-flat-border {
  display: inline-block;
  padding: 0.8em 2em;
  text-decoration: none;
  color: #ffffff;
  border: solid 3px #fff;
  border-radius: 59px;
  transition: .4s;
  font-weight: bold;
  background-color: #1F9A1A;
  font-size: 18px;
  width: 60%;
  text-align: center;
}


/* ボタン真ん中 */

.btn-center {
  text-align: center;
  max-width: 500px;
  margin: auto;
}


/* ボタンホバー */

.btn-flat-border:hover {
  opacity: 0.8;
  cursor: pointer;
}

@media screen and (max-width:500px) {
  /* ボタン調整	 */
  .btn-flat-border {
    width: 100%;
  }  
　/* 画像大きさ調整 */
  .sp-width-75 {
    max-width: 75%;
    margin: auto;
  }
}

Figmaの部屋

編集はできないようにしてありますが、こんな感じでつくっております！ぜひのぞいてみてください。

動画内のツールや書籍の紹介

画像圧縮

ImageOptim — better Save for Web

imageoptim.com

(macのみとなりますm(_ _)m）

画像素材サイト

画像素材サイトは以下を使っています。写真、イラストともに月額無制限ダウンロードで使えます。

無料イラストなら「イラストAC」

イラストACは、無料イラスト・アート・年賀状・年賀・画像などの素材がフリー。AI・EPS形式の素材も無料でダウンロードOK！商用利用、編集もOK。かわいいフリーイラストも…

www.ac-illust.com

オリジナルテーマを作る教本

オリジナルテーマの勉強ならこちらがおすすめです。（制作会社経由の仕事や、柔軟なデザインに対応するには必要になります。）

テーマ・プラグインの自動アップデートプラグイン

Advanced Automatic Updatesを使っています。しかしこれWordPressの管理画面のプラグイン検索からは出てこない？ので↓こちらのページからzipフォルダをダウンロードして使うのがいいと思います。

Advanced Automatic Updates

Adds extra options to WordPress' built-in Automatic Updates feature.

wordpress.org

SEO初期設定

SEOに関してはこちらの記事がわかりやすいです。

できたらぜひシェアをお願いします！＾＾

もしできたら#まーちゃんのLPのハッシュタグでtwitterに投稿くださると嬉しいです！＾＾（みにゆけます！）

昨日のウェビナーを見てさっそく自力で作ってみました！
細かいとこはまだまだだけど二時間くらいで大体できた😭#ゼロイチラボ　に参加して基礎を学んだおかげです！

これから動画を見返して最終調整していきます。#まーちゃんのLP pic.twitter.com/bSDFRrDD1c
— まきこ (@makiko_perc) July 7, 2020

また、今回の実績提供をしてくれたまーちゃんのtwitterとLINE@はこちらです！