HTML5、CSS3でホームページ作成。基本的なHTMLの書き方

ホームページ作成 HTML5、CSS3。基本的なHTMLの書き方

HTML5、CSS3

 
ホームページが作れれば、クラウドソーシングなどで1万円から5万円程度の案件がこなせます。

スキルアップすれば、店舗や企業からの依頼を受注して独立し個人事業主になる事だってできます。

ホームページ作成に必要なHTMLとCSSの基本

HHTML(HyperText Markup Language)は、Webページのタイトル、見出し、段落、箇条書きなどの文章構造を記述する言語のこと。

CSS(Cascading Style Sheets)は、HTMLで記述されたWebページの体裁(レイアウト)を指定するための言語のこと。

基本的なHTMLの書き方

  • <!doctype html>
  •  このファイルははHTMLだとブラウザに説明するための宣言。

  • <html lang=”ja”>
  •  html要素内で使われている言語は日本語という意味。

  • <meta charset=”utf-8″>
  •  meta要素はhead要素内に配置し、このページに関する色々な情報を記述します。

    ・文字コード
    ・ページの紹介文(概要文)
    ・ページに関連するキーワード
    ・TwitterやFacebookなどのSNSの情報
    ・作ったソフト
    ・著者
     今回の場合は、「このページは文字コード utf-8 」と宣言しています。

  • <head></head>
  •  この中に metaタグ、titleタグの書き込み、スタイルシート(CSS)の読み込み、JavaScriptの読み込みを記入。

  • <body></body>
  •  文章の本体。

  • <nav></nav>
  •  ナビゲーションと呼ばれる部分。リンク集の内容を示す見出しやリンクのリストなど。

  • <article></article>
  •  自己完結する内容を表すセクション。記事の見出しや文章など。

  • <section></section>
  •  汎用的なセクションを定義する。コンテンツ内においてテーマでまとめられた部分(見出しや文章など)。

  • <header></header>
  •  まとまりの最初の部分。

  • <footer></footer>
  •  一般的にそのセクションの筆者、関連ドキュメントへの陸、コピーライトなどの情報。

  • <title></title>
  •  Webページのタイトル。

  • <h1></h1>
  •  見出しとなるテキスト。h1からh6まで。

  • <p></p>
  •  段落。

  • <a href=”#” target=”_blank”>
  •  リンクを作成。

  • <img src=”./images/sample.jpg” alt=”サンプル画像”<
  •  画像ファイルのURL.

  • <div></div>
  •  CSSを適用させる部分で使う。

  • <address></address>
  •  連絡先。

  • <small><small>
  •  誤解を避けるための注意書きや警告、法的制限、コピーライトを表す法律用語など。

基本的なCSSの書き方

 セレクタ { プロパティ : 値; プロパティ; 値; ・・・ }

 

HTML & CSS を覚えよう

自分でホームページを作ることが出来たら・・・・。

  • お金が節約できます
  •  Webデザイナーにホームページ作成を依頼すると最低でも10万円以上の制作費が請求されます。

  • 時間が節約できます
  •  すぐにコンテンツを更新したい時でもデザイナーにWebサイトのイメージを伝えるのに、打ち合わせが必要になり時間がかかります。

  • 副収入が得られます
  •  ホームページを作るスキルを活かして、クラウドソーシングで仕事を探して副収入をえたり、お店や企業から仕事を受注して収入を得て独立することも出来ます。

 

ビジネスでホームページを作成する時に必要なこと

ホームページの作成に必要な知識は?

ホームページ作成で必要なスキル

ホームページの制作を仕事にしたい。副業で稼ぎたい。

WordPressというCMSを使えば、最低限の知識でもホームページを作成・運用できます

WordPressでホームページを作るために最低限どんな知識が必要になるでしょうか?

    最低限必要な知識

  • レンタルサーバの契約・ドメイン取得が出来ること
  • WordPressがインストール出来ること
  • HTML & CSS に関する知識があること
  • ヒアリングでホームページのコンセプトやデザインをイメージ出来ること
  • 最低限の画像処理が出来ること

 
ホームペー位作成にあたって、次のスキルがあるとライバルより優位に立てます。

    ライバルより優位になるための知識

  • タイピング = ブラインドタッチ
  • プログラミング (PHP言語やJPerlおよびava、JavaScript)
  • linuxサーバの運用知識
  • マーケティング(ステップメールの使い方も含む)
  • コピーライティング
  • SNSを活用した集客方法

ビジネスでホームページ作成をする

ビジネスでホームページ作成をする場合、
お客様がホームページに何を求めているのかを把握します
その上で、より良い提案が出来るようにマーケティングなどの勉強もしておくようにします。

ホームページ開設後、何年も継続して運用していくことになります。

僕は
WordPressでホームページを公開した場合、WordPressはバージョンアップが頻繁に行われるので、「一度ホームページを作ったら放置しておく」という考え方は排除してホームページは継続して運用する必要がある事をきちんとお客様に伝え納得してもらいます。

ホームページ作成後に料金のことでトラブルことのないよう、金銭に関することは仕事に着手する前にきっちりと決めています。(契約書作成)

ホームページはメンテナンスが必須

仕事柄、複数のホームページを15年近く作成・運用しています。
場合によっては、PerlやPHPでプログラムする事もありますが、一般的な運用ではホームページの運用が簡単なWordPressを使うのが一番ラクです。

ラクが出来る作業時間が少ない低料金で提供できる

ホームページ公開までの流れ

1時間ほど面談orSkypeで、打ち合わせをしてホームページのコンセプトおよび料金が決まったら、お客様から資料をメールしていただいています。
   
ライバルになりそうなサイトをリサーチしてデモ用サイトにサンプルサイトを作ります。
   
お客様からOKがでた段階で、正式なサイトを公開します。

読者がアクションを起こす5つの理由とは?

読者がアクションを起こす理由は?

読者がアクションを起こす理由

Webサイトを使って稼ぐためには、あなたのWebサイトに訪れた読者が、あなたのサイトを見て「メルマガ登録」や「商品の購入」などのアクションを起こしてもらう理由が必要です。

読者がアクションをおこす5つの理由

共感
感動
信頼性
安全性
お得感

 
共感 を感じてもらうためには?

感動 を感じてもらうためには?
読者が求めている以上のものを提供します。
読者が思っている以上の圧倒的な情報量を提供して感動を誘います。

信頼性 を感じてもらうためには?
なんでもかんでも売りつける行為は信頼性を失います。
おすすめ出来る商品だけを紹介しています。」という信頼を得るようにします。

なによりも、あなたのサイト内の記事内容が一貫してあなたの信念が貫かれていることが大切です。
あなたのキャラクターをしっかりと設定して、サイトの記事を書いてください。

安全性 を感じてもらうためには?
読者があなたに共感・感動・信頼性を感じたら、次に安心安全という事を伝えなければなりません。

お得感 を感じてもらうためには?
いよいよオファーの前に伝える事は、お得感を感じてもらう事です。

あなたからの購入者に対する「特典」を付加したり、「限定性」を強調して、読者の背中を押してあげます。

アクションを起こさせるテクニックは?

アフィリエイトは人々に「購買」という行動を起こさせて稼ぐビジネスです。

インターネットが普及した今、店という枠組みから抜け出して世界中の人に商品を売ることが出来ます。
直接モノを扱わず情報で商品( 情報も含みます )を売るネットビジネスは、在庫も店舗もいらない合理的なビジネスです。

あなたもリスクの少ないネットビジネスで、金銭的なゆとりが欲しいと思いませんか?

ネットビジネスで商品を売るには、ネットを通じて商品をうるためのテクニックが必要です。

「あぁ、コピーライティングについて学べば売れるんでしょ!!」

と思われるかもしれませんが、実際はコピーライティングを駆使しても、商品は思ったように売れません。
なぜならコピーライティングは、本質的にはチラシやセールスレターを書くためのテクニックだからです。

コピーライティングのスキルは学ばないより学んだほうが良いのは当然ですが、毎月100万円以上の売上のある人達はコピーライティングのテクニックはあまり使っていません

9つの欲求を理解しよう

人は9つの欲求を満たすものを無意識に求めています。

:Goal(ゴール)
. Time:時間(結果が出るまでに時間がかからない)

2. Effort:努力(努力なしでできる)

3. Money:お金(お金を稼ぎたい)

:Desire(欲望)
4. Greed:富、名誉(女性にもてたい)

. Lust:愛、美(綺麗になりたい)

. Confort:苦痛がない状態(もっと豊かにないたい)

:Teazer(Disireよりさらに強い欲求。じらし)
. Scarcity:希少性

. Curiousty:興味

. Controvesy:反社会性、非常識

 
この9つの欲求は、G → D → T になるほど強い欲求になります。

常識と思い込んでいる事に対して、まったく別の考え方が書いてあると思わず目を留めてしまう事がよくあると思います。
これもGDTの法則を知っている人が使うひとつのテクニックです。

コピーライティングではない売るためのテクニック

コピーライティングではなく、読者に感謝されながら商品が売れる文章の書き方が販売されています。扇動

購入するつもりのない方でも、売れる文章を書くための参考になるので是非いちど目を通してください。扇動

稼ぐためのコピーライティング その1

稼ぐためのコピーライティング その1

インターネットビジネスは文章で売る商売

メルマガアフィリエイトなどネットビジネスの基本は、文章で商品・サービスを売る商売です。

「どんな書き方をしたら稼げるようになるのか?」

コピーライティングについて解説します。

メルマガも商品を紹介するランディングページ(LP)も、文章でセールスをします
売上の成約率を上げるために、コピーライティングについて学びましょう。

コピーライティングのスキルで稼ぐ

文章を書くのが苦手!!

僕も文章を書くのは苦手ですが、コピーライティングのスキルを学んでからは書くことが好きになってきました。
コピーライティングはネットビジネスで稼ぐために必須のスキルです。

稼ぐチャンスを増やすためにも苦手意識を克服したいと思いませんか?

コピーライティングを学ぶと、自然に苦手意識も薄らいでいきます。そうして自分が書いた文章で商品が売れると、文章を書くことが楽しくなってきます。

売れる文章が書けないと大損します

ステップメールのテンプレートをコピー&ペーストしてセールスをかけても、読む人は「どこかで見たことがあるなぁ」と思ったり、全く興味も関心も示さずスルーしてしまいます。

あなたに売るための文章力があれば、月に何百万円も稼ぐ事も可能になります。

具体的な例を考えてみましょう。

1つ商品が売れると1万円の報酬になる商品を紹介します。
   ↓
100人の人が、あなたの紹介文を読みます。
   ↓
1%の人が、商品を買ってくれると 1万円の報酬になります。

そんな事が1ヶ月つづいたら、それだけも 1万円 × 30 日 で 30万円になります。

売る文章力がなければ 1本も商品は売れません。1日に1000人の人があなたの紹介文を読んだとしても 1000人 × ゼロ = 0円です。

文章が苦手だからといって、売れる文章の書き方を学ばないのは本当にもったいないと思いませんか?

コピーライティングを学ぶメリット

コピーライティングを学ぶ最大のメリットは、売上の成約率が上がることです。

僕のような「文章を書くのが苦手」な者でも、コピーライティングを学ぶことで文章を書くのが好きになります。苦手だと思っていたものを克服するって楽しいと思いませんか?

売れる文章の書き方を学ぶ順序

もし、あなたが文章を書くことが好きなら、扇動」で売れる文章の書き方を学んで下さい。

僕のように文章を書くのが苦手な人は、はじめにコピーライティングを学んで、文章を書くことが好きになってから 扇動」で売れる文章について学んで売上を爆発的にアップしてください。

売れる文章の基本は信頼を得ること

ネットビジネス(アフィリエイト)でものを売る時に、一番重要なのが信用してもらうことです。

あなたが一生懸命、商品の素晴らしさを伝えようと必死になって文章を書いても、読者があなたを信用していなかったら商品は売れません。

この人は信頼できるこの人の言うことは胡散臭くないと読者に感じてもらえれば、メールマガジンでもランディングページでもブログでも、あなたが販売するものを納得して買ってくれます。

「おすすめ出来ない商品は紹介しない。あなたが納得したものしか紹介しない。」というスタンスで文章を書くようにしてください。

売れる文章を書く時に上手な文章を書く能力は不要です。わかりやすい文章を書いて読者に信頼され読者の心を動かす事が大切です。

コピーライティングの前にリサーチする

コピーライティングを学ぶ目的は成約率を上げることです。そのためにはリサーチが重要です。リサーチを徹底的に行うことが成約率を上げる秘訣です。

僕が以前からおすすめしている 1ラウンドアフィリエイトでも商品選定の重要性が書かれています。

ネットビジネスで稼ぐための4つのアプローチのはなし

徹底的なリサーチで、何を書けば売れるのかが具体的にわかります。

リサーチの内容

  • ペルソナ
  • サービス・商品の典型的な ユーザー像を具体化する。

  • yahoo! 知恵袋 で相談内容をチェックする
  • SNSなどに参加し共通言語をみつける
  • キーワードを書き出す
  • 扱う商品・サービスについて調べる

 
ターゲットが反応する強いキーワード使って文章が書けるようにリサーチします。

反応するキーワードは人それぞれなので、セールスレターのあちこちにキーワードを無数に散りばめます。
読んだ人が無意識のうちに気になる言葉が多ければ購買意欲が高まります。

ブログカードをWordPressサイトに実装するか検討してみた

ブログカードをWordPressに実装する

ブログカードとは?

 ブログカードとは?
 ブログに掲載したい記事のタイトルや概要、アイキャッチ画像などを読みやすくまとめて表示する埋め込み形式の事です。
ブログカードを使うと、テキストリンクと違ってリンク先に書かれている内容がひと目でわかります。

テキストリンクブログカードでは、テキストリンクの方がクリックされやすいという報告が多くあります。

内部リンクを使うメリット

スマートフォンを使ったサイト閲覧が増えています。
そのためサイドメニュー効果が以前より低くなっているので、記事内に内部リンクを挿入して関連記事に誘導し、サイトからの離脱率を減らすことができます。

Googleクローラーは記事から記事のリンクをたどって巡回し、検索エンジンのインデックス評価をします。
内部リンクは、クローラーがクロールしやすくなるのでインデックスの評価が上がるといわれています。

内部リンクはSEO対策として非常に有効な手法ですが、リンク切れはNGです。リンク切れがあるとサイトの評価が下がってしまいます。

WordPressでサイトを公開しているなら、Webサイト内のリンク切れを自動的にチェックし、リンク切れを発見したらダッシュボードで教えてくれるプラグイン 「 Broken Link Checker 」 をインストールして、リンク切れのないようにします。

ブログカード型プラグイン

Pz-LinkCard

 
グーグルで検索すると、「ブログカードのプラグインはサイトが重くなるのでやめた!!」という内容のものを多く見かけます。
僕も試しに「Pz-LinkCard」というプラグインをインストールして検証してみましたが、すぐに削除しました。

「WordPress プラグイン無し ブログカード」あたりをキーワードに検索すると対処法がみつかります。ほとんどが、functions.php と style.css をモディファイ(一部変更)が必要になります。

function.php と style.css は ./wp-content/themes/テーマフォルダ/ にあります。
テーマを更新すると、モディファイしたファイルが無くなってしまいますので HTML&CSS の知識が無い人はテーマファイルをモディファイしないほうが良いと思っています。

ブログカードは記事内でURLを記述するだけ

WordPressのVersion 4.4以降、ブログカードの埋め込みがサポートされています

https://e-piyo.net/affiliate/%E3%83%8D%E3%83%83%E3%83%88%E3%81%A7%E5%A3%B2%E3%82%8B%E3%81%9F%E3%82%81%E3%81%AE%E3%83%86%E3%82%AF%E3%83%8B%E3%83%83%E3%82%AF.html

と記事内に URL を書くだけで下のように表示されます。

ネットで売るためのテクニック


まとめ

ブログカードについて調べた結果、

  • 内部リンクはSEO対策として有効なので活用する
  • プラグインは使わない
  • テーマエディタで編集する事はしない
  • (ブログカードを表示させる時は、記事内にURLを直接記入するだけ)

 
という事にしました。

ヒーローイメージとは?

ヒーローイメージって何?

ヒーローイメージとは?

ヒーローイメージとは
サイトのファーストビューで画面全体を覆い尽くす画像や動画のことです。
ヒーローイメージを変えて、ファーストビューの雰囲気を変えインパクをと与える事ができます。

ヒーローイメージの使い方

サイトに訪れた人が最初に目にするヒーローイメージは、あなたのサイトの自己紹介のようなものです。

ヒーローイメージを使って、あなたのWebサイトの内容と目的を伝えます

明確なアクションへの誘導をデザインする

ヒーローイメージ 7つの説得要因

  • 画像はキーワードを視覚的に表現しているか?
  • 画像はサイトが伝えたいメッセージをはっきりさせるか?
  • ユーザーのアクションにつなげるまでのページの流れを滑らかにしているか?
  • 画像はブランドを信頼できる形で表現しているか?
  • 画像はユーザーにとっての妥当性を強化したり、利点を示しているか?
  • 画像は、期待する動作の引き金になる感情を描写しているか?
  • 画像は、製品を手にした顧客を主人公として描いているか?

アンジー・ショットミューラー 7 Hero Shot Persuasion Factors

ヒーローイメージ デザイン

シングルページ完結型レイアウトでごく限られた少ない情報やコンテンツのみを表示します。
レスポンシブデザインと相性が良いので、最近の「モバイルファースト」と言われるスマートフォンへの対応にもなります。

ヒーローイメージおすすめ5選

東京 日本橋 | 日本文化の今と昔を体験できるまち、東京・日本橋

奈良 – ローカルが教える、今までにない奈良観光

TYOパブリック・リレーションズ

ヌフアントロワ オフィシャル

NEST INN HAKONE

ヒーローイメージは
・ フルスクリーン背景
・ 特集記事コンテンツ
・ スライダー式ギャラリー
・ モノクロ写真
・ カラーオーバーレイ
・ 非対称レイアウト
・ タイポグラフィ

狭義の意味で
適切なフォント種類を選び、美しく文字を配置することを
文字を華やかに、アートのようにデザインする手法
指します。

 
などを駆使して、Webサイト訪問者にアクションを起こしてもらえるように作られます。

読み込みと表示を可能な限り早くする

アイコンを Font Awesome で代用する。
画像サイズをリサイズして最適化する。Regenerate ThumbnailsEWWW Image Optimizer ラグインなどを使う。
僕はふだん Windows や Mac ではなく、Ubuntu というOSを使っています。画像変換や画像のリサイズは ImabeMagick の convert コマンドや mogirify コマンドを使います。

画像の上に文字やボタンをのせる方法(CSS)

「画像 ボタン 重ねる」をキーワードにして検索すると、画像の上に画像やボタンを乗せる方法がわかります。
【HTML】画像の上に画像やアイコン、文字を重ねて表示する方法【CSS】 の記事がわかりやすいと思います。

ランディングページとは?作り方は?

ランディングページとは?作り方は?

ランディングページ( LP )とは?

ランディングページ( LP )と聞いて、あなたは何を思い浮かべますか?

ランディングページ( Landing Page )とは?
広義では訪問者が最初にアクセスするページのこと。
狭義では、訪問者のアクションを誘導することを目的にした縦長のページのことを指します。

アフィリエイトをしている人は、ランディングページといえば狭義のランディングページをイメージしますが、アクセス解析ツールのgoogleアナリティクスは、広義のランディングページを指しています。

この記事では、狭義のランディングページについて述べています。

狭義のランディングページ( LP )の特徴

狭義のランディングページで、最初に思いつくのは縦に長いページじゃないでしょうか。
ランディングページの特徴は次のとおりです。

  • 縦に長い
  • 他のページへのリンクがない
  • デザインが派手

1ページに集客から教育、セールスをかけるまでの一連の流れが全て書かれているので縦に長いページになります。
そして、普通のWebページと違い他のページへのリンクがありません。一度訪れた読者がページの最後まで読むように作られています。

ランディングページは出口を商品を売るところに限定して成約率を高めています。

ページをスクロールしても訴求できるように、要所要所に成約率を高めるための広告的な要素を埋め込むので一般のWebページよりも派手な印象になります。

ランディングページ( LP )のメリット

なぜ、わざわざ派手で縦長のページを作るのでしょうか?それは成約率を上げる事を目的にしているからです。

SNSなどからの直接的なアクセス流入数をアップしたり、通常ページからランディングページ(LP)へ誘導したりとランディングページへ誘導しやすい事もランディングページが使われる理由のひとつになっています。

  • 訪問者の離脱が少ない
  • 訪問者が知りたい情報を全て伝えられる
  • 順序よく訪問者に情報を伝えられる
  • 訴求力が強い

 
など、成功率を高めるための仕掛けがしてあります。
これらの事を理解したうえで「新世界アフィリエイト」のランディングページを見てください。全てが計算されてランディングページが作られているのがわかります。

ランディングページ( LP )のデメリット

  • 縦に長いので途中で飽きて離脱する
  • 作成するのに手間・時間がかかる
  • 外注した場合、制作コストが高い

ランディングページを外注しようと思うと、1ページだけなのに15万円から50万円くらいかかります。

ランディングページ( LP )の作り方

今はWordPressなどでも、簡単にランディングページを作成できますが、ランディングページは1ページで完結しているので、HTML&CSSで書くのが基本です。
トップアフィリエイターの方々の多くが「INFOPLATE 5」でランディングページを作成しています。

僕の無料メルマガ登録ページも INFOPLAT 5 で作りました。

一般的なランディングページの構成。

キャッチコピー

問題提起

解決法

商品説明

利用者の声

Q&A

申し込みフォーム(ボタン)

 

ランディングページ( LP )をまとめたサイト

ランディングページを作る前に参考になるサイトを見て、デザインを勉強してください。
→「ランディングページ集めました。

コンバージョン率の高いランディングページを作る事は、WEBデザイナーの使命。ランディングページを作るWEBデザイナーのためのランディングページリンク集です。

カテゴリごとにLPデザインを見ることが出来ます。