LPの簡単コーディング

効率的なLP(ランディングページ)のフレーム教えます。

 

■最近のLPの傾向

----------------------------------------------------------------------------

  • アテンションになるトップページにインターラクティブなギミックを入れる
  • インターラクティブのあと、すぐに入力フォームが出す(フォーム入力という面倒くさいアクションをゲームの延長線感覚で入力してくれる傾向が強い)
  • ブラウザースクロールすると、特定の位置でイベントを発生させて、アテンションを引き、ページ内リンクでインターラクティブ部分に戻す

f:id:unottomagi:20170921170615p:plain

----------------------------------------------------------------------------

という、ちょっと面倒くさいLP作りが常識になってるんで、担当者として、すぐ対応できるようにしておきましょう。

 

1・ファーストビューでキャンペーンのタイトルとインターラクティブゲーム

ゲームと言っても、フォームに飛ばすだけなので、結果は同じ単純な仕掛けになっていますが、操作が入るのでCSSアニメーションだけでは出来ないです。

下記がソースになります。

HTML 

シーンごとに遷移するためのHTML書きます。

シーンの遷移が多くなる場合は id="page"に連番を振って作成して下さい。 

JS

シーンが多くなった場合 $("#page2").hide(); の下に $("#page~").hide();を入れて~に HTMLで振った連番を入れて下さい。

CSS

CSSに関してはそのLPの規格にあったアニメーションがあるので、そちらに合わせて下さい。ブラウザーの互換やら考えると面倒くさーとなりますが、どのブラウザーでも使えるテンプレートCSSを乗せておきます。 

 

2・フォームが浮かび上がる

ゲームアニメーションが終わったあとにフォームを浮かびあげます。

 HTML 

JS

CSS

 

3・ブラウザースクロールのイベントアニメーション

jquery.inview.js」というプラグインを使って対応します。

 下記からダウンロードして使いましょう。


 他の方面でもさんざん書かれているので割愛します。

下記のサイトを参考にしてみて下さい。簡単に出来まっせ。

 

4・ページ内リンクでページトップに戻るボタンを仕込む

スクロールの長さに合わせてページ内リンクで、TOPページに戻るようにして上げましょう。

派手なブラウザースクロールイベントを仕込めば、ユーザーは何気なくボタンを押しちゃうパターンが多く、ページトップに戻ってゲームをしてくれます。

これでコンバージョン率が上がること間違いなしです。

 

以上になります。

アニメーションが多いので作業量が増えますが、簡単でしょ。

 ----------------------------------------------------------------------------------

↓良かったら遊んでね↓

 

■appstore

 googleplay

 

俺の投資手順

ある程度スタイルが固まったから記しておきます

 

1.株巡り日課

【1】ニュース、レポートを見る

-------------------------------------------------

四季報
・ヤフーファイナンス
・ブルムバーグ
・トレイダーズウェブ
・IFISのレポート(金山敏之、武者ストラテジー、週刊株式相場レポート、広木隆)

-------------------------------------------------

【2】市場を見る

-------------------------------------------------

・市場スケジュールを見る 

月間指標カレンダー│FXを始めるなら外為どっとコム

 

エリオット波動を確認

-------------------------------------------------

【3選んでいい業種と、選んで行けない業種を決める
【4】相場をイメージする

 

2.株を買う

【1】ニュースで手に入れた材料を意識する。どんな相場でどんな業種が向いているのか。

【2】四季報スクリーニングか、金山敏之のレポートで出てた株を調べる

-------------------------------------------------

・スクリーニングの条件1

1.自分で買える価格をセット。
2.売上高と営業利益がともに2年連続で10%以上増えている
3.結果表示する銘柄の上場市場や業種などを指定する
・スクリーニングの条件2

1.テクニカルでお日様マークかお日様に雲が掛かるアイコンをセット

2.スコア値が50以上

3.売上高と営業利益がともに2年連続で10%以上増えている

-------------------------------------------------

【3】四季報を元に確認

-------------------------------------------------

・「自己資本比率」40%あるか

営業CFがプラスかどうか

売上高営業利益率を確認

1株当たり利益を確認

PERとPBRとROEを確認

四半期決算の進捗率を確認

プレミアム企業情報のタブを押して、テクニカル的に大丈夫かどうか確認

機関投資家の動向を確認

IFISなどで理論株価を確認。

予想されないメジャーじゃない銘柄の場合はBPS+(今期予想EPS×10)で割り出す。最近はBPS+(今期予想EPS×30)で計算するらしいけど、世の中期待できなので10の方でやる

-------------------------------------------------

【4】タイミング

-------------------------------------------------

・テクニカルを確認

ボリンジャーバンドMACDなど

・信用倍率を確認
機関投資家空売り状況を確認
https://karauri.net/

発行済み株式数と照らし合わせ相対関係確認

-------------------------------------------------

 【5】買う

 

3.株を売る

 【1】市場スケジュール、決算日を確認

 【2】目標株価と照らし合わせる

 【3】チャートを確認

ボリンジャーバンドを割ったら売る

ボリンジャーバンドMACDを根拠にして売る。

 【4】目標株価付近に行ったら売る

切りのいい数字では売らず、ズラす

 

■成果は

上記の方法で日立製作所にたどり着いて利益を8%上げた。

 

■自分の作った掟

東証一部以外の銘柄に手を出さない。それが出来たら先物でも成功するから

東証一部でもソシャゲなどの関連に手を出さない。

・あくまでも自分の小遣いの範囲でやる。

・ボロ株に手を出さない。デイトレーダーじゃない限り無理だし、期待値というあやふやなものに振り回されヤフーファイナンスの掲示板でトドメを刺されるから。

・決算期は逃げる。コンセンサスなんてわかりません。

・来期の決算の見通し良く、中間決算が良くても、ボロ株は株数が大口などによって、すぐに上がる可能性がある。そのため増えた株数分の利益を出さなければいけないので、儲けるのが非常に難しい。自惚れず手を出さない。

 

 ----------------------------------------------------------------------------------

↓良かったら遊んでね↓

 

■appstore

 googleplay

 

 

モンスターハンター:ワールド が楽しみ。

今年も注目作品が多い内容でした。

---------------------------------------------

Mount & Blade II

days gone

xbox one x

モンスターハンターワールド

ワンダと巨像

ファークライ5

ベセスダVR

God of War

Spider-Man

Mario + Rabbids Kingdom Battle

---------------------------------------------

内容が薄かった?いやいや、十分でしょう。

少し残念なのは、去年の発表から劣化している作品がちらほらあったことぐらいですね。

 

 自分が注目してるものは巷で話題になっている、モンスターハンターワールド!

2018年初頭発売予定

 

■仕様----------------------------------------------------------------

・シームレスマップ

・マップは立体構造で密度が高く、豊富なロケーション

・マップは前作の2倍~2.5倍

・日本語音声。モンハン語もあり、設定で変更可能

・モンスター同志を戦わせるなどの戦略がある

・モンスターに乗って部位に移動することができる

武器の種類は16種類になる予定

-------------------------------------------------------------------------

戦略の幅が広がって遊びの多様性と思いがけないバグがでてきそうでワクワクしますね。

 

画面を通した自分の印象は、コミカルな部分が抜け、彩度が低い地味な印象を受けました。洋ゲ-寄りです。

グラフィックは他のE3で紹介された作品と見比べるとショボいw

木の葉っぱとか板感がでてるし、モーションもぎこちない。でどうしたってHorizonと見比べちゃいますよね。

でも自分はオッケーです。

正直これまで、女性キャラの性を強調した鎧にアイルーとかいう猫や、上手に焼けましたとか言った馬鹿にしたような設定が苦手でした。

仕様の面でのリアルティーが増したので、これで十分です。 

 

いやー来年が楽しみ。

behanceで繋がってみる

アートだけではなくて、様々なクリエーティブ(デザインより)に触れたいとき、アドビのbehanceっていうSNSサイトは良いですね。

Behance

 

英語サイトじゃんと思うけど、ちゃんとローカルIPで日本語になってるはずです。日本人も沢山いるんで良い刺激を得られるんじゃないですかね。

 

作品を載せるときは、英語のタグを調べて英語で登録した方が作品が埋もれずに済みますよ。

 

個人的に、このBehanceは国によっての方向性や流行りが分かるんでいいですね。

みんな会社に内緒でコソッと作品を載せてたりするかな?

 

 ----------------------------------------------------------------------------------

↓良かったら遊んでね↓

 

■appstore

 googleplay

 

これまでクロスバイクに費やした費用

自分がクロスバイクに費やした費用をさらけます。

 

■買った自転車
ジャイアントRX2(2016)
┗80000円から20%引き
┗64000円+消費税(5120円)
=69120円

・スタンド:2500円
-----------------------------------
●本体購入額:71620円
-----------------------------------

■これまで揃えた装備品
-----------------------------------
スマホホルダー:2000円
・泥除け:1200円
リアライト:2000円
・ヘルメット:7000円
・タイヤ:7200円
・チューブ:1800円
・雨具:4500円
・ボトルケージ:200円
・チェーンクリーニングセット:2000円
・錆止め(呉6-66):520円
・チェーンルブ(呉):573円
・チェーンクリーナー(呉):600円
・塗料黒:200円
・グローブ:1500円
・タイヤレバー:352円
・シートクランプ(破損したため):1000円
・空気入れ:2560円
・鍵パナソニック:2300円
・エルゴンGP3:4491円
・サドルSelle Italia:2734円
・ライトクランプシートステー:255円
・ライトクランプサドルシート:500円
・メンテナンススタンド:1000円
-----------------------------------
●合計:約4,6485円
-----------------------------------

車体購入に7万近くも出したんだから、初期出荷の状態で万事オッケーだと思ってたんですけど乗ってみると、まあ粗が出てくるんですよ。

ジャイアントは、ほぼフレームだけに高いお金をかけていて、他は素材チープだったりします。メリハリあっていいんですけどね。

で、やっぱ通勤に片道15㌔かけてると、そのチープさが体の痛みと共に否が応でも目立ってきて、改造せざるおえないですね。

一番はサドルとバーグリップですかね。正規店で散々自転車の調整をしてもらったのにも関わらず、手の痺れと、股間の痛みが緩和されない。コスパ重視だから仕方ないんでしょうけど、短期間で付け替えちゃいました。

タイヤも初心者なんでスピードが上がってほしいと思いコンチネンタルのGRAND PRIX 4000S2に交換。違いが大きく感じられて満足(初期の出荷のタイヤがワイヤーが入っていて折りたためない上に重くてビックリ。)

メンテナンス用品は、セット売りのお得なメンテナンス用品の存在を知らず、Amazonで無駄な出費を重ねました。

雨具は透湿性 の低い雨具に妥協。

キャットアイのライト関係は、意外にブラケット費用が高くつきました。基本ジャイアントのフレームに合わない。あえて合わなくしてブラケット代金求めてるんあじゃないかと勘ぐるほど規格の合わないブラケットばっかりでした。

これで大体これまで4,6485円になります。

モチベーションを高めるには妥当なラインに収まりました。

 

■今後購入する予定のもの
-----------------------------------
ビンディングペダルクリッカーSPD:7700円
ビンディングシューズ:11000円
・パイプカッター:800円
・ツールボトルケース:2000円
・ホイール:40000円
・サイクリング用 アームカバー:2250円
・サングラス:2000円
サイクルコンピューター(CC-RD500B スマホと連動できるため):9560円
-----------------------------------
●合計:約7,5310円
-----------------------------------

●総合計:19,3415円

 

うん、最初からロード買ったほうがいいわって感じですけど、まあコレはコレで自転車の奥深さを知れて良かったです。

今まで自転車は自転車だろ?8万とか馬鹿じゃないのと思っていましたけど、質の違いがわかると、乗っていて楽しいし、愛着もわきました。

 ----------------------------------------------------------------------------------

↓良かったら遊んでね↓

 

■appstore

 googleplay

 

参考にしたいディビアントアート以外のサイト

自分が、参考にしている他のサイトも紹介しておきます。

 

■他のアートサイト

Pixeljoint.com - Pixel Art, Forum Avatars, Buddy Icons, Sprites

・ドット表現が多い

 

 

■デザイン寄り

チュートリアル見せてくれる貴重なサイト

 

 ----------------------------------------------------------------------------------

↓良かったら遊んでね↓

 

■appstore

 googleplay

 

参考にしたい背景、コンセプトアート

今回は風景やコンセプトアートを集めました。

数あるアートサイトの中では、やっぱりディビアントアートですね。芸術はゲームに向かってると思いますが、その手のコンセプトアートが沢山。 

 

■風景、背景、コンセプトアート

 

 内輪ノリで閉鎖感があるピクシブは受け付けないわ。

----------------------------------------------------------------------------------

↓良かったら遊んでね↓

 

■appstore

 googleplay