未経験からでもWEBエンジニアになれるブログ(さぼり気味)

可能な限り楽して生きていきたい。好きなものだけ食べて痩せたい。控えめに行っても玉の輿乗りたい。ほんとはプライベートブログにしたい。何もしてないのに尊敬されたい。家から出たくない。

Wordpress④-インストールを行う

 

ざっくりとした流れの説明のみでしたが、

長い下準備が終わり、やっと今回からWordpress本体を扱っていきます。

 

 

WordPress をインストール

 

WordPress のインストールを行いましょう。

これはサイトやブログを作るたびに毎回行います。

 

 

ja.wordpress.org

 

最新版WordPress のZIP ファイルをダウンロードし、展開しましょう。

 

そしたら展開したフォルダについて手を加えていきます。

 

この、いま落として展開したフォルダ名がブログのURL の一部になります。

 

http://localhost/[WPの任意のフォルダ名]/

 

作成できたら、それをXAMPPフォルダ(XAMPPのインストール時に名前をつけましたよね)の中にある、htdocsフォルダにぶち込みます!!!!!

 

 

ドキュメントルート(文書の根っ子)

 

 

割と重要な用語。

Web サーバーの仕事は、Web 文書をサービス(公開)することです。

 

しかしWeb サーバーとなるコンピューターの中には公開したいファイルと、公開したくないファイルが混在しています。

 

そこで、公開したいファイルは特別に許された場所(フォルダ)に置くということになっています。そこで、公開したいファイルは特別に許された場所(フォルダ)に置くということになっています。 Web サーバーにとってみると、このフォルダが公開文書の起点になることから、文書の根っこ、ドキュメントルートという愛称で呼ばれています。 同時にドキュメントルート下にあるフォルダやファイルには、固有のURL が与えられます。(だそうです)

 

XAMPP では、[c:\xampp(XAMPPの任意のフォルダ名)\htdocs\] が「ドキュメントルート」として設定されています。

 

 

例)
c:\xampp(XAMPPの任意のフォルダ名)\htdocs\applications.html

http://localhost/applications.html

 

c:\xampp(XAMPPの任意のフォルダ名)\htdocs\test.html

http://localhost/test.html

 

こんな風にURLの書き換えが可能です。

つまり、

 

xampp(XAMPPの任意のフォルダ名)のなかのhtdocsが、イコールlocalhostということが確認できました。

 

 

http://localhost/index.html のURL からは、

背後にc:\xampp(XAMPPの任意のフォルダ名)\htdocs\ の構造があることが見えず、

http://localhost/ が文書の大元(根っこ)になっているように見える。

 

そこで、[c:\xampp(XAMPPの任意のフォルダ名)\htdocs\] のフォルダのことを、

 

文書の根っこ「ドキュメントルート(root:根っこ)」と言う。

 

 

コーヒー飲みてぇ~~~~~

 

 

WordPress のトップページにアクセス

 

 

[(XAMPPの任意のフォルダ名)フォルダ]がApache により自分のPC 上で(localhost 上で) 公開されたことになるので、

 

http://localhost/(WPの任意のフォルダ名)


にアクセスし、Wordpressのインストールを行います。

 

 

Wordpress内にあるindex.phpのプログラムが動作すると、

 

1. 初回アクセスではインストーラー用のURL に転送、
2. インストール後はBlog のトップページを表示

 

という風になります。

 

 

 

データベースの接続情報の設定

 

インストール手順その①.

 

WordPress が、自分が使用するデータベースの場所や名前を知る必要がある。ここでその設定を行います。


テーブル接頭辞を教えることで、テーブルの生成はWordPress 自身が行ってくれます。

 

 

データベース名はPHPAdminにて作成⇒wordpress
ユーザー名⇒root
パスワード ⇒(なしなので消しておく)
データベースのホスト名 ⇒localhost
テーブル接頭辞 ⇒wp_******

 

******の部分は固有の接頭辞である必要があります。理由は以下。

 

”テーブル接頭辞は、データベース上での「ファイル名の一部」として使われます。

(データベースでは「ファイル」とは言わず「テーブル」と言います)
個人的な環境であるXAMPP では問題ありませんが、

本番サーバーでは同じデータベース全員が共有しますので

「他人とは異なる固有値」にしておく必要があります。

 

テーブル接頭辞とは、

WordPress がテーブル作成時に先頭に割り当てる文字のこと”

 

 

「この部分のインストールは無事完了しました。WordPress は現在データベースと通信できる状態にあります。準備ができているなら…」
と表示されたら、

 

[インストール実行] をクリック

 

 

 

Blog 自身の設定

実質的にこれがBlog としての設定になります。

 

ここでの設定は任意に行ってください。

パスワード等は控えて置きましょう。後で変更も可能です。

 

 

 

 

ここまでで一通りのインストールは完了しました!

 

次回からは、セットアップ等々行っていきます、、、、、、◎

 

 

 

Wordpress③-XAMPPの起動からデータベースの作成

 

 

今回はXAMPPの起動からデータベースの作成までを行います。

 

ApacheMySQL の起動

 

デスクトップにショートカットを作成しておくと楽です。しといたほうがいいです。

macの場合もデスクトップの下のほうにあるアプリのバーのところ(名前がわからない)に置いておくと楽です。

 

XAMPP のコントロールパネルを起動し、

 

Apache(Web サーバー) と、

MySQL(データベースサーバー)

 

を起動する

 

 

Apache ... [START]


初回はファイアウォールの警告が出るので「アクセスを許可する」を選択

 

※インストール直後には動作しない可能性がある。
Apache が起動しない場合は、マシンを再起動するとよい

 

MySQL ... [START]


初回はファイアウォールの警告が出るので「アクセスを許可する」を選択

 

 

Apache が起動できない

時にSkypeをインストールしているPCではうまく起動できないことがあるようです。

 

【対処法】

MEMO Skype が入っているPC では、skypeの詳細設定でチェックを外す必要がある

Skype -> 設定 -> 接続 -> 追加時の受信接続にポート80と443を使用 のチェックはずす

 

MEMO Windows10 の場合、IIS が邪魔をしてApache が起動できないことがあるので、

こちらの記事を参考にして、「World Wide Web サービス」をOFF にしてください。

 

personal-studio9.com

 

 

localhost(ローカルホスト)とレンタルサーバー

 

自分自身のPC を指す特別に準備されたドメイン

 

たとえば、index.htmlというファイルが自分のPCにあるときは、

 

http://localhost/index.html

 

という風になります。自分のPCですよってことだと思います。

 

 

Apache が起動したということは、http://localhost/のページが表示できるはず。やってみてください。

 

 

XAMPP を使うと、テスト用の環境が手に入るだけですので、実際にサーバーに上げる段階では、レンタルサーバーは必須です。

 

XAMPP は、自分のPC にインストールすることで、自分のPC の中だけで使えるWeb サーバーを構築してくれます。

 

何かやらかしたら消してもっかいインストールすればいいので、めちゃ便利。

 

レンタルサーバーについては、PHPMySQL が使えるものを借りること。たいてい、メニューにWordPress が動くかどうか書いてあります。

 

 

つまりは、

WordPress を使ったWeb サイト作りには2つのサーバーが関係してきます。


テストサーバーであるXAMPP(localhost) と、
本番サーバーであるレンタルサーバー

 

流れとしては、

 

まず

ローカルホストでWordpressを構築し、

うまくいったらレンタルサーバーにあげる。

 

これが1番実践的ですので、このやり方で書いていきます。

 

 

MySQL にデータベースを作成する

 

1. XAMPP のコントロールパネルから、
 MySQL の[Admin]をクリック⇒[phpMyAdmin] の画面が表示される

 

2. 上のメニューから[データベース] をクリック

 

3. データベースを作成するの[データベース名 ] のところに
 wordpress を入れ、[作成] をクリック。

 

 

 

次回は、Wordpressのインストールに入ります。いよいよですね。

Wordpress②-XAMPPをインストールしよう

 

さて、早速xamppのインストールから始めていきます。

環境とかあんまりそういうのは詳しくないので、人それぞれ使いやすいやつ(?)でいいと思いますが(?)

 

とりあえず私はxamppしか知らないんで、xamppでやる人の参考になればいいや!!!!!!!!!!

 

流れとしては、xamppを使ってWordpressをローカルホストで作成し、その後、本番サーバーに移行させるまでが今回の記事の流れになります。ちなみにスクショとかは面倒なのでしません。すいません。

 

 

 

XAMPPを インストールする

 

XAMPP インストール手順

 

めっさ簡単。公式サイトから落とすだけやで。下のヤツね。

 

 

www.apachefriends.org

 

 

その後、インストーラー(.exe ファイル) を実行

 

 

[It seems you have ...] - [Yes]


[Important! Because an activate ...] - [OK]


[Setup - XAMPP] - [Next>]


[Select Components] - [Next>]


[Installation folder]

   //ここで任意のフォルダ名をつけてあげましょう

 

[Next>]


[Bitami for XAMPP] - [Next>]


※ブラウザが開いてBitnami のページが開くが閉じてよい


[Ready to install] - [Next>]


[Welcome to XAMPP!] - (時間がかかる)

 

基本全部OKとかNEXTとかでいいっぽいですね。

 

インストール中の警告は自分の環境を見ながら進めていきましょう。基本は問題ないと思います。

 

 

 

インストールエラーが発生

 

 Xampp インストールの途中でのエラーで以下のものはよく出てきます。

 


1.ダイアログがでる


 -n
 '-n' が見つかりません。名前を正しく入力したかどうかを確認してから、やり直してください。
 ↓
 [OK] を押して進める

 

 

 2. 更に以下のダイアログが出る

 Problem running post-instal step.

 Installation may not complete correctly Installation failed (php.exe).
Perhaps you have to install the Microsoft Visual C++ 2008 Redistributable package.
After that please execute the setup_xampp.bat in the xampp folder manually.
 ↓
[OK] を押して進める

 

 

 

エラーが発生した場合は、インストーラーが"完了した後" に次の手順を行う。

 


 [XAMPP Control Panel]の右側

[Shell]を起動


「#」が画面の左側に表示されたら、以下のそれぞれを入力する


 # setup_xampp.bat (Enter) ... 不具合の修正
 # exit (Enter) ... 修正作業の完了

 


ここまでできたらApache を起動できるようになりますので、まずはここまでを完了させてください。

 

 

先生のノートに今日も感謝、、、、ありがとう、、、、、

 

次回、XAMPP起動編!!!!!!!!!!!!!!!!!!!(?)

 

Wordpress①-予備知識の用語集

 

時間は空きましたが、今回からWordpressの構築についてお話していきます。

ちなみに、サーバーサイドのことがまttttったく分かっていません。現時点で。

 

記事を書き終えるくらいまでには、しっかり理解しておきたい所存。

 

 

まずは今回第一回目、予備知識からお話します。

 

 

 

用語集

 

Wordpressを構築していく上で、行き詰っていろいろ調べたりしていく中で絶対出てくる用語を先生が簡単にまとめてくれたので、メモがてら紹介しておきます。

 

 

ネットワーク


ネットワークとは, 2台以上のマシンをつないでファイル(データ)を
やり取りできるようになれること
二台つないでやり取りできるようになればもうネットワーク

 

インターネット


インターネットとは全世界のネットワークを接続した巨大なネットワークの事

 

 

 

 

ウェブ


ウェブはインターネット上のサービスのひとつ
通信プロトコルHTTP によって動いている

 

HTTP ... ハイパーテキスト(HTML/XHTML) をやり取りするためのプロトコル
HyperTextTransfer(転送)Protocol(取り決め)
ハイパーテキストとは、ハイパーリンク(<a href=""></a>)
を含むテキストのこと。

 

人類の考えた理想的な文書形態(知識形式) のひとつ。

 

インターネット上のハイパーテキストシステムを
ハイパーリンクで繋がれた文書の宇宙と見立て、
Web(World Wide Web 世界規模の蜘蛛の巣) と名付けられた

 

 

 

 

プロトコル


プロトコルは、通信のやりとりの規格のこと。

簡単に言うと約束みたいなカンジ。

 

 

 

 

 

サーバー


データを取りに行く先がサーバー呼ばれるコンピューターです。
特にウェブサイトのサービスを提供しているサーバーのことをWeb サーバーと言います。

 

 

 

アプリ(アプリケーション)


アプリケーションとは、コンピューター上でやりたいこと(仕事、遊び、etc) を実現するソフトウェアのことです。

 

 

 

 
アプリの連携動作


通常、アプリは人間が直接操作を行いますが、アプリが別のアプリを操作して連携動作することもあります。

 

 Web サーバーの中身は、次の3つの代表的なアプリケーションらが連携動作するようにお膳立てされたものです。

 

 

1. Apache


Web サーバー本体

 

 

2. PHP


プログラム言語
プログラムを指示書として読み込み、命令を高速に順次実行する
(特殊なオルゴールに似た) 仕組み
WordPress の実態

 

 

3. MySQL


データベースのサーバーソフトウェア
情報の格納庫。
WordPress がデータの保管場所として利用する
PC 上でデータを保存する方法はいろいろ考えられている
フォルダやファイルといった、OS のファイルシステムに比べ...
エクセルのような表形式で保存でき、表の連携や、
高速な検索も行えるよう特化したデータ保存の仕組み
MySQL では、フォルダに相当する保存の単位を「データベース」と言い、
ファイルに相当するものを「テーブル」と呼んでいる

 

 

 PHPについては、Wordpressの記事が終わり次第書いていきます。お楽しみに。

 

 

 

Web アプリケーション


アプリケーションのうち、Web サーバー上にインストールし、ブラウザ経由で操作するアプリケーションの事をWeb アプリケーションと言います。

 

実態は、プログラム言語 + データベース です。

 

 

Web アプリの例
Facebook
Google
Gmail
Gmap
Amazon
etc.

 

そして"WordPress"

WordPress も「Web サーバー」にインストールして動かします。

 

 

 

 

XAMPP(ザンプ)


PC に各種サーバーソフト一式を入れて、"Web サーバー化"する一括インストールソフト

 


WordPress が必要とする、Apache, PHP, MySQL が入る

 


XAMPPは以下の文字から構成されている。
X - WindowsLinuxmacOS 等のクロスプラットフォーム
A - ApacheのA
M - MySQLまたはMariaDBのM
P - PHPのP
P - PerlのP

 

 

 

先生のノート細かすぎて震える

 

 

次回からは早速、xamppのインストールに挑戦していきます。

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

 

Wordpressが始まるよ~~~

 

 

…っていうお知らせだけなんですけど、次回からね!次回から!

 

 

 

職業訓練も大詰めになってまいりましてね、

 

とても充実しています、、、、◎

 

 

 

で、

次回から、

Wordpressの構築について書いていきます。

 

5日間で詰め込む超高速仕様

ざっくりとしたやり方しか書けないので(スクショは難しそう)

 

がんばってついてきてね。ね。

 

 

最初はサーバーとかの話して、

たぶん最終的に使い方の話になると思うよ

 

 

 

 

 

 

コピーライティング概論④-欲求に応じたコピーの書き方

 

 

今回は、お客さんへのアプローチを考えてみます。

 

今回は文章量が鬼鬼しいぞ~~~~~

 

 

 

お客さんへのアプローチの方法は2つあるといわれていますが、知名度が低い場合のアプローチも考えて行きましょう。

 


まずはフォーカスすべきアプローチをあげてみます。

 

 


【アプローチ別の法則】

1.快楽を得るため(プラス欲求
2.苦痛を避けるため(マイナス欲求
3.知名度が低い場合

 

 

それでは、各アプローチに向けた方法を解説していきます。

 

 

1.プラス欲求ー快楽を得てもらうためのアプローチ方法

 

  AIDCASの法則

 

 

Attention 
 →認知 商品ページへの誘導
========
Interest
 →興味 プラス欲求へアプローチする
Desire
 →欲求 プラスになれる根拠を提示
Conviction
 →確信 購入決定の不安を取り除く
Action
 →行動 CTA(Call To Action)
========
Satisfaction
 →感情 購入後のお客さんの感情を考える

 

 

各頭文字を取って、AIDCASの法則と呼ばれています。

 


このボーダーで囲まれている、I,D,C,Aについては、商品のページで展開するべき要素。

 


つまり、認知してもらってからそのページに誘導して、そこでやることがたくさんあるってことですね。

 


私個人の考えになりますが、
Webでの欲求って、正直後回しにできるものばかりで、


買い物だって後でまた見れるし、予約だって今じゃなくてもいいやって、つまり一番の敵は「後回し」だと思っていますので、


これについては悩ませたら負け、考えさせたら負けだと思います。

 

 

丁寧に、かつ、畳み掛けるようにアプローチしていきましょう。

 

 

 

 


2.マイナス欲求ー苦痛を避けるためのアプローチ方法

 

 

  PASONAの法則

 

 

Problem
 →問題提起 不安を提示する
Agitation
 →灸りたて 不安を増幅
Solution
 →解決策 解決策を提示
Narrow Down
 →絞りこみ オファーの提示
Action
 →行動 購入

 

 

ちょっと難しいかと思いますので、もっと具体的に説明してみますね。

 

 

Problem(問題)  問題点を明確にする
 マイナス欲求を持っている大前提です。顧客が抱えている問題や悩みを、ここであえて明確にします。
 まずは気付かせる。そのために、「○○なあなたへ」的なキャッチコピーを使って、自分に語りかけてきているかのような錯覚を起こさせるのも有効な一つの手になります。

 

 

Agitation(扇動)  問題点を煽り立てる
 煽るねぇ=Bより明確に悩みや問題点をイメージできるように、嫌味のない程度に!煽ります。「そのままでいいの?」とか。

 

 

Solution(解決策)  解決策を示す
 自社のサービス、商品が問題解決に役立つことを知らせ、証拠やその根拠を列挙します。体験談などが、これにあたります。

 

 

Narrow Down(絞り込み) 顧客や期間を限定する
 限定感のアピールを行い、緊急性を演出します。後回しにさせないアプローチ方法です。

 

 

Action(行動) 行動を呼びかける
 望む行動を起こすきっかけを作ります。

 

 


ランディングページなどが典型的な例だと思います。


個人の感想ですが、この法則をきっちりと守れば守るほど、怪しくなっていく気がしますね。気のせいかなぁ。

 

何事も「適度に」が大切です。

 

 

3.知名度が低い場合のアプローチ方法

 BEAFの法則

 

 

Benefit
 →購入メリットの提示

Evidence
 →(論拠)証拠の提示

Advantage
 →競合優位性

Feature
 →特徴

 

これも解説をもう少し加えましょう。

 

まずBenefit
購入メリットの提示ですが、これは商品ページで行うのがいいかと。
商品を利用している最中の写真や、それに伴うお客様の笑顔や満足感のある写真を追加するのもまた良し。
とにかく、この商品を購入することで発生するメリットを(怪しくない程度に)紹介しましょう。

 

 

Evidenceは根拠の提示。
マスコミ実績やお客様からの声などを紹介し、よりはっきりと効果を見せるなら、数値化したランキングやお客様満足度の提示などをオススメします。
なぜこの商品が選ばれるのか、その理由をわかりやすく提示しましょう。ここで複雑に書いちゃうと、離脱します。

 

 

Advantage、競合優位性とか普段言いませんよね。知りませんでした。
これは、「他社製品、自社製品との比較」を意味しているらしいです。品質や価格、利便性などを、
世間一般の相場や他の競合と「比べて」アピールしましょう。自社の競合に対して、どれだけ優位なのかを一目瞭然になるように。
できればグラフや数値などを使用して示すのがいいですね。

 

 

最後にFeature、特徴です。ここまで見てくれたお客さんは、すでに商品やサービスに対して、好印象を持っているはずです。
ここでやっと、商品の特徴を提示しましょう。具体的には、色や形、内容、素材、賞味期限などです。
最後の段階になりますので、文章には「だめ押し」のコピーを入れるのも有り。ここまできて離脱されると、とても勿体無いですので、
手を抜かずに押し切りましょう。

 

 

 


ちなみに余談にはなりますが、webとクーリングオフの話を少しだけ。

 

web・ネットのクーリングオフは基本的に認められていません。

にもかかわらず、時々「90日間返金保障!」とかみかけますよね。
企業が自主的に行なっているらしいですよ。


実は、90日間ってところにポイントがあって、

「90日あるなら、使って返せばいいや」
とか、
「まだ日にちあるし、後回しでいいや」

と、考えてしまう人間の心理をうまく活用したものだそうで。


「気付いたら90日経ってた!忘れてた!」

ってなるのがコンバージョン(成果)になるんです(笑)


親切なようで誰も悪くない、うまいキャッチの作り方ですよね。

 

 

さて、このくらいでコピーについての記事は終わりにします。

 

修了製作に向けて、がんばらねば。

 

 

コピーライティング概論③-ボディコピー、クロージングコピー、追伸コピー

さて、今回は残りの3つ


「ボディコピー」「クロージングコピー」「追伸」について書いていきます。

 

 

【ボディコピー】


ボディコピーの機能と役割

相手が抱える問題に対し解決策を示し、
商品・サービスを「欲しい」と思ってもらうこと。

 

このために、見込み客が抱える4つの疑問を解決することが最優先です。

 

1.私に何をしてくれるのか? →結果
2.なぜ、私の役に立つのか? →実証
3.ところで、あなたは誰?  →信頼
4.わたしにも効果があるのか?→安心

 

「結果」を見せると、商品・サービスが欲しくなる

「実証を見せると、自分にも出来ると思う

「信頼」を見せると、購入に前向きになる

「安心」を見せると、不安をとりのぞくことができる


このフローに則ってボディコピーを制作していきましょう。

 

 

 

【クロージングコピー】


クロージングコピーとは、
最後の一押し!って部分で力を発揮するコピーです。

 

 

クロージングコピーの機能と役割


商品・サービスを欲しいと思った見込み客に、
確実に商品を買ってもらうこと。

 

このために必要なのは、魅力的なオファーの提示です。

この魅力的なオファーを構成する4つの要素を紹介します。

 

 

1.簡便性(早い・簡単)
2.希少性(個数・期限etc)
3.特典(プレミアム性)
4.保証

 


本文を読み進めてくれて、良いなと思ってくれたのに、購入の仕方がわからなかったり、保証がなかったりだと、もったいないですよね。

 


ボディコピーまで読んでくれた人に向けて、「買わなきゃ!」と思わせるコピーを作りましょう。

 

 

【追伸コピー】


実は、書き出しの次に必要だといわれています。追伸をうまく書ければ、本文を読んでもらえるチャンスも大いにあります!!

 

追伸の機能と役割

斜め読みをする見込み客にも、オファーの内容を理解してもらうこと。

 

ボディコピー、クロージングコピーを斜め読みし、いきなり結論にたどり着こうとする人への対策です。


だから2番目に大切といわれているんですね。ここでも興味を引く必要があるんです。

 

 


追伸では、ボディコピーとクロージングコピーの要点をアピールしていく必要があります。

まとめをいかに面白く書くか、とにかく量を練習しましょう。

 

 


次回は、欲求別のアプローチ方法について考えてみます。