2019-05-16

LPを運用してみたよ

お疲れ様です。久々に個人ブログを更新します。最近、Peaceflontさんという、NPO団体のLPを制作しました。

sbcevents.xyz

実は、兼ねてからインターン先でwebページを作ることはあっても、
ちゃんとクライアントに対して自分の技術を提供する経験は今回が初めてだったのでその学びをここに記したいと思っています。

ところでwebページというと、最近はペライチやwixなどのHTMLやCSSの知識がなくてもwebが作ることのできるITツールが存在するおかげで、誰でも簡単にwebページが作れるようですね。

個人事業主、いわゆるフリーランスとして活動していくのに当たって一番の敵はランサーズでもなく、これらのITツールでしょう笑。憎きペライチめ。

一応、今回の成果を上げておくと、

CV数：41件、CVR：8.87%

を達成
f:id:toshikimaebayashi:20190516014901p:plain

想像以上に、予約成約率は高かったですね。ありがたし。集客で手伝っていただいた皆さん、ありがとうございます。

さてさて、僕が思ってた以上に集客においてLPの価値は高かったです。
その理由は、僕が分析する限り以下の通り
・Facebookやツイッター以上に、自由な表現ができるので、価値を伝えやすくなる
→自由な表現ができるということは、ページ内で自由に顧客の購買ストーリーを構成できる
→（webページに来てくれた）見込み顧客を自由にコントロールできる

もちろん、PRの本質的なところは、顧客との信頼関係なのでどうやったら顧客と信頼関係を構築できるかをベースに考えなければいけません。
これは大前提中の大前提。

信頼関係をいかにして構築していくか。これはリアルでも同じ。
女の子と仲良くなるためには、いきなりご飯に誘ってはいけませんね
相手のニーズを探りながら自分がしてあげれそうなことを提供してあげつつ、少しづつ関係性を構築しなければいけません。
これはマーケティングも同じで、相手のニーズを勝手に決めつけて、これどうですかと提案してしまうのはNG
当たり前のようですが、意外とこれができない人は多いです（僕も含めてw）

相手のニーズを調べる、自分の中で立てた仮説のニーズが正しいのか確かめるために
ヒアリングを行うのですね。

では見込み顧客との信頼関係を構築していく上で何が大事になってくるのかーということですが・・・・
例えば、あの子と仲良くなるのにどうしたらいいか考えてみてください。
もちろん、その子の趣味や、習い事から共通項を見つけて仲良くなっていくのは当たり前のように大事ですが、
それ以上に大事なのは、「嫌がることをしないこと」ですね。
例えば、泳ぐのが嫌いなのに水泳誘ったり、カナヅチと馬鹿にしたり。
我ながら、カナヅチと馬鹿にするというのは非常にいい例で、良かれ悪かれ人間というのは人を馬鹿にするのが大好きな生き物です。なので、馬鹿にしてる本人は非常に気持ちがいいのですが、相手からしたら心地はいいはずがありません。

実はLP設計でも同じことが言えます。
LPも含めたwebの設計において一番大事なのは

ユーザーが離脱する要因を排除すること

つまり、ユーザーが使ってて心地よくなかったり、ウザい要因を取り除くことが大事です。

最近、webページが無料で作れることもあり、あんまりお金のない人は自らHPを作るのですが、ここの部分を意識している人はあまりいないようにみられます。
デザイン的な部分でいえば、読ませたいのに中央寄せにしてたり、CTA（ボタン）がめちゃめちゃわかりづらかったり、色をたくさん多用しすぎてガチャガチャしてたり、文章を読んでほしいのに背景が明るいあまり、めちゃめちゃ読みづらかったり。。。
情報設計の部分でいうと、LPなのに、ユーザーのフォームまでの導線を曖昧にしてたり。。

そして、怖いのが、自分ではいいと思ってしまうことです。
さっき言ってたギャップですね。

自分はサイトのデザインはこれでOKだと思ってても、ユーザーから見たら何これ？

というのは往往にしてあります。

結局WebマーケティングやWebデザインに強い人を側に置いておくのは大事ですね。

以下は、LPを運用してた時のメモです

・参加フォームボタンを追従させるようにした→どの位置にいてもフォームに飛ぶことができる
・画像を多用した→見る人がはっきりわかりやすい
・ターゲットに合わせたコンテンツ→国際協力の人は、当日の内容や自分がどんなことを得ることができるかよりも活動している人の思いに共感しやすい
・LPの外的要素も考慮したこと＝CVが上がるためには、どのくらいにリーチさせるのか、どこにURLを配置すればリーチできるのかを考慮したこと。単純に質を高めるだけではなく母数を増やす施策を考えた。ここは、集客スタートする前に定量的な数値をマーケティング。ファイナンス絡めて事業計画書に書いておくとOK
・単にコンテンツを並べていくだけだと、長くなりすぎるので、モーダルウィンドウを用いたこと
・最初のメインヴィジュアルを意識。

PRの中のLP設計を意識する際は、注意するべき点は大きくまとめると1点だけで、ユーザーの行かない（またはサイト自体から離脱しない）要因を徹底的に排除していくこと。PRの一環である以上、顧客との信頼関係獲得が一番のポイントでもある

LP運用の際の注意点
・とはいえ、メインはリアル集客に据えるべきであるということ。ここにソースを避けなければ、LPを作っても意味がないこと
・LPを用いなくても15人ほどは集客することのできるコンテンツであること（それだけのパワーがあると置き換えても良い）逆に集客目標15人はLPを用いる必要がない
・webという媒体以外にある程度の資産は揃っていること（実績、人、SNS運用）：質の高いフライパンは材料の質が高ければ高いほど能力を発揮する
・ある程度の数字を見積もっておくこと（事業計画）

まあ、こんな感じでLPを運用してるよーって話でした。

ps：ちなみになんですが、当日のイベントに行ったところ集客していた方や団体の運営の方にめちゃめちゃ感謝されて、技術者としてとても嬉しかったです。
自分の技術は誰かのためであり続けたい
と再認識しました。お金以上のものを得れたと思っています。

2019-03-31

最近、ビンゴアプリを作った件

最近ビンゴを作った。

言語：Javascript

初期状態こんな感じで。

f:id:toshikimaebayashi:20190331234728p:plain

ランダムに数字を発生させる

→数字が表の中の数字にあったら、印をつける

f:id:toshikimaebayashi:20190331234830p:plain

5個揃ったら、ウィンドウが降りてくる

（デザインが切り替わるよりも、ウィンドウがあまりにも早くですぎている）

f:id:toshikimaebayashi:20190331235118p:plain

<Javascriptのコード>

window.onload = function() {
// 数字格納 一時配列
var arr = [];

for (var i = 0; i < 100; i++) {
arr.push(i);
}

//arr == [0,1,2,3,4,5.................,99]

// シャッフル
shuffle(arr);

var panel = document.getElementById('panel');

// div要素作成
for (i = 0; i < 25; i++) {
var div = document.createElement('div');
div.className = 'card';
div.index = i;
div.number = arr[i];
div.innerHTML = div.number;
panel.appendChild(div);
// cards.push(div);
}

//arr2配列の中身のデータは表示されているカードの中身と一緒
var arr2 = [];

for (i = 0; i< 25; i++) {
arr2.push(arr[i]);
}

var arr3 = [];

var btnstart = document.getElementById('btn-start');

btnstart.onclick = function() {

var random = Math.floor( Math.random() * ( 99 - 0 ) + 0);
var re = document.getElementById('result');
re.innerHTML = random;
deleatnumber(random, arr2, arr3);

console.log(arr3.length);

if (arr3.length >= 5){

var num1 = [0, 1, 2, 3, 4];
var num2 = [0, 5, 10, 15, 20];
var num3 = [0, 6, 12, 18, 24];
var num4 = [5, 6, 7, 8, 9];
var num5 = [10, 11, 12, 13, 14];
var num6 = [15, 16, 17, 18, 19];
var num7 = [20, 21, 22, 23, 24];
var num8 = [1, 6, 11, 16, 21];
var num9 = [2, 7, 12, 17, 22];
var num10 = [3, 8, 13, 18, 23];
var num11 = [4, 9, 14, 19, 24];
var num12 = [4, 8, 12, 16, 20];

var nums = [num1, num2, num3, num4, num5, num6, num7, num8, num9, num10, num11, num12];

diffArray(nums, arr3); 

function diffArray(nums, arr3) {

for(var a = 0 ; a < nums.length; a++){
for (var j = 0; j < 5; j++){
var cap = nums[a].every(v => arr3.includes(v));
console.log(cap);
}
if (cap == true){
break;
}
}
if (cap == true){
window.alert("終了です！");
}
}
}
}
}

function shuffle(arr) {
var n = arr.length;
var temp, i;

while (n) {
i = Math.floor(Math.random() * n--);
temp = arr[n];
arr[n] = arr[i];
arr[i] = temp;
}
return arr;
}


//表示された数とカードの数字を整合し、消す関数
function deleatnumber(random, arr2, arr3) {
var deleatnflg = arr2.includes(random);

const results = arr2.find(item => item === random)
console.log(results);

//カードに表示された数がある場合
if(results != undefined){

var findnumber = arr2.indexOf( random );
console.log( findnumber );
//配列の中で、x番目にカードが存在するかがわかった

var cards = document.getElementById('panel');
var children = cards.children[findnumber];
console.log( children); 
//x番目のdiv要素を取得

var backTimer = setTimeout(function(){
children.className = 'card finish';
backTimer = NaN;
}, 1200)

arr3.push(findnumber);
console.log(arr3);
}
return arr3;
}

ビンゴアプリ設計の際に書いたメモ

必要な要素（HTML的な）

・数字をランダムに出すやつ（1から100）

・数字が書いてある表

アルゴリズム（流れ）

最初に、ランダムに選ばれた5x5マスの数字の表が出てくる

上にランダムに選ばれた数字が出てくるボックス、ストップボタン、スタートボタンがある

1 スタートボタンを押して、数字をランダムに出していく

2 ストップボタンを押して、数字を止める

3 止まった数字と同じ数字であれば表の中の数字に印がつく

1から3の流れを数回やり、縦か横に揃った時点でビンゴ終了

①まずHTMLを作る

②javascriptでcssをHTML内に当てはめていく

< javascript内のアルゴリズム >

乱数を発生させて、1~100までのうちの25枚のカードを5x5で並べる

シャッフルとは？？

配列の中の要素の順番を入れ替える

シャッフル関数処理＝結構有名

var n = arr.length;

var temp, i;

while (n) {

i = Math.floor(Math.random() * n--);

temp = arr[n];

arr[n] = arr[i];

arr[i] = temp;

}

return arr;

スタートボタンで0～99までの数字をランダムに表示する

クリックする

乱数を発生させる

数字を表示する

表示された数が、

表上の数字（ランダムに選ばれた0～99の中のうちの25個）にある場合

=配列の中に特定の数字が存在する

=findメソッドで検索、

もし、findメソッドで得られた値が普通の数値の場合、それはビンゴ内に存在する

undefindの場合、存在しない

もし、undefind出ないとき、存在する

・card内のHTML要素がresults（=random)のカードを消す処理

Cardは、arr2配列順に並んでいる

同じ数値のカードをjavascript内でどう認識させるか？

Aプラン

→探索メソッド的なので探してもらって配列の順番を返してもらう？

→返り値はカードの順番の値だから、arr[num]とすればその数値を特定できる

→配列の中で、x番目にカードが存在するかがわかった

→要素のx番目を所得するメソッド（処理）

→x番目のカードにクラス名を追加する

5マス場合、クリア！と表示させる処理

カードの親のdiv要素を取得

→A：カードの中に”card finish”っとなっているdiv要素がどれだけあるか判別するメソッド？？

B：cardfinishとなったカードに印をつける。（childrenを保持）

childrenの5つの組み合わせが満たしているかどうかを判断させる

( 0, 1, 2, 3, 4 )

( 0, 5, 10, 15, 20 )

( 0, 6 12, 18, 24 )

( 5, 6, 7, 8, 9 )

( 10, 11, 12, 13, 14 )

( 15, 16, 17, 18, 19 )

( 20, 21, 22, 23, 24 )

( 1, 6, 11, 16, 21 )

( 2, 7, 12, 17, 22 )

( 3, 8, 13, 18, 23 )

( 4, 9, 14, 19, 24 )

( 4, 8, 12, 16, 20 )

この12の組み合わせの配列を作った

for文でループさせてnum[x]がarr3に含まれるかどうか調べる

nums[x]の中で一つでも含まれていたらOK

arr3とnumsをそれぞれ比べて比較する

→nums[x]の中身ごとに比べていき、nums[x]の中身が全て満たされている場合、true

（＝arr3の中の数で、一つでもnums[x]を満たしている）

True or falseで出力させる

ではnums[x]の中身がarr3内にあることをどのようにどのように表現するか

Arr3とnums[x]を比べて共通要素を新しい配列に入れる

その新しい配列はnum[i]ごとに生成される。つまり12個。

そのうち、新しい配列の長さが5以上になったら、OK

childrenを保持する行為：

新しい配列を作り、配列の中に入れる

2019-02-23

ヘッダーの役割とは？ UXの視点で分析してみた

最近0からサイトを作っていた時に、ヘッダーとフッターのデザインを考えなければいけなくなり壁にぶち当たりました。笑

僕はどちらかというとデザインは表現していくことが好きな方なので（例えば、UI/UXデザインよりもコーポレートやLPのデザインの方が好きみたいな話）、情報設計等は苦手とするタイプです。笑

ですがこのフッター、ヘッダーに関しては表現力はあまり問われず、どれだけロジカルに考えて構成・配置できるかを考える必要のある分野だと思うので、今回はそのフッター・ヘッダーを作る際に情報収拾した記事をもとに、自分なりに役割を考えてみます。

先に結論から言うと、

ヘッダーの役割：サイトで迷った時にそこを見ればサイトをリセットできる

そして、どのようにデザインすれば良いかと言うと、どのページに遷移しても常に同じ情報が流れるよう、そのサイトにとって大事なコンテンツをユーザーが見やすい箇所の配置することが挙げられるでしょう。いわば、サイト全体の目次のようなものです。

これは、UXの際にとても重要です。

LINEとメールのUXとは

f:id:toshikimaebayashi:20190223115546p:plain

出典：https://archeco.co.jp/ux-design/what-is-ux-design/

UXデザインとは、”user experience”つまり顧客体験のことです。例えば、LINEと手紙をもとにお話すると、そもそも手紙とLINEはオフラインで行われていたものをインターネットテクノロジーによってオンライン化したものにすぎず、その体験の本質は

従来のメール：手紙のやり取り

LINE：日常的な会話

だと考えられています。したがって、LINEがどれだけ発達しようと一見圧倒的に使いにくいGmailがしぶとく使われているのも上が理由で、オフラインでくるどこかの大学の資料だったり、サービスのパンフレットだったり、大きな組織からの通知（僕の場合大学からの通知）は、だいたいGmailから送られてきます。つまり、それはインターネットが普及する以前はオフラインで行われていたもので、それが、インターネットの時代だとGmailにとってかわったと言えるでしょう。

そして、LINEはオフライン時代に友達とのやり取り、気さくな会話をオンライン上で表現したまでにすぎません。GmailはLINEにできない役割を担っているからこそ、今でも使われ続けているのです。

つまり、

ITサービスのUXにおいて重要なのは、オフラインで行われてきたやり取りをどれだけオンライン画面上で表現できるか

だと思います。

具体的にはLINEの場合

・吹き出しを使って会話っぽさを表現する

・普段の何気ないジェスチャーといった言葉を用いないコミュニケーションをスタンプで表現する

・その人の名前でなく、プロフィール画像を吹き出しと結びつけることでいかにもその人が言葉を発している雰囲気を出す

これらをすることで、オフラインに近いUXをユーザーに提供できるのです。

ヘッダーのUX

さてさて、話を戻しましょう。

そもそもこれはヘッダーをどのようにデザインしていくかの話でした。ここで、先ほどの『ITサービスの本質はオフラインで行われてきたやり取りをどれだけオンラインで表現できるか』という着眼点をベースに考えてみると、そもそもヘッダーはオフラインのサービスで何に値したのかと言う話になります。

個人的に思うのは、

ITサービス（例えばゼクシイとか）のヘッダー＝雑誌の目次

に値するのではないか。

そう言う意味で考えると、ぐっと作りやすくなるのではないでしょうか。

雑誌の目次を我々はどのように見ていたのか？？

どのようなタイミングで雑誌の目次を見たのか？

このUXの視点からヘッダーを作ってみると作りやすいですね

ちなみに僕は雑誌を読んでいる時、目次をこんな時に閲覧していました

・雑誌を読んでいる時に、自分が今何の特集を読んでいるのかわからなくなった・・・①

・そもそもこの雑誌にはどんな情報が書いてあるのか気になった・・・②

まず、①の解決策として目次はどんな雑誌でも一番最初の近くのページに書かれていることが挙げられるでしょう。

次に②の選択肢としてその雑誌に載っている情報を簡潔に羅列してあります。

上の事柄をwebサイトで考えてみると、いつヘッダーを見るか

・サイトを閲覧している時、どのページを読んでいるのか分からなくなった

・どんな情報が載っているのかわかりづらいので、簡潔に項目ごとに並べたページが欲しい

他にもあると思いますが、主にこれらの解決策としてのヘッダーのデザインがあればOKでしょう。主な解決策としては、ヘッダーを上部に固定することで常にユーザーに位置を明確にさせること、項目ごとに並べることが挙げられるでしょう。それをもとにデザインしてみるとすごい設計しやすくなりました。ユーザーと同じ目線に立つって大事ですね。

実際のヘッダー

最後に実際のサイトのヘッダーがどのようなデザインなのか見てみました。

f:id:toshikimaebayashi:20190223115637p:plain

https://www.cyberagent.co.jp/

f:id:toshikimaebayashi:20190223115738p:plain

https://liginc.co.jp/

こう言う目線でみると、サイトがいかに設計されて作られているものなのかが

よくわかりますね＾＾

ではまた！！

2019-02-17

フォントの違いで、どのように見え方が変わるか分析してみた！

お疲れ様です＾＾

文字を使ったデザインを行う際には、沢山のフォントの中から一つを選択しなくてはなりません。

ですが大量にインストールされているフォントを一つ一つ確認していると、

非常に時間がかかり、効率が悪くなってしまいます。

よく使われているフォントや、自分が使いやすいフォントを、ある程度覚えておくと、作業がスムーズに進められます。

今回は日本語のいくつかのフォントについて、特長と使い分けの方法について説明します。

みなさんのデザイン作業の参考にしていただければ幸いです！

今日はフォントの種類によって見え方がどのように変わるかを分析してみます！

まずは、フォントの種類から。

フォントは様々な種類がありますが、一般的に使われるフォントとして、以下の二つがあります。

・ゴシック体

・明朝体

今回は、この二つのフォントを分析していきます。

まずはゴシック体

ゴシック体の主な特徴として、縦画も横画も同じくらいの太さ、全体を等して均一であることが挙げられます。

全体的に言えるのは、視認性（遠くからでも文字を判別できる）に優れたフォントと言える頃ができるでしょう

ゴシック体を用いると、以下のような印象を与えられます。

ゴシック体全般：シンプル、均一、目に入りやすい

太いゴシック体：力強い、元気、親しみやすい、可愛らしい

細いゴシック体：無機質、クール、落ち着き、幾何学的

引用：http://saikirin.com/font_erabi/

ゴシック体は、プレゼン資料等に向いているフォントです。これらは「読む」というより、「見る」という意味合いの方が強い要素となります。したがって可読性（読みやすさ）よりも視認性に優れたフォントであるゴシック体が向いているでしょう（バナーや広告でゴシック体が使われるのもそのためだと思われます）。

f:id:toshikimaebayashi:20190221003358p:plain

次に明朝体

明朝体は、縦画が太く、横画が細い文字です。

線は先端に向かうに連れて細くなります。

明朝体は、例えばレポートや記事、新聞といった長い文章を読む時に優れています。一般的に、明朝体は文字が細いため、読み手に負荷をかけません。仮に、文字が太い場合で文章を書くと、読み手にかなり負荷をかけてしまいます。新聞や、小説のように長い文章で「明朝体」が使われるのはそのためです。

f:id:toshikimaebayashi:20190221002800p:plain

ここで次にバナーを題材にして、フォントを見比べてみます。

一応、バナーの設定

バナーのコンセプト「転職サービスを使ってもらうために、インターネットに流すバナー」

ターゲット「若い、優秀なエンジニア」

ちなみに、このサービスは架空のもので、バナーも、完全に優れているものではないのであくまでフォントを見比べる程度でお願いします。

背景画像は統一して、それぞれのフォントを見比べてみた

游ゴシックの場合

f:id:toshikimaebayashi:20190216182547j:plain

游ゴシック体は、ゴシック体のベース（全て同じ太さになっている）は保ちつつ、文字をスマートにしたり、角を少し装飾したりしてる書体です。一番、これがしっくりくるなあ。

ヒラギノ角ゴシックの場合

f:id:toshikimaebayashi:20190216182614j:plain

ヒラギノ角ゴシックは、普通のゴシック体ですね。文字の太さを全て均一にしているので、すごいシンプルなデザインになります。でも逆に均一でシンプルすぎるってのが問題で、特に印象には残らないイメージがあります。

ヒラギノ角ゴシックStdNの場合

f:id:toshikimaebayashi:20190216182857j:plain

ヒラギノ角ゴシックStdNは、普通のゴシック体を、太くしたフォントですね。文字がだいぶ太くなったので、迫力感や力強いイメージがあります。ただ、このバナーのコンセプト枯らしたら、写真のイメージとはちょっと合わないかもですね〜

ヒラギノ丸ゴシックの場合

f:id:toshikimaebayashi:20190216182919j:plain

ヒラギノ丸ゴシックは、普通のゴシック体の角を丸くしたパターンです。細めで使用すると、落ち着きと柔らかさを両立した綺麗なイメージになるので、女性や子供向けのフォントかもしれませんね。

ヒラギノ明朝の場合

f:id:toshikimaebayashi:20190217035623j:plain

続いて、明朝体です。先程までみていたゴシック体とは違い、高級感のあるイメージになりました。写真とは一見マッチしていますが、ターゲットやコンセプトという視点から見るといかにもハイクラス・30〜40代向けで、若年層向けではないかもしれませんね。

こんな感じになりました。

個人的には、游ゴシックが一番しっくりくるかな。

総じて言えることは、フォントによって、バナー（今回の場合は）のイメージは全然変わってしまうということですね。