2019-03-14

「若い世代」にウケるサービスの作りかた

市場調査市場調査-アプリ

f:id:yumedasuke:20190314141408p:plain

今の時代、流行を作っているのは女性と子供であると断言します。

特に「若い世代」女性を中心とした10代から20代にウケるコンテンツが流行っています。

例えば、『TikTok』や『Instagram』などが代表的な例です。

その他にもテレビでは「DIY」「お買い物系」「家事」「恋愛」などの女性にウけるジャンルが視聴率を取っています。

YoutubeではYoutuberが写真集を出したり、音楽を出したりといわゆる「アイドル化」が進んでいます。

はじめしゃちょ-Ｐｈｏｔｏ　Ｂｏｏｋ /講談社/講談社

posted with カエレバ

☆YouTube（ユーチューブ）のテレビCMでも話題の現役大学生ナンバーワンYouTuber“はじめしゃちょー”初めてのフォトブック。 ☆動画で魅せる“はじめしゃちょー”とは違う、クールでセクシーな素顔を激撮！ ☆秘密のベールにつつまれた、あの“しゃちょー宅”に潜入し、“はじめしゃちょー”のプライベートに密着。

楽天市場

Amazon

今回の記事は女性と子供にウけているコンテンツを例になぜウけているのか？かんたんに調査した調査レポートです。

女性と子供にウけているコンテンツ
結論

女性と子供にウけているコンテンツ

TikTok

どんなアプリ

中国の「ByteDance」という会社がリリースしたアプリで2016年9月にサービスが開始されました。

15秒の動画をユーザーが投稿・視聴し、コメントでコミュニケーションできる「ショート音楽動画コミュニティ」アプリです。

【Tik Tok公式チャンネル】新しい流行を作ろう！なんちゃってダンス襲来

いつ頃から流行に？

1日平均起動43回！「あごのせ」10代を中心にハマるユーザー続出の「TikTok」 – アプリ分析メディア・App Ape Lab

アプリ分析メディア・App Ape Labのデータによると2017年の11月から急激にユーザー数が伸び始めていることが分かります。

Youtubeでの広告がうざいうざいと騒がれ始めた時期でもありますね。

なぜうけた？

承認欲求の高まり

2006年ごろから誰しもが持っていた有名になりたい！人気者になりたい！という人間の基本欲求「承認欲求」がSNSを通じて爆発し

世はまさに『俺を見ろ。私を見ろ。』時代！！

TikTokはこの「承認欲求」をドンピシャにとらえたコンセプトとなっています。

流行を作ったのは女子高生で2001年または2002年に生また子供たちとなります、彼女らが5歳、6歳の時にはもうスマホが流行やっており彼女らはまさに「SNS」時代の申し子というわけです。

バンドワゴン効果

選挙などでよくみられる支持する人が多いほどその選択に対する支持がより強固になる現象で、「みんながやっているから」という考えでアプリを始めた人も多いと思います。

ダンスの義務化

2012年から中学校の保健体育ではダンスが必修となり、もはやダンスが日常になっており10代なら誰しもがなじみのあるものになりました。

Tik Tokで人気のある動画はダンス系で10代の子たちからすればダンスが最も参入しやすいコンテンツになります。

投稿ハードルの低さ

動画を簡単に盛る（可愛く自分を加工したり、面白く自分を加工したり）ことができYoutubeなどと比べて動画の質が問われず究極を言えば誰かの真似をするだけでフォロワーが増えていきます。

誰でもインフルエンサーになれる仕組みですね。

実際はその「真似」にアレンジを加えた動画がウけているイメージがあります。

「誰かの真似」というものには嫌悪感を抱く人は多く「パクり問題」で炎上することがよくありますが、 TikTokのコミュニティでは「だれかの真似」「パクリ」を寛容にも受けて入れてくれます。

強く言えば「パクり」を前提にしたアプリということになります。

もう「パクり」が嫌われる時代ではなくなってきたのかもしれませんね！

拡散率/注目率の高さ

TikTokのアプリを立ち上げるとまず「おすすめ」という項目で新規ユーザーの動画を表示します。

ここに表示されると多くのユーザーに見られ、再生数やいいね・フォローワーが増えやすくなります。

さらにはハッシュタグと呼ばれるカテゴリーのようなものをつけることができ、同じ曲を使っている動画などを手軽に探しテレビのザッピングのようなことができたりどんな動画も注目させることが容易です。

心理効果

音楽が前提：「コントロール効果」が働く

コントロール効果（感情誘導効果）があります。

これは、音楽のジャンルやテンポなどでお客様の心理を動かすというものです。

店舗BGMで売上に変化が？BGMに秘められた“コントロール効果”とは｜コラム「店舗経営」｜お店BGMを作れるアプリ OTORAKU -音・楽-

真似をする：「カメレオン効果」が働く

誰かと会話をしているときに、ふと気づいたら相手の仕草を真似していたという経験はあるだろうか？例えば関西弁で話している友人と話を続けていると、うっかり関西弁もどきになってしまうという経験は？あるいは、友人の口癖がうつって、いつのまにか自分の口から吐いて出てしまったということは？

こういった経験はよく起こりうるという。この社会心理学現象は『カメレオン効果』と呼ばれている。私たちはカメレオンのように周囲の環境に溶け込もうとする傾向がある。それによって社会的な安心感を得ているのだ。

我々がこれを無意識に行っているということだ。真似を意識的に始めた場合、思いがけない副作用が生まれる可能性も否めない。

なぜ人は無意識に人のマネをしてしまうのか？「カメレオン効果」についての考察 : カラパイア

上記にも挙げた「承認欲求」や「バンドワゴン効果」なども流行った理由の一つだと思われます。

じつは男性の割合のほうが多い

1日平均起動43回！「あごのせ」10代を中心にハマるユーザー続出の「TikTok」 – アプリ分析メディア・App Ape Lab

男性の割合が多いですがそのほとんどは動画は出さず動画を見るだけの「見る専」が多いなというイメージですね。

基本的に最近の流行りは「女性が流行らして男性が後から乗る」のが多いですね！

Instagram

どんなアプリ？

2010年にリリースされ2012年にFacebookに買収されました。

デベロッパーは　Instagram, LLC

インスタグラムは、写真や動画をメインとしたSNSで日本での人気も高く、世界を含めると約10億人が利用していると言われています。芸能人などのインフルエンサーが多く利用している。

いつ頃流行ったか？

2014年2月に日本語アカウントが開設され日本語対応されその翌年の2015年からにかけて爆発的に流行りました。

2017年には「インスタ映え」という言葉が流行語大賞に選ばれました。

飲食店などでは「インスタ映え」するメニューを開発したりと新たなビジネスチャンスが生まれ「古民家」などもインスタ映えの対象となり古民家を転用したショップが流行りました。

「インスタ映え」という言葉が初めて投稿された日に驚きました。

「インスタ映え」という言葉が初めて投稿されたのは、いつだったと思いますか？

正解は･･･「2011年」です。より正確に言うと、2011年3月4日に投稿されていて、投稿したアカウントは著名人やいわゆるインフルエンサーという方ではありませんでした。内容は自身が投稿した写真の「インスタ映え」を気にするものであり、今と同じ意味で「インスタ映え」という言葉が使われています。

2017年新語・流行語大賞「インスタ映え」のSNS初投稿は、実は20XX年!? - Platinum Data Blog by BrainPad

なぜ流行ったか？

海外の「セレブ」が愛用し、日本の芸能人へと広がり芸能人から一般へと流行っていったファッションの流行パターンで。

こちらも「バンドワゴン効果」で流行ったのではと思います。

「いいね！」や「フォロワー」などのコミュニティ機能もウケる原因でしょう！

テキストから写真・動画へ

Twitterなどはテキストが交流に使われていたが、Instagramは写真や動画を手段として相手をより近くに感じる交流に変わった。

投稿の気軽さ

TikTokと同じくInstagramに投稿する写真や動画はフィルターを掛け「盛る」ことができる。

どんな写真でも手軽にかっこよく・美しく・かわいくできる。

ストーリー

画像や動画を一時的に公開できる、ストーリー機能といものがあります。

投稿した写真や動画は24時間以内に消える機能で、本当になぜか安心感が沸き気軽に投稿しようという気分になります。

気軽に投稿したストーリーが原因で炎上した人が何人もいますが....

拡散性・注目率

投稿する写真には「ハッシュタグ」をつけることができ多くの人に注目させることができます。

このハッシュタグは簡単に思いを伝える手段でもあります。

こちらも「承認欲求」が働きます。

根底にあるのは「有名になりたい」です！

嫉妬

漂うオサレ感

インスタで有名な人を「インスタグラマー」といい彼ら・彼女らは自らの私生活をおしゃれにアップしてみたり、「かわいい自撮り」を上げたり企業とのタイアップなどで年間1500万ほど稼いでいる人たちがいたりします。

そのような「インフルエンサー」の存在は嫉妬や憧れを呼んでいます。

SHOWROOM

どんなアプリ？

SHOWROOM株式会社が2013年11月25日にリリースしたサービス

誰もがスターになれる仮想ライブ空間をキャッチコピーに誰でも簡単に生配信できる動画配信アプリです。

ギフティングいわゆる投げ銭がライブを盛り上げます。

2019年2月にはジャニーズ事務所との「バーチャルジャニーズプロジェクト（VJP）」がスタートしました。

こちらも「誰でもスターになれる」という承認欲求を刺激します。

ここから書くことがほとんど同じになるのでウケているコンテンツをご紹介していきます。

MixChannel

mixch.tv

Mirrativ

www.mirrativ.com

これらが「若い世代」にウケているサービスになります。

結論

若い世代・女性にウケるコンテンツには以下の共通点があることが分かった。

「承認欲求」を刺激するコンセプト
気軽にできるという点
盛れる
コミュニティーがある

「誰でも有名人」・「誰でもスター」・「誰でもインフルエンサー」

とにかく人間の根底にある「有名になりたい」という欲を刺激するサービスがウケるのである。

これから、サービスを作ろうとしている人たちの参考になればと思います。

雑談

女の子を普通の一眼カメラで取ろうとしている人がいたんですが、

「普通のカメラで撮らんといてや！」という声を聞きました。

盛ることが普通になってるんやなと思うとおもしろいですね。

現実見て、盛っていない自分自身の顔に自信持ってほしいですね。

2019-03-12

月間PV100万以上の人気Webサイト4つの記事トップデザインを参考にはてなブログをカスタマイズ

はてなブログカスタマイズはてなブログカスタマイズ-Primeiroカスタマイズ

f:id:yumedasuke:20190311152517p:plain

月間PV100万以上の人気のWebサイトは「読ませるための工夫」や「読みやすいデザイン」、「直帰率を下げるための工夫」などを施していたりとデザインの参考になります。

今回はそれらの人気WEBサイトの「記事トップデザイン」に注目！
記事トップのデザインを参考にしてはてなブログをカスタマイズしていくカスタマイズ記事となります。

参考にするWebサイト

カテゴリをいくつ表示しているかも参考にしていきましょう！

Primeiroを使っている方へ

トップページのカテゴリが多い場合や長い場合、カテゴリタグが重なる可能性があります。

cssにこちらを記述しておいてください。

.page-archive .archive-entries .archive-entry .categories a:nth-child(2) {
    display: none;
}
.page-archive .archive-entries .archive-entry .categories a:nth-child(3) {
    display: none;
}
.page-archive .archive-entries .archive-entry .categories a:nth-child(4) {
    display: none;
}
.page-archive .archive-entries .archive-entry .categories a:nth-child(5) {
    display: none;
}

それでは始めていきます！

参考にするWebサイト

liginc.co.jp

LIG

LIG
株式会社LIG | 東京都台東区上野発のWeb制作会社、世界へ

デザイン

「タイトル、著者、データ、カテゴリー」

カテゴリーデザインはシンプルでカテゴリー表示数は多くて5つですね。

テーマ「Primeiro」のコピペ

f:id:yumedasuke:20190312123823p:plain

記事下

<div class="athersmaru">
<div class="profiruimg">
<img src="プロフィール画像のurl"></div> 
<div class="orofinames">
<a href="aboutページのurl">くろやん</a>
</div>
</div>

css

.entry-header {
    position: relative;
    padding: 25px 10px 45px;
    border-bottom: 1px solid #f7f8f9;
}

.entry-header .entry-categories.categories a {
    color: #666;
    border: 1px solid #444;
}

.entry-header .date.entry-date.first {
    position: absolute;
    bottom: 45px;
    right: 0;
}

    .athersmaru{
        display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    }
    
    .profiruimg img{
        border-radius: 50%;
    border: 2px solid #e5e6e6;
    }
    
    .orofinames{
            margin-left: 10px;
    }
    
    .orofinames a{
    text-decoration: none;
    color: #444;
    font-size: 13px;
    font-weight: 700;
    }

    .orofinames a:hover{
    color: #eee;
    }

Engadget Japanese

Engadget Japanese
Engadget 日本版 : 最新ガジェットと家電、テクノロジーのニュースとレビュー

デザイン

「タイトル、コメント、著者、データ、カテゴリー、sns」

著者部分のなかに日付、カテゴリーを格納したデザインです。
snsのシェア数を表示しているのがいいですね！

LIGもそうですが、多数の人が記事を書くサイトはタイトル下に著者情報を記載していますね。

カテゴリ表示数は1つのみです。

テーマ「Primeiro」のコピペ

f:id:yumedasuke:20190312123535p:plain

head内にjqueryを読み込ませる。

管理画面→設定→詳細設定→検索エンジン最適化→headに要素を追加

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js">
</script>

記事下

<div class="athersmaru">
<div class="profiruimg">
<img src="プロフィール画像のurl"></div> 
<div class="orofinames">
<a href="aboutページのurl">くろやん</a>
</div>
</div>

<div class="share-buttons">
    <div class="share-text hatebu-count">
    </div>
    <div class="countsdsa">シェア</div>
</div>

<script type="text/javascript">

  var countHatebu = function (response) {
    var nodeList = document.querySelectorAll('.hatebu-count')
    Array.prototype.forEach.call(nodeList, function (v) {
      v.innerHTML = response || 0
    })
  }


  document.addEventListener('DOMContentLoaded', function () {
    var addScript = function (src) {
      var script = document.createElement('script')
      script.src = src
      document.body.appendChild(script)
    }

    addScript('https://b.hatena.ne.jp/entry.count?url={Permalink}&callback=countHatebu')
  })
</script>

css

.athersmaru {
    display: flex;
    align-items: start;
    width: 40%;
}

   .profiruimg img{
        border-radius: 50%;
    border: 2px solid #e5e6e6;
    }
    
    .orofinames{
            margin-left: 10px;
    }
    
    .orofinames a{
    text-decoration: none;
    color: #444;
    font-size: 13px;
    font-weight: 700;
    }
    
    .orofinames a:hover{
    color: #eee;
    }

.entry-header-html {
    display: flex;
}

.entry-header .entry-categories.categories {
    position: absolute;
    bottom: 44px;
    left: 160px;
}

.entry-header .entry-categories.categories:hover {
    position: absolute;
    bottom: 44px;
    left: 160px;
}

.entry-header .date.entry-date.first {
    position: absolute;
     bottom: 50px;
    left: 80px;
}

.entry-header .entry-categories.categories a {
    color: #9a58b5;
    border: 0px solid #444;
    font-weight: 400;
    font-size: 12px;
}

.entry-header .entry-categories.categories a:hover {
    border: 0px solid #66bdb3;
    color: #9a58b5;
}

.share-buttons {
    width: 10%;
    text-align: center;
    position: relative;
    display: grid;
    align-items: center;
border-left: 1px solid #aaa;
}


@media screen and (max-width: 991px){

.athersmaru {
    width: 80%;
}

.share-buttons {
    width: 20%;
}

ul.circle_group {
    margin: auto;
    list-style: none;
    padding: 0;
    position: absolute;
    bottom: 0px;
}
}

はてブのみをカウントして表示しています。

あとはsnsボタンを設置して終了です！

snsボタンはこちらの記事を参考にしました。
www.daipanman.com

このデザインを少しだけいじります。

/* リンク領域をブロック全体に */
.sns_circle a{
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
    -webkit-border-radius: 50%;
    -moz-border-radius: 50%;
    border-radius: 50%;
    text-indent:-999px;
    color:#FFF;
}

/* 回り込み解除のためのクラス */
.clearfix{
    zoom:1;
}
.clearfix:after{
    content:"";
    display: block;
    clear: both;
    height: 0;
    visibility:hidden;
}

/* サークルのスタイル */
.sns_circle {
    position: relative;
    width: 36px;
    height: 25px;
    margin: 0 10px 0 10px;
    float: left;
    list-style: none;
    color: #eee;
    border-right: 1px solid #e5e6e6;
}

/* Webフォントに関する指定 */
.sns_circle span{
position: absolute;
    font-size: 16px;
}


/* マウスオーバー時のスタイル */
.sns_circle:hover{
    color: #444;
}

/* シェアボタンエリア */
ul.circle_group{
    margin:auto;
    list-style: none;
    padding:0;
}

li.sns_circle.pocket:last-child {
    border: none;
}

/* Font Awesome hatena bookmark（手作り） */
.fa-hatena:before {
    content: "B!";
    font-family: Verdana;
    font-weight: bold;
}

@media screen and (max-width: 991px){

ul.circle_group {
    margin: auto;
    list-style: none;
    padding: 0;
    position: absolute;
    bottom: 0px;
}
}

CNET Japan

CNET Japan
CNET Japan

デザイン

「アイキャッチ画像、タイトル、著者、データ、sns」

カテゴリーを表示せず「パンくずリスト」でどのカテゴリに属すかを示すデザインですね。
シンプルですっきりとした印象を受けますね！

タイトル横にアイキャッチ画像を設置しているのはあまり見かけませんので珍しいデザインだと思います。

テーマ「Primeiro」のコピペ

f:id:yumedasuke:20190312131023p:plain

記事上

<script>
    $('<div class="kokonigazougahairu"></div>').insertBefore('.entry-title');
</script>

<script>
  $(window).on("DOMContentLoaded", function(){
    $('.kokonigazougahairu').prepend('<img src="' + $('meta[property="og:image"').attr('content') + '">');
  });
</script>

css

.entry-header .entry-categories.categories {
    display: none;
}

.entry-title {
    color: #020814;
    font-size: 21px;
    font-weight: 700;
    letter-spacing: -0.03rem;
    text-align: left;
    padding: 15px 0 30px;
    margin: 0;
    line-height: 1.3;
}

    .kokonigazougahairu{
    float: left;
    width: 160px;
    height: 90px;
    overflow: hidden;
    display: block;
    position: relative;
    margin-right: 15px;
}

 .kokonigazougahairu img{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100%;
    height: auto;
}

Roomie

Roomie
ROOMIE（ルーミー）｜クラフトな遊び心地

デザイン

「アイキャッチ画像、タイトル、データ、カテゴリ」

アイキャッチ画像をカバーにタイトルを表示する「今風」のおしゃれなデザインですね！
カテゴリのハッシュタグがおしゃれです。

カテゴリ数は5から

テーマ「Primeiro」のコピペ

f:id:yumedasuke:20190312135447p:plain

記事上

<script>
    $('<div class="kokonigazougahairu"></div>').insertBefore('.entry-title');
</script>

<script>
  $(window).on("DOMContentLoaded", function(){
    $('.kokonigazougahairu').prepend('<img src="' + $('meta[property="og:image"').attr('content') + '">');
  });
</script>

<style>

.kokonigazougahairu {
    width: 100%;
    position: relative;
}

 .kokonigazougahairu img{
        width: 100%;
    height: auto;
    position: relative;
}

.entry-title {
    padding: 5px 10px;
    position: absolute;
    bottom: 135px;
}

.entry-title a{
    color: #fff;
}

.entry-header {
    position: relative;
    padding: 0;
}

.entry-header .entry-categories.categories a {
    color: #fff;
    border: none;
}

.entry-header .entry-categories.categories a:hover {
    border: none;
}

.entry-header .entry-categories.categories:hover {
    -webkit-transform: translateY(0px);
    -ms-transform: translateY(0px);
    transform: translateY(0px);
}

.entry-header .date.entry-date.first {
    left: 0;
    z-index: 5;
    bottom: 30px;
}

.entry-header .date.entry-date.first a {
    color: #fff;
}

.entry-header .entry-categories.categories a::before{
    content:"#";
}

</style>

月間PV100万以上の人気のWebサイトはまだまだありますので探してみて「これいいな！」と思うデザインを見つけてみてください。

以上で「月間PV100万以上の人気Webサイト」の4つのデザインのご紹介を終わります。

僕がおすすめする入門書

作りながら学ぶ HTML/CSSデザインの教科書

posted with ヨメレバ

高橋朋代/森智佳子 SBクリエイティブ 2013年12月17日

非常に実践的で，記述したコードが即座に体現する為どう行った意味を持って描いているかが記憶に残りやす入門実践書！僕が一番初めに読んだweb関連の本です。

2019-03-10

【コピペ】はてなブログのヘッダーデザイン・アニメーションカスタマイズ9選

はてなブログカスタマイズ-Primeiroカスタマイズはてなブログカスタマイズ

ロゴ＋バー
- STEP1:まずはロゴをご用意
- STEP2:「css」をコピペ
画像背景（アニメーション)
- STEP1:まずは画像または動画をご用意
- STEP2:「css」をコピペ
フォント+バー
- STEP1: フォントを読み込ませる
- STEP2:「css」をコピペ
ブログヘッダーを消しちゃう
テキストアニメーション+バー

この記事は「はてなブログ」テーマ『Primeiro』のカスタム記事です。

他のテーマでも使えると思いますのでぜひ試してみてください。

ヘッダーはユーザーがサイトを訪れた際に一番最初に視界に入るポイントでSEO的にも重要なパーツですので慎重にデザインにしてくださいね。

まず、サイドバーデザインを先に行っているほうがデザインしやすいと思いますので以下の記事を参考にやっておいてください。

haijpuro.hateblo.jp

はてなブログのヘッダーデザインについて書かれた記事はたくさんありますのでそれらの記事もご紹介していきます。

それでは、ヘッダーデザイン例を9種類ご紹介していきたいと思います。

ロゴ＋バー

隠しテキストになりますのであまりお勧めしません！
ですが「はてなブログ」の仕様上こうせざるを得ないのでご了承ください。

STEP1:まずはロゴをご用意

ロゴ作成のコツ
hitori-koho.com

自作するのは面倒！だという方はロゴジェネレーターを使おう！

おすすめのロゴジェネレーター

hatchful.shopify.com

TwitterやFacebookなどのsnsで使用するサイズに合わせた画像や背景透過の画像なども一気に作ってくれます。

logo-maker.stores.jp

無料でネットショップをつくることができるサービスのSTORES.jpのロゴジェネレーターで簡単にロゴが作れます。

その他のロゴジェネレーター

・Free Logo Maker, Create Custom Logo Designs Online – DesignEvo

・LOGASTER | ロゴメーカー | オンラインロゴ作成

STEP2:「css」をコピペ

/*調整*/

header#blog-title {
padding: 0;
display: block;
}

/*バー*/

#blog-description {

/*テーマに合わせて変えてください*/
background: #668bff;
padding: 10px;
color: #fff;
margin-top: 0;

}

/*ロゴ表示*/

#title {

display: block;
/*画像に合わせて変えてください*/

background: url(画像url);

padding: 15px;;
background-size: 90px;

background-position: center;
background-repeat: no-repeat;
}

#title a{
opacity: 0; 
}

バーはいらない方はこちらでロゴのみを表示できます

#blog-description {
    display: none;
}

ロゴ以外でももちろん使えます。

画像背景（アニメーション)

ハイクオリティなアニメーションを使ったらもっとおしゃれになると思いますのでスキルがある方はやってみてください。

STEP1:まずは画像または動画をご用意

画像のフリー素材

creive.me

動画のフリー素材

photoshopvip.net

記事でご紹介されているサイトでよさそうなものをダウンロードしよう！

mp4などの動画ファイルはgifに変換して使用しましょう。

MP4 GIF 変換。オンラインフリー — Convertio

STEP2:「css」をコピペ

#blog-title {
    background: url(動画・画像のurl);
    background-attachment: fixed;
    background-repeat: round;
}

#title a {
    /* 文字の色 */
    color: #f7f8f9; 
    /* 文字の影 */
    text-shadow: black 1px 1px 10px, black -1px 1px 10px, black 1px -1px 10px, black -1px -1px 10px;
}

#blog-description {
    font-weight: normal;
    font-size: .8rem;
    margin: 1em 0 0;
    /* 文字の色 */
    color: #fff;
    /* 文字の影 */
    text-shadow: black 1px 1px 10px, black -1px 1px 10px, black 1px -1px 10px, black -1px -1px 10px;
}


/*調整*/
header#blog-title {
padding: 50px;
display: block;

}

フォント+バー

このブログのデザインです。

STEP1: フォントを読み込ませる

サルワカさんの記事を参考にフォントを読み込ませてください。

saruwakakun.com

詳しく書かれているので僕が解説する必要がありません。

さすがサルワカ！略してサスワカ！

STEP2:「css」をコピペ

/*フォントを指定する*/

#title a {
    font-family: 'フォントを指定する';
}

/*幅調整*/

h1#title {
    padding: 15px;
}

/*バー*/

h2#blog-description {
    background: #668bff;
    padding: 10px;
    color: #fff;
    margin-top: 0;
}

/*調整*/
header#blog-title {
    display: block;
    padding: 0px;
}

ブログヘッダーを消しちゃう

SEO的には最悪ですので使用は避けましょう！

はてなブログテーマ「Primeiro」のデモページで使用しているデザインでデモページやサンプルページでヘッダーの告知を目立たせたいとき等にどうぞ！

primeiro-theme.hateblo.jp

テキストアニメーション+バー

跳ねるテキストアニメーション

See the Pen <a href='https://codepen.io/yochans/pen/vdXVWx/'>Bounce element CSS Animation</a> by yochans (<a href='https://codepen.io/yochans'>@yochans</a>) on <a href='https://codepen.io'>CodePen</a>.

#title  {
    animation: titlekey .4s ease infinite alternate;
}

@keyframes titlekey{
  0% {transform: translateY(0px);}
  100% {transform: translateY(-10px);}
}

h1#title {
    padding: 15px;
}


h2#blog-description {
background: #fe928b;
    padding: 10px;
    color: #fff;
    margin-top: 0;
}

header#blog-title {
    display: block;
    padding: 0px;
}

かっこが点滅するアニメーション

See the Pen <a href='https://codepen.io/yoannhel/pen/sJpDj/'>Text animation</a> by Yoann (<a href='https://codepen.io/yoannhel'>@yoannhel</a>) on <a href='https://codepen.io'>CodePen</a>.

スライドする文字は疑似要素でできそうですがちょっと難しかったのでかっこのみです。
すみません。

#title:before {
      content: '[';
         color: #16a085;
    -webkit-animation-name: opacity;
      -webkit-animation-duration: 2s;
      -webkit-animation-iteration-count: infinite;
      animation-name: opacity;
      animation-duration: 2s;
      animation-iteration-count: infinite;
    }

#title:after {
      content: ' ]';
        color: #16a085;
    -webkit-animation-name: opacity;
      -webkit-animation-duration: 2s;
      -webkit-animation-iteration-count: infinite;
      animation-name: opacity;
      animation-duration: 2s;
      animation-iteration-count: infinite;
    }
    
@keyframes opacity {
  0%, 100% {opacity:0;}
  50% {opacity:1;}
}

h1#title {
    padding: 15px;
}

h2#blog-description {
background: #fe928b;
    padding: 10px;
    color: #fff;
    margin-top: 0;
}

header#blog-title {
    display: block;
    padding: 0px;
}

文字が追加されていくエフェクト（バー）

See the Pen <a href='https://codepen.io/LaithHaleem/pen/wzyrBd/'>Simple Typing text animation Javascript</a> by Laith Haleem (<a href='https://codepen.io/LaithHaleem'>@LaithHaleem</a>) on <a href='https://codepen.io'>CodePen</a>.

ヘッダー→タイトル下

<script>
var string = "Hello I'm Laith Haleem Form Ghammas Love Developing Websites";
var str = string.split("");
var el = document.getElementById('blog-description');
(function animate() {
str.length > 0 ? el.innerHTML += str.shift() : clearTimeout(running); 
var running = setTimeout(animate, 90);
})();
</script>

css

h1#title {
    padding: 15px;
}

h2#blog-description {
background: #fe928b;
    padding: 10px;
    color: #fff;
    margin-top: 0;
}

header#blog-title {
    display: block;
    padding: 0px;
}

溶けていくようなエフェクト

See the Pen <a href='https://codepen.io/elwinvdhazel/pen/EWBdPr/'>CSS filter text animation</a> by Elwin van den Hazel (<a href='https://codepen.io/elwinvdhazel'>@elwinvdhazel</a>) on <a href='https://codepen.io'>CodePen</a>.

css

#title {
  position: relative;
  padding: 4em;
  filter: contrast(20);
  background-color: black;
  overflow: hidden;
}

#title a {
  color: white;
  font-size: 5rem;
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1;
  filter: blur(0.5rem);
animation: letterspacing 10s infinite alternate cubic-bezier(.2, 0, 0, 1);
  display: block;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate3d(-50%, -50%, 0);
}

@keyframes letterspacing {
  0% {
    letter-spacing: -5rem;
    filter: blur(0.5rem);
  }
  
  50% {
    filter: blur(0.5rem);
  }
  
  100% {
   letter-spacing: -1rem;
    filter: blur(1.5rem);
  }
}


@keyframes letterspacing {
  0% {
    letter-spacing: -5rem;
    -webkit-filter: blur(0.5rem);
            filter: blur(0.5rem);
  }
  50% {
    -webkit-filter: blur(0.5rem);
            filter: blur(0.5rem);
  }
  100% {
    letter-spacing: 1rem;
    -webkit-filter: blur(1.5rem);
            filter: blur(1.5rem);
  }
}


h2#blog-description {
background: #fe928b;
    padding: 10px;
    color: #fff;
    margin-top: 0;
}

header#blog-title {
    display: block;
    padding: 0px;
}

とりあえずこんなところでしょう！
他にもいっぱいありますので是非探してみてください。

codepen.io

あまり派手すぎると邪魔になるかもしれませんのでお気をつけて！
それでは、はてなブログのヘッダーデザイン・アニメーションカスタマイズ9選のご紹介を終わります！

自分なりのオリジナリティを出していきましょう！

Primeiroの紹介記事を書いていますのでテーマに興味がある方はどうぞ！

haijpuro.hateblo.jp

2019-03-09

【コピペ】はてなブログテーマ「Primeiro」のサイドバーデザイン全12種類のご紹介

はてなブログカスタマイズはてなブログカスタマイズ-Primeiroカスタマイズ

f:id:yumedasuke:20190308120153p:plain

サイドバーカラーデザイン
- シンプル・単色
  - ダーク系
  - ライト系
- グラデーション
  - ダーク系
  - ライト系
さいごに

はてなブログテーマ「Primeiro」のポイントはサイドバーです。
このサイドバーのデザインでブログの印象が変わるといってもいいでしょう！

今回は、サイドバーのグラデーションデザインとシンプルな単色デザインの全12種類のデザイン例をご紹介します。

cssをコピーして使ってください。

サイドバーカラーデザイン

色彩心理学的に「ライト系」はソフトで軽い印象、爽やかで清潔なイメージを、「ダーク系」なら落ち着いた印象、大人っぽく重厚なイメージを与えます。

カラーというのは大事ですのでブログにあった色を選んでみてくださいね。

cssを記述する場所

デザイン　>　スパナアイコン(カスタマイズ)　>　デザインCSS
f:id:yumedasuke:20190308112926p:plain

シンプル・単色

f:id:yumedasuke:20190308111112p:plain

シンプルだからこそよい、単色デザインの例をご紹介していきます。

ダーク系

gray

f:id:yumedasuke:20190308111432p:plain

.hatena-module-title {
   color: #f7f8f9;
}

.hatena-module-body a {
    color: #f7f8f9;
}

.hatena-module-title a {
    color: #fafafa;
}

.id span.user-name-nickname {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a:hover {
    color: #666;
}

#box2 {
    background-color: #6b7377;
}

Bleu Nuit

f:id:yumedasuke:20190308112550p:plain

.hatena-module-title {
   color: #f7f8f9;
}

.hatena-module-body a {
    color: #f7f8f9;
}

.hatena-module-title a {
    color: #fafafa;
}

.id span.user-name-nickname {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a:hover {
    color: #666;
}

#box2 {
    background-color: #0E4352;
}

Cardinal

f:id:yumedasuke:20190308112625p:plain

.hatena-module-title {
   color: #f7f8f9;
}

.hatena-module-body a {
    color: #f7f8f9;
}

.hatena-module-title a {
    color: #fafafa;
}

.id span.user-name-nickname {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a:hover {
    color: #666;
}

#box2 {
    background-color: #AD362C;
}

ライト系

Bleu Myosotis

f:id:yumedasuke:20190308113906p:plain

.hatena-module-title {
   color: #f7f8f9;
}

.hatena-module-body a {
    color: #f7f8f9;
}

.hatena-module-title a {
    color: #fafafa;
}

.id span.user-name-nickname {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a:hover {
    color: #666;
}

#box2 {
    background-color: #74A5CF;
}

SafeColor

f:id:yumedasuke:20190308113915p:plain

.hatena-module-title {
   color: #f7f8f9;
}

.hatena-module-body a {
    color: #f7f8f9;
}

.hatena-module-title a {
    color: #fafafa;
}

.id span.user-name-nickname {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a:hover {
    color: #666;
}

#box2 {
    background-color: #79CA9A;
}

Siro

f:id:yumedasuke:20190308114358p:plain

#box2-inner .hatena-module-profile .profile-description p {
    color: #666;
    margin-top: 10px;
}

.hatena-module-title a {
    text-decoration: none;
    padding: 14px 0;
    color: #666;
}

#box2-inner .hatena-module-body.hatena-module-body li a {
    color: #666;
}

.id span.user-name-nickname {
    color: #666;
}

.hatena-module-title {
    color: #666;
}

#box2 {
    background-color: #FBF9F4;
}

グラデーション

f:id:yumedasuke:20190308101307p:plain

最近のウェブデザインでよく見かける、鮮やかなグラデーションカラーを使ったデザイン例をご紹介します。

グラデーションの配色に迷ったら配色ツールを使用してみてください。

・WebGradients
・Uigradients

ここではWebGradientsから取得したグラデーションカラーを使用します。
試してみていいな！と思うもの6種類をご紹介します。

ダーク系

Morpheus Den

f:id:yumedasuke:20190308100426p:plain

.hatena-module-title {
   color: #f7f8f9;
}

.hatena-module-body a {
    color: #f7f8f9;
}

#box2 {
    background-image: linear-gradient(to top, #30cfd0 0%, #330867 100%);
}

.hatena-module-title a {
    color: #fafafa;
}

.id span.user-name-nickname {
    color: #f7f8f9;
}
#box2-inner .hatena-module-body.hatena-module-body li a {
    color: #f7f8f9;
}

Premium Dark

f:id:yumedasuke:20190308102908p:plain

.hatena-module-title {
   color: #f7f8f9;
}

.hatena-module-body a {
    color: #f7f8f9;
}

#box2 {
    background-image: linear-gradient(to right, #434343 0%, black 100%);
}

.hatena-module-title a {
    color: #fafafa;
}

.id span.user-name-nickname {
    color: #f7f8f9;
}
#box2-inner .hatena-module-body.hatena-module-body li a {
    color: #f7f8f9;
}

Aqua Splash

f:id:yumedasuke:20190308102614p:plain

.hatena-module-title {
   color: #f7f8f9;
}

.hatena-module-body a {
    color: #f7f8f9;
}

#box2 {
   background-image: linear-gradient(15deg, #13547a 0%, #80d0c7 100%);
}

.hatena-module-title a {
    color: #fafafa;
}

.id span.user-name-nickname {
    color: #f7f8f9;
}
#box2-inner .hatena-module-body.hatena-module-body li a {
    color: #f7f8f9;
}

ライト系

Fly High

f:id:yumedasuke:20190308102045p:plain

.hatena-module-title {
   color: #f7f8f9;
}

.hatena-module-body a {
    color: #f7f8f9;
}

.hatena-module-title a {
    color: #fafafa;
}

.id span.user-name-nickname {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a:hover {
    color: #666;
}

#box2 {
    background-image: linear-gradient(to top, #48c6ef 0%, #6f86d6 100%);
}

Strong Bliss

f:id:yumedasuke:20190308102310p:plain

.hatena-module-title {
   color: #f7f8f9;
}

.hatena-module-body a {
    color: #f7f8f9;
}

.hatena-module-title a {
    color: #fafafa;
}

.id span.user-name-nickname {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a:hover {
    color: #666;
}

#box2 {
  background-image: linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%);
}

Over Sun

f:id:yumedasuke:20190308103237p:plain

.hatena-module-title {
   color: #f7f8f9;
}

.hatena-module-body a {
    color: #f7f8f9;
}

.hatena-module-title a {
    color: #fafafa;
}

.id span.user-name-nickname {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a {
    color: #f7f8f9;
}

#box2-inner .hatena-module-body.hatena-module-body li a:hover {
    color: #666;
}

#box2 {
  background-image: linear-gradient(60deg, #abecd6 0%, #fbed96 100%);
}

さいごに

いかがだったでしょうか？
色を変えるだけでガラッと印象が変わりましたね。

配色ツールなどを使って自分だけのオリジナルのブログを作っていきましょう。

はてなブログPerfect　Guidebook

posted with ヨメレバ

JOE　AOTO ソーテック社 2016年07月21日

楽天ブックス

Amazon

Kindle

サイドバーデザイン以外にもカスタマイズ指南記事を用意していますのでぜひ見ていってください。

2019-03-09

左固定サイドバーのはてなブログテーマ「Primeiro」を公開しました！

はてなブログはてなブログ-テーマ

f:id:yumedasuke:20190308124519p:plain

デモページ
テーマを導入したらやること・知っておくこと
デザイン
- トップページ
  - PC
  - スマホ
カスタマイズ

はてなブログのテーマを作ってみました。

その名も「Primeiro」

私のブログ名まんまです。
初めて作ったのですがうまくいったと思います。

バグやデザインの崩れを見つけ次第、改善してアップデートしていきます！

皆様にもご協力いただければと思います。
それではテーマのご紹介と注意点等を解説していきます。

テーマのダウンロードはこちらからどうぞ！

blog.hatena.ne.jp

デモページ

デモ：Primeiro:DEMO

テーマを導入したらやること・知っておくこと

「Primeiro」はカスタマイズ前提で初期デザインをシンプルにしていますので少しだけカスタマイズが必要になります。

アイキャッチ画像

※1060×700の画像をアイキャッチ画像に設定することを推奨します。
サイズが小さすぎたりすると画質が荒くなることがあります。

レスポンシブデザイン

f:id:yumedasuke:20190308131423p:plain

テーマ「Primeiro」はレスポンシブデザインですのでPC・スマホとも同じデザインで使用できます。

デザイン→スマートフォン→詳細設定の「レスポンシブデザイン」にチェック
f:id:yumedasuke:20190309164138p:plain

PCのみにテーマを適用する場合はしなくても大丈夫です。

一覧表示
f:id:yumedasuke:20190308113915p:plain

全文形式の場合は違ったデザインになりますのでご注意ください。

設定→詳細設定→トップページの表示形式→「一覧形式」にチェック
f:id:yumedasuke:20190308135951p:plain

記事数

※トップページの記事数は８記事・14記事・20記事でデザインしています。

設定→詳細設定→トップページの記事数→
８記事（14・20記事）
f:id:yumedasuke:20190308140021p:plain

デザイン

f:id:yumedasuke:20190305114525p:plain

Windows標準のメールアプリやGoogleの様々なサービスで見られる、左サイドバー固定レイアウトで左サイドバーのレイアウトはコンテンツをよりよく見せることができるといわれており直帰率・離脱率が右サイドバーに比べて低く、他のページへの遷移が起こりやすく、より長くユーザーを留めておく滞在率が平均より長くなります。

人間は無意識的に左から見るとされており、広告の世界やウェブデザインの世界で有名な「Fの法則」、「Zの法則」的にも左サイドバーのほうが優れているとされます。

トップページ

トップ記事・4番目の記事を大きく表示するデザインです。

スマホの場合は1番目・4番目・5番目・8番目の記事を大きく表示します。

PC

f:id:yumedasuke:20190309162856p:plain

スマホ

f:id:yumedasuke:20190309162904p:plain

詳しく見たい方はデモページをご覧ください。

デモ

カスタマイズ

f:id:yumedasuke:20190305114149p:plain

二次配布違反などのテーマに実装していいものか分からなかったモノ、読者になるボタンデザインやヘッダー・フッターの背景画像などをカスタマイズしていきます。

記述する場所は「デザイン」→「カスタマイズ」→「デザインcss」です。
f:id:yumedasuke:20190308141104p:plain

トップページのカテゴリ

トップページのカテゴリが多い場合や長い場合、カテゴリタグが重なる可能性があります。

cssにこちらを記述しておいてください。

.page-archive .archive-entries .archive-entry .categories a:nth-child(2) {
    display: none;
}
.page-archive .archive-entries .archive-entry .categories a:nth-child(3) {
    display: none;
}
.page-archive .archive-entries .archive-entry .categories a:nth-child(4) {
    display: none;
}
.page-archive .archive-entries .archive-entry .categories a:nth-child(5) {
    display: none;
}

ブログロゴを表示

f:id:yumedasuke:20190308102614p:plain

ロゴがない方はこちらのロゴクリエーターでご用意ください。

TwitterやFacebookなどのsnsで使用するサイズに合わせた画像や背景透過の画像なども一気に作ってくれます。

ロゴメーカー＆ロゴクリエーター - 無料のオンラインロゴジェネレーター

サイドバーにHTMLモジュールを追加します。

f:id:yumedasuke:20190308141144p:plain

タイトルは空欄にしておきます

html

<a class="imgcenter" href="自分のブログのURL">

<img src="自分のブログのロゴ画像" alt="ロゴ">

</a>

css

.imgcenter{
    text-align: center;
    display: block;
}

ブログロゴを表示しない場合

css

@media (min-width: 992px) {
#box2-inner {
    padding-top: 40px;
}
}

読者になるボタンカスタマイズ

/*フォローされていないときの色*/
.hatena-follow-button.unsubscribing {
    background: #444;
}

/*ホバー時の色*/

.hatena-follow-button.subscribing.hover{
    background: #eee url(none) no-repeat 0 -18px;
}


/*フォローされているときの色*/

.hatena-follow-button.subscribing {
    color: #f7f8f9!important;
    background: #233a50 url(none) no-repeat 0 -18px;
}

.hatena-follow-button.subscribing {
    background: url(https://cdn.blog.st-hatena.com/images/theme/hatena-follow-button.png?version=4761c38…&env=production) no-repeat 0 -18px,-o-linear-gradient(top,#fff 0,#ddd 100%);
}

.hatena-follow-button-box .subscription-count-box {
    display: none;
    position: relative;
    float: right;
    margin: 8px 0 0 5px!important;
}

.hatena-follow-button {
    width: 80%;
    box-shadow: 0 1px 6px rgba(32, 33, 36, 0.28);
    text-align: center;
    display: inline-block;
    zoom: 1;
    height: 18px!important;
    padding-left: 20px;
    padding-right: 5px;
    min-width: 40px;
    border: 1px solid rgba(0, 0, 0, 0)!important;
    border-radius: 3px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 10px;
    transition: .3s ease;
    transition-property: opacity,border,color,background;
    -o-transition: .3s ease;
    -o-transition-property: opacity,border,color,background;
    -moz-transition: .3s ease;
    -moz-transition-property: opacity,border,color,background;
    -webkit-transition: .3s ease;
    -webkit-transition-property: opacity,border,color,background;
    line-height: 18px!important;
    font-weight: 700;
    text-decoration: none;
    color: #fff!important;
    background: #ebebeb;
    float: none;
    letter-spacing: 0!important;
    white-space: nowrap;
    -webkit-text-overflow: ellipsis;
    text-overflow: ellipsis;
    padding: 10px;
    color: #fff;
    overflow: hidden;
}

.hatena-follow-button-box .subscription-count {
    float: right;
    border: 1px solid #bbb;
    height: 18px;
    line-height: 18px;
    padding: 0 5px;
    display: block;
    min-width: 8px;
    font-size: 12px;
    color: #454545!important;
    background: #fff;
    border-radius: 50px;
    -moz-border-radius: 3px;
    -webkit-border-radius: 50px;
    margin-left: -1px;
    position: relative;
    z-index: 9;
    font-family: Helvetica,Ariel,sans-serif;
}

.hatena-follow-button.subscribing.hover{
    width: 80%;
}

サイドバーデザイン

f:id:yumedasuke:20190308120153p:plain

haijpuro.hateblo.jp

カスタマイズ記事投稿予定

今ごろReactNativeについて調べてみた！ReactNativeで作られたオープンソースアプリや採用アプリをご紹介します。

ReactNative

f:id:yumedasuke:20190308093408p:plain

ReactNativeとは
- ReactNativeを採用した有名なアプリケーション
  - Facebook『Facebook』
  - Facebook『instagram』
  - 株式会社メルカリ『mercari』
  - 株式会社エアークローゼット『airCloset』
- ReactNativeで作られたオープンソースのアプリ
  - CodePicks（コードピックス）
  - HackerBuzz-ReactNative
  - Rocket.Chat React Native Mobile
- ReactNative開発環境ツール
  - Expo.io
  - デメリット

ReactNativeとは

Facebook社が開発したクロスプラットフォーム開発フレームワークの事です。

通常のアプリ開発(ネイティブアプリ開発)はiosならxcodeを使ってのswiftでの開発、androidではandroidstudioを使ってのjavaで開発するが、ReactNativeではそれら開発環境、OSに依存する事なくios、android共に同じコード、同じ開発環境で開発出来るため非常に多くの企業が採用しているフレームワークの一つとなります。

2019-02-23

初めてのReactNativeメモ⑤axiosでgetしたデータを表示、別のページで表示するルーティング

ReactNative-メモ ReactNative

f:id:yumedasuke:20190308092947p:plain

表示するだけは何とか出来ましたが詳細ページにデータを送る方法がよくわからないので調べる。

ルーティング
HomeScreen.js
constructor
componentWillMount
renderImages
.mapとは
onPressでパラメータを渡す
render
DetailScreen.js
- render

参考にできそうな記事を発見しました。

2019-02-22

初めてのReactNativeメモ④　HTTPクライアント「axios」を使ってみる

ReactNative ReactNative-メモ

f:id:yumedasuke:20190308092658p:plain

axiosとは

ブラウザや node.js で動く Promise ベースのHTTPクライアントである｡REST-API を実行したいときなど､これを使うと実装が簡単にできる｡
qiita.com

2019-02-21

初めてのReactNativeメモ③　TODOリストを作ってみる

ReactNative-メモ

f:id:yumedasuke:20190308092628p:plain

今回は、プログラミングチュートリアルでよく出題されるTODOアプリを色々な記事を参考に作ってみようと思います。

todoとは
突然、ビッグデータについて言い出す。
TODOアプリ作ってみる

todoとは

英語で“to do”
為すべきことの意を持ちます。簡単に言うと『やること』

todoアプリは『やる事リスト』の様なモノです。

iosではリマインダーというアプリがデフォルトで採用されていたりします。

突然、ビッグデータについて言い出す。

デフォルトのメモ帳アプリや有名なtodoアプリはビッグデータ収集の為に書いたデータを収集してそうで僕は使う気になりません。

ラインやツイッター、フェイスブック、最たる例はGoogleなどもパーソナルデータを収集し日夜、日々、毎秒ビッグデータを成長させています。

生きているだけで誰かの利益になるのが現代です。

そしてそのビッグデータがAIを成長させます。

現代に生きる身としては受け入れなければいけませんが僕はその事について啓蒙していきたい。(全身義体の英雄風)

急に語ってみましたが、本題に戻りましょう。

TODOアプリ作ってみる

デザインを考える。

モックアップと呼ぶらしい。

モックアップとは？

モックアップとは、ウェブサイトやアプリのデザインで使われる方法のことです。何を制作するのかにもよりますが、デザイン業務では画面の要素や機能を固めていくプロセスが共通してあります。このときに使われるのがモックアップで、完成イメージを視覚的に表示して確認していくために使われます。
モックアップとは？基礎知識とデザインフローにおける位置づけ | CodeCampus

モックアップ作成ツール

webサービス

draw

www.draw.io

アプリ

prott

prottapp.com

今回はリハビリも兼ねてwebで作ってみました。

参考にする記事

【React Native入門】Java Scriptでアプリ作ろう【Reactやったことない人向け】2 - Qiita

React Native × Hooks => Todo app - Qiita

コンポーメントを作成しそれを読み込ませる。

src > compoments > TodoInput

TodoInputをインポート

import TodoInput from './src/components/TodoInput';

TodoInputを使用する。

<TodoInput />

TodoInputの内容を表示できた！

Reactの大原則

React にはpropsというシステムがあります。当然ながらReact NativeもReactなのでpropsというシステムがあります。
このpropsというシステムでは親子関係に当たるコンポーネントにおいて親から子に値を渡すことができます。
そして、子から親へ値を渡すことはできないというルールがあります。
【React Native入門】Java Scriptでアプリ作ろう【Reactやったことない人向け】2 - Qiita

分かりやすくて助かります！

2019-02-21

初めてのReactNativeメモ②　コンポーメント、スタイル・画面遷移でエラーだらけ

ReactNative ReactNative-メモ

f:id:yumedasuke:20190308092351p:plain

View

UIを構築するための最も基本的なコンポーネント

UI はユーザーインターフェイス（User Interface）の略です。Interfaceとは「接点、接触面」という意味で、 UI はユーザーと製品・サービスの接触面を指すので、「ユーザーの目に触れる部分使用する部分」はすべて UI とみなすことができます。ホームページの場合、パソコンやスマートフォンに表示されるデザイン、フォントなど、製品であれば製品そのものや外観など、ユーザーの視覚に触れる全ての情報が「 UI 」と呼ばれます。
UIとは？UXとは？違いを理解しよう！｜ferret [フェレット]

htmlでいう

みたいなやつ？文字は直接入れることはできない。

<View style = {styles.container}>
 
<View style={{backgroundColor: 'blue', flex: 2}}>
</View>
 
<View style={{backgroundColor: 'red', flex: 3}}>
</View>
 
</View>
 
const styles = StyleSheet.create({
container: {
flex: 1,
height: 100,
padding: 20,
 },
});

文字を入れるにはを使う

Text

テキストを表示するためのReactコンポーネント。

<Text style={{color:'white'}}>Hello World!</Text>

代入？できる

constructor(props) {
super(props);
this.state = {
titleText: "Bird's Nest",
bodyText: 'This is not really a bird nest.'
 };
 }
 
<View style={{backgroundColor: 'red', flex: 3}}>
<Text style={styles.baseText}>
<Text style={styles.titleText} onPress={this.onPressTitle}>
{this.state.titleText}{'\n'}{'\n'}
</Text>
<Text numberOfLines={5}>
{this.state.bodyText}
</Text>
</Text>
</View>
 
baseText: {
fontFamily: 'Cochin',
 },
titleText: {
fontSize: 20,
fontWeight: 'bold',
 },
container: {
flex: 1,
height: 100,
padding: 20,
 },

改行

テンプレートリテラルを用いる

<Text>
{`
 1行目
 2行目
`}
</Text>

\nを{}で囲って用いる

<Text>1行目{"\n"}２行目</Text>

コンポーネントを分ける

<Text>1行目</Text>
<Text>2行目</Text>

facebook.github.io

ページ遷移

react-navigation

npm install --save react-navigation

StackNavigator:
画面を積んでいくタイプのナビゲーター。Screen1 -> Screen2とかScreen1 -> Screen3とか画面を積んでツリーを作っていき、行きつ戻りつしていくという感じです。描画した画面内のコンポーネントを押したら別の画面に遷移させる、といったWebのリンクと同じようなケースで使う感じです。

TabNavigator:
タブタイプのナビゲーター。[Screen1、Screen2、Screen3]のように並列に画面を依存させずに扱い、切り替えていく感じです。画面遷移はTabNavigator自身が責任を持つ感じです。

DrawerNavigator:
ドロワータイプのナビゲーター。自分的にはタブが横なら、ドロワーは縦という程度の位置が違うくらいの認識です。ただ、タブに比べて登録できる画面数が多い(多くても比較的わかりにくくならない)ので、例えばユーザーによって画面数が変化するタイプのものであれば、これを使うのかなと思います。
React Navigationで画面遷移してみる - ushumpei’s blog

import { StackNavigator } from 'react-navigation';

エラーが起こる

Unable to resolve "react-navigation" from "App.js"

しらべる

This error means that either you haven't installed the react-navigation module or that you have installed the module but didn't re-built your project using react-native run-android or react-native run-ios.
Following these steps should solve your issue:
Install react-navigation module.
Re-build your project.
Restart the packager by stopping the current packager and then starting the packager again with react-native start.
Unable to resolve module 'react-navigation' - Stack Overflow

日本語訳

このエラーは、react-navigationモジュールをインストールしていないか、インストールしたのにプロジェクトを再構築していない、「react-native run-ios」「react-native run-android」を実行していない事を意味します。
次の手順に従って問題を解決してください。
react-navigationをインストール
プロジェクトを再構築
停止してから再度react-native start

やってみる。

できた！

チュートリアルを探してみる。

bagelee.com

エラー！

(0 , _reactNativeNavigation.StackNavigator) is not a function

{
"dependencies": {
"@expo/vector-icons": "6.2.1",
"react-native-elements": "0.18.5",
"react-navigation": "1.0.0-beta.27"
 }
}
 
"dependencies": {
 
"react-navigation": "^3.3.0"
 },

バージョンの問題かな？

しらべる。

github.com

`react-native-navigation`ではなく `react-navigation`を使用する必要がある？

stackoverflow.com

import { createStackNavigator, createAppContainer } from 'react-navigation';を使う必要がある？

facebook.github.io
を参考にやってみる！

import {createStackNavigator, createAppContainer} from 'react-navigation';
 
class HomeScreen extends React.Component {
static navigationOptions = {
title: 'ホームページ',
 };
render() {
const {navigate} = this.props.navigation;
return (
<View style= {{flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Button
title="詳細ページへ"
onPress={() => navigate('Detail')}
/>
</View>
 );
 }
}
 

class DetailScreen extends React.Component {
static navigationOptions = {
title: '詳細ページ',
 };
render(){
return (
<View style= {{flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>
 詳細ページ
</Text>
</View>
 );
 }
}
 

const MainNavigator = createStackNavigator({
Home: {screen: HomeScreen},
Detail: {screen: DetailScreen},
});

const App = createAppContainer(MainNavigator);

export default App;

できた！これはうれしいww

大体はつかめてきたと思った！

2019-02-21

初めてのReactNativeメモ①　ざっとお勉強する

ReactNative ReactNative-メモ

f:id:yumedasuke:20190308092242p:plain

基本中の基本
- コンストラクタ (constructor)とは
ライフサイクルメソッド
- componentDidMount()
Fetch API fetch('')
- fetch()メソッド
- responce
取得したら、isLoadingをtrueにする。
Stateを更新する。コンストラクタの初期値の
super()メソッド

基本中の基本

ファイルを読み込む「import」

ディレクトリ内にインストールして、ファイルに読み込んで使います。

　import React from 'react';

色々なとこでよく見る「constructor」

コンストラクタ (constructor)とは

オブジェクト指向のプログラミング言語で登場する用語のひとつでインスタンスを作成したタイミングで実行されるメソッドのことです。

　constructor(props){
　super(props);
　this.state ={ isLoading: true}
　 }

使ってみればわかるが説明すると難しいものです。

ライフサイクルメソッド

コンポーネント

ReactではUIを構成する要素のことをコンポーネント(Component)と呼びます。具体的にはボタンやヘッダー、コンテナなどのことです。Reactで開発する利点としてはそれらのUIパーツをそれぞれ細かくコンポーネントに分けておくことで、再描画が必要なものだけに更新を走らせてパフォーマンスをチューニングできる点が挙げられます。
React(v16.4) コンポーネントライフサイクルメソッドまとめ - Qiita

コンポーネントの状態の変化(ライフサイクル)により発火する様々なライフサイクルメソッドが用意されており、コンポーネントの状態に応じて色々な操作ができるようになっています。
Reactのライフサイクル – React入門 - to-R Media

componentDidMount()

ComponentがDOM*1ツリーに追加された状態で呼ばれるのでDOMに関わる初期化処理を行いたい時に便利です。
componentWillMountと違いserver-side renderingの時には呼ばれません。
DOMを扱う処理のほか、AjaxリクエストやsetIntervalの登録などのserver-side rendering時には必要ない初期化処理についてはこの中でやることになります。
React.jsのComponent Lifecycle - Qiita

コンポーネントがマウント(配置)された直前に呼び出されるメソッド。
以下のように指定することで状態変化に応じた処理を行うことができます。
このメソッド内では描画されたDOMにアクセスすることができます。
Reactのライフサイクル – React入門 - to-R Media

Fetch API fetch('')

fetch()メソッド

fetch()メソッドでは、JSONで様々なオプションを渡すことで、HTTPリクエストを柔軟にカスタマイズできるのが大きな特徴です。JSONで一度に指定できるのでXHRよりも扱い方が楽になっています。
お疲れさまXMLHttpRequest、こんにちはfetch - Qiita

componentDidMount(){
return fetch('https://facebook.github.io/react-native/movies.json')
 .then(response) => response.json()
 
 .then(responseJson) => {
this.setState({
isLoading: false,
dataSource: responseJson.movies,
}, function(){
};

 })
 .catch((error) =>{
console.error(error);
 });
 }

responce

 .then((response) => response.json())

Fetch API の Response インターフェイスは、リクエストのレスポンスを表します。
Response.Response() コンストラクタを使い、新しい Response オブジェクトを作ることができます。しかし、ServiceWorker の Fetchevent.respondWith や GlobalFetch.fetch() などのように、他のAPIからResponseオブジェクトが返されるのをより頻繁に目にするでしょう。
Response - Web API | MDN

response() => json()

.json ファイルを取得します。

取得したら、isLoadingをtrueにする。

setState

this.setState({
isLoading: false,
dataSource: responseJson.movies,
 }, function(){

 });

Stateを更新する。コンストラクタの初期値の

constructor(props){
super(props);
this.state ={ isLoading: true}
 }

this.state ={isLoading: true}を{isLoading: false}に変更する。

super()メソッド

なぜsuper(props) を書くの? - React界のカリスマ「Dan Abramov」のブログ - Qiita

 .catch((error) =>{
console.error(error);
 });||<

*1:DOMとはJavaScriptでhtmlの要素を操作するための仕組みのこと

女性と子供にウけているコンテンツ

TikTok

どんなアプリ

いつ頃から流行に？

なぜうけた？

じつは男性の割合のほうが多い

Instagram

どんなアプリ？

いつ頃流行ったか？

なぜ流行ったか？

SHOWROOM

どんなアプリ？

MixChannel

Mirrativ

結論

参考にするWebサイト

LIG

デザイン

テーマ「Primeiro」のコピペ

Engadget Japanese

デザイン

テーマ「Primeiro」のコピペ

CNET Japan

デザイン

テーマ「Primeiro」のコピペ

Roomie

デザイン

テーマ「Primeiro」のコピペ

ロゴ＋バー

STEP1:まずはロゴをご用意

STEP2:「css」をコピペ

画像背景（アニメーション)

STEP1:まずは画像または動画をご用意

STEP2:「css」をコピペ

フォント+バー

STEP1: フォントを読み込ませる

STEP2:「css」をコピペ

ブログヘッダーを消しちゃう

テキストアニメーション+バー

跳ねるテキストアニメーション

かっこが点滅するアニメーション

文字が追加されていくエフェクト（バー）

溶けていくようなエフェクト

サイドバーカラーデザイン

シンプル・単色

ダーク系

ライト系

グラデーション

ダーク系

ライト系

さいごに

デモページ

テーマを導入したらやること・知っておくこと

デザイン

トップページ

PC

スマホ

カスタマイズ

トップページのカテゴリ

ブログロゴを表示

html

css

ブログロゴを表示しない場合

css

読者になるボタンカスタマイズ

サイドバーデザイン

ヘッダーデザイン

カテゴリータグデザイン

注目の記事を表示する。

フォントデザイン

ナイトモード実装

見出しデザイン

カスタマイズ記事投稿予定

関連記事デザイン

ReactNativeとは

axiosとは

todoとは

突然、ビッグデータについて言い出す。

TODOアプリ作ってみる

モックアップとは？