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

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

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

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

LP作成の目的と希望

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

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

希望予算とデザイン

今回の予算は5万円です

↓参考LP(希望)

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

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

まーちゃん

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

動画と準備物

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

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

※現在、収録当時から追加したところがあり、現在のものと違う部分がありますが、収録当時のものの再現の内容でご案内させていただきますのでご了承ください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に投稿くださると嬉しいです!^^(みにゆけます!)

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