初心者が書いた初心者のためのホームページ作成方法

前回、「初心者が書いた初心者のためのサイトプログラミングの基礎」
を書きましたが、
今回は、もう少し詳しくタグの使い方について書いてみたいと
思います。
ドットインストールでは、VSコードを使って、
サイトプログラミングの詳しいタグの使い方が紹介されています。
それはそれで正しくて大変参考になるサイトです。
ただ、個人的なサイトの作成に関しての質問は全く答えてくれません。
ドットインストールは、動画で紹介している内容であれば、
責任を持つことが出来ますが、
個人のサイト作成のプログラミング方法まで教えることになると、
きりがないからです。

私は、このホームページのお問合せのページを、
ドットインストールの動画「はじめてのHTML」「はじめてのCSS」
を見て作成したサイトをカスタマイズして作っています。
実際に自分のサイトを作らないと、タグの使い方も分からないのですが、
一人のサイトづくりをドットインストールが手伝ってしまえば、
全ての会員のサイト作りの手伝いもしなくてはならなくなってしまいます。
ドットインストールの質問の方法としては、
自分のサイトを作っている時に、分からないことがあったら、
ドットインストールの動画の中から自分が分からない部分を説明しているものを
探して動画の説明をみて、書いてみて上手くサイトが映らなければ
動画の説明範囲内の質問をすることです。
今日、紹介するサイト作成方法は、ドットインストールの説明とは
違っています。
サイトプログラミングの方法は沢山あります。
「いきなりできます!ホームページ作り&HTML超入門」
のような作成の方法もあります。
ホームページをサイトプログラミングで作るメリットは、
WIXやホームページビルダー、ワードプレスなどの
ホームページ作成ソフトが、どのような作業をしてくれているのか?
ということを考え、それによってホームページ作成ソフトの使い方も
深く知ることができます。
私はドットインストールを始めるまでは、
今のようにホームページビルダーを使えませんでした。
特に初心者の方々の参考になれば幸いです。

ホームページ作成方法の基本は前回の通りです。
こちらからご覧ください(クリックしてください)。
今日はHTML・CSSの使い方を説明します。

HTMLタグ

<p>これが一つの段落です</p>
↑     ↑     ↑
開始タグ  要素   終了タグ

属性について
開始タグは「属性」と呼ばれるものを追加することができます。
たとえば区切り線を引く場合は<hr>と書きますが、
<hr width=”50%”>のように属性を追加すると区切り線の長さを
ブラウザの横幅の50%にすることができます。
属性は複数記述することもできます。
たとえば線の長さを50%、線の色を赤にする時は
<hr width=”50%” color=”red”>
と書きます。
いきなりできます!ホームページ作り&HTML超入門より
VSコードで、<hr width=”50%” color=”red”>
を入力したところ、ブラウザでは表示されませんでした。
初心者が、タグの打ち方などを勉強するときは、
教材は一つにしなければなりません。
おそらく「いきなりできます!ホームページ作り&HTML超入門」と
ドットインストールのコードの書き方が、異なっているためと考えています。
今日は「いきなりできます!ホームページ作り&HTML超入門」と
ドットインストールの書き方を比較しながら、
1、テキストの打ち方
2、色の付け方
3、文字の大きさ、配置
4、写真の貼り方
5、リンクの仕方

を紹介します。

先頭に戻る

1,テキストの打ち方
テキストは、VSコードに、書きたいことを書いていけば、
ブラウザに映りますが、おかしな文章になってしまいます。
先ずは、 <title>お問い合わせメール</title>
Googieが記事の内容を判断する上で特に重視しているのが
「title」「h1」「h2」といった要素です。
つまりHTMLで書かれたキーワードを機械的に判断して、
ユーザーの求めているものと最も近い記事を検索結果に返しています。
特にヘッド内のタイトルタグは、丁寧に入力すると、検索エンジンで上位に
検索されやすくなります。
これは、全てのホームページ作成ソフトに共通しています。
どんなホームページ作成ソフトを使うときにも、先ずSEOをしっかりと入力するように表示されると思います。
<h1>お問い合わせメール </h1>
<p >ご意見、ご感想をお寄せください</p>
テキスト入力の基本である、
h1と pタグです。
これを打ち込んでいけば、だいだいの文章は作れますが、
リストを使うことで、読みやすい文章が作れます。
箇条書きリスト、順序付きリスト、説明リスト等です。

2、色の付け方
色の付け方は、様々な方法があります。
「いきなりできます!ホームページ作り&HTML超入門」
では、index.htmlにHTML文章として入力していますが、
ドットインストールでは、CSSファイルを別に作って
色、フォント、配置などを構成するように教えています。
私が書いた色のタグは、CSSファイルで作成しています。
body{
color: red;
}
色の指定方法は、色の名前で指定したり、カラーコード等で指定します。

3、文字の大きさ、配置
フォントは、
info h1{
font-weight: normal;
font-size: 20px;
}
のように指定します。
VSコードに、font-と入力すると様々なタグが表示されます。

4、写真の貼り方 5,リンクの貼り方
色の指定、フォントはCSSファイルに書きましたが、
写真とリンクは、index.htmlに書き込みます。

<h1>
<a href="" target="_blank">
<a href="https://form1ssl.fc2.com/form/?id=ddf4cbaa16dd9a3c">
こちらがお問い合わせフォームです
<li>
<img src="img/2pagec.jpg" width="400" height="260">
</li>
</h1>

画像は、imgタグを使います。
<img src="img/2pagec.jpg" width="400" height="260">

リンクは以下のように書きます。
<a href=”https:---------.com/”>

大体、こんな感じですが、かなり大ざっぱです。
サイトプログラミングで、ソース文を書いて、
それを、ブラウザに映し、ネットにアップするのですが、
1文字でも間違えるとコンピュータは動かなくなります。
今回は、ドットインストールの動画と、
「いきなりできます!ホームページ作り&HTML超入門」
の方法を紹介しましたが、
サイトを作る際には、必ずどちらかの方法に統一しなければなりません。
今回の記事の目的は、「サイトプログラミングの大雑把な方法をつかむことで、
他のホームページ作成ソフトの操作がより理解しやすくなる。」
ということを伝えたかったからです。
また、この文章を読んで、ドットインストールの動画学習を
していただいたら効果的と考えたからです。
あまり沢山のことを一度にしようとすると、頭の中が混乱してしまいますが、
文章に書き出すと、自分がどこまで理解して、
どこから理解していないかが明確になり、次の学習がしやすくなります。
ホームページ初心者の方々、是非、頑張ってください。

ドットインストール https://dotinstall.com/

先頭に戻る

初心者が書いた初心者のためのサイトプログラミングの基礎

目次

サイトプログラミング
1、 サイトプログラミングのメリット
2、 サイトプログラミングの基礎
・ホームページ作成の流れ
・ 素材について
・拡張子について
・最初のWEBページを作るHTMLファイルの作り方
・HTMLの概略
・CSSの概略
・HTMLとCSSのタグの種類
3,終わりに

アフェリエイト
1,アフェリエイト
2,私のアフェリエイト歴


WEBサイトの運営方法
1、あらゆる仕事にプログラミングが必要とされる時代へ
2、WEBサイト公開までのスケジュール決定と原稿・素材の選定
3、USP
4,PDCAサイクル
5,誰に向けて書くのか?
6,注意点
・強引な売り込みはやめる
・著作権の侵害に気を付ける
7,まとめ

私のアフェリエイトの経緯


アフェリエイトの原則
・CTPMの法則

アフィリエイトサイトの心得

サイトプログラミング

1、 サイトプログラミングのメリット
稼げるホームページを作成しようとするのは、自己学習のみでは
不十分です。
ホームページを作成した経験をしたことがある人はわかると思います。
ホームページを最初に作ってWEB上に映った時は、
とても嬉しいものです。
しかし、ホームページを見る目が変わってきます。
自分以外のホームページ、ブログを見た時に、
「このホームページ上手く作ってるな・・・」
「ここの所どうやって書いたんだろう?」
と優れたサイトと自分のサイトを比べるようになります。
アメブロでも、ソースを巧みに変えて素晴らしいデザインのものが
沢山あります。
「自分もこんなに上手に作れたらいいのに」と感じられた方も多いと
思います。
私の場合は本職がありますので、余り時間をかけられません。
短い時間で集中してホームページやブログを書いています。
自分の本職もしっかり勉強して、その合間に時間をやりくしして、
ホームページやブログを書いています。
従って限界があり、ASPの担当者さんに相談したり、他の業者さんを
探す時間も余りないので(アフェリエイトするなら担当者さんと
しっかり相談する時間は重要です)独学でできる範囲で行っています。
これ以上時間をかけると本職が上手くいかなくなります。
限られた時間でサイトプログラミングを学習すると、
集中力や自分の考えをまとめることが出来ます。
プログラミングを間違えて自分の思うようにプログラムが動かない時、
「何故エラーしたか」を考える習慣がつき、解決法を導くトレーニング
になります。
サイトプログラミングの上達法は、沢山プログラムを作って
実際にネットにアップしていくことです。
「こんなブログやホームページ恥ずかしいな」と若い方は
カッコ悪いことは嫌がると思いますが、
実践してこそ実力はついてくるものです。
本やマニュアルだけ読んでいても実際にそれを使わなければ
上達しません。

2、 サイトプログラミングの基礎
・ホームページ作成の流れ
① 内容を決めるホームページのテーマを考えます。
② 2ページのタイトル、デザイン、構成を決める
どんなデザインにするのか、何ページ作成して、
どのような構成にするのかを考えます。
③ 素材を集める
文章やイラスト、写真の画像ファイルなど、
ホームページに掲載する素材を用意します。
画像の大きさの調整なども行います。
④ ホームページを作成するHTMLを用いて、
ホームページを作成します。
⑤ インターネットに公開する作成した
ホームページをWEBサーバーに
アップロードしてインターネット上に公開します。
・ 素材について
素材には文章、写真、イラスト、背景画像など様々なものがあります。
デジタルカメラやスキャナで撮った写真は、
サイズが大きすぎたりすることがあります。
私の場合はペイントでサイズを調整したりします。
WEBページで利用できる画像のファイル名は
GIF、JPEG、PNGの3種類です。
写真や絵によって適切な形式があるので使い分けます。
ネットでフリー写真素材なども活用しましょう。
・拡張子について  
拡張子       形式  
HTML      HTML形式のファイル  
JPEG      画像ファイル   
GIF         画像ファイル 
PNG           画像ファイル  
CSS       スタイルシート
JS         JavaScriptのプログラム
CGI        CGIのプログラム
MP4        MPEG-4形式の動画ファイル
拡張子は必ずつけてパソコン上に表示できるように設定する必要があります。
ホームページを構成するフォルダを作成するときに必要になります。
・最初のWEBページを作るHTMLファイルの作り方
① メモ帳を起動する
② HTMLを記入する
③ ファイル名を保存する
④ ファイル名と保存先を指定する
私の場合はhomepageというフォルダを
デスクトップに作りその中に
index.htmlのファイルを作成しました。

 

 

私の場合、フォルダ内のファイル名を、このようにしています。
画像やアイコン等の素材はファイル名を分かりやすくしておくと
後の作業が楽になります。
・HTMLの概略
HTMLはHyper Text Markup Languageの略で、ホームページを作るために
必要な言語です。
作成されたHTMLファイルはブラウザ(インターネット・エクスプローラー、
エッジ、グーグルクロームなど)と呼ばれるソフトで表示することができます。
HTMLの基本構造は次の通りです。
<!DOCTYPE html>
<HTML lang=”ja>”
<head>
ページ情報要素
</head>
<body>
ページ内容要素
</body>
</html>
となります。
上記がHTMLの基本構成で私の場合はindex.htmlファイルの中に
HTMLコードを記入していきます。
ヘッダー、ボディーに自分が書きたいように素材を
入れていきます。
文章を記入したり<h>タグを使います。
写真やその他の素材は多くは<img>タグを使い、
フォルダに用意した写真のファイル名のコードを記入していきます。

・CSSの概略
CSSの基本
スタイルシートとは
CSSとは、Cascading Style Sheets の略でスタイルシートともいいます。
このCSSは、ホームページが登場した最初の頃から存在していたわけではありません。
「HTMLの中からこの飾りの部分は分けておいたほうがいいのでは?」
という発想のもと、途中から作り出された仕様です。
スタイルシートの役目
スタイルシートは、簡単に言うとデザインを自由に変えられる命令の集まりと考えてください。
指定できる内容は
・「どこに何を表示するのか」といった全体的な指定
・画像の配置、背景色の指定
・各文字の色、サイズの指定
・枠線の色や太さの指定
・余白の指定
などスタイルシートはHTMLの情報をコントロールできるような命令が含まれているのです。
CSSファイルはHTML文章で<div css=”ooooooooo”>のような
コード文でタグ付けをして、Styles.cssというCSSファイルを作成して
HTMLと別の場所でコード文を作ります。
完成すればFTPソフトを使いWEBサーバーに
転送して自分のサイトをインターネット上に公開します。

・HTMLとCSSのタグの種類
HTMLは
<!DOCTYPE html>
<HTML lang=”ja>”
<head>
ページ情報要素
</head>
<body>
ページ内容要素
</body>
</html>
をベースにして、その中に素材を埋め込んでいきホームページを構成します。
HTMLのタグの種類と機能は以下の通りです。
h1はheadingの1番という意味で、
Pはparagraph(段落です)文章はこの中に記入していきます。
画像を配置するためにはimgタグを使います。
その後にsrc(ソース)としてあげてhomepageフォルダ内のファイル名を
書きます。
画像の大きさはwidth(横)height(縦)で指定します。
<section class="works">
<h1>WORKS</h1>
<section> <img src="image/c.JPG" width="400" height="260">
<h1>春日大社</h1>
<p>可愛い鹿</p>
</section>
<section>
上記は私の書いたソース文です。
文章全体にも適切なタグを付けてタグの階層をはっきりさせる必要があります。
ホームページの全体の構成は前述したように、
<!DOCTYPE html>
<HTML lang=”ja>”
<head>
ページ情報要素
</head>
<body>
ページ内容要素
</body>
</html>
となります。
文字コードの設定が必要で、最近ではUTF-8に統一されつつあります。
<head>ページ情報要素には、
<meta>文字コード
<tiile>
<link rel href>など
タグの階層を間違えると上手く表示されません。
faviconは「favicon作り方」で検索して調べてみましょう。
文章の説明をするときは、Name属性をdiscriptionそして、
説明自体はcontent属性に書きます。
以上が・<head>ページ情報要素になります。
<body>ページ内容要素ですが、
見出しは「h1,h2,h3」と付けていきます。
そこに、imgタグを入れて画像ファイルを指定して、サイズを決めるのは
<head>ページ情報要素の作成と同じです。
<p>タグで「h1,h2,h3」の見出しを付けます。
<head>タグは、この文章全体に対する情報を入れるためのもので
<header>タグは<body>タグの中で使うヘッダー的な要素を入れるための
ものですので使い分けましょう。
<body>の下には<footer>を付けるのが一般的です。
画像にリンクを張るソース文は以下の通りです。
<a href="https://dotinstall.com/" target="_blank">
<li> <img src="image/icon_16x_02.png" width="20" height="20"> </li>
以上がHTMLで使われるタグの概略です。
そして、CSSで、
・画像の配置、背景色の指定
・各文字の色、サイズの指定
・枠線の色や太さの指定
・余白の指定
をしていって見た目の良い、役に立つホームページが出来上がります。
CSSのタグの種類と機能は以下の通りで、
HTMLで作った文章をデザインしていきます。
色は<h1>と書いた後に{ }を書いて、その中に
color red(赤)などを記入していきます。色のCSSタグは
数字で表すこともできます。
他にも透明度を設定できたり、色相、彩度、明度を指定する方法もあります。
フォントはfont familyというプロパティーを使います。
フォントは様々に設定できます。
余白はmargin設定で行います。
divタグで文章をレイアウト変更します。
divタグを追加した後、違うスタイルを付けたいときは
class属性を使い、要素はクラス名で表現してcontainerと書きます。
以上が私が、ドットインストールの動画学習した内容です。

3,終わりに
私のサイトプログラミングのノートのようなもので、
これを読んでいただいて、ドットインストールの動画を見ていただければ
学習が早いと思います。
これを読んでいただいて、「プログラミング学習してみたい」
と思っていただけたら幸いです。
一緒に楽しくプログラミングを勉強していきましょう。
最後に私の作成したサイトをご覧ください。
このサイトは、ドットインストールの「はじめてのHTML」と
「はじめてのCSS」の動画を見ながら作成したものを、
このホームページの「お問い合わせメール」専用に作成したものです。
今後の学習で、「お問い合わせメール」専用サイトのみでなく、
様々なサイトに変えていくことができます。
ホームページ作成は無限の可能性を持っているのです。
頭の体操にも、とてもいいです。   
https://positive1963.web.fc2.com/

目次に戻る

先頭に戻る

アフェリエイト

1,アフェリエイト
アフェリエイトは立派なビジネスです。
アフェリエイトのプロの人がいます。
その人達は、何らかの形で個人事業主もしくは会社を運営しています。
プロなので、きちんと経理を行い納税もされています。
誰でもホームページ、ブログをもった時点でサイトの運営者です。
収入が無くても、その自覚は持ちましょう。
サイトの運営者である限り、無報酬であっても、
そのサイトには責任を持たないといけません。

2,私のアフェリエイト歴
私は昨年、ホームページビルダーを購入しレンタルサーバーと契約して
ホームページを作成しました。
それまではWIXで行っていたのですが2年契約が終了するので、
他のホームページソフトも試そうとやってみました。
WIXは非常に操作が簡単なホームページ作成ソフトです。
ホームページの作成からお問い合わせフォーム、掲示板、ネットショップの
設定がほとんどマウスのドロップ&ドラッグだけでできてしまいます。
HTML、CSSの知識も全くいりませんでした。
ネットショップを行うと年間大体ですが3万円程度です。
簡単なビジネスをやったことがあって、「ネットショップが持ちたい」
という方には、オススメかもしれません。
ネットショップは試みましたが、ビジネスプランが明確でないと
経営できません(当たり前ですが)。
従って私のように「ホームページって何ができるのだろう???」
と漠然と思っている様な人にはとても経営できません。
私は4年前に本職の研修会の勉強に疲れたので、
別のことがしたくなって、手当たり次第に本を読みました。
ロバート・キヨサキの「金持ちお父さん・貧乏お父さん」で、
不労所得を得るために株式投資、不動産投資をして、
会社を作ることを勧めていましたが、
私は株式投資、不動産投資、FXには全く興味はなかったので、
アフィリエイトと聞いたとき、「これならパソコンの勉強にもなるし
いいな」と思い、WIXを2年契約しました。
それからフェイスブックなどのSNSも始めました。
WIXは非常に優れたホームページ作成ソフトです。
4年前の全くパソコン知識ゼロでもネットショップができて、
ホームページの仕組みが大体分かりました。
アマゾンや楽天で何でクレジットカードで
買い物ができるのかも理解できました。
後、ネットをしていて詐欺サイトかどうか見分けがつくようになりました。
このようにパソコンビギナーの私に教えてくれたのがWIXでした。
WIXはサポートがほとんどありません。ヘルプがあってそこで検索します。
私はヘルプをほとんど使わずにできました。
しかし、出来ないのがビジネス!!!!
お金と時間をかけずに稼げるというキャッチコピーは嘘です。
ビジネスはそんなに甘くありません。
何を、どうやって、いくらで、誰に売るのかを明確にしないまま、
ネットショップは経営できません。
たとえ売るものがあって、注文があったら大変です。
お金を先払いしてもらったら、配送しなければなりません。
今の仕事をしながらとてもできないことが分かりました。
従ってアフィリエイトのみでやっていくことにしました。
ホームページビルダーを使うなら、JUSTもしくは、
エックスサーバーと契約が必要です。
私は月94円からできるエクストリムと契約しました。
ホームページビルダーのパッケージを購入して、
最初にサポートに「WIXよりかなり使い勝手が悪い」と文句を言いました。
ホームページビルダーのパッケージを購入しただけだったら2回しか
サポートは使えません。
JUSTと契約すれば、かなりのサポートが受けられると思うのですが。
月額1522円とWIXとあまり変わらない値段だったので、
月94円のエクストリムにしました。
お問い合わせフォームの設置にかなり手こずりました。
お問い合わせフォームが動かない」ということです。
昨年、ホームページビルダーを購入して、
お問い合わせフォームのパーツを貼り付けて、
何回設定してもエラーになりました。
最近サイトプログラミング学習をはじめてわかってきました。
それは、お問い合わせフォームを設置するためには、
CGIというパスをHTMLに組み込まなければなりません。
ホームページビルダーの会社とレンタルサーバーの会社に
問い合わせましたが、どちらの会社もお問い合わせフォームの
設定に正しいパスを埋め込む方法が分かりませんでした。
自分で「CGI,お問い合わせフォーム」でネットで調べました。
すると一般的なお問い合わせフォームのCGI設置の
ソース文は以下になるそうです。
<fome name="fome1"method="post"
action="http://kaigo-trable.extrem.ne.jp/cgi-#!/usr/bin/perl/mailfome/mail.cgi">
<input type="hidden"name="/usr/sbin/sendmail="goodlife@kaigo-trable.extrem.ne.jp">
<input type="hidden"name="title"value="サービス紹介ページ">
<input type="hidden"name="subject"value="サービスのお問い合わせ">
<input type="hidden"name="required"value="お名前">
<input type="hidden"name="url"
value="http://kaigo-trable.extrem.ne.jp/user_name/thankyou/html">
名前:<input type="text"name="お名前"><br>
メールアドレス:<input type="text"name="メールアドレス"><br>
タイトル:<input type="text"name="タイトル"><br>
コメント:<textarea name="コメント"color="50"></textarea><br>
<imput type="submit"value="送信">
</form>
cgi-#!/usr/bin/perl/mailfome/mail.cgi
の部分をレンタルサーバーのCGIパスを埋め込まないと
お問い合わせフォームに入力された文章がこちらに届きません。
ホームページビルダーの会社とレンタルサーバーの会社は
別のプログラムで運営しているので、どちらに聞いても分からないので、
レンタルサーバーのCGIパスをどのように設置するのかは、
私自身で組み合わせて考えても正解する確率は天文学的な数字になります。
そこで考えました。
お問い合わせメール専用のサイトを作成して、
ホームページビルダーで作成したサイトにリンクさせればできる。
という解決法を考えました。
ドットインストールの動画学習で、サイトのソースとフォルダは作成していたので、
FC2で無料の登録をしてドメインを作成して、
ドットインストールの動画学習で作成したホルダをFTPソフトで
FC2のドメインにつないでサイトをネットにアップして
そのURLをホームページビルダーで作成したサイトにリンクさせました。
すると、最初はこんな全くメルアドを書いたものでした。

「お問い合わせ」としてメールアドレスを書いて、
サイトの訪問者に意見を聞くつもりでした。
それが、このように「お問い合わせメール」をクリックすると、
メールソフトが開いて、ご意見、ご感想を聞けるようになりました。
とてもスッキリしました。

「メールはこちら」をクリックすると、このようになります。

このようにメールソフトが起動します。
ドットインストールの動画学習を始めて1ヶ月ですが、
とても良い頭の体操になります。
コンピュータはエラー文を書くと動かなくなります。
自分が思うように動かないときは何が間違っていて、
どうすれば上手くいくようになるだろうか?と考えるようになりました。
今、考えているのは、スマホでどうしたら最適化できるだろう?
と考えています。
パソコンで見るサイトの画面とスマホで見るサイトの画面は違います。
私はパソコンで作業しているので、スマホで最適化するのは難しいです。
しかし、今の若い人はほとんどスマホを使うので、
その辺が今後の課題かな?
と思っています。
プログラミング学習法をして問題を解決すると、
とてもスッキリします。
皆さん、こちらのサイトにご意見、ご感想をお待ちしています。

目次に戻る

WEBサイトの運営方法
1、あらゆる仕事にプログラミングが必要とされる時代へ
60分でわかる!プログラミング教育最前線より
ICTの力でもっと便利になる日本社会
プログラミングと言えば、「プログラマー」や「システムエンジニア」
のような専門職の人達だけが必要な知識と思われていました。
しかし、これからは、あらゆる産業、仕事において
プログラミングのスキルが必要になります。
例えば、事務仕事において、大量のデータ入力や整理などの
作業をする際にプログラミングができれば、
データ処理用ソフトを作り、スピーディーに業務をこなせるようになります。
理学療法士の仕事であれば、医師、看護師から時間をかけずに情報を
得たり、患者さんの病気を調べたり、理学療法プログラムを立案したり、
理学療法プログラムを実施した効果判定のデータを分析したりできます。
また、その取り組みを病院のホームページに掲載するなど
可能性は無限に広がります。

2、WEBサイト公開までのスケジュール決定と原稿・素材の選定
WEBサイトの作り方・運営の仕方 坂井和広より
いつまでにサイトを公開したいか期日を決めて、
それぞれの工程を逆算して完成までのスケジュールを決定します。
テキスト原稿のほか、ロゴ・イラストなどの作成データ、
写真・動画など撮影データについて、何が必要か検討しましょう。
準備する主な原稿・素材
・テキスト原稿・ロゴ・動画・イラスト
・スライドショーに使うメイン素材・プロによる写真撮影
・有料または無料写真素材
原稿・素材を準備する方法
・自分で撮影する。またはスタッフに任せる
・ネット検索で探した業者から見積もりを取り依頼する
・知り合い伝いでいい業者を紹介してもらう
WEBサイトを良いものにしようと本気で思うなら、
お金と時間が必要になります。
上記のようにWEBサイトの運営の計画を立てることは非常に重要です。
私の場合は趣味で、「本職の息抜き」という程度で作成していますので、
お金と時間は最低限という考えになります。
できるだけ良いものを作成したいと常に考えていますが、
サイトの性質、役割などで、かけるお金と時間は変わってきます。

3、USP
USP(ユニークセリングポイント)とは
Unique selling pointの略で「独自の売りとなる提案」のことです。
・5W4Hの観点
何を、いつ、どこで、誰が、何故、どうやって、いくらで、いくつ、どれくらい
新しいビジネスを考える場合に有効な5W4Hですが、
USPを導き出す過程においても、5W4Hから差別化できる
ポイントを絞り出します。
思いついたポイントをすべて書き出し、独自のUSPを考えましょう。
例)様々な問題解決法は、介護職の方々に介護現場での問題解決に
役立てて欲しいと作成しています。
介護の仕事は難しい疾患の高齢患者さんが多く、
介護職員なら誰でも肉体的、精神的に介護ストレスを抱えます。
また、介護現場は人間関係が非常に難しい職場です。
様々なコンテンツを用意していますので、
介護職員以外の仕事の方でもお気軽にご利用ください。
・十分な競合の調査とアイディアの絞り出しを行い、
厳選したキャッチコピーと体験価値を交えた説明文を作る

4,PDCAサイクル

現状把握・課題設定・実行改善・効果検証

4つのサイクルを繰り返すPDCAサイクルとはPlan,(計画)Do,(実行)Check,(評価)Action,(改善)を繰り返し、継続して改善する手法です。まずは計画を立てたことを実行できる体制を作って、着実に実行していくことです。一人で行うときは、実務に加えてサイトの改善実行も自己責任で行う必要があるので、セルフコントロールが必要です。

・実行・改善のサイクルを早くすることで結果も速く出る

・PDCAサイクルで確実に実行し、4つのサイクルでサイトの成長を加速させる・サイトの規模や目標の売り上げに応じてスピードを調整して取り組む

5,誰に向けて書くのか?
超かんたんアフィリエイトより
・より具体的に、誰に向けて書くかを考える
・どういう人に対して記事を書くのかを明確にすることで、
何が足りないのかが見えてくる
・ターゲットを曖昧にしない
・テーマを決めた後は、サイト全体で大まかな読者を想定する
・記事単位で細かい読者を想定すると良い結果が得られる
・読者が記事を見つけやすいようにする

6,注意点
・強引な売り込みはやめる
アフィリエイトサイトで多いのが誇大な商品の宣伝です。
報酬を得たいのでついつい想像だけで広告の宣伝を書いてしまったり、
することです。
SNSを使って自分のサイトを売り込むのですが、マナーに反した売り込みは
反感を買うだけです。
フェイスブック、ツイッターなどの利用は必ず「不特定多数の人」に
発信することです。
他人のブログのコメントやフェイスブックのコメントにアフィリエイトサイトの
URLを貼り付けたりしないことです。
メルマガも有効な宣伝方法の一つですが、不快に思う人に、
いくらメルマガを送っても読まずに削除されるだけです。
・著作権の侵害に気を付ける
ホームページ・ブログを作成していると気づかずに著作権を侵害することがあります。
例えば他人の著書をスキャンして自分のサイトに貼り付けたり、
検索エンジンで検索したフリーでない画像を使ってしまったりすることは
よくあることです。
自分にはそのような事がないかを必ずチェック
しましょう。
すべての文章や画像を掲載してはいけないか?
というと、そうではありません。
信頼ある著書の知識なしに信頼ある記事は書くことはできません。
「引用の主従関係の明確化」をする必要があります。
引用は、自分の意見や主張、論理を説明するため、
他の人の著作物を紹介することです。
ただし、引用する部分は意味が分かる範囲の最小限にとどめる
必要があります。
また、引用した著作物以上のことを書かなければなりません。
例)私はブログに様々な自己啓発書や瞑想の本の名文を引用しています。
ホームページ・ブログに書いた記事は、私の著作物となります。
権利も発生する代わりに義務も発生します。
もし、あなたが書いたイラストやホームページ・ブログを
スクリーンショットされて、他の人が自分のブログに載せたら
どう感じられるでしょうか?
逆に「自己啓発書や瞑想CDブックを活用したら、
こんなに心がやすらいだ、仕事での問題を解決することができた」
と自分の作品のことを紹介してくれたらうれしくなると思います。
しかし、あまりにその著書が役に立つので、そのノウハウを
厳密に書いて紹介してしまうと本を買う必要がなくなってしまいます。
著作物の引用は著作権のある人の立場に立って行うようにしましょう。

7,まとめ
現代社会ではプログラミング学習は必修となりました。
仕事、プライベートでもプログラミングのスキルは必要になります。
特にホームページは仕事では「自分の仕事の内容をお客様にアピールするため」、
プライベートならば、自分という人間はこのような考えや、勉強や趣味がある
ということを不特定多数の人に発信できるというメリットがあります。
正しいWEBサイトの運営方法を学習することは、
ネットでのトラブルを避け、上手くいけばそれなりの報酬を
得ることもできます。
今後、それは益々発展していきます。
年齢、性別に係わらず、あなたなりの正しいサイトの運営方法を
試みてください。

目次に戻る

私のアフェリエイトの経緯
アフィリエイトの始めは、ASPの選択です。
アフィリエイトの本には沢山のASPが紹介されています。
全てのASPを試すことはできないので、
私の場合は楽天アフィリエイトとA8にしました。
最近、楽天アフィリエイトは、ほったらかしにしています。
A8さんの良いところは、ファンブログでブログ作成が容易なことです。
また、複数のブログサイトを作れます。
メインブログがあって、その下にサブブログが作れます。
アフィリエイトの基本は、1サイト1テーマ、
ホームページなら1ページ1テーマです。
ASPのブログのみで行うアフィリエイターもいるかと思いますが、
私は一つホームページを持っています。
ホームページ作成ソフトも多数あります。
私は最初、WIXのホームページ作成ソフトを使っていました。
2017年3月から今までに維持費が73057円かかりました。
G―SUITメールアドレス、E―コマース(ネットショップ)などの
料金も含めてです。
WIXは、ほとんどサポートはありませんがソフトの操作が非常に簡単です。
教えてもらわなくても、ソフトを適当に操作していたらできてしまいます。
お問い合わせフォームや掲示板、ネットショップの設置まで自分でできました。
私は理学療法士の仕事しかしたことがなく、ビジネスプランなどは、
立てたことがなかったのでWIXで稼ぐことはできませんでした。
個人でビジネスプランがしっかりできていて、年100万円くらいは
ホームページで稼げる自信がある。ホームページ作成の知識は乏しいが
できるだけ自分で作ってコストを抑えたいという方には最適かもしれません。
私のように、全くホームページを作ったことはなく、ホームページで何が
できるのだろう?と勉強したい方にもお勧めです。
Webサイトの作り方・運営のしかた 坂井和広著は
中小企業の広報担当者向けの本です。
経営者からすると現代ではホームページは会社の顔ですから、
最初はプロのホームページ作成会社に依頼するでしょう。
ホームページが作成されてからは広報担当者に任されることが
多いです。そのような役をされている方もいらっしゃるかと思います。
ワードプレスでサーバーはエックスサーバーを使うように書いています。
安定した稼働率、処理能力が高速
高機能なのに低価格(1年契約で月1080円~)
独自SSLが無料
200GB以上の大容量でマルチドメイン無制限
自動バックアップありで安心
使いやすい管理画面、WordPressなど簡単インストール可能
WordPressのアップグレード、プラグイン追加などが容易
データベース、PHPのバージョン切り替えが可能
メールアドレス、FTPアカウントを無制限に作成可能
電話とメールのサポートが充実、メールの返信が早く専門的見解など
エックスサーバーの優れている点を上げています。
サーバーは目的によって変わります。
私の場合は、エクストリムさんを選びました。
ホームページ作成ソフトはホームページビルダー21を使っています。
WIXさんの場合は、ソフトもドメインもメールアドレスもネットショップ
の設置もほとんど自動でできました。
HTMLなど全く知らない素人でもネットショップの運営ができます。
私はビジネスの才能がないので上手く使いこなせませんでした。
ホームページビルダー21はCDのパッケージなので一度購入すれば
何年も使えるということと、
エクストリムさんは月額なんと94円からです。
しかし、ライトプランで2ギガしか容量がないです。
エックスサーバーさんの方が高機能なのですが、
私の場合「2ギガでいいや月94円だし」という気持ちが強いです。
月94円ですが、メールでの質問はしっかり答えてくれて、
返信も早いです。
ホームページのやり方は大体わかって、ホームページビルダー21の
操作もできるし、そんな大きなビジネスはしないという人には
お勧めです。
私は3年間ブログ・ホームページを趣味としてやってきましたが、
色々な本を読んだり実際試したりしてきました。
その経験がないと今のスタイルを作れなかったと思います。
3年間10万円くらいで、これだけ楽しめたのだから、
お金のかからない趣味と言えるでしょう
もっと上手くやれば、報酬も期待できるかもしれません。
そのためには、地道に人の役に立つホームページ・ブログを
作りたいです。
C言語には世界的な取り決めがあります。
しかし、C言語翻訳機を作るメーカーによって文法の解釈に
少しづつ違いがあります。
すると一般的な文法を習ったはずなのに自分のパソコンの
C言語翻訳機にかけてみるとエラーになります。
私はこのブログでA8のアフェリエイトサイトを作っています。
始めた頃、WIXのホームページにA8の広告のC言語を
埋め込んでWIXのホームページから直接、A8の商品購入の
サイトにリンクできないか試しました。
WIXやホームページビルダーのような
ホームページ作成ソフトもC言語翻訳機であるといえます。
ですからA8の広告のC言語を他のホームページ作成ソフトに
埋め込んでもコンピューターが文法間違いと判断するので
WEB上にアップロードしてもエラーになり正常に作動しません。
ホームページビルダー21はアフィリエイト広告を貼ることができます。
しかし、その他の機能で上手く動作しないときがあります。
各レンタルサーバーにより、許可しているパスがあり、
ホームページビルダーに正確にパスを入力しなければ作動しない
パーツもあります。

目次に戻る

【中古】アフィリエイトの王道 / 伊藤哲哉

価格:385円
(2020/5/25 20:07時点)
感想(0件)

アフェリエイトの原則

アフィリエイトの王道 伊藤哲哉より

・CTPMの法則
アフィリエイトサイトの作り方に関する方法論は色々ありますが、
その中で分野テーマ、内容に関わらす指針として活用できるのが、
CTPMの法則です。

CTPMは、インターネットでユーザーが商品やサービスを購入
してもらう流れを4つのステップに分けたものです。

C:CONTENS
最初のステップになるC:CONTENTSでは、優秀なコンテンツ
ユーザーが求める情報を用意します。

T:TRAFFIC
ユーザーは何らかの情報を求めてインターネットで検索します。
アクセスしたユーザーは、しっかりとした情報を提供してくれる
優秀なサイトの運営者に対して、信頼感をいだきます。
「これだけの情報を集められてすごい!」とファンにするくらいの
情報を提供しましょう。

P : PRESELL
PRESELLとは「SELL(売る)」の{PRE(前)}ということで、
セールスの前段階のようなものをイメージしてください。
セールスの世界では「商品を売る前に自分を売れ」という格言があります。
まず自分を信じてもらうことが、商品を買ってもらうことにつながります。

M : MONETILIZE
アクセスしたユーザーにファンになってもらったら。
アフィリエイトサイト運営者を信頼してくれているので、
お勧め商品を伝えれば、高い確率で購入してくれます。
ユーザー目線で作成する

CTPMの内容を一言で言えば、それは「人に役立つサイト、
喜ばれるサイト]を作ることです。
報酬がほしいので無理に誇大な文章を広告紹介に書いてしまって
後からクレームが来る場合があります。
報酬を得るためには、自分のサイトから広告をクリックしてもらい
商品を購入してもらわないと報酬が得られませんが、
紹介した商品の広告の紹介文章には責任を持たないといけません。
・ユーザーにとって有益なサイトを作る
・ユーザーにとって、購入してメリットのある商品を紹介する
こうしたことを誠実に実行していけば、アフィリエイトで成功できます。
アフィリエイトの紹介本の内容には共通するものがあり、
テーマの選びから、アフィリエイトサービス会社ASPの紹介
サーバー・ドメインの紹介、テーマの選び方、商材の選び方
アクセス解析の方法、キーワードの選び方、成約率をあげる仕組み
SEO対策などについてか書かれています。
一度に全てのことはできません。
一発で上記のようなアフィリエイトを作る人ができるのは
天才でしょう。また、その道でプロになろうとしている人たちです。
我々、限られた時間で行う者は、
短時間で責任の取れる範囲でブログの更新を日時を決めて
定期的に行う地道な作業が必要です。
一つでも人に役立つサイトを作ってネットで信頼を築き上げて
いくことが重要です。
すぐにお金にならなくても、信頼を得るということは、
アフィリエイトサイト作成のみならず、社会生活を送る上で基本となります。
全ての仕事が自分を信頼してもらって何らかの取引をしてもらう、
というのが基本だからです。
趣味でおこなうアフィリエイトサイトの作成も本質的には同じです。
他人のために有益なサービスを行い、その報酬を得ることが
アフィリエイトの基本です。

目次に戻る

アフィリエイトサイトの心得
知識ゼロからのプログラミング学習術 北村拓也より
どこにソースの打ち間違いがあるのかを探すことを、
「デパックするバグを見つける」というそうです。
ソースそのものを見るのではなく、VSコードのエラー文を 探せと言っています。
この本は、プログラミング学習を非常に分かりやすく書いています。
「私もプログラミング学習を始めようかな」としている人には お勧めの本です。

アフィリエイトを書くときに気をつけないといけないことがあります。
超かんたんアフィリエイト 鈴木利典より
アフィリエイトサイトを人に見てもらう必要があります。
フェイスブックやツイッターなどのSNSを使いますが、
お友達に直接、アフィリエイトサイトのURLを送りつけたりしないことです。
私は過去に腰痛に悩むフェイスブックのメンバーに
腰痛予防について書いた URLを貼ったことがあります。
これはあまりしてはいけません。
著作権の侵害の問題もあります。
これは著作権のある人の立場に立って考えれば容易に分かります。
私の場合、田中孝顕さんが美しく力強い日本語に和訳する
ヒル博士の名文を引用し「この文章を読んでこんなに感動した」
「仕事で嫌な事があっても、積極的心構えで乗り切れた」
と感想を書いたら著者はよろこぶかな? なんて考えます。
その逆にあまり文章を本のストーリー通り書いてしまって、
「本を買わなくていいや」と思わせるような文章はダメです。

目次に戻る

先頭に戻る