WEB・マーケティング・SEO対策・Wordpress。初心者ブロガー、上級者が使えるテクニックをご紹介コンテンツへスキップobateaアカデミーWEB・マーケティング・SEO対策・Wordpress。女性向けの商品を取り扱う人は必見の一冊となっていました。男と女の考え方の違い男性と女性では「購買行動」に違いがある最近では男女を差別しないように「男女差別」という意識が高まりつつありますが、生物的に違う生き物なので、やはり男と女で考え方の違いは出てくるもの。書籍の中では女性の「能力」や「考え方」の違いにフォーカスし、どのような販売方法が「女性」にマッチしているのかを解説していました。男性は商品を購入する際に「具体的な効果・効能」を手にしようとします。女性も同じかと思いきや全く違い「魔法」を求めていると言います。男性は目標を達成するための「努力」に重きを置きますが、女性はササッと何かをするとパパッと達成できてしまうことに魅力を感じるそうです。たしかに、女性向けの通販番組を見ていると「飲むだけ」「簡単になれる」といった言葉が飛び交います。通販番組で購入した商品を夫から怒られたという主婦の話も聞いたことがありますが、男性目線で見える現実性やデメリットよりも、商品に対する夢や理想に目がいきやすいということなのかもしれません。デザインは色にこだわりを(女性は)色の微妙な違いを認識する女性は「男性の4倍以上の色を識別することができる」というアメリカの研究結果があるそう。圧倒的に女性の「色彩認識能力」が高いと言われており、同じイラストを見せても認識できる色数に違いが出てくると言います。バナーデザインをする際「赤」と「赤みのあるピンク」を区別せずにシンプルな作りをするよりも、細かやかな色彩をしたデザインにした方が販売促進には向いているそうです。女性は「赤は情熱」や「青は冷静」など「色の持つ意味」も大切にしているそうです。何となくキレイだからと言った、単なる「見栄え」ではなく、文章と色彩をマッチするような配色を意識したいところ。認知心理学に基づくデザイン書籍の後半では「認知心理学」に基づくデザインも紹介していました。ウェブサイトのレイアウトを考える時、見栄えや使いやすさを重視してしまうことがあります。本来「ウェブサイト」は人間が見るものですので、人間の行動心理や認知方法に基づくデザインをベースにするのが適切なのかもしれません。ウェブサイトを見た時、一番最初に目がいくのは文章(テキスト)ではなく一番左上部にある画像。人間の目は「上下の動き」よりも「横の動き」に強いことから、左上部から右上部に視線が動いていくというのです。普段あまり意識しない人間の行動を紐解いていくと「販売促進」のヒントになるかもしません。買った後「使っていない」人は案外多いマーケターが勘違いやすいポイントとして「買った後に使う」が当たり前だと思ってしまう点。実は、買った後に使っていないケースも多いそうなんです。書籍では「買った後にきちんと使ってもらえるように促す」「次につなげる顧客フォローをするだけでもファンやリピート率は増える」としており、具体的な手法の紹介が掲載されていました。一般的なマーケティング手法と同様、女性のマーケティングでも関係性を深めるステップが存在すると述べられていました。顧客との信頼関係をどのように構築していくかが重要ですよね。2月:節分、バレンタイン3月:ひな祭り、ホワイトデー4月:新生活、お花見5月:ゴールデンウィーク、紫外線6月:梅雨、ジューンブライド7月:七夕、海水浴8月:夏休み、花火9月:敬老の日、運動会、10月:体育の日、ハロウィン11月:文化の日、七五三12月:冬休み、クリスマス、大晦日その他:人気ランキング、オススメ月ごとのイベントや期間限定のキャンペーンなどで、今すぐ買ってしまう「いいわけ」を作るのが効果的なんだそうです。書籍には、具体的なキャッチコピーのリストも掲載されていました。汲んだ販売促進方法をすぐに実践し、売上向上に貢献できるような内容でした。販売のみならず、ファンやリピーターになってもらうための仕組みづくりにも踏み込んでいるので、具体的で効果的な方法がたっぷり詰まっている印象です。2018年3月28日Google検索が「モバイルファーストインデックス2018」を開始Googleが、1年半続けてきた実験・テストを経て、モバイルファーストインデックス(MFI)のベストプラクティスに準拠したサイトの移行を開始したことを発表しました。段々と検索エンジンの結果に変動や影響が現れそうです。システムでは、主にデスクトップ版のコンテンツを採用していましたが、モバイル使用のユーザー割合が増えたことで、モバイル検索を重視する必要が出てきました。そのため、デスクトップ版とモバイル版と大きく異なる場合、モバイル検索ユーザーに問題が発生する可能性を考慮し、モバイルユーザーが探しているものを見つけやすくすることに重点を置くようになりました。モバイルサイトのみインデックスされる時代へGoogleは、検索結果の提供に使用するインデックスは「引き続き1つのまま」としています。今後はデスクトップ版のコンテンツに代わりモバイル版のコンテンツをインデックスされることになるわけです。Console」で通知されます。サイト所有者は、スマートフォンの「Googlebot」からのクロールが大幅に増加することがわかるそうです。Google検索では、検索結果とキャッシュページにモバイル版ページが表示されます。モバイルファーストインデックスの仕様詳細Googleがモバイルコンテンツを特定する方法の詳細は「デベロッパー向けドキュメント」で確認することができます。ウェブデザインやダイナミックサービングを使用しているサイトでは、モバイルファーストインデックスがあらかじめ設定されています。ページをインデックスすると発表しています。MFI対応遅れの影響モバイルファーストインデックス対応が遅れた場合の影響は、Googleの発表によると大きな心配はないようです。MFIは、ランキングの設定方法ではなく、あくまで「コンテンツの集め方」を変えるというもの、デスクトップ版のコンテンツのみのサイトでもコンテンツは引き続きインデックスされます。モバイルフレンドリーを推奨Googleは「モバイルフレンドリー」を推奨しており、デスクトップ版・モバイル版に限らず、モバイルフレンドリーであるかどうか判断します。そのため、2015年からは「モバイルフレンドリーなコンテンツを検索結果に表示」しています。2018年7月初めからは「表示に時間のかかるコンテンツ」を検索に悪影響と評価するとしています。モバイルファーストインデックスまとめMFIにランキング優位性はないモバイルフレンドリー評価は検索結果に影響2018年7月から「コンテンツ高速化」を重視SEO対策は、文章や画像の内容「コンテンツの品質」も重要ですが、今後はシステム的な「高速化」がより重要視されるので、ランキング上位を目指すためには複合的に「品質」を向上させていかなければならないですね。2018年2月27日Google、競合サイト比較する「モバイルテストツール」提供開始Google「モバイルテストツール」を刷新。ツールでは、読み込みに要する時間、読み込み中に離脱するユーザー数を計測でき、同じ業界内の他サイトと比較した評価も表示されます。Googleモバイルテストツールの使い方モバイルテストページにアクセスし、URLを入力するだけで計測を開始。テスト所要時間は約1分で完了します。同じ業種内のパフォーマンス比較サイトの速度向上するための修正点モバイルテストは、標準接続環境でのアクセス、HTML/CSS/javascriptのソース解析によって結果が導き出されます。1分もしない時間で、現在のパフォーマンスレベルを知ることができ、サイト改善についてのアドバイスも表示されるので便利ですよね。GoogleWEBはパフォーマンスも重視する時代へ2018年に入ってから計測ツールのアップデートが目立ってきました。Insights」がありましたが、モバイルテストツールも刷新されたことで、より「パフォーマンス」への注目が集まってきました一方で、専門家によると「Googleは検索ランキングを大幅に変えたくない意向もある」と指摘。Googleは、コンテンツの中身やアクセスなど、ユーザーが求める検索結果を表示することを主軸として開発を進めています。パフォーマンスを重視はするものの、ユーザーの検索結果に求めるニーズを考えれば、結果的に「大きな変更にはならないだろう」という見方です。「速度が遅いと離脱する」というユーザー心理があることを忘れてはなりません。速度改善によってコンバージョンが向上したという報告もあるため、サイト運営者は「コンテンツの質」のみならず「パフォーマンス」も重視していく必要があるでしょう。』(朝日新聞出版)を読了。「言葉の技術」というと、コピーライティングにおける手順を書いている本に思えるのですが、中身の方向性は違うように思いました。コピーライターという職業以外にも「考えを深める」というのはとても大切なこと。プランナーやディレクターにも活かせる一冊だと感じます。コピーライターへの偏見コピーライターというと「一言」で商品の深みを与える仕事だと感じています。一方で、CMや広告ポスターなどあらゆるところで見かける「コピー」ですが、中には「こんなの誰でも......」と思えてしまうようなシンプルすぎて拍子抜けするようなものもありますよね。技術」を読むと「コピーライター」がどのようなプロセスで言葉を生み出し、アウトプットしているのかが具体的に見えてきた気がします。電通のコピーライターを養成する際に説明される「4つの扉」を著書で紹介していました。この方法を使うことで、1つの物事を様々な視点で見つめることができると言います。商品を伝えるための「4つの言葉」4つの扉は書籍を読んでいただくとして、本を読んで噛み砕いて考案した「4つの言葉」を紹介します。板チョコを「4つの言葉」に照らし合わせて考えると様々なワードが浮かんでくると思います。すると「甘い」「美味しい」かもしれませんし、ダイエット前の人には「ダイエット前にひとかけらのチョコを食べるとやせる」かもしれない。違う見方をすれば「シュークリームより美味しい」であったり「震災時の非常食として役立つ」と言えるかもしれません。考えを深めるためには、様々なアイディアを出し切り、そしてまた絞り込むという繰り返しだと感じます。思考をさらに深めるメソッド書籍では、思考をさらに深めるには大きく2つのメソッドがあると書かれていました。具体的な芸能人の名前を出して商品を販売することがありますが、極端な話をすれば、その芸能人を知らなければ商品は売れないことになります。具体的な名前ではなく「芸能人」というくくりにしてしまえば、より広い人に訴えることができますが、訴求力は弱くなってしまいます。エピソードを普遍的に、普遍的なものをエピソードに落とし込むという作業は、思考を深めるのに大切なプロセスなのかもしれません。言葉でしたいことを考える宣言する提案する挑発する描写する書籍では「4つの扉」と似た部分もあるがと前置きがありましたが、コピーで何をしたいのかを考えると良いと書かれていました。違った表現にしてみると、宣言は「企業マインドを消費者に伝える」、提案は「具体的な相手にオススメする」、挑発は「競合の痛いところを突く」、描写は「伝えたい人になりかわる」といったところでしょうか。どれが正しいとかはなく、商品のスケールや具体性、伝える範囲などで、4つの「言葉でしたいこと」から型を選ぶと良いようです。コミュニケーションは受け手が主体コピーライターも、他の職業もそうですが、忘れてしまいがちなのが「コミュニケーション」に求めることです。書籍に書かれた「コミュニケーションは受け手が主体」という言葉が印象的でした。コミュニケーションは「発信者」が主体となりがちですが、本来は受け手がどう捉えるかによって内容が変化してしまうもの。「受け手が主体」ということ。思いつくものではない。』(朝日新聞出版)は、いわゆるテクニック本ではなく、思考プロセスを具体例に沿って解説する書籍。コピーライターのみならず、ディレクター/プランナーなどあらゆる職種の人が「思考を深める」ために必要なメソッドが詰まった書籍だと思います。【SSL対応】WordPressサイトの重複コンテンツ排除の設定方法2018年は「SSL元年」かも。Google検索のSSL化が必須となり、ランキングに影響する可能性が噂されています。一部、専門家によれば「httpsに直ちにしなければならない危機的状況ではない」という見方もありますが、いずれ必須条件となりそうなので早めに対応しておいても良いかもしれません。いうことで今回は、WordPressで行った「SSL対応」についてシェアしたいと思います。Consoleの設定WordPressの設定変更この対応順がベストかわかりませんが、まずは「SSL対応の影響」について念のため確認。Console」の設定変更、最後にWordPressの設定を変更、という流れで対応しました。SSL対応の影響の確認SSL化をすると一番大きな問題は「http」と「https」の2サイトになってしまうという点。最悪の場合、検索エンジンに「重複コンテンツ」と認識され、検索結果のランキングに影響すると言われていますので注意が必要です。リダイレクト処理を入れ、「https」のサイトに統合しましょう。2つ目の影響は「http」時代に公開した記事についた「いいね」、はてなブックマークの数が「0」になってしまうということ。これは対応策がなく、どのサイトも「http」から「https」に変更する際に諦めていることが多いようです。AdSense」など、ドメイン以下で登録しているサービスは、サイトが動作していれば、大きな問題なさそうです。サーバーのSSL対応サーバーはレンタルサーバーを利用していたため「独自SSL証明書」を申請し、対応を進めました。一定期間サイトにアクセスできないという報告もありましたが、しばらく待っていると回復されるのでご安心を。SSLの対応が完了したら「http」「https」の両方でアクセスできるかを確認しましょう。いずれもアクセスを確認できれば、サーバーのSSL対応は完了です。[R=301,L]サーバーにある「.htaccess」の最上部に処理を記述し、リダイレクトを行いました。リダイレクト設定は「RewriteEngine(URL書き換え)」をon(有効)にした後、「https以外のURL」を対象に、書き換えルールに従って処理を行っています。https以外のものを全部「https」しているので少し乱暴な気がするかもしれませんが、とても簡単で楽な方法です。Analyticsはプロパティ設定のURLを「http」から「https」に変更しました。変更後は、リアルタイム計測で確認しておくと安心です。Console「プロパティを追加」を選択し「https」から始まるサイトURLを入力します。ここで注意が必要なのが「変更」ではなく「追加」ということ。設定後は「http」と「https」の2つが存在することになります。(URL)」を変更WordPressの管理画面から「設定>一般」にアクセスし、設定していたURL(通常、2箇所)を「http」から「https」に変更しましょう。SSL化対応を終えて作業時間は15分程度で、大きな問題もなく終えることができました。Insights」を活用したWebサイト高速化・表示速度を改善する方法について解説していきます。値で表示するパフォーマンスのスコアと具体的な改善アドバイスを提示するGoogle公式のサービスです。InsightsにアクセスウェブページのURLを入力し分析開始スコア・アドバイスにもとづいて改善コンテンツ品質が最も重要なのは言うまでもないのですが、パフォーマンスのスコアはあくまで参考値であり、必ずしも「100」にすることはありません。パフォーマンス向上の2大要素Googleの解説によると、速度のパフォーマンス向上するには2つの要素「レンダリングブロックリソースのラウンドトリップの回数」「レスポンスのサイズ」を改善することが重要だと述べています。削除ブラウザキャッシュを活用スクロールせずに見える範囲のコンテンツのサイズを削減サーバーの応答時間を改善するいずれも「サイトを表示するための処理を極力少なくする」というのが根本的な考え方です。サイトのリッチ化で複雑な構成となっている場合、様々な処理によってサイトの速度が低下します。1ぺージ目の見える範囲(ファーストビュー)には余計な処理を読み込ませないような工夫し、改善していきましょう。圧縮を有効にするリソースを圧縮する画像を最適化するレスポンスのサイズを縮小することで、サイト表示速度を改善できます。処理の回数ではなく、処理をするデータサイズの量と考えるとわかりやすいかもしれません。テキスト、HTML、JavaScript、CSS、画像のデータを圧縮することで、コンテンツ品質を変えずにレスポンスのサイズを縮小することができます。サイト表示速度の重要性サイト表示速度は「SEO」にも関係はありますが、PCよりも通信速度が遅いモバイルの普及によって、サイト品質向上のために重要な要素だと言われ始めています。諸説ありますが「表示に3秒以上かかるサイトは、4割以上のユーザーが離脱する」というデータもあるようです。そのため、通信環境が悪い状況のユーザーに対しても、より快適なブラウジングを提供していくことが、今後の課題と言えるのではないでしょうか。【2018年版】今さら聞けない!知らないと恥ずかしいSEO用語SEOは時代によって変化していくので、少し気をぬくと知らない最新用語が増えていくと思う方も多いかもしれません。2018年に抑えておきたいSEO用語をまとめてみるので、チェックしていきましょう。検索サイトの掲載順を決める「Google検索アルゴリズム」は、Googleが求める「完璧な検索」を目指して日々更新され続けています。モバイルユーザーが増えたことで「モバイルファーストインデックス(MFI)」なども検索アルゴリズム改変に大きく影響を及ぼしています。WEBサイトがよりリッチ化する一方で、サイトの表示速度が遅くなっているという問題が深刻になり始めました。そのため、Googleは検索アルゴリズムを見直して、低速表示のWEBサイトを低品質とみなし、高速化されたWEBサイトを高品質とすることにしたようです。Update(スピードアップデート)」を2018年7月に実施することを発表。内容としては、モバイル検索においてページ速度をランキング要因に使うというもので、専門家の間では「ものすごく遅いとユーザーに感じさせるページだけに影響」「優れたコンテンツであれば上位に表示」としており、すぐさまランキング表示に大きな影響はないとしています。それでも今後のサイト作りにおいて、コンテンツの品質のみらなず「高速化」というのは重要なキーワードとなりそうです。2018年版!抑えておきたいSEO用語2018年のトレンドとなりそうなのが「AMP」と「PWA」です。いずれもWEBサイトの「高速化」で使用される技術という印象ですが、高速化のみを目的として作られた「AMP」と、モバイルページの進化を目的とした「PWA」は、全く違う意味をなしています。)」のことで、モバイルでのWebページ読み込み高速化を目指し設立したプロジェクト及びその技術のことです。News」をそれぞれ採用しています。AMP「モバイル高速化」の仕組みHTML:リンクをしてから読み込むAMP:あらかじめ読み込んでおくこれまでHTMLでWEBサイトを作成してきました。AMPの規定(フォーマット)にも合わせておくと、Googleがページをあらかじめ読み込んでくれるため、サイト表示が速くなります。Cache:AMPページをキャッシュし配信AMPは大きく3つの要素から構成されており、加えてデザイン調整で「CSS3」が使用されます。「AMP」が決めたフォーマットに合わせることで、有効なAMPページとなり、配信することができます。Googleページでモバイル検索すると「雷マーク」が表示されているWEBサイトが、AMPの適応されたページとなっています。AMPの課題AMPの課題点は、高速化を重視しているため、表示に「制限」がかけられていること。HTMLで表示している内容をそのままAMPにすることはできないのが現状ですが、技術の進歩によって、表現の幅が広がってきています。Story」を発表しました。Storyは、InstagramやSnapchatで採用されているストーリー表示を、検索の上位に表示するというもの。好きなブランドバックやアパレル、化粧品などの商品名やキーワードを検索した際に、検索結果の上部に「ストーリー」が表示されるのも、そう遠い未来ではなさそうです。Apps)とはPWA「Webのアプリ化プロジェクト」PWA(ピーダブリューエー)とは、アプリで出来ていた表現をブラウザ上でも可能にするためのプロジェクト。これまでアプリのみで行っていた施策をWebサイト上でも実現できます。PWA対応のメリットレスポンスの向上オフライン時の閲覧プッシュ通知インストール不要ストア審査不要GPSによる現在地取得の利用ネイティブアプリのUI実現PWA対応をすることで、新たなブラウザをインストールすることなく、ネイティブアプリのような機能や体験をユーザーに提供することができます。アップデートの際もストア審査がないため、開発後すぐに公開することが可能です。ブラウザデフォルトのUI(メニューバーなど)を非表示にすることによって、より快適なブラウンジングを可能に。ホームアイコンの追加、起動時のスプラッシュ画面などネイティブアプリに近い使い心地を実現します。非対応ブラウザの存在SSL化の対応コストユーザー・デベロッパー双方にメリットが多いPWAは、様々な課題があるのが現状です。(1)ネイディブアプリを提供しているデベロッパーが「PWA」を導入すると、これまで提供してきたアプリとブラウザの2重管理が発生します。導入後の施策で複数環境の管理を行うのは、コストがかかってしまうと考えられます。(2)海外で使われているブラウザ「Chrome」はPWA対応済みですが、日本で多く利用されているブラウザ「Safari」は現在開発中となっています。現在、PWA対応を提供しても、恩恵を受けることができるユーザーはごく一部と言われています。(3)これまで「HTTP」で作成されているサイトは「HTTPS」に切り替える必要があります。SSL化をするには、開発コストが発生するため、導入に時間がかかります。PWAがベスト」モバイル高速化が行える「AMP」と「PWA」の対応優先度としては、すでに普及が始まっている「AMP」にするべきという考え方が主流。PWA」にしていくのが理想的です。PWAを実現すると、あらかじめキャッシュされたAMPページを検索サイトから素早く表示し、AMPページ閲覧中に裏側でPWAページを読み込むことで、2ページ目以降を高速表示することができます。アメリカなどでは対応するデベロッパーがいるため、日本にも数年後、AMP/PWAを対応していく必要がありそうです。ニュースメディアならAMPは必須サイトの特性によって、対応優先度は変わってきます。ECサイトであれば、必ず「決済」をするフローが存在するため、アプリのように決済できる「PWA」を導入するべきだという考え方が強いように感じます。一方で、ニュースメディアなど「テキスト」を重視するコンテンツにおいては、高速表示を優先する「AMP」を導入することが優先されると言われています。WEBの高速化手法WEB高速化の話をした時、AMP/PWAが注目されますが、導入コストがかかるのが現状。コンテンツの質を極力下げずに、提供速度を高めることも重要視されるべきです。Insights」を提供しています。値として算出されるパフォーマンス改善の余地を推定したスコアとアドバイスをもとに、WEBサイトの改善を図っていきましょう。Insightsのスコア80点以上を目指してWebサイトを改善することが、サイト品質を向上で大切なことだと思います。【超初心者向け】Webサイト制作のはじめ方・手順や方法とは?Webサイトを作ろうと思い立ち、HTMLの本を読んで「さぁはじめよう」と意気込んだものの「何から始めればいいのか」わからない人が多いのが現状。ここでは、Web制作のはじめ方・手順や方法について書いていきます。結論から言うと「HTMLを学んでもWebサイトは作れません」と断言できます。HTMLは手段であって、道具なだけです。HTMLは言わば「箱」なので、その中に「何を入れるのか」が重要なのです。箱の中に「検索」を入れれば「検索サイト」になり、また別の箱に「自己紹介」を入れれば「ポートフォリオ」にもなります。HTMLを始める前に、どんなサイトを作りたいのかを「設計」する必要があります。Webサイト作りの手順Webサイトを0から作ろうと思うと多くの手順があります。開発環境を用意するどんなサイトにするか考える具体的なデザインを考える素材を用意するHTMLなどで構築するサイトを公開するWebサイトは、開発ができる環境を準備し、どんなサイトにするか考えるということから始まります。デザイン素材やテキストを用意し、HTMLなどで組み合わせていきます。企業が取り扱うWebサイトでは、開発環境を用意する際に「セキュリティ」も考慮する必要がありますし、開発スケジュールによって「規模感」や「工数」も大事になってきます。品質の良いサイトを作るには、サイトを見てくれる人がどんな人かも考え、文章や画像などの素材も用意する必要があります。個人や企業、利用シーンなどによって、Webサイトにどれくらいの力をかけるのかを考える必要があります。1.開発環境を用意する企業では「システム担当」「システムエンジニア」が担当する領域です。開発環境は「サーバー」「ドメイン」を用意する必要があります。サーバーを用意するサーバーとは、簡単に言うと「誰もがアクセスできるパソコン」です。普段、私たちがインターネットにアクセスするように、世界中の人に自分のWebサイトを見てもらうことができます。サーバーを用意できない人向けに、無料ホームページを作成できるサービスなどがあるので、簡易的なサイトであれば活用するのも良いでしょう。アメーバブログなどのブログサービスも「サーバー」を用意する必要はありません。本格的なサイトを作ってみたい、wordpressでブログを始めたいという方は『lolipop』『さくらインターネット』などの「レンタルサーバー」と呼ばれるサービスを利用するのが良いと思います。レンタルサーバーを使わずに、自身のパソコンをサーバーにすることも可能です。24時間365日パソコンを自宅で稼働させるため電気代などの維持費用がかかるため、小規模サイトでは実用的ありません。Web制作においてシステムの理解度が深まるので、やってみると勉強になります。ドメインを用意するドメインとは、簡単に言うと「住所」「URL」です。大手検索サイト「Google」の場合は「https://www.google.co.jp」になります。インターネット上で住所は「123.45.67.89」といった「IPアドレス」と呼ばれる数字のみでしたが、ローマ字なども使うことで、わかりやすくしたのが「ドメイン」です。引っ越したら「引越し届け」を役所に届け出るように、Webサイトの住所を「お名前.com」などのドメイン取得サービスで申請すると、ブラウザに住所を打ち込むことでサイトにアクセスすることが可能です。ドメインは、基本的にサービス名をそのまま表記するものが多いです。2.どんなサイトにするか考える開発環境が整ったなら、いつまでにどんなサイトを作るかを考える必要があります。大まかなスケジュールを決めて、どんな内容をWebサイトで発信するかを決めると、途中で諦めず最後までやり抜くことができるはずです。どんなサイトにするか考えることを「Webプラニング」と言います。Webサイトは作って終わりではなく「運用」していくことも大切です。常に新しい情報を発信することで、Webサイトを見に来てくれる人が増えていきます。Webサイトを作る「目的」も明確にしておくと良いでしょう。Webサイトを作る目的が不明確だと、開発が終わってから「あれ?なんで作ったんだっけ」と路頭に迷ってしまいます。ブランドイメージアップなのか、集客をしたいのか等、必ず目的があるはずなので、明確な言葉にしておきましょう。3.具体的なデザインを考えるWebサイトの方向性が決まってきたら、今度は具体的なデザインに落とし込む必要があります。様々な手順がありますが、まずは「ワイヤーフレーム」を作るのが一般的です。どの位置に何をおくのかを紙の上でざっくりと配置していきます。ここでは、キレイなデザイン資料にする必要はなく「ここに画像があって、ここに文字を置く」といった大まかな骨格を描いていきます。Webデザインはファッション同様「トレンド」があります。Webデザインの最新情報をチェックして、配色やレイアウトを参考にしましょう。大まかなデザインや「伝えたいこと」が明確に決まってきたら、品質の良い素材を用意しましょう。Webサイトを見てくれる人をイメージしながら「文章(テキスト)」や「画像」を制作するのです。5.HTMLなどで構築するWebサイト制作ではHTMLの他、スタイルを決めるCSS、アニメーションなど動きを加えるjavascriptを使用します。CSSのみでアニメーションのように見せることもできます。【初心者向けHTML講座】書き方の基本ルールとタグの使い方6.サイトを公開するサイトを公開したら終わりではなく、広告やSNSでサイトが出来たことをお知らせして見に来てもらうことが始まりです。検索した時に上位表示されるように「SEO対策(検索エンジン最適化)」を行い、内容を充実させるために「運用」していくことが必要となります。【初心者向け】必ず覚えておきたいリスティング広告の用語GoogleやYahoo!など、検索エンジンの検索結果に表示される広告「リスティング広告」で指標となる用語についてまとめてみます。同じことを示していても略称になっていたり、上級者でも忘れてしまうケースもある大切な用語なので、必ず覚えておきたいものばかりです。「なんとなくわかっている」と思っていても、人には説明しにくい時に活用してみてください。広告がリストのように並べられて表示されることから「リスティング」と呼ばれたのが由来と言われています。リスティングは広告の中でも最もスタンダードな広告手法の一つとして知られています。WEBマーケティングの最初の一歩でリスティングを開始する方も多いかもしれません。ここでは、広告を運営していく上で「必ず覚えておきたいリスティング広告の用語」を説明していきます。インプレッション数(imp)インプレッション数は「Impression(インプレッション)」や略して「imp(インプ)」と呼ばれることが多いです。英語を直訳すると「印象」という意味ですが、リスティング広告では「広告が表示された回数」という意味になります。広告が表示されるということを「顧客(ユーザー)の目に触れた機会」とも言い代えるとわかりやすいかもしれません。クリック数(CTs)クリック数は、リスティング広告では「表示された広告がクリックされた数」という意味で使われています。インプレッションされたからと言って、広告を見たい全ての人がクリックすることがないため、現実的にはクリック数はインプレッションより少ない値になるのが一般的です。Through」「CTs」と表記されることもあります。Rate」や「CTR」と表記されることもあります。クリック率は、クリック数をインプレッションで割った値。値が高いと、広告を見た人がクリックしたくなるような文言や画像になっているということになります。反対に、値が低いと、広告を見た人がクリックしたくなるようなものにはなっていないということが判断できます。クリック率が高いからと言って、その広告が「良い」と判断するのは少し早いかもしれません。クリックされるからと言って、広告の目的―CV、つまり商品購入や登録―を達成するわけではないため、クリック率と目的を達成したかを見て判断するのが賢明でしょう。いえ、広告がクリックされなければ、広告の目的を達成することはできないはずです。クリック率を高くし、適切な広告表示を模索していくことが大切です。クリック数×平均CPC発生した広告費を「コスト」と呼び、クリック数と平均クリック単価(平均CPC)をかけた値とほぼ同値になります。GoogleやYahoo!などにリスティング広告を掲載するための費用、支払った金額とも言えます。広告は、コストが抑えながらも効果を最大化していくことが必要です。コストを増やしても効果が高ければ運用は問題がなく、コストが低くても効果が低ければ運用方法を改善する必要があります。回のクリックに対して請求された金額の平均額」を意味します。クリックの合計費用を合計クリック数で割って算出されます。CPCが高いからといって広告効果が高いとは限りませんので、広告のコストとリターンを比べるための目安にしましょう。コンバージョン数(CV)コンバージョン数とは、広告をクリックして商品購入やお問い合わせなど、広告主が「成果」や「リターン」とみなした行動がとられた数です。英語では「Conversion」「CV」「CVs」と表記されます。広告の目的は「クリック」されることではなく、その先の「コンバージョン」を獲得することです。運用上で最も重要視される数で、広告運用の課題と言えるでしょう。広告のクリック数に対しコンバージョンが発生した割合を「コンバージョン率(CVR)」と言い、コンバージョン数をクリック数で割ると算出されます。コンバージョン数およびコンバージョン率を改善するには、表示される広告から流入する「ランディングページ(LP)」の質を高める必要があることを示していることが考えられます。表示された広告とLPのユーザー属性が合っていない可能性もあります。広告を見てクリックしたユーザーがどのような気持ちでLPを見るのかを考えて、コンバージョン率を高めていきましょう。コスト÷コンバージョン数ユーザーを一人を獲得するために必要なコストのことを「顧客獲得単価(CPA)」と言います。顧客獲得単価は、広告でかかった全体の費用「コスト」を獲得した顧客数「コンバージョン数」で割ると算出することができます。Spend」の略で、売上をベースにコストの回収率を示す指標として活用されています。コストに対し、どれだけ売上をあげたのかを割合で知ることができるというものです。売上とコストが1:1の場合、つまり「ROAS=100%」が基準となり、ROASからコストに見合った売上があがっているのかを判断することができるのです。Investment」の略、ROASとROIは指標として似ているため比較して説明されることが多いです。ROASが「売上」をベースの指標に対して、ROIは「利益額」をベースの指標となっています。売上がコストの2倍出た場合、ROASは200%となるため広告効果としては良いように思えます。広告のコストに対して利益がマイナスだった場合、ROIは100%以下となってしまうので赤字となってしまうわけです。一般的な企業で広告運用する場合、ROASよりもROIを重要視する必要があると言われています。【初心者向けHTML講座】書き方の基本ルールとタグの使い方PC、スマートフォンなど全ての「ウェブサイト」を作るに必要なものが「HTML(エイチティーエムエル)」です。HTMLは「タグ」や「マークアップ」などと違った呼び方がされる場面もありますが、意味としては大きな違いはありません。Language(ハイパーテキスト・マークアップ・ランゲージ)」の略です。直訳すると「テキストを超えたテキストをマークアップする言語」となります。マークアップ(Markup)とは「文章構造」を明確に整理すること。タイトルや見出しに「タグ」と呼ばれる目印をつけると、コンピューターが認識しやすくなります。ページのタイトルを「<title>タイトル</title>」と囲む、文章を「<p>文章がここに入る</p>」といった具合です。要するに、HTMLは「ウェブサイトを作るパーツ」くらいに、思っているくらいで良いのです。「大まかなレイアウト構成」や「表示する規則やルール」と思っても良いかもしれません。)で、ティム・バーナーズ・リー氏によって誕生しました。その後、世界標準化の推進や改善が進められています。Consortium)を設立。CSSの誕生1996年に、W3Cが「CSS1.0」を勧告。Sheets)」によって、文章構造のみだったHTMLがより見やすくなったのです。現在では、CSSは「シーエスエス」や「スタイルシート」と一般では呼ばれています。HTMLと同様、CSSも改善が日々なされているため、書き方が数年に一度変わってきています。HTML5の推進2008年に草案が勧告された「HTML5」は、文章構成をより簡略化し、動画表示やアニメーションなど「リッチ化」するために考えられました。HTMLのはじめ方ウェブサイトを作るために「HTML」を学びたいと思っている人は「HTMLを読む」から進めると良いかも。ウェブサイト上で「右クリック>ページのソースを表示」をすると、表示されているウェブぺーじの「文章構成」が見えてきます。デザインは「CSS」を読むHTMLは「文章構成」のみとなるため、憧れのサイトと同じデザインにしたい場合は「CSS」を読んでみると参考になります。動きは「js」で作る動きのあるアニメーションを使用したサイトの場合は「JavaScript(ジャバスクリプト)」と呼ばれるプログラム言語や、JavaScriptをより容易に使えるようにしたライブラリ「jQuery(ジェイクエリー)」を使用するのが一般的です。初心者にありがちなのが、HTMLに「意味」を求めすぎること。初めに、世界のルールだと思って「定型文」を覚えます。その後「よく使うタグ」を覚えれば、90%は完了です。HTMLは「履歴書」みたいなものHTMLは「とても難しい」とイメージがあるかもしれませんが、実は「文章を整理するツール」なので、全く難しくありません。履歴書で「名前」の欄に名前を書くの逆かもしれません。「見出し」には「<h1>見出し</h1>」と、文章には「<p>文章</p>」と、文章構造を明確化してばいいだけなのですから。難しいのは、文章やデザインを考案していくこと。HTMLはあくまで「枠組み」や「箱」であり、大切なのは中身であったりします。:ドキュメントタイプの宣言<html>:HTML文書であることの宣言<meta>:文書に関する情報(メタ情報)を指定<link>:cssファイルなど外部の関連文書を指定<script>:スクリプト文書の埋め込みを指定<head>:ヘッダー情報を表す<title>:文書のタイトル<style>:cssを指定<body>:文書の本体部分HTMLの定型文は、基本的にはどのウェブサイトで使われている記述になります。プロの「マークアップエンジニア」でもテンプレートをコピーして使うことが多いため、覚えていない人もいるかもしれません。検索エンジンに最適化(SEO)を意識する場合は「定型文」をしっかりと記述することが重要となります。HTMLでよく使うタグ<div>:段落やまとまりを指定<h1>:大見出しを指定<h2>:中見出しを指定<h3>:小見出しを指定<img>:画像を表示指定<p>:ひとつの段落を指定<a>:リンクを指定<span>:文のまとまりを指定<ul><li>:リストを作成HTMLの定型文「<body>」の中に記述するタグ。ブログやニュースサイトでは、見出し(h1)と文章(p)のセットを段落(div)にするというのが基本構造になります。