ランディングページ（Landing Page）とは本来、訪問者が最初に着地する（land）ページという意味合いでサイトのトップページの事をLPと呼んでいましたが、今ではLPというと「訪問者のアクションを誘導することに特化した縦長のレイアウトのページ」のことを指します。
LPでもっとも大事なのはいかに訪問者に目標となるアクションを行わせるか、です。

コンバージョン

コンバージョンとは、変換を意味する言葉です。Web マーケティングの分野に置いては、「顧客見込み」から「顧客」への変換を意味し、成約を意味する言葉で最終的な成果として使われます。主に購入・資料請求・お問い合わせ・会員登録などをコンバージョンにする場合が多いです。コンバージョンを設定することで、Webにおける施策の効果測定が出来るようになります。
コンバージョンが起きた割合のことをコンバージョン率（ CVR）といいます。コンバージョン率は、コンバージョン数÷ 訪問数で算出することが出来ます。

ゴールの設定

ターゲットとなるユーザーにとってほしい行動を明確にします。商品購入をしてほしいのか、会員登録をしてほしいのか、お問い合わせをしてほしいのかなどです。場合によってはペルソナと呼ばれる、具体的なユーザーの人物像を想定し、その人物に向けて訴求力の高いLPを作る必要があります。

ストーリー性

「顧客見込み」から「顧客」へ変える為にはユーザーにストーリー性を持ったページを作り、ページ内でしっかりと説明をすることが大事です。

AIDAの法則

Attention：注意
まず、ユーザーの注意を引きます。問題解決をしたいユーザーに、なにそれ！と思わせることが重要です。

Interest：興味
興味を持ってくれそうな内容を書きます。詳細な説明を書いていきます。4つのポイント・3つの理由など、数を提示する事もあります。

Desire：欲求
ユーザーにとってのメリットや競合との差別化要因を伝えます。問題の解決ができる理由を示すことも有効です。

Action：行動
ユーザーが迷いなく申し込みや購買などのアクションをとれるよう、最後のひと押しをします。なぜ「今」「ここ」で買うのがいいのかを強調します。

CTA

CTAとは、Call To Action(コールトゥアクション)の略で、「行動喚起」と訳される。 Webサイトの訪問者を具体的な行動に誘導すること。

kataokadesignmarketing.net

twitter.com

2022-10-24

cssのmotion-pathを使って自由にオブジェクトを動かす

cssのmotion-pathを使う事でオブジェクトを自身で作成したパスに沿って動かす事が出来ます。

caniuse.com

2022-10-24

svgで手書き風アニメーション

2022-10-21

フォントサイズを画面幅に応じて可変にする

CSS応用レスポンシブデザイン

emを使ったフォントサイズ

emは親要素のフォントサイズをそのまま継承します。一見すると判りやすいですが構造が複雑になってくると、複利計算されてしまい判り難くなってしまいます。

remを使ったフォントサイズ

次にremを使ったフォントサイズの指定です。
「rem」とは、「em」や「%」の場合、親要素（が基準）に対して相対的に指定する単位になりますが、「rem」は「root em」の略の通り、root要素（最上位の要素）に対して相対的に指定する単位の事です。

remを使う時の注意点

remをそのまま使うと計算式が非常に複雑になるので、注意が必要です。
主要ブラウザーのデフォルトの文字サイズである16pxを基準値として使い回せるように、まずはベースフォントサイズを作ります。htmlに「%」を使って、基準値サイズの「16px」を「10px」になるように記述します。こうすることで、フォントのサイズを「16px」にするためには「1.6rem」、「20px」にするには「2rem」という風にわかりやすい値で指定できるようになります。
また、bodyl要素に「font-size: 1.6rem;」を指定しないとfont-sizeを指定していない箇所のfont-sizeが全て10pxになってしまうので注意が必要です。

html { font-size: 62.5%; } /* 10px */
body { font-size: 1.6rem; } /* 16px */


h1 {
font-size:4.0rem; /* 40px */
}

スマホ時にフォントサイズを画面幅に応じて可変にする

フォントサイズを可変にするには上記のremにvwとcalcを合わせて使用します。
ルート（html）のfont-sizeをcalc(100vw / 32)とすることで、iPhone5などの画面幅320pxのときは基準のフォントサイズを10pxとし、ルートより下ではremを使っていくという方法です。

@media (max-width:640px){
html{
font-size: calc(100vw / 32);/*iPhoneの最小サイズ320pxの時に10px*/
}
h1 {
font-size:3.2rem;/*320pxの時32pxに*/
}
p {
font-size: 1.4rem;/*320pxの時14pxに*/
}
}

html要素に62.5%を入れずに変数を使って指定する方法

mixin用ファイルに

@mixin font-size($size) {
  font-size: ($size / 16) + rem;
}

各スタイルに

h1{
@include font-size(40);
}

2022-10-20

モダンリセットCSSのress.css

css3

リセットcssには色々な方法があり、どれが1番優れているかは難しいので、自身の必要な用途に合わせて使い分けましょう。

html{box-sizing:border-box;-webkit-text-size-adjust:100%}*,:after,:before{background-repeat:no-repeat;box-sizing:inherit}:after,:before{text-decoration:inherit;vertical-align:inherit}*{padding:0;margin:0;box-sizing:border-box;}audio:not([controls]){display:none;height:0}hr{overflow:visible}article,aside,details,figcaption,figure,footer,header,main,menu,nav,section,summary{display:block}summary{display:list-item}small{font-size:80%}[hidden],template{display:none}abbr[title]{border-bottom:1px dotted;text-decoration:none}a{background-color:transparent;-webkit-text-decoration-skip:objects}a:active,a:hover{outline-width:0}code,kbd,pre,samp{font-family:monospace,monospace}b,strong{font-weight:bolder}dfn{font-style:italic}mark{background-color:#ff0;color:#000}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}input{border-radius:0}[role=button],[type=button],[type=reset],[type=submit],button{cursor:pointer}[disabled]{cursor:default}[type=number]{width:auto}[type=search]{-webkit-appearance:textfield}[type=search]::-webkit-search-cancel-button,[type=search]::-webkit-search-decoration{-webkit-appearance:none}textarea{overflow:auto;resize:vertical}button,input,optgroup,select,textarea{font:inherit}optgroup{font-weight:700}button{overflow:visible}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button::-moz-focus-inner{border-style:0;padding:0}[type=button]::-moz-focus-inner,[type=reset]::-moz-focus-inner,[type=submit]::-moz-focus-inner,button:-moz-focusring{outline:1px dotted ButtonText}[type=reset],[type=submit],button,html [type=button]{-webkit-appearance:button}button,select{text-transform:none}button,input,select,textarea{background-color:transparent;border-style:none;color:inherit}select{-moz-appearance:none;-webkit-appearance:none}select::-ms-expand{display:none}select::-ms-value{color:currentColor}legend{border:0;color:inherit;display:table;max-width:100%;white-space:normal}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}img{border-style:none;vertical-align: bottom}progress{vertical-align:baseline}svg:not(:root){overflow:hidden}audio,canvas,progress,video{display:inline-block}@media screen{[hidden~=screen]{display:inherit}[hidden~=screen]:not(:active):not(:focus):not(:target){position:absolute!important;clip:rect(0 0 0 0)!important}}[aria-busy=true]{cursor:progress}[aria-controls]{cursor:pointer}[aria-disabled]{cursor:default}::-moz-selection{background-color:#b3d4fc;color:#000;text-shadow:none}::selection{background-color:#b3d4fc;color:#000;text-shadow:none}ul,ol{list-style:none;}a{text-decoration:none;}.wrapper{overflow:hidden;}body{overflow-y:scroll;}img{max-width: 100%;}

2022-10-20

箇条書きのパターン

https://twitter.com/n_seitan/status/1565988372807503872