Edited at

2日間でWordPress使ってホームページ作成してきました-SEO小話もあるよ-

More than 1 year has passed since last update.


はじめに

2日間15時間でWordPressのブログを作成するfestivo ホームページ作成(WordPress) Camp@東京【学生15,000円、一般20,000円】~戦うスキルを身につける15時間!WordPress集中合宿!~

に参加してきました。

(合宿って書いてありますが泊まりではなく2日間通い)

何をやったか、どんな話をしたかなんかのレポです。

一からブログを作りたい人、WordPressの講習探している人は参考になるかと。

この記事はウェブ系エンジニアにとっては既知の内容が多いので、知ってそうなところは飛ばして読み進めてください。

ウェブの知識が全然ない人にとってはわかりやすいかもです。

サクッと講義のまとめを知りたい方はここを見るといいかも。


1日目


事前準備

1(サーバーの設定)

http://kohkira.com/server/

2(ドメインの取得)

http://kohkira.com/onamae/

3(ドメインとサーバーの紐づけ)

http://kohkira.com/onamae-x/

4(WordPressのインストール)

http://kohkira.com/wpinstall/

最後のステップでちょっと手間取りましたが、講師の方が出してくれたサイトで手順を見つつ合計1時間ちょっとくらいで全部できました。


あ、あとサーバーレンタルは10日試用期間を利用すれば無料でできますが、ドメイン取得にはお金がかかります(80~4,000円くらい?取ろうとするドメインによってはもっと高いです)。

サーバーレンタルは初期費用3,000円+月額利用料(プランによって変動ありますが、1,000~1,200円だったかと)。


導入


この会について


講師の吉良さんについて

ブロガー兼映像クリエイター

ライターともアフィリエイターとも(収入の7割がブログ)

旅するクリエイター

自己紹介より引用↓

旅とテクノロジーのブログ「Back Pack Hack(バックパックハック)」 http://kohkira.com/ や、

世界を旅する一分動画「TR1P(トリップ)」
https://www.facebook.com/gotr1p/
などを運営しています。

吉良さんのプロフィールはこちら

その他講義をしていく上で出てきた吉良さんの属性箇条書き

- 第一印象はまさにリア充のブロガー兼講師

絶対人生楽しんでる

- ストレッチマンが好き

- ネットの接続が死んだ時は博多のラーメン

- 博多のラーメンは麺が硬ければ硬いほどジャスティス(小麦粉と油でお腹を壊す)

- 晴れ男(だから日焼けしてるのか)

- ケータイ小説の文章が嫌い(改行し過ぎで読みにくくて切れたらしい)(わかる)

- バックアップの鬼(トラウマあり)

- 元ソーシャルぶん回しおじさん

- 現ソーシャルSEOハイブリッドお兄さん


自己紹介

参加者全員が順番に自己紹介

ルール:かならず大きい声で自分の名前を話す

一人2~3分

二十数人参加

(急に来たので入社の挨拶より緊張した)

(全く名前を覚えられなかった)

話を聞いてて気になった人、こと

睡眠アドバイザーさん

1/3 くらいは仕事(自営業の方含む)で来てた

前橋から来た人、札幌から来た人、長野から来た人、高知から来た人

エンジニア、定年退職済のおじさん、ウェブデザイナーetc


講習内容について



  • ターゲット


    • 本格的なブログを作りたい

    • 何からやればいいかわからない

    • wordpressで挫折した

    • 相談相手がいない




  • やろうと思っていること


    • wordpressでサイトを作りきる

    • 実践的なブログの構成(ターゲット、コンテンツなど)

    • SEO、SNSのアプローチ方法

    • 二日間で必ずいずれかは吸収(できれば全部)してほしい




  • 進めるにあたって


    • ボトムに合わせてやります(ITリテラシ低めなところから)




ウェブサイトはどうやってできてるか

ウェブサイトとは?

サイトは「お家」みたいなもの

サーバー:土地

ドメイン:住所

その上に立てる骨組みがwordpress

wordpressとは?

世界で一番使われているブログ用cms(コンテンツマネジメントシステム)

→snsを使うような感覚でウェブサイトのコンテンツを作ったり作ったものをカスタマイズ


wordpress でウェブサイト作成


手を動かして覚えていこう


  • 事前課題の確認

    全員がWordpressの管理画面に入れるようになっているか



  • Wordpressに記事を登録


    • Wordpressのダッシュボード /severdomain/wp-adminにログイン、Wordpressで自動作成されたブログを開く

    • シンプルな文字だけの記事・エディタ上部のツールバーで数種類の書体を指定した記事




  • htmlを使ってページを編集


    • youtubeの動画を埋め込んでみたり


    • aboutにgoogle mapの地図を表示してみたり
      埋め込むには、youtube,google mapのメニュー>共有>埋め込み
      で出て来たhtmlテキストをコピーして記事に貼り付け



  • サイトのヘッダー調整(テーマカスタマイズ)


  • ウィジェット書いてみる


  • テーマオプションの機能を使ってみる

    PRエリア表示、連絡先設定など


  • CSSを使ってかっこいい表を作ってみよう



ウェブサイト運営のアドバイス


サイトのコンセプト・戦いどころ

リーンキャンパスを使ってコンセプトを考える

例:サイトの流入を考える(吉良さんの例)

twitter SEO (FB) 紹介・口コミ

  ↘️     ↙️

   blog  ⇆  youtube

    ↓

  会う・コミュニティ

蛇足ですが、SEO考えるならtwitter攻略必須

名前・顔を直接出すのに抵抗がある場合は、ブログの顔として、ウェブサイトのキャラクターを作るといい



PVマフィア

bar

途中からwifiが死んでしまいがちだったので後半はトーク中心でした。


  • ブログの体裁が整ったら、まずは100記事書いてみよう

    数がないとデータ(SEO)解析できない

    全然人が集まらない

    100記事書くと頑張ったけど全然反応がなかったもの、そこまで頑張ってないけど結構アクセスが集まったものがわかる

    →力の入れ方がわかる


  • それと並行して、SNSでシェアし続ける

    できれば複数のSNSを使う

    同じものをいくつかの媒体でシェアすると、それぞれの媒体での傾向(twitterにはどんなもの、インスタにはどんなものがいい)というのがわかってくる



SEOについて

吉良さん < ほんとはSEOのプラグインを入れるタイミングで話したかった・・・(wifi死亡のため)

SEOとは

search engine optimizationの略

わかりやすく言うとGoogleの検索結果の順位

SEO
SNS

性質
ストック
フロー

良いとこ
自動、利益率
拡散、ブランディング

ウェブサイトで長期的に利益を手に入れたい場合はSEOを無視できない


SEO対策

内部対策と外部対策の二種類ある

内部:サイト情報、タイトルやコンテンツの統一感、内リンク(記事同士でリンクを貼るなど)

外部:被リンク

※被リンクにも種類がある(リンクを貼ったサイトのレベル→SEOの効果は比例する)

最終的に何をすべきか・・・?

良いコンテンツを作る!!

この記事には書いてないけど、googleによるSEOの評価プロセス(cronの説明)がわかりやすかったと思う。

システム系の知識がある程度ある人は何となく想像で分かってるけどあんまり説明されてないことを、易しく解説してた印象。

SEOの小技とか、やっちゃいけないこと、どんなものを作るべきか気になる様になったら、SEOガイドラインなどを見てみると良い。

吉良さん < 明日はWordPressでよく使うことになりそうな機能の紹介とか、okaneのkasegikataなんかをやっていきましょう。


1日目夜

懇親会やりました。

事前に企画があったわけではなく、その日に「今日行ける人がいれば〜」っていうお話になり、半分弱集まりました。


会場はx-gardenのダイニングスペースっぽいところ。

ちょうど別で交流会をしていたようで、それに便乗した結果。起業家と吉良さんと愉快な仲間たちの集まりになりました。

いろんな人がいましたが、飛び抜けてキャラが濃かったのはfastivo主催者の塚本さん

otsuka_san.png

※もともとは若い頃に最年少で海外駐在員として派遣された超エリート。もう一生分稼いだからと、若い起業家を援助している立派な方です。


2日目

レジュメ


  • FBページ

  • Wordpress各ボタン説明

  • 見出しと目次(プラグインのお話)

  • SEO設定(内部SEO)

  • アナリティクス

  • backup

  • セキュリティ

  • アフィリエイト

  • 文の書き方コツ

2日目は最年長のおじさんがいなくなってました。そういえば一日しか参加できないって言ってたかも。


wordpress でウェブサイトを作成続き


昨日に引き続き wordpress の使い方を解説しながら手を動かす


  • FBページ

    FBページをサイドバーに埋め込み



  • Wordpress各ボタン説明(デフォルトでWordpressに入っている機能)


    • カテゴリー機能
      カテゴリーを作成。記事に紐付け。カテゴリをメニューのBLOG下に追加(階層メニュー)

      ※タグとカテゴリー
      例えるとカテゴリーは書類をしまうファイル、タグは書類に付ける付箋。二つの機能は近いけど、タグの方がカテゴリーより細かい

    • メディア
      →投稿などのためにアップロードした画像管理。
        TIPS:検索機能があるので、画像にわかりやすい名前をつけておくと吉

    • 固定ページの機能

    • プラグイン
      サイトの調整をしていく上でめっちゃ触るので、やりたいこと+プラグイン で検索して色々見てみるといい

    • ユーザー
      共同管理者

      権限の設定などもできる

    • ウィジェット
      今後たくさん使うことになると思うので、色々いじってみるといい
      ちなみに、ウィジェットの名前の頭に意味のわからないアルファベットが頭にあるのはテーマが用意しいてるウィジェット

    • ツール
      ブログのお引越し機能(インポート、エクスポート)がある

    • その他機能の説明
      コメント周りの設定、外観(サイトのキャッチフレーズタイトルなどの設定とかアイキャッチ画像の設定とか)



機能はいっぱいあるので、具体的なものはすぐに覚える必要はない

どんなのがあるかだけなんとなく覚えてると役に立つ

おまけ:オススメのフリー素材


  • 見出しと目次(プラグインのお話)


  • 内部SEO設定

    プラグインを利用して設定


  • アナリティクス

    Google analyticsを登録、プラグインでWordPressのダッシュボードに表示



  • アフィリエイト

    omake

    広告はっつけられるツール↓


    • google ADsense

      ADsenseに登録するには、審査を通らないといけない

    • asp

    • amazon アソシエイト
      amazon prime day、amazon primeで書くと良い




  • セキュリティ

    これもプラグインでできる。特に大事なのは管理ページへのURL変更とログイン時に画像認証入れる



受講生のリクエストしたハウツー


  • slider作り方
    →テーマを使うかプラグインを使うか

  • フォント変更方法

    →テーマオプションの書体、xserverのプラグイン、CSSに書き込み

    Q.CSSで一番強いのは


  • font awesomeの導入方法

    →プラグイン利用する(面倒なリクエストしてごめんなさい)


  • 背景色の変更方法

    →外観>カスタマイズから

    khromaを使っていい感じの色の組み合わせを作ってもらうとやりやすい


  • タグクラウドの作り方

    →ウィジェットを使う


  • ふきだしを作る

    →テーマの機能・プラグインを使う


最終的に、こんな感じになりました。

下の方にもう少しだけスクショを載せておきます。

表に見えないけどやっておくべき設定なども一通りできているので、写真とコンテンツの文章を差し替えてしまえば個人ブログの完成です。


ウェブサイト運営のアドバイス


サイトタイトルやキャッチコピーについて

※サイトのタイトルとキャッチコピーはSEO的にもブログのコンテンツ的にも大事!!

検索されそうなキーワードを入れた名前、キャッチコピー(カテゴリなど)を入れる


  • 企業
    →企業名や所在地をタイトルとキャッチコピーに入れる

  • 雑記ブログ
    →キャッチーで覚えやすタイトルとカテゴリ

  • 専門ブログ
    →ターゲットを絞り込むワードを入れる(身体作りなら「××の筋トレ日記」みたいな)

SEOを狙うなら専門ブログが比較的簡単で強い


「コンタクトレンズ」みたいな大きいワードだと、すでに大企業などがトップにいるし、上の方に食い込んだとしても費用対効果が薄い。

「ハロウィン コンタクトレンズ 福岡」みたいな、どんな目的で検索しているかわかるようなキーワードを組み込むといい。

結論としては「複合ワードでニッチな層を狙え」


文章の書き方

吉良さん < 正しい書き方というものは存在しない

とはいえ、オススメの書き方はあるので紹介していく。


読まれる文章


  • 最初と最後にターゲットとまとめを書く

    例:この記事はこういう人に読んで欲しい記事です。結論はこうです。



  • 響く文章の書き方はテレビショッピングに学ぶ


    1. 問題提起 :台所の油汚れ、落ちないですよね・・・

    2. 共感   :わかります、私も10年主婦をしてていつも戦っています

    3. 解決策  :そこで紹介するのはこれ!「簡単洗剤オレンジクリーナー」

    4. 実際の感想:おじさん「自分は掃除が嫌いだったけど、簡単に汚れが落ちるから掃除が楽しくなった」




読みやすい文章

読みやすい文章とは


  1. 読んでいてストレスが少ない

  2. 読んでいて「絵」が頭に浮かぶ

読みやすい文章を書くためのポイント


  1. 一文を短くする

  2. 適切な改行とスペースを入れる

  3. 最初と最後に結論やまとめを入れる

  4. 画像を入れる

  5. 音読してみる

詳しくはここに解説があります。


講座を受けての感想とかおまけ知識とか


準備作業について

準備作業ではサーバー借りてドメイン取得してワードプレスをサーバーにインストールしました。

そこでちょっと詰まりました。

ちなみに、私が詰まったのは、ドメイン取得(お名前.comを使った)してから有効化されるまでに時間がかかることをしらなかったために困りました。


取得したドメインとサーバーを紐づけし、WordPressをインストールした後にWordPressの管理画面へアクセスしたらお名前.comの画面が表示され、管理画面の表示ができませんでした。


「このドメインはお名前.comで登録済みです」と言われて「私が登録したしお金は払っているので私は悪くない…講義を受けれなかったらお名前.comのせいだ」って思って寝ました。

ちなみに、翌朝同じURLを開いたらちゃんとWordPressの画面に入れました(ドメインが有効化されていたため)。

画面が開けなくて、10分くらいお名前.comの設定項目探したりQA読んだりしてましたが、あきらめて寝た直後くらいに「有効化されたよ」ってお知らせが来ておりました。

お名前.com使いにくい


講義内容に関して

講義を通して一番困ったのは↑の作業。


講義内でのWordPressの操作は大部分がボタンクリックとドラッグアンドドロップで完結します。めっちゃ簡単だった。

HTMLを書くこと、CSSを書くことはなかったです。何回かコピペしたくらいかな。

それでも、SEOやセキュリティ、アナリティクス周りまでWordPressでサイトを運営するのに必要な機能は大体網羅して教えてもらえました。明日からブログ始められるレベルまでこれたと思います。


それにプラスしてSNSの使い方とか、SEO対策入門的な話、広告収入の話などを自分の経験からいろいろと話していただけました(私はこっちが特に嬉しかった)。

この記事を見てわかるように、二日間みっちり講義してもらったため、結構濃い内容になりました。

講師の吉良さんは、「まず根性を見せて100記事」「最初はあんまり見られないけど続けること」「リアルの知人が大事」ということを強調してました。

ネットの世界でも、うまくいくためのセオリーは、結局はリアルとそんなに変わらないなあという印象。

慣れてきてサクサク記事をかけるようになるには半年くらい必要だとか。

吉良さんの第一印象は口のうまいIT企業の講師(リア充)(敵)でしたが、講義が進むうちにガジェットの紹介も色々しているという話が出たあたりで印象が変わりました。「カメラ一つで三時間は話せる」って言ってたので多分オタク仲間です。


漫画も色々履修していて、さらっと出された「そんなんじゃねえよ」っていうタイトルにびっくりしました。なんでわりとニッチな少女漫画知ってるんだ…。(テンポよくて面白いんで私は好きです)


結局のところ


  • Q. ウェブサイトとか触ったことない人でも大丈夫?

    A. 専門知識は一切必要ありません。知識がなくても大丈夫なようにかみ砕いて説明してくれます。


  • Q. ぶっちゃけどんなレベルの人向け?

    A. SNSやOffice以外のツールをそこそこ触れる人(サイト運営・HTMLなど未経験でもOK)。かつタッチタイピングができる、事前に練習して習得してこれる人。

  • Q. Qiita利用者層(エンジニア経験者レベルの人)が行く意味ある?

    A. WordPress一切触ったことない人、自サイト持ったことない人なら結構ある。

    やろうと思えば一人で勉強できる内容が多いけど、サクサク進むので時間節約になる。サイトの形が作れるところまでいっちゃうので、サイト公開前に投げ出す確率が減る。

    この講義の受講が特にお得なのは↑のレベルの人や、サーバー知識のないウェブデザイン関係の経験がある人。

  • Q. 二日間でこんながっつりやったら絶対忘れると思うんだけど?

    A. でも大丈夫!(講義内容を動画配信してるので)もう一回学べるドン!


今回の講座で紹介されたプラグイン


  • Table of Contents Plus

    見出しから目次作成

  • Contact Form 7

    コンタクトフォームを簡単に作れる

  • Meta Slider

    スライダーを作成して好きなところに表示できる

  • TypeSquare Webfonts for エックスサーバー

    いろんなフォントを使える

  • AddQuickTag

    →よく使うショートコードを登録してボタン一つで呼び出し

  • speech_bubble

    →ふきだしを作ってくれる

  • Page Builder

    画面表示で色々なカスタマイズができる

  • All in One SEO Pack

    Noindex:SEO評価対象からはずす
    Tips:OGP画像=SNSでシェアされた時のアイキャッチ画像的なの。サイズは630px×1280pxくらいがオススメだそう

  • BackWPup

    自動バックアップしてくれる(DBのバックアップとファイルのバックアップは別々にジョブを設定する必要あり)

  • SiteGuard WP Plugin

    セキュリティの設定ができる

  • Google Analytics Dashboard for WP by ExactMetrics (formerly GADWP)

    グーグルアナリティクス(アクセス分析ツール)のダッシュボード内容をWordPressのダッシュボードに表示


おまけ


  • プラグインとショートコード

    プラグインは特定のショートコードを認識して見た目をいいようにしてくれるもの

吉良さんの解説

おかんと九州男児のウチの父のようなものです。

父が風呂上がりに「あれ」と言うと母が冷えたビールを出します。
でも、普通は居酒屋で「あれ」と言ってもビールは出てきませんよね。

この例では、母というプラグインが父の「あれ」というショートコードの意味を理解して、ビールという結果を出したということです。


  • 記事タイトル

    最初のうちは記事タイトルがなかなかいいのが出てこない。
    どうしても記事タイトルが思いつかないときは


    1. 記事につけようと思うキーワードでググる

    2. 検索結果で表示される上位10個くらいの記事のタイトルを参考にする




最終的にできたもの

チラ見せするとこんな感じのものができました。


fitforlife_re.png

CONTACT.png

ABOUT   fitforlife.png

faviconも表示できます(使ってる画像が悪いせいでちょっと汚いですが)

fabicon.png