インドネシアの成長がすさまじい！インドネシアのユニコーン企業とスタートアップ企業
ASEANで唯一のイスラム国家で世界第4位・約2億6000万の人口を誇るインドネシアが近年、堅調に発展しています。EC（電子商取引）市場や配車サービス市場が急成長中です。今回はインドネシアの企業について調べてみましょう！
インドネシアについて
国土面積は189万㎢。日本の約5倍
13,466の島々で構成されている島国です。
人口割合
人口は266,357,297人で年齢層は30歳以下が多くの割合を占めています。日本の年齢層は40歳以上が多くの割合を占めます。
3社のユニコーン企業
年齢が比較的若いためスマートフォン（スマホ）の普及が進んでおりし電子商取引（EC）や配車アプリ分野が中心。
ゴジェック（Go-jek）
GO-JEKはジャカルタに本社を置くインドネシアを代表するベンチャー企業でバイクや車を相乗りするいわゆる『ライドシェアサービス』や『物流サービス』が主な事業。その他に料理や荷物の宅配サービス、電子決済など20弱のサービスを提供している。
国内のみならず周辺国へ事業を展開しています。
起業のきっかけ
2010年10月にNadiem Makarim（1984年 - ）によって設立される[2]。きっかけたはOJEK（オジェック）と呼ばれるバイクタクシーの運転手との会話から「勤務時間の7割は客待ち」ということを知ったことで、その待ち時間の有効利用するアイデアとして配車サービスを思いついた。設立時の登録ライダーは20人であった。
トコペディア（Tokopedia）
日本のサイバーエージェント・ベンチャーズやソフトバンクなどから資金を調達した日本と深い関わりを持つインドネシアのユニコーン企業でC2CのECサービスを提供している。
トラベロカ（Traveloka）
ジャカルタで設立されたユニコーン企業でインドネシアだけでなくタイやマレーシアなどの周辺国へ総合的なオンライン旅行サービスを提供している。米旅行サイト運営大手のExpediaから3億5000万ドル（約386億4000万円）を調達してます。
スタートアップ企業
Investree
インドネシアのフィンテック企業
Kumparan
ソーシャルメディアの要素を取り入れたハイブリッドニュースサイト
Eスポーツ
昨今ASEAN諸国はeスポーツの発展に力を入れており様々な団体が東南アジアに進出しました。インドネシアでは政府もeスポーツの発展を促進する姿勢を見せeスポーツの注目度が高まっている。また、東南アジアはスマートフォンの普及が進んでおり、2016年に950万人だったeスポーツ人口が、2019年には2倍になると見込まれるなど、世界で最もeスポーツ人口が拡大している地域である。
おわりに
ITインフラ投資はジャカルタ首都圏に集中しておりスマホを使ったビジネスがブームになっていますが島諸国ですのでインターネットがいきわたっていない島もありますがインドネシア政府は「Goデジタル戦略2020」を発表しており、2020年までに「デジタル系スタートアップの1,000社の創業支援」「100万人の農民、漁民のデジタル化」「800万社の中小企業のデジタル化」を目標に掲げておりまだまだ成長する市場となっておりこれから注目していこうと思います。
宇宙ビジネスという可能性「新たなサービス」
最近、有効な投資先として注目されているのが「宇宙ビジネス」です。日本では堀江貴文さんが出資しているベンチャー企業「インターステラテクノロジズ株式会社」、海外ではテスラモーターズCEO・PayPalの創業者のイーロン・マスクさんが設立した「SpaceX」が有名ですね。
「SpaceX」といえば、去年（2018年）ZOZOTOWNを運営する「株式会社ZOZO」社長の前沢友作さんが月旅行を契約したとして話題になりましたね！
近年「宇宙」という話題・テーマは盛り上がってきていますが、はたして「宇宙ビジネス」は儲かるのでしょうか？調査してきましたのでご紹介しましょう。
「宇宙ビジネス」の市場規模
まずは「宇宙ビジネス」の市場規模から見ていきましょう！宇宙ビジネスの世界の市場規模は「Bryce Space and Technology - Reports」より参照しますと、2017年で38兆円と「国内外食市場」や「国内不動産市場」とほぼ同じとなっております。
日本での「宇宙ビジネス」の市場規模は1.2兆円と世界に比べると投資が十分ではないというのが分かりますね。
（宇宙産業ビジョン2030）
しかし、「宇宙産業ビジョン2030」では2030年の市場規模倍増を目指すと述べています。
宇宙ビジネスの内訳
衛星サービス
人工衛星で観測した地上の画像や、気象データを分析・加工して、農業や漁業に生かすデータを提供する会社。人工衛星画像をAI技術をもって処理し短時間での正確な解析結果を提供するサービスがあったりします。
例えば「渋滞情報」や「駐車場の空き情報」、「位置情報サービス」など
災害時の対応にもつながります。
地上設備
衛星からデータを受信、解析する設備を提供する会社。
衛星製造産業
文字通り衛星を製造する部品を提供する会社。
打ち上げサービス
ロケット技術を用いた運送サービスを提供する会社。
「衛星サービス」を利用したサービス
- 自動運転
- 位置情報サービス（GPS）
- 航空機
- ゲーム
- 観光
- 輸送物流
- 魚群探査・養殖監視
- 農作物の生育予測
- 建設・不動産
- 天気予報
- 防災・防衛
他にも利用できるサービスはあると思います。考えれば新たな楽しみや便利さを提供できるサービスを提供できるようになりそうですね。
まだまだ発展途上の分野ですのでこれからもっと活発に盛り上がっていきそうですね！
お問い合わせに返信「文中の文字色を太字にしたときの色を変えたい」
お問い合わせ内容
はじめまして。テーマのsimplefreshを使わせていただいています。質問なのですが、文中の文字色を太字にした場合変更ができない（水色のまま）なのですが、変更方法を教えていただけますでしょうか。よろしくお願いします。
カスタマイズ→デザインcss
b {
color: #10171e;
font-weight: bolder;
}
colorの部分をお好きな色に変えていただければと思います！
FontAwesome以外にもこんなにあった！無料のWebアイコンフォントライブラリー9選
Webアイコンフォントといえば『FontAwesome』です。しかし、それ以外にも無料のWebアイコンフォントはあります。今回はFontAwesome以外のWebアイコンフォントを提供している9個のサイトをご紹介します。
- Webアイコンフォントとは？
- 1.Google Material Icons
- 2.WE LOVE ICON FONTS
- 3.Ionicons
- 4.EmojiOne
- 5. Foundation Icon Fonts 3
- 6. Icons8
- 7.IconMonstr
- 8.Orion
- まとめ
Webアイコンフォントとは？
フォントとして使用することができるアイコンのことでフォントとして使用するのでサイズや色などをCSSで調整することができますしファイルサイズを抑えられたりというメリットがありますデメリットはほぼないと言えます。
デザインをする上で必須の存在と化しており、アイコンの使用幅を広めることでまた違ったデザインを作れるようになると思います。
それではご紹介していきます。
1.Google Material Icons
2.WE LOVE ICON FONTS
3.Ionicons
4.EmojiOne
5. Foundation Icon Fonts 3
6. Icons8
7.IconMonstr
8.Orion
まとめ
Font Awesome以外にもこんなにもいっぱいのWebフォントアイコンがあります。Font Awesomeに飽きた方やデザインの被りが嫌な方はぜひ使ってみてください！
今回はご紹介だけに留めて置きます。使い方などはまた別の記事でご紹介しようと思います。アイコンを変えるだけで結構印象が変わりますのでお試しに使ってみてもいいかもしれません。
「ブラックホール」で発電する「ブラックホール発電」は実現可能か？
2019年4月10日「ブラックホールの撮影に初成功」というニュースが駆け巡りました。このニュースは世界中で話題となりました。
ブラックホールの撮影成功のニュースを受けてブラックホールについて調べる人急増中！！ pic.twitter.com/ESbKp5QKrk
— くろやん フォロバ100%@はてなブロガー (@haijpuro) 2019年4月16日
このニュースを受けてブラックホールについて、宇宙について興味が沸いた人は多いのではないでしょうか？
今回はこのブラックホールを利用した「ブラックホール発電」についてご紹介します。
ブラックホール発電
国立天文台の本間希樹（まれき）教授
「ブラックホールにゴミを捨てると、その物質は熱を出すので、発電する事も理論上は可能」
ブラックホールは"一言で表すと凄いやつ"本間希樹教授の解説に"分かりやすい"と絶賛の声！「ワイドナショー」 - COCONUTS
ブラックホールを利用した発電が可能であることその理論があることについてお話しされていました。
実現の可能性
20世紀末以降の弦理論・ブレーンワールド理論の進展から、大型ハドロン衝突型加速器 (LHC) 程度のかつて予想されていたよりは低エネルギー（それでも過去最大級であり、陽子数千個分の質量に相当する）の加速器で極小ブラックホールを産み出せる可能性が論じられ、2008年から始まった実験テーマの一つに選ばれた。
実際にLHCでブラックホールが生成されたとしても投入されるエネルギーに対してあまりにも小さすぎるが、遠未来のテクノロジーと考えられていた縮退炉の予想外に早い実用化につながることを期待する動きもある。
現在の技術で人類が到達可能な範囲にブラックホールは発見されていない。
「大規模なブラックホールを作り出すことができれば可能」「ブラックホールに到達できれば可能」ということで近年の科学技術の発達から案外早く「ブラックホール発電」は可能になるかもしれませんね！
膨大なエネルギーを持つとされていますので国家単位ではなく「地球」全体の電気を補うことができるかもしれません。
2019年何が起こるのか楽しみですね！
起業のカギが分かった！
起業家
起業家（きぎょうか）とは自ら事業を興す（起業）者をいう。通常、ベンチャー企業を開業する者を指す場合が多い。アントレプレナー（英語: entrepreneur）とも言う[1]。 ヨーゼフ・シュンペーターはその経済理論において経済革新に繋がるイノベーションの担い手として重視した。イノベーションを起こす人の意味からイノベーターとも言う。
今回は「起業家」について書きました。長い記事になりましたので時間があるときにご覧ください。起業についての現状を把握することで見えてくる「起業を成功させるカギ」を考察していきます。
日本の起業家の年度推移
まずは起業家は増えているのか？減っているのか？を確認しそれらの原因を特定していきましょう。
起業家の推移を確認するために法務省が公開している登記統計データを見ていきます。
このデータを借りてグラフを作成し分析していきましょう。
「会社」を設立した数になります。
2017年度「株式会社」と「合同会社」の設立件数
グラフを見ていただけると分かるように総数としては増加傾向にあることが分かります。
平成20年（2008年）から比べると27014件(29%)増加しており起業しやすくなったのが分かります。起業家が増加した背景には何があるのか調べていきましょう。
起業家増加の背景-時代ごと-
新会社法による意識の変化 -2006-
平成18年度（2006年）の春、新会社法が施行され会社設立がしやすくなったのを背景に働き方に疑問を持った人々の意識の変化が現れ始め増加した。
ライブドアショック -2006-
新会社法が施行された2006年といえばライブドアが証券取引法違反の容疑で強制捜査を受けた事件が話題になりました。いわゆる「ライブドアショック」ですね！
この事件は起業家数を増やす要因の一つのように思えます。
堀江貴文（ほりえ たかふみ）さんに憧れ起業した人たちも多くいると思いますので。
僕もその一人です笑
SNSの時代：承認欲求の高まり-2008-
以前書いた記事『「若い世代」にウケるサービスの作りかた』で書いたことが当てはまると思います。
簡単にまとめると
2006年ごろから誰しもが持っていた有名になりたい！人気者になりたい！という人間の基本欲求「承認欲求」がSNSを通じて爆発した話です。
SNSから得る情報により起業家の情報が入るようになったのも大きいでしょう。
「お金持ち！」「羨ましい！」「俺もできるのでは？」「私もできるのでは？」などの感情が働き無意識的に起業へ向かう人もいるかもしれません。
国境を越えた海外ITベンチャーの参入-2008-
上記の「ＳＮＳ」を流行らした「Facebook社」や「Twitter社」などの参入により、インターネットを使った国境を越えたサービスによりどこからでもビジネスが展開できる時代であると気づいた人たちが次々と起業していきます。
イノベーションという言葉-2010-
2010年ごろからテレビや雑誌で聞くように見るようになった「イノベーション」という言葉。高視聴率ドラマ「リッチマン、プアウーマン」などから社会的に認知され広がったように感じます。
このイノベーションという言葉が流行した2010年ごろから「3Dプリンター」や「ドローン」などのハイテク技術が注目されます。
これらの「イノベーションを起こすハイテク技術」に感銘を受け「アイデア」を閃いた人たちが起業していく。
クラウドファンディング時代-2011-
ネットを通じて小口の資金をもとに多数の人たちから資金を集め、エンジェル投資家をマッチングさせるプラットフォームサービス「クラウドファンディング」が有名になり始めました。
様々な資金調達方法が増え従来より容易に資金調達ができるようになりました。
2013年頃には「フリマアプリ」や「カーシェアリング」などのCtoCのサービスが増えてきました。
2013年に設立された有名な会社といえば「株式会社メルカリ」ですね。
ベンチャー企業の代表格となりました。
ベンチャーキャピタルの活性-2016-
ベンチャーキャピタルとは高い成長が期待される未上場企業に対して投資を行うファンドのことで投資額・投資件数ともに大幅に伸びているという調査データが一般財団法人ベンチャーエンタープライズセンター（VEC）より発表されています。
様々な助成金・補助金・制度
詳しく知りたい方はこちらの記事が分かりやすいのでぜひお読みください。
飲食店などのでの起業も増えています。
起業家の男女比
2018年4月末時点の企業における女性社長比率は7.8％。30年前（1988年）は4.2％、20年前（1998年）は5.5％、10年前（2008年）は6.3％と推移し、全体では緩やかな上昇傾向が続いている。
男女の割合はまだ男性のほうが多いですが上昇傾向にあり女性の活躍の場が増えてきているのが分かります。
特にサービス業での起業が多く「女性ならではの着眼点」を生かした業種ですね。
海外のベンチャー企業を見てみる
昨今、中国の発展がすさまじく日本にもその流れは着実に来ています。特にit分野での発展が話題ですね！「AI」や「Iot」、「ドローン」などもアメリカと肩を並べるほどの技術力と噂されています。
この項目で「カギ」となる部分を把握したい。
DiDi
世界最大級のAI配車プラットフォームDiDi。日本でもサービス開始されており、DiDiは世界で5億5千万人のユーザーに利用されています。
wework
起業家向けのコワーキングスペースを提供するアメリカの企業で2017年にソフトバンクグループと合弁でWeWork Japanを設立し日本でも利用できる新たなサービスです。
LALAMOVE
オンデマンド物流サービスを展開している香港の会社で事業を拡大していっています。
dji
ドローン市場シェア１位の企業です。
詳しくは中国のベンチャービジネスの紹介をご覧ください
結論
ここから見るに「CtoC」「BtoC」のサービスが多いイメージを受けます。なおかつ「もともとある成長性のあるモノ」を単純化・簡素化してユーザーにお届けするサービスが成長していますね。それに「専門性」それに何かと何かをつなげるサービス「ハブ構造」ですね！
- 物流+簡素化=LALAMOVE（ユーザーと運搬会社をつなげる）
- タクシー事業+簡素化=DiDi(ユーザーとタクシーをつなげる)
- レンタル業＋専門性＋簡素化＝wework（ユーザーとコワーキングスペースをつなげる）
- シェアリング＋専門性＋簡素化=モバイク・ofo（自転車とユーザーをつなげる）
今の人々が求めているのは”簡素で単純化したモノ”
何か隙のある業種を見いだせればいつか成功する「人々の暮らしをより豊かに便利に楽にするサービス」を生み出せかもしれません。
起業家を目指している皆様、一緒に大志をもってがんばりましょう！
注目の会社
UNCHI株式会社
「ラーメン好き」「大阪の人」はご存知の会社。何をしている会社かといえばラーメン屋さんです。
人類みな麺類という店名を聞けばわかる人も多いと思います。大阪では有名なラーメン屋さんで、現在8店舗のラーメン屋を運営しています。
そのほとんどのラーメン屋が行列ができるラーメン屋となっております。「世界一暇なラーメン屋」や「担担麺の掟を破る者」などユニークな名前が多く、それぞれのお店のコンセプトがあるようです。
店内は「ラーメン屋」らしかぬ「おしゃれ」なラーメン屋さんで既成概念から外れた発想とユニークさで事業を拡大しています。
ブランディングの参考になる会社ですね。
春から秋の和歌山の釣りポイント「江川漁港の灯台」でメバルを釣ろう！仕掛けのご紹介！
春～秋の「江川漁港」で使える仕掛けや餌などについてご紹介します。
春から秋は根魚の時期でメバルやガシラ（カサゴ）などが多く釣れます。
釣り場ポイント
〒646-0054 和歌山県田辺市江川４５−４５
江川漁港の灯台
車で横付けできる有名なポイントで内側で釣ります。外側はテトラポッドでブラクリ釣りがいいと思います。
仕掛け
ロッド
入門者にも選びやすい色分けされたタグ。 メバル、アジといったショアからのライトルアーゲームからシーバス、アオリイカ、はては淡水でのトラウトゲームまで、幅広いルアーターゲットに対応するコストパフォーマンスロッドが「ルアーマチック」
なかなかにいいロッドですね！
リール
PEの0.8を使いました！
仕掛け
おもりは結構波があったので8号を使いました、流れを見ておもりは変えてみてください。
釣り方
①仕掛けを底まで垂らす。
②底に着いたらリールを2巻きします。
①～②を繰り返します。
餌-マジでおすすめ-
食いのよさを高めながら、エサ持ちのよさを追求したハードタイプ。 身に弾力があり、しっかりしているので深いタナを狙う場合や遠投時でも安心して使えます。
本当にえぐい食いつきです！虫餌が苦手な方はぜひ使ってみてください！
以上で紹介を終わります。僕が行ったときはメバルとガシラが交互に20匹ほど入れ食い状態で釣れました。
釣れるかどうかは結局のところ運次第ですので必ずしも釣れるとは言いきれませんのでご注意ください！
新はてなブログテーマ「SimpleFresh」を公開しました！
新テーマ「SimpleFresh」を公開しました！
デモ：simplefresh
本当にシンプルな「はてなブログテーマ」となっておりまして、新着記事一覧は「リスト型」となっています。
人気記事ガジェット
ちょっとだけこだわったのは「人気記事ガジェット」でRANKINGの下に【-人気の記事】を表示してちょっとおしゃれにしました。
「カテゴリ一覧」でも表示します。
カスタマイズ
ヘッダー
fontawesomeとjqueryを読み込ませます。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
メニュー
タイトル下
<div class="horiznbsdd"> <ul class="horizonst-list"> <li class="itemst"> <a href="URL">コンテンツ<em>contents</em></a> </li> <li class="itemst"> <a href="URL">コンテンツ<em>contents</em></a> </li> <li class="itemst"> <a href="URL">コンテンツ<em>contents</em></a> </li> <li class="itemst"> <a href="URL">コンテンツ<em>contents</em></a> </li> <li class="itemst"> <a href="URL">コンテンツ<em>contents</em></a> </li> <li class="itemst"> <a href="URL">コンテンツ<em>contents</em></a> </li> </ul> </div> <div class="searchbt"> <i class="fas fa-ellipsis-v"></i> </div> <div class="searchmenus"> <div class="menuyheadrs"> <i class="fas fa-arrow-left"></i> <p>詳細検索</p> </div> <div class="menusearch"> <div class="menuseaxrchbar"> <div id="original-search-box" class="enuk"> <form class="formsshd" role="search" action="/search" method="get"> <input type="text" name="q" class="sfdvgb" value="" placeholder="キーワードを入れて記事を検索" required> <input type="submit" value="検索" class="dfdsakeka" /> </form> </div> </div> <p>人気のキーワードから探す</p> <div class="wakumaru clearfix"> <div class="inmaru"><a href="/">キーワード</a></div> <div class="inmaru"><a href="/">キーワード</a></div> <div class="inmaru"><a href="/">キーワード</a></div> <div class="inmaru"><a href="/">キーワード</a></div> <div class="inmaru"><a href="/">キーワード</a></div> <div class="inmaru"><a href="/">キーワード</a></div> <div class="inmaru"><a href="/">キーワード</a></div> </div> <p>人気のキーワードから探す</p> <div class="waku clearfix"> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> </div> <p>カテゴリーから探す</p> <div class="waku clearfix"> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> </div> </div> </div> <script> $(function () { $('.searchbt i').click(function () { $('.searchmenus').fadeIn(500); }); }); $(function () { $('.searchmenus i').click(function () { $('.searchmenus').fadeOut(500); }); }); </script>
詳しくは「スマホのみで表示されるハンバーガーメニュー」、「【コピペ】「タブ型ナビゲーションメニュー」をはてなブログに実装してみる！」をご覧ください。
cssはテーマに組み込んでいますので自動でデザインされます。
snsボタン
こちらもcssをテーマに組み込んでいます。
記事上
<ul class="circle_group clearfix"> <p>SHARE</p> <li class="sns_circle hatebu"><span><i class="fab fa-hatena"></i></span><a href="http://b.hatena.ne.jp/entry/{URLEncodedPermalink}" class="hatena-bookmark-button" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple"></a></li> <li class="sns_circle twitter"><span><i class="fab fa-twitter"></i></span><a href="http://twitter.com/intent/tweet?text={Title} - {BlogTitle} {URLEncodedPermalink}"></a></li> <li class="sns_circle facebook"><span><i class="fab fa-facebook"></i></span><a href="http://www.facebook.com/sharer.php?u={URLEncodedPermalink}"></a></li> <li class="sns_circle googleplus"><span><i class="fab fa-google-plus"></i></span><a href="https://plus.google.com/share?url={URLEncodedPermalink}"></a></li> <li class="sns_circle pocket"><span><i class="fab fa-get-pocket"></i></span><a href="http://getpocket.com/edit?url={URLEncodedPermalink}"></a></li> <li class="sns_circle line"><span><i class="fab fa-line"></i></span><a href="http://line.me/R/msg/text/?{Title} - {BlogTitle} {URLEncodedPermalink}"></a></li> </ul>
記事下
<div class="sns-footer"> <p>SHARE</p> <ul class="sns-area "> <li> <a class="sns-twitter sns-link" href="https://twitter.com/intent/tweet?url={URLEncodedPermalink}&text={Title}&via=webgaku" target="_blank"> <i class="blogicon-twitter lg" ></i><span class="sns-txt">Twitter</span></a> </li> <li> <a class="sns-facebook sns-link" href="https://www.facebook.com/sharer/sharer.php?u={URLEncodedPermalink}" onclick="window.open(this.href, 'FBwindow', 'width=650, height=450, menubar=no, toolbar=no, scrollbars=yes'); return false;" target="_blank"> <i class="blogicon-facebook lg" ></i><span class="sns-txt">Facebook</span></a> </li> <li> <a href="http://b.hatena.ne.jp/entry/{Permalink}" class="hatena-bookmark-button sns-bookmark sns-link" data-hatena-bookmark-title="{Title}" data-hatena-bookmark-layout="simple" title="このエントリーをはてなブックマークに追加"> <i class="blogicon-bookmark lg"></i><span class="sns-txt">Hatena</span></a> </li> <li> <a class="sns-pocket sns-link" href="http://getpocket.com/edit?url={URLEncodedPermalink}&title={Title}" onclick="window.open(this.href, 'pocket_window', 'width=550, height=350, menubar=no, toolbar=no, scrollbars=yes'); return false;" > <i class="blogicon-chevron-down"></i><span class="sns-txt">Pocket</span></a> </li> </ul> </div> <style> .koldfg{ display:none; } /* 固定 */ .fixed { position: fixed; top: 0; padding: 0; width: 100%; z-index: 1000; background: #fff; } @media (max-width: 991px) { .fixed { position: initial; } .searchbt i { position: fixed; } } </style> <script> $(function() { var offset = $('.horiznbsdd').offset(); $(window).scroll(function () { if ($(window).scrollTop() > offset.top) { $('.horiznbsdd').addClass('fixed'); } else { $('.horiznbsdd').removeClass('fixed'); } }); }); </script>
最後のスクリプトでは「メニュー」を追従させるプログラムをしています。
このテーマを使っているブログ
【コピペ】スマホアプリのような『検索メニュー』を実装するカスタマイズ
「食べログ」や「ホットペッパー」、「ぐるなび」などで見る詳細検索メニューを実装してみよう！という記事になります。
カスタマイズ前に詳細設定→headに要素を追加に「fontawesome」と「jquery」を追加しておいてください。
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.2/css/all.css" integrity="sha384-fnmOCqbTlWIlj8LyTjo7mOUStjsKC4pOpQbqyi7RrhN7udi9RwhKkMHpvLbHG9Sr" crossorigin="anonymous"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"> </script>
それではスマホアプリ風の検索メニューの実装を解説していきます。
コピペカスタマイズ
ヘッダータイトル下に貼り付けてください！
<div class="searchbt"> <i class="fas fa-search"></i> </div> <div class="searchmenus"> <div class="menuyheadrs"> <i class="fas fa-arrow-left"></i> <p>詳細検索</p> </div> <div class="menusearch"> <div class="menuseaxrchbar"> <div id="original-search-box" class="enuk"> <form class="formsshd" role="search" action="/search" method="get"> <input type="text" name="q" class="sfdvgb" value="" placeholder="キーワードを入れて記事を検索" required> <input type="submit" value="検索" class="dfdsakeka" /> </form> </div> </div> <p>人気のキーワードから探す</p> <div class="wakumaru clearfix"> <div class="inmaru"><a href="/">キーワード</a></div> <div class="inmaru"><a href="/">キーワード</a></div> <div class="inmaru"><a href="/">キーワード</a></div> <div class="inmaru"><a href="/">キーワード</a></div> <div class="inmaru"><a href="/">キーワード</a></div> <div class="inmaru"><a href="/">キーワード</a></div> <div class="inmaru"><a href="/">キーワード</a></div> </div> <p>人気のキーワードから探す</p> <div class="waku clearfix"> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> </div> <p>カテゴリーから探す</p> <div class="waku clearfix"> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> <div class="in"><a href="/">キーワード</a></div> </div> </div> </div> <script> $(function () { $('.searchbt i').click(function () { $('.searchmenus').fadeIn(500); }); }); $(function () { $('.searchmenus i').click(function () { $('.searchmenus').fadeOut(500); }); }); </script> <style> .searchbt i{ position: absolute; top: 20px; right: 15px; font-size: 17px; } .searchmenus{ display: none; width: 100%; height: 100%; position: fixed; top: 0; z-index: 20000; background: #f7f8f9; overflow: scroll; } .menuyheadrs { background-color: #FFF; height: 40px; width: 100%; text-align: center; border-bottom-width: 1px; border-bottom-style: solid; border-bottom-color: #e5e6e6; position: fixed; } .menuyheadrs i.fas.fa-arrow-left { height: 25px; width: 25px; position: absolute; left: 8px; top: 13px; } .menuyheadrs p { font-size: 15px; font-weight: 900; line-height: 13px; } .menusearch { margin-top: 40px; padding: 0px 15px 20px 15px; } .menuseaxrchbar { margin: 0px; } input.sfdvgb { height: 35px; border: 1px solid #e5e6e6; text-indent: 10px; border-radius: 6px; width: 75%; font-size: 14px; } input.dfdsakeka { background-color: #FFF; height: 38px; width: 22%; border: 1px solid #e5e6e6; color: #4b545d; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; } .menusearch p { font-size: 13px; margin: 20px 0 0px 0px; } .waku { display: flex; flex-wrap: wrap; background: #fff; } .in { width: 50%; box-sizing: border-box; text-align: center; border: 1px solid #e5e6e6; } .in a { color: #4b545d; text-decoration: none; font-size: 13px; height: auto; display: block; padding: 15px; } .in:nth-child(3) { border-top: none; border-bottom: none; } .in:nth-child(4) { border-top: none; border-bottom: none; } .in:nth-child(2n+1) { border-right: none; } .wakumaru { display: flex; flex-wrap: wrap; margin-top: 15px; } .inmaru { text-align: center; border: 1px solid #e5e6e6; border-radius: 100px; -webkit-border-radius: 100px; -moz-border-radius: 100px; padding-top: 5px; padding-right: 10px; padding-bottom: 5px; padding-left: 10px; margin: 0px 5px 5px 0px; background: #fff; } .inmaru a { color: #4b545d; text-decoration: none; font-size: 13px; height: auto; display: block; } </style>
解説
検索アイコンをタッチしたらフェードインでメニューを表示するようにします。
最初はメニューをdisplay:noneを使って非表示にしておきます。
アイコンをタッチしたらフェードインさせ左矢印アイコンをタッチしたらフェードアウトさせるようにしています。
<style> .searchmenus { display: none; } </style> <script> $(function () { $('.searchbt i').click(function () { $('.searchmenus').fadeIn(500); }); }); $(function () { $('.searchmenus i').click(function () { $('.searchmenus').fadeOut(500); }); }); </script>
解説すべきはこの程度で簡単にスマホ風のメニューを作ることができます。
あとはお好みでキーワードを追加していってくださればと思います。
以上でスマホアプリのような『検索メニュー』を実装できるはずです！
【コピペ】「タブ型ナビゲーションメニュー」をはてなブログに実装してみる！
昨今よく見るようになった「タブ型ナビゲーションメニュー」を実装する方法を解説します。
タブ型ナビゲーションメニューとは？
このようなメニューのことでGoogleマップやAirbnbや食べログなどで使われていますね！ブログやニュースサイト、ニュースアプリでは当たり前のように使われています。
これほど目につくメニューですので多くのユーザーが使い方を知っていると思いますのでぜひ採用してみてはいかがでしょうか？
コピペOK！タブ型ナビゲーションメニュー
コピペの前にヘッダーのデザインを整えておいてくださいね！
コピペ場所は「デザイン→ヘッダー→タイトル下」です。
スマホでの閲覧時のみ表示されますのでお気を付けください！
<ul class="horizonst-list"> <li class="itemst"> <a href="URL">コンテンツ</a> </li> <li class="itemst"> <a href="URL">コンテンツ</a> </li> <li class="itemst"> <a href="URL">コンテンツ</a> </li> <li class="itemst"> <a href="URL">コンテンツ</a> </li> <li class="itemst"> <a href="URL">コンテンツ</a> </li> <li class="itemst"> <a href="URL">コンテンツ</a> </li> <li class="itemst"> <a href="URL">コンテンツ</a> </li> <li class="itemst"> <a href="URL">コンテンツ</a> </li> </ul> <style> @media screen and (min-width: 992px){ .horizonst-list { display: none; } } @media screen and (max-width: 991px){ .horizonst-list { display: block; } h2#blog-description { display: none; } } .itemst a { color: #fff; text-decoration: none; } .horizonst-list { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; padding: 0; margin: 0; background: #668bff; } .itemst { display: inline-block; font-size: 70%; font-weight: bold; color: #FFF; padding-left: 5px; padding-right: 10px; line-height: 35px; } </style>
横スクロールを実装している部分
.horizonst-list { overflow-x: auto; white-space: nowrap; -webkit-overflow-scrolling: touch; }
overflow-x: auto;
はみ出た要素の左右の表示方法を指定するメソッド
auto
自動でスクロールバーを表示する。
white-space: nowrap;
ソース中のテキストの改行の表示方法を指定するメソッド
nowrap
自動改行させない。
-webkit-overflow-scrolling: touch;
慣性スクロールの実装
横並びにしている部分
.itemst { display: inline-block; }
display: inline-block;
横並び
さいごに
説明は以上で結構簡単に作ることができましたね！
わざとはみ出させたりすることで「横スクロールできますよ」と教えております。
横スクロールを実装している部分で説明した内容を使用することでAirbnbのようなカード型横スライドメニューを実装することもできます。カード型レイアウトもいずれまとめますのでお楽しみに！
Airbnb（エアビーアンドビー）を最近まで「エアバブ」て読んでました。俺だけちゃうよな？
ハンバーガーメニューはもう古いといわれる時代です。次はどんなメニューが流行るのか？面白いところですね！「タブ型ナビゲーションメニュー」の次に来るメニューを作ってみるのもいいかもしれません。
【コピペOK】スクロールで縮小する注目のコンテンツ！はてなブログカスタマイズ
当ブログで行っているカスタマイズで『注目させたいコンテンツ』をトップに表示しています。下にスクロールするとトップにバーを表示したカスタマイズとなっています。
当ブログのトップページを下にスクロールしてみると分かりやすいと思います。
下スクロールで表示されるバーの「見る」ボタンをクリックするとトップの注目コンテンツに飛びます。
注目させるコンテンツには今は自作テーマ「Primeiro」となっていますが「アフィリエイト」や「人気の記事」・「出版した本」や「レポート」等の注目させたいものを表示するといいと思います。
それでは早速カスタマイズ方法を解説していこうと思います。
完成予想
カスタマイズ
ヘッダータイトル下
<div class="toponefeature"> <div class="toponeconta"> <div class="divheader__text"> <p>タイトル</p> <p class="toperdcontent"> 説明 </p> <a href="URL" itemprop="url name" class="permalink">見る</a> </div> </div> </div> /*スクロール後に表示するコンテンツ*/ <div class="topnoscroll"> <div class="flexscl"> <p>タイトル</p> <a href="" itemprop="url name" class="permalink">見る</a> </div> </div> <style> /*トップフューチャーバー*/ .divheader__text a { text-decoration: none; } .topnoscroll a { text-decoration: none; } .divheader__text a:hover,.topnoscroll a:hover { background-color: #668bff87; } .toponefeature{ background: #fcca80; } .divheader__text p { font-size: 18px; margin-bottom: 11px; color: #333; font-weight: 600; } p.toperdcontent { font-size: 15px; font-weight: 400; line-height: 1.6em; letter-spacing: -.01em; color: #6b7377; } .divheader__text a { border: 0 solid rgba(0,0,0,0); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.12); background: #3880ff; transition: all .3s ease; padding: 12px 13px 10px; font-size: 14px; background-color: #668bff; font-weight: 600; border-radius: 6px; letter-spacing: 0; text-transform: none; line-height: 1.4em; } .toponefeature { display: flex; padding-top: 60px; padding-bottom: 60px; margin-top: 0px; border-bottom: 1px solid #eee; } .toponeconta { position: relative; width: 900px; margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } .divheader__text { max-width: 50%; margin-right: 35px; margin-left: auto; } .toponeconta::before { background: url(画像URL) 0 0 no-repeat; background-size: 100%; width: 40%; height: 250px; content: ''; position: absolute; bottom: -50px; left: 35px; } @media screen and (max-width: 1000px){ .divheader__text { margin-right: 35px; margin-left: 0; max-width: 60%; } .toponeconta::before { background-size: 100%; content: ''; position: absolute; bottom: -50px; width: 212px; height: 155px; right: 0; left: auto; } } @media screen and (max-width: 580px){ .divheader__text p { font-size: 14px; font-weight: 600; } .toponefeature { display: flex; padding-top: 15px; padding-bottom: 25px; margin-top: 0px; border-bottom: 1px solid #eee; border-top: 1px solid #eee; } .toponeconta::before { background-size: 100%; content: ''; position: absolute; bottom: 0px; width: 50%; height: 155px; right: 0; left: auto; } .divheader__text { margin-right: 35px; margin-left: 0; max-width: 100%; } p.toperdcontent { font-size: 12px; font-weight: 400; line-height: 1.6em; letter-spacing: -.01em; color: #6b7377; width: 50%; } } #top-editarea { margin-bottom: 0; margin-left: 0px; } @media screen and (max-width: 991px){ #top-editarea { margin-bottom: 0; margin-left: 0; } } </style> <script> //pagetop $(function() { var topBtn = $('.topnoscroll'); topBtn.hide(); //スクロールが100に達したらボタン表示 $(window).scroll(function () { if ($(this).scrollTop() > 200) { //ボタンの表示方法 topBtn.fadeIn(); } else { //ボタンの非表示方法 topBtn.fadeOut(0); } }); //スクロールしてトップ topBtn.click(function () { $('body, html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> <style> .flexscl { display: flex; position: relative; max-width: 900px; margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } .topnoscroll a { border: 0 solid rgba(0,0,0,0); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.12); background: #fcca80; transition: all .3s ease; padding: 12px 13px 12px; font-size: 14px; background-color: #668bff; font-weight: 600; border-radius: 6px; letter-spacing: 0; text-transform: none; padding: 5px 15px; margin: 5px; } .topnoscroll p { margin: 0; padding: 10px 0 10px 25px; width: 60%; } .topnoscroll { width: 100%; background: #fcca80; position: fixed; top: 0; z-index: 2; padding: 0 15px; color: #fff; font-weight: 600; text-align: left; overflow: auto; display: none; } @media screen and (max-width: 991px){ .topnoscroll p { margin: 0; padding: 8px 0; width: 75%; font-size: 14px; } .topnoscroll a { padding: 5px 10px; margin: 3px; } } @media screen and (max-width: 320px){ .topnoscroll a { font-size: 10px; } .topnoscroll p { font-size: 10px; } } </style>
テーマ「Primeiro」の場合
ヘッダータイトル下
<div class="toponefeature"> <div class="toponeconta"> <div class="divheader__text"> <p>タイトル</p> <p class="toperdcontent"> 説明 </p> <a href="URL" itemprop="url name" class="permalink">見る</a> </div> </div> </div> /*スクロール後に表示するコンテンツ*/ <div class="topnoscroll"> <div class="flexscl"> <p>タイトル</p> <a href="" itemprop="url name" class="permalink">見る</a> </div> </div> <style> /*トップフューチャーバー*/ .divheader__text a { text-decoration: none; } .topnoscroll a { text-decoration: none; } .divheader__text a:hover,.topnoscroll a:hover { background-color: #668bff87; } .toponefeature{ background: #fcca80; } .divheader__text p { font-size: 18px; margin-bottom: 11px; color: #333; font-weight: 600; } p.toperdcontent { font-size: 15px; font-weight: 400; line-height: 1.6em; letter-spacing: -.01em; color: #6b7377; } .divheader__text a { border: 0 solid rgba(0,0,0,0); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.12); background: #3880ff; transition: all .3s ease; padding: 12px 13px 10px; font-size: 14px; background-color: #668bff; font-weight: 600; border-radius: 6px; letter-spacing: 0; text-transform: none; line-height: 1.4em; } .toponefeature { display: flex; padding-top: 60px; padding-bottom: 60px; margin-top: 0px; border-bottom: 1px solid #eee; } .toponeconta { position: relative; width: 900px; margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } .divheader__text { max-width: 50%; margin-right: 35px; margin-left: auto; } .toponeconta::before { background: url(画像URL) 0 0 no-repeat; background-size: 100%; width: 40%; height: 250px; content: ''; position: absolute; bottom: -50px; left: 35px; } @media screen and (max-width: 1000px){ .divheader__text { margin-right: 35px; margin-left: 0; max-width: 60%; } .toponeconta::before { background-size: 100%; content: ''; position: absolute; bottom: -50px; width: 212px; height: 155px; right: 0; left: auto; } } @media screen and (max-width: 580px){ .divheader__text p { font-size: 14px; font-weight: 600; } .toponefeature { display: flex; padding-top: 15px; padding-bottom: 25px; margin-top: 0px; border-bottom: 1px solid #eee; border-top: 1px solid #eee; } .toponeconta::before { background-size: 100%; content: ''; position: absolute; bottom: 0px; width: 50%; height: 155px; right: 0; left: auto; } .divheader__text { margin-right: 35px; margin-left: 0; max-width: 100%; } p.toperdcontent { font-size: 12px; font-weight: 400; line-height: 1.6em; letter-spacing: -.01em; color: #6b7377; width: 50%; } } #top-editarea { margin-bottom: 0; margin-left: 280px; } @media screen and (max-width: 991px){ #top-editarea { margin-bottom: 0; margin-left: 0; } } </style> <script> //pagetop $(function() { var topBtn = $('.topnoscroll'); topBtn.hide(); //スクロールが100に達したらボタン表示 $(window).scroll(function () { if ($(this).scrollTop() > 200) { //ボタンの表示方法 topBtn.fadeIn(); } else { //ボタンの非表示方法 topBtn.fadeOut(0); } }); //スクロールしてトップ topBtn.click(function () { $('body, html').animate({ scrollTop: 0 }, 500); return false; }); }); </script> <style> .flexscl { display: flex; position: relative; max-width: 900px; margin-right: auto; margin-left: auto; padding-left: 15px; padding-right: 15px; } .topnoscroll a { border: 0 solid rgba(0,0,0,0); color: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.08), 0 2px 4px rgba(0,0,0,.12); background: #fcca80; transition: all .3s ease; padding: 12px 13px 12px; font-size: 14px; background-color: #668bff; font-weight: 600; border-radius: 6px; letter-spacing: 0; text-transform: none; padding: 5px 15px; margin: 5px; } .topnoscroll p { margin: 0; padding: 10px 0 10px 25px; width: 60%; } .topnoscroll { width: 100%; background: #fcca80; position: fixed; top: 0; z-index: 2; padding: 0 15px; color: #fff; font-weight: 600; text-align: left; overflow: auto; display: none; } @media screen and (max-width: 991px){ .topnoscroll p { margin: 0; padding: 8px 0; width: 75%; font-size: 14px; } .topnoscroll a { padding: 5px 10px; margin: 3px; } } @media screen and (max-width: 320px){ .topnoscroll a { font-size: 10px; } .topnoscroll p { font-size: 10px; } } </style>
これで表示されます！
注目コンテンツの色の変更
ブログのデザインに合わせて色を変えていってくださいね！
/*全体の色*/ .toponefeature { background: #fcca80; } .divheader__text p { color: #333; } .divheader__text a { color: #fff; background: #3880ff; background-color: #668bff; } /*スクロール後の色*/ .topnoscroll { background: #fcca80; color: #fff; } .topnoscroll a { color: #fff; background: #fcca80; background-color: #668bff; }
これで「スクロールで縮小する注目のコンテンツ」を設置できると思います。
注目させたいコンテンツがあればぜひ使ってみてください！
他にもカスタマイズ記事を書いていますので是非ご覧ください。
haijpuro.hateblo.jp
はてなブログドメインでGoogleアドセンス審査通りました！【2019年版】
Googleアドセンスを始めたのは2014年でその頃は審査なんてものはなくて最初のサイトさえ合格してしまえば後で追加するサイトは審査がいりませんでした。
Googleアドセンスで検索してみると審査が厳しくなっているのがうかがえます。
ブログを始めて1ヵ月未満・記事数17記事のこのブログがGoogleアドセンス審査を通過するために行ったことを解説していこうと思います。
ネットで出回っている審査合格準備の嘘とほんと
・独自ドメインで申請する（うそ）
→はてなブログドメインでもイケた！
・プログラムポリシーを遵守する（ほんと）
→AdSense プログラム ポリシー - AdSense ヘルプ
特に重要なのがコンテンツポリシーだと思われます。
審査に通らない方はブログ・サイトに以下の違反コンテンツが含まれていないことを確認ください。
コンテンツポリシー
サイト運営者様は、コンテンツ ポリシーに違反するコンテンツが含まれるページで AdSense コードを使うことはできません。これには、アダルト コンテンツ、衝撃的なコンテンツ、人種差別を奨励するコンテンツなどが含まれます。
Google 広告が掲載されるページには、以下を含めることはできません。
- 家族向けコンテンツに含まれる成人向けのテーマ
- ポルノ、アダルト、成人向けのコンテンツ
- 衝撃的なコンテンツ
- ご自身や他者を脅したり、危害を加えるよう促したりしているコンテンツ
- 個人または個人で構成される集団を中傷、威嚇、攻撃しているコンテンツ
- 人種、民族、宗教、障害、年齢、国籍、従軍経験、性的指向、性別、性同一性など、組織的な人種差別や疎外に結び付く特性に基づいて、個人または集団の排斥を促したり、差別を助長したり、誹謗したりしているコンテンツ
- 過度に下品な言葉使い
- ハッキングやクラッキングに関するコンテンツ
- 望ましくないソフトウェアのポリシー（英語）に違反するソフトウェアやコンテンツ
- 不正なソフトウェアやアドウェア
- 違法な薬物や麻薬関連製品に関するコンテンツ
- 絶滅危惧種から作られた製品を宣伝、販売、広告するコンテンツ
- アルコール飲料のオンライン販売
- タバコやタバコ関連商品の販売
- 処方薬の販売
- 武器、兵器または弾薬 (銃火器、銃火器のパーツ、戦闘用ナイフ、スタンガンなど) の販売
- 武器や兵器の強化や組み立て方法（武器や兵器の 3D 印刷、改造キット、8 割方完成した銃部品など）の指南
- 授業や講義の課題や提出物の販売、配布
- ユーザーに報酬を提供することで、広告や商品のクリック、検索、ウェブサイトの閲覧、メールの閲覧を促すプログラムに関するコンテンツ
- その他の違法なコンテンツ、違法行為を助長するコンテンツ、他者の法的権利を侵害するコンテンツ
・プライバシーポリシーを設定している（ほんと）
→「Google の広告サービスの使用にあたって、サイト、アプリ、その他のプロパティでデータの収集、共有、使用が行われる場合は、その旨を明示する必要があります。」
利用規約やポリシーページの作成を行う。
・質の高い記事を提供する（微妙）
→いっぱいシェアされている記事はありませんし検索順位も低いのでGoogleが言う質の高い記事ではないと思います。
30記事以上を用意する（うそ）
→審査申請時は記事数17記事でしたので10記事ほどでも審査は通るのではと思います。
行ったこと
僕が審査前に行ったことを時系列順でまとめます。
STEP①『Google Search Console』に登録
「Google Search Console」はGoogle検索でのサイトのパフォーマンスを監視、管理ができるツールでサイトがGoogleに登録されているかを確認できます。
URL検査でサイトトップページのドメインが登録されているか確認します。
STEP②『Googleアナリティクス』に登録
「Googleアナリティクス」はサイト分析ツールで利用者の訪問状況、流入経路、行動パターンなどのデータを把握できます。
STEP③『お問い合わせ』ページを作成
はてなブログの「固定ページ」で作成しました。
Google Formsを使いお問い合わせページを作成しました。
作成したページはユーザーの目が届く場所に設置します。僕の場合はサイドバーになります。
STEP④『プライバシーポリシー』ページの作成
AdSense プログラム ポリシーのプライバシーの欄には
Google の広告サービスの使用にあたって、サイト、アプリ、その他のプロパティでデータの収集、共有、使用が行われる場合は、その旨を明示する必要があります。
と書かれており「プライバシーポリシー」ページの作成は絶対にやっておかねばなりません。
プライバシーポリシーには必ず『AdSense』について書かなければいけません。
プライバシーポリシー以下の記事を参考にしました。
- 【コピペでOK】プライバシーポリシーの書き方|AdSense・Analytics対策 | アフィリエイトで会社の外にも収入源を【liberty-life-blog】
-
【2019年コピペOK】グーグルアドセンスのプライバシーポリシーテンプレート(ひな形)書き方の例 2019年3月 - アドセンス一点集中企画 -アドセンスに受かりません！困ってます！-僕の夢
完成したプライバシーポリシーページはユーザーの目が届く場所に設置します。僕の場合はサイドバーになります。
以上の4点を審査前に行いました。
審査申請時に広告タグを設置しろと言われますので審査完了までタグを消さないようにしましょう。
審査申請から約1週間ほどで合格通知が届きました。審査完了期間はばらつきがあるようで1日で通ったという人もいますし、2週間かかったという人もいますので気長に待ちましょう！
検索順位上位に共通する記事タイトルの付け方とは？
「記事のタイトル」で読まれるか読まれないかが決まるといっていいほど記事タイトルというのは重要な部分とされています。SEO的にも上位を狙う「キーワード」をタイトルに入れるなど「記事タイトル」は考えなければいけないポイントです。
今回は検索順位上位の記事タイトルを調査した結果に見えてきた記事タイトルのパターンを6つご紹介しこの６つのパターンをテンプレートにしてキーワードから多彩なタイトルを付ける方法を解説します。
「断言型」
狙っているだろうキーワード「タイトルの付け方」
小説家になろうの「タイトルのつけ方」というシンプルな文法の記事が一位となっており「タイトルの付け方」というワードで検索する人をターゲットにしていると思われます。断言的に言われると見ようと思うのが人の性です。
「断言型」とでも言いましょうか。僕が以前書いた記事『「若い世代」にウケるサービスの作りかた』もこの断言的タイトルに当たります。
「断言型」例
こんなんどうです？
「SEXのやり方」
「売れるブログの作り方」
「記事タイトルの付け方」
「●●を作る」
「●●は間違っている」
〇選型
狙っているだろうキーワード「記事タイトルの付け方」
「記事タイトルの付け方」というワードでは一位の記事で「タイトルの付け方」でも2位となります。注目すべきは「読まれる」とカッコを付けて注目させているポイントと「7選」と数字を使っているところですね。
ライティングの本やタイトルの付け方で表示された記事の中でもこの「〇選」という書き方は出てきますしYoutube動画タイトル等でも見る王道のタイトルの付け方ですね。
ランキングや数字が付くものを人は注目してしまいます。
「〇選型」例
こんなんどうです？
「検索順位上位の記事から見る記事タイトル8選」
「●●10選」
「？型」
狙っているだろうキーワード「サイトタイトルの付け方」
「コツとは？」と疑問形でクイズ形式のタイトルとなっておりコツって何だろう？と思いクリックします。
テレビなんかでもクイズ番組が視聴率をとっていたりと「疑問」を投げかけられると人間は興味をそそられます。
「？型」例
こんなんどうです？
「検索順位上位に共通する記事タイトルのパターンとは？」
「●●とは？」
「 否定型」
こちらは 「？型」と似ており「なんで勉強してはいけないのか？」と疑問に思いクリックすると思います。「人は無意識的に損をしたくないと思う生き物」ですので否定されると答えを知りたくなります。
「？型」例
こんなんどうです？
「検索順位上位を狙いたいなら何も考えるな！」
「●●を売るな！」
「●●をするな！」
「 数字＋理由型」
こちらも 「？型」と似ており「理由」を知りたくなります。
「数字＋理由型」例
こんなんどうです？
「検索順位上位の記事が読まれない4つの理由」
「●●の3つの理由」
「●●と思う5つの理由」
「挑発型」
読者を挑発して「なんやお前？」とムカつかせるタイトルで挑発型のタイトルを使った記事は結構多い。
「挑発型」例
こんなんどうです？
「いまごろ検索順位上位を狙う記事とか書いてるん？」
「まだ●●してないの？」
タイトルの付けかた
多く見かけたのはこれら6つのパターンで記事タイトルを付ける際にこれら6つの型に狙っているキーワードを当てはめるといい記事タイトルができそうです。
まずは狙うキーワードを選定します。
狙っているキーワード「検索順位上位 タイトル 付け方」
キーワードが決まったら型に当てはめていきます。
「断言型」
- 検索順位上位を狙えるタイトルの付け方
「〇選型」
- 検索順位上位の記事からみる記事タイトルの付け方8選
「？型」
- 検索順位上位に共通する記事タイトルの付け方とは？
「否定」
- 検索順位上位を狙いたいならタイトルの付け方は考えるな！
「数字＋理由型」
- 検索順位上位を狙った記事が読まれない4つの理由
「挑発型」
- いまごろ検索順位上位を狙う記事とか書いてるん？
こうして型に当てはめてみると様々なタイプのタイトルが簡単にできました！
以上で「検索順位上位に共通する記事タイトルの付け方」のご紹介を終わります。皆様もよかったらこれら「記事タイトルの付けかた6パターン」を型に当てはめてみてくださいね！
