アレっぽいやつ

web系エンジニアがカチャカチャ書く

マーケティングをやりたい就活生へ

営業職はいやだ...営業職はいやだ...営業職はいやだ...

営業ってノルマとかしんどそうだから、マーケティングとかやりたい学生は一定数いるはず。
でも基本的に営業職に比べてマーケティングの部署に配属される人数は少ない。

そんな学生が就活の面接や、配属前の面談でマーケティングをやりたいアピールできるようになるような話を書く。

 

マーケティングの中でもウェブマーケは若い人のほうが有利

マーケティングと言っても、商品・サービス開発からユーザーの手に届くまで、

役割は色々あるが、若い人が勉強するならウェブ上でのマーケティングを勉強するのをオススメする。

理由は

  1. SNSメッセンジャーアプリなどのユーザー心理を理解しやすい
  2. 中堅社員でもウェブマーケの経験年数が少なく、追い越しやすい
  3. 自分で勉強しやすい(学生でも)

などである。上の3つを詳しく書く。

 

1.SNSメッセンジャーアプリなどのユーザー心理を理解しやすい

instagramを例に取ると、おっさんはどういうタイミングで写真を上げたり、いいねを押すのかどんどんわからなくなってくる。おっさんが理解して使い始める頃には若い人は次の流行りに移行していくので、追いつくことはない。

おっさんは社内の若い人間やネットに転がっている記事などをみて、自分ではあまり納得しないまま、判断していくのである。怖くない?

 
2.中堅社員でもウェブマーケの経験年数が少なく、追い越しやすい

中小企業だとネット広告を出したり、自社サイトの分析を行っていないケースも多々ある。

また、広告代理店や制作会社に丸投げして、ウェブマーケを理解できぬまま代理店とマーケ担当者が共に苦しむ場面も多い。

 
3.自分で勉強しやすい

テレビCMや商品パッケージなど勉強しようと思っていても、学生や若手だったらなかなか難しい。

しかし、SNS活用などお金がかからないものも多い。アルバイトしているレストランのSNSを運用してみたり、ウェブサイトのアクセスを見てみたり、趣味でウェブサイト作成をしてみるのもいいだろう。

大企業のマーケティングをするのであれば、統計やビッグデータの勉強をオススメする。どうせどこかのタイミングで身につけることになる。

情報源はネットにやまほど落ちているので割愛。

 

 

ウェブマーケティングの会社にいくのはどう?

ウェブマーケ系の会社に入社して、数年後に大企業に転職するパターンもある。

ウェブ系広告代理店の場合は、入稿作業やレポート作成など細かい作業もあるが、

媒体の最新情報を手に入れたいり、複数の企業のマーケティングに関われるという意味では、勉強になるかもしれない。

電○などの大手広告代理店でも部署によっては、細かい入稿作業などをしているみたいなので、場合によっては同じような業務になる。

ちなみに、ウェブ系の広告代理店だからといって、ウェブマーケに詳しいわけではない場合もある。
ただの営業会社で実務は二次代理店の投げていたり、大量の体育会系社員による手作業パワーファイトをしている会社もあるので、面接などで頑張って見抜こう。

 

まとめ

自分がウェブ系エンジニアやってるから、ポジショントークみたいになってしまったが、就活で悩んでいる人の一助になれば。

質問とかあればtwitterで連絡くれるとうれしいです。

アクセス増えたら、こういう記事をもうちょっと書こう。

 

dockerでさっさと開発環境をつくる(非link)

とにかくさっさと作りたい


作成のイメージは

  • サーバーサイドはプロダクトごとにコンテナ作成
  • mysqlは共通で一つのコンテナ
  • phpMyAdminのコンテナ
  • link機能は非推奨なので使わない

1. mysqlコンテナを立てる

docker run --name mysql -e MYSQL_ALLOW_EMPTY_PASSWORD=yes -d -p 3306:3306 mysql 


このとき

docker exec -it {container id} bash


とかでコンテナに入り、

hostname -i


mysqlコンテナのipアドレスを取得しておく。

(docker composeが使える人は、DBのデータをローカルと共有化しとけば、

mysqlコンテナを消してしまったときに、データが消えないようにできる)


2. phpMyAdminのコンテナを立てる

docker run --name pma -e PMA_HOST=172.17.0.3 PMA_PORT=3306 PMA_USER=root -d -p 8080:80 phpmyadmin/phpmyadmin

(mysqlコンテナのipAdressが172.17.0.3だった場合)

localhost:8080でphpMyAdminが見れる


3.サーバーサイドのコンテナを好きなようにたてる


mysqlにはmysqlコンテナのipアドレスで接続する

 

 

シェアされたFacebookの投稿のOGPイメージを投稿後に変更する

自社のメディアやブログ、プレスリリースをFacebookで広げるために、
リンクを張って投稿したあと、OGPの画像を変更したい時がある。
普通に変更後キャッシュをクリアしたあと、シェアすると新しい画像に切り替えられるが、既にシェアされていた場合、別途処理をしたいとシェアされた投稿の画像は古いままである。

シチュエーションまとめ

ブログ書いたし、Facebookで拡散するで。

みんなシェアしてくれてる。

ミスったわ。OGPの画像おかしいのに気づいたわ。

あれ画像変えたのにシェアされてる投稿の画像変われへんわ。

新しく投稿したら「いいね」の数減るし、なんとかしてぇ。

 

解決方法

  1.  リンク先ページのOGPの画像のpathを新しいものに変更する

  2.  https://developers.facebook.com/tools/debug/sharing/ でキャッシュクリアして、デバッグ画面上で新しい画像に変更されていることを確認する。
  3.  自分の投稿の右上のボタンで「シェアした添付ファイルを更新する」で更新する。
    (ビジネスマネージャーのタイムラインだと「シェアした添付ファイルを更新する」がでてこないので、投稿時間にリンクがはってあるその投稿のページにいけばよい)

    f:id:pechokan:20170903110707p:plain

    f:id:pechokan:20170903110739p:plain
    (バグっていてクリックしてもモーダルがでないときがあるが、ブラウザを変えたり次の日にやればできたりする)

  4.  タイムラインや他人からみた投稿で変更を確認する

 

ちなみにOGイメージのサイズは以下参照

pechokan.hatenablog.com
はてぶの画像を変更したいときは、はてぶのChromeの拡張を入れたら、
自分の好きなやつに変更できる。

 

Facebookキャンバス広告の特徴

ざっくり説明

Facebookキャンバス広告とは

Facebookの画面上で作成する、ランディングページみたいなもの。

モバイルのFacebook広告のリンク先として使用する。

モバイル前提なので、表示速度(10倍って書いてる)や見た目が最適化されている。

ja-jp.facebook.com

主な特徴

・無料

Facebookの画面上で作成する

・PCでは表示できない(プレビューすらできない)

Facebookのサーバー上に置くので、サーバー料金がかからない

・キャンバスを表示するまでの時間が短い(標準の10倍らしい)

 

作成

ページ管理>投稿ツール> キャンバス から作成画面にいける(2017年5月現在)

ページの構成要素

 -ボタン

 - カルーセル

 - 写真(画像)

 - テキスト

 - 動画

 - ヘッダー

を組み合わせて作成する。

f:id:pechokan:20170516230359p:plain

テーブルを作成したり、細かい調整はできないので、

そういうのことやりたいときは画像を組み合わせて使えばいいと思う。

SEOも関係ないし、モバイル広告経由でしかアクセスできないので、

コピペすることもあまりないはずである。

 

f:id:pechokan:20170516232205p:plainf:id:pechokan:20170516232237p:plain

f:id:pechokan:20170516232231p:plainf:id:pechokan:20170516232240p:plain

 f:id:pechokan:20170516232220p:plain

 

プレビュー

先も貼ったけどここでいくつか見れる。

ja-jp.facebook.com

まとめ

こんな人におすすめ

・広告をだしたい

スマホのページがいけてない(見た目、表示速度)

・既存のウェブサイトに手を加えるのはしんどい

・新しくページを作成するのがしんどい

 

Facebook キャンバスは色々制限はあるものの、

手軽にできるし、作成自体は誰でもかんたんにできるようにつくられてるから、

とりあえず一度触ってみてもいいと思う。

自社のサイトで実験的にやってみて、広告の効果が良ければPCのランディングページを作ったり、リスティング広告をだしてみるなど、初心者におすすめ。

 

海外と比べて日本であまりFacebook Canvas を見かけないのは、なんでだろう。

中途半端だからかな。

 

Facebook広告の詳しい説明はまた今度。

FacebookのOGP画像サイズについてまとめる

Facebookでシェアされたときに表示される画像を

<meta property="og:image" content="https://example.com/exmample-image.png">

で設定した場合の、サイズについてまとめる(下記を参照)

https://developers.facebook.com/docs/sharing/best-practices#tagsdevelopers.facebook.com

最低限守るべきこと

最小画像サイズ : 200 x 200ピクセル

最大ファイルサイズ : 8MB

最適化

アスペクト比 : 1.91:1
(PC,モバイル共通で、アスペクト比が違う場合はこのアスペクト比に切り取られる)

推奨画像サイズ 1200 x 630 以上 (600 x 315未満の画像だと大きい画像で表示されない)

f:id:pechokan:20170218133435p:plain

f:id:pechokan:20170218133724p:plain
引用:ベストプラクティス - シェア機能 - ドキュメンテーション - 開発者向けFacebook

ちなみに画像サイズのシュミレーションは

OGP画像シミュレータ | og:image Simulator

で確認できる。

注意点

og:image が正しく反映されているか、

https://developers.facebook.com/tools/debug/og/object/
で確認する。

関連

pechokan.hatenablog.com

(初心者向け)JavaScript, cssのキャッシュ削除できないとき

キャッシュを読み込んでいるせいで、CSSが反映されなかったり、JavaScriptのファイルが変な読み込まれ方をしたりすることがある。
原因はブラウザ側のキャッシュか、サーバー側でのキャッシュであることが多い。
開発を初めたばっかりの人だったり、デザイナーさんとかに、とりあえず試してほしいことを書く。

ブラウザ側でキャッシュを読み込まないようにする

ChromeのDeveloper Toolsで設定したり、Hard Reloadすることで毎回リセットされる。
読み込むときに、クエリを適当につけて毎回違うソースから読んでる感じにする方法もある。
調べたら、色々でるので、適当に試してもらいたい。

サーバーサイドでキャッシュを吐かないようにする

webサーバーにnginx を使っている場合を例に出すと、confファイルに

location ~ \.(css|js)$ {
  proxy_no_cache 1;
  proxy_cache_bypass 1;
  sendfile off;
}

って書いてreloadすれば、nginx が 〜.js, 〜.css に関して、キャッシュを返さないようになる。
もちろん、.(css|js)$ の正規表現を変更すれば、jsファイル,css以外にも適用される。

Apacheはこのページビューが多かったら書く。

※使っているframworkによっては、framewarkでキャッシュを管理してるものがあるので、 ↑で解決されないときは、さらにそのへんもチェックする必要がある。

自分で開発環境を作成するときに、サーバーの設定はとりあえず動けばいいみたいな人は、 ↑で書いたように、キャッシュを全部切ってもいいと思うが、
レスポンスが〜みたいな人は、ちゃんと設定してください。

一行一行の意味とかは下のサイトとかでまとめてくれてる人がいるので、参考に。

参考サイト

qiita.com

EFOとは?EFOを分解して、ちゃんと説明できるようになる

EFO(Entry Form Optimization)という言葉を自分でウェブサイト持ってたり、 ウェブ広告に携わってる人なら聞いたことあると思う。

普通に自分のウェブサイトを改修して行う場合もあれば、 外部ツールをつかうこともある。

とりあえず、 EFOをバラして書いてみる。

validation

入力内容をチェックすること。

例えば、制限以上に文字を入力されていたり、 数字のところにそれ以外のものをが入力されているのを弾いたりすること。 validationのパータンを列挙してみる。

htmlでチェック

emailアドレスの入力欄に

<input type="text">

じゃなくて、

<input type="email">

と書くことで、@の有無などをチェックできたりする。 他にも

<input type="text" maxlength="10">
<input type="text" required>

とか色々ある。

JavaScriptでチェック

かんたんに説明すると、 入力欄の編集したり、入力欄からフォーカスが離れたときに、 JavaScriptが動いて、入力内容を精査する。 入力内容に対して動的にチェックしたい場合などに有効。

例えば、開始日と終了日と入力させるときに、 前後が正しいかどうかチェックしたりできる。

サーバーサイドでチェック

入力内容を送信させてからチェックする方法。 JavaScriptやhtmlはユーザー側で書き換えられるので、 上記のvalidationをやっていても、 サーバーサイドでチェックするのは必須である。

ajaxでチェック

例えば、登録する名前がかぶっていないかどうかチェックするときは、 データーベースと照合する必要がある。 ajaxはページ遷移させずにデータの送受信ができるので、 何度も他のページ遷移で消える項目を再入力させる必要がなくなる。

auto complete

入力項目の補完機能。 validationと同じで、 htmlだけでやったり、ajaxでやったり色々できる。

EFOで一番やりたいこと

EFOは問い合わせフォームやECサイトの入力フォームで離脱率を下げることが目的である。 そのためには、

  • 入力項目が少ないこと
  • 入力が簡単に行えること
  • 入力エラーをすぐに判断できること

が重要である。

上記のことを念頭において、 EFOを考えてもらいたい。