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

500人以上の参加表明はなかなかに緊張しました^^;来てくださったみなさんありがとうございました〜!
#今日の積み上げ
— 副業めざすよサラリーマン@プログラミング (@creator_atsuki) July 6, 2020
継続136日目
💮 WordPressのサイトを生配信でつくってく会
ちづみさん(@098ra0209 )の勉強会でした!1時間半であんなLPができるなんてすごい✨
作る過程で質問にも丁寧に回答してくれて、本当分かりやすかった!!
snow monkeyもっと勉強しよ😄💪#まーちゃんのLP
めちゃ有益の一言。
— しゅうへい (@shushu2281) July 6, 2020
正直WordPressの学習って何すれば良いかあまりわからないのですが、オススメの教材だったり、ツール、サイトなんかも教えてくれて、それでLPの制作全体図が無料で学べたのは素敵でした!!
まーちゃんさんの影響でライティングも興味出ましたね😌#まーちゃんのLP
このウェビナーではこのようなサイトをつくって行きました。これをつくって行きましょう!(出来上がったらサンプルサイトとして実績掲載OKです!)

LP作成の目的と希望
まーちゃんのLP作成の目的は以下の通りです。
- ライターのオンライン講座をやるにあたり、LPを希望
- サイト上から申し込みができるもの
- サービスの詳細が伝えられるもの
- お問い合わせができるもの
- ゆくゆくは記事を更新したい
希望予算とデザイン
今回の予算は5万円です
↓参考LP(希望)
黄色テイストを希望です。
また、まーちゃんはhtml.cssの知識がありません。記事に使う見出しやリストなどの知識があるくらい)
そういったお客さんでも管理しやすく作ることも制作者のミッションです!

難しいことはわからんから、わかりやすいサイトを頼んます〜!
#まーちゃんのLP ではこんなサイトを生配信で約1時間30分で構築しました(実務は12時間くらいで作成)
— ちづみ (@098ra0209) July 7, 2020
html.cssがわからんまーちゃんでもブロックで直感的に管理できること、予算内(全て込みで数万円)で低コストな構築に落とし込んだ制作という感じです!
ばーっと作っちゃったので記事にまとめてます😅 pic.twitter.com/PagfiihQQP
動画と準備物
↓こちらがウェビナーの動画です(限定公開につきシェアは禁止でお願いします)
↓こちらが今回作る実サイトです!
※現在、収録当時から追加したところがあり、現在のものと違う部分がありますが、収録当時のものの再現の内容でご案内させていただきますのでご了承くださいm(_ _)m
作る際はローカル環境でWordPressが作れるLocalを使うといいと思います!
使い方はこちらがわかりやすいです。
↓まずSnowMonkeyを持っていない方は試用版を申請しましょう!(1〜2日程度かかると思います)
画像のダウンロード
↓こちらから画像素材のダウンロードできます
ボタンのカスタムHTMLの記述
ボタンのhtmlは2種類あります。
トップのファーストビューのボタン
一つ目のトップのファーストビューです。

↓こちらのコードをカスタム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と違います(中心に置く関係です)こちらの2箇所です


↓こちらのコードをカスタム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の部屋
編集はできないようにしてありますが、こんな感じでつくっております!ぜひのぞいてみてください。
動画内のツールや書籍の紹介
画像圧縮
(macのみとなりますm(_ _)m)
画像素材サイト
画像素材サイトは以下を使っています。写真、イラストともに月額無制限ダウンロードで使えます。
オリジナルテーマを作る教本
オリジナルテーマの勉強ならこちらがおすすめです。(制作会社経由の仕事や、柔軟なデザインに対応するには必要になります。)
テーマ・プラグインの自動アップデートプラグイン
Advanced Automatic Updatesを使っています。しかしこれWordPressの管理画面のプラグイン検索からは出てこない?ので↓こちらのページからzipフォルダをダウンロードして使うのがいいと思います。
SEO初期設定
SEOに関してはこちらの記事がわかりやすいです。
できたらぜひシェアをお願いします!^^
もしできたら#まーちゃんのLPのハッシュタグでtwitterに投稿くださると嬉しいです!^^(みにゆけます!)
昨日のウェビナーを見てさっそく自力で作ってみました!
— まきこ (@makiko_perc) July 7, 2020
細かいとこはまだまだだけど二時間くらいで大体できた😭#ゼロイチラボ に参加して基礎を学んだおかげです!
これから動画を見返して最終調整していきます。#まーちゃんのLP pic.twitter.com/bSDFRrDD1c
また、今回の実績提供をしてくれたまーちゃんのtwitterとLINE@はこちらです!
