webマーケティング概論１−２
八代亜紀の舟唄まじかっけ〜〜〜〜〜〜〜
はい。
前回の続きです。
webの価値を考える
今回はwebの価値を考えます。
webはターゲティングメディアです。webを使う人はSNS等とは違い、目的を持って利用する人がほとんど。
なので、
webサイトを利用する人が何を目的としているかを考える。
その価値を考えて、理解しないと提供もできません。
では、メリットとデメリットを考えていきます。
-------------------------------------------------------------------------------
web利用のメリット
○無料（広告費でまかなえる）
○手軽（手軽でなきゃwebじゃない！）
○誰とでもつながれる
○見やすい（デザイナーがいるからね）
○匿名性（良くも悪くも）
○遠くのものも簡単に入手
○エコ
○豊富な情報量
○すぐに使える
○共有が可能
○比較が簡単
○使う人を選ばない
○ログが残せる（蓄積される）
○リアルタイム
○発信、交換もできる
○GPSなど
めっちゃ挙がった〜グループワークやべえ
ここで挙がったことの大半は、
みんなが当たり前だと思って居ること。
しかし、
応答の速さや、検索ができることなどは挙がりませんでした。
なぜなら、みんなが普段、当たり前だと思って居るからです。
当たり前のことが当たり前にできなければ、利用者は減っていきます。
では反対に、デメリットを考えます。一般ユーザの不満が大爆発します。
web利用のデメリット
○プライバシーが守られない
○情報が豊富過ぎて選べない
○検索しないと見てもらえない
○通信料など見えないお金がかかる
○端末によって見え方が一律ではない
○素人には信憑性の判断が難しい
○ウイルス感染
○電波や電源がないと使えない
○ネット依存
○保存され辛い
○後回しにされやすい
○シニアには難しい
○幼い子の利用リスク
○決済にハードルが低い
○スマホばかりでキーボードがたたけない
○「見て」「触って」ができない
○「軽い気持ち」で取り返しがつかない
○読みづらい
○埋もれやすい
○ブルーライト、疲れ目
これもすごい数wwwwww
メリットもデメリットも死ぬほど挙がりましたが、
デメリットを解決する策を考えます。これもマーケティングのうち。
デメリットの解決策を考える
面接みたいですよね。あらかじめ質問を予測しておいて、答えを準備する的な。
例を挙げていくつかピックアップします。
○保存されにくい→繰り返し告知する
簡単なのは広告。それも、出す相手を考える。
たとえば、過去にそのサイトを訪問したことある相手を解析し、ピンポイントで表示します。
メルマガも、必要な内容であれば一日数度送る。
そのしつこさが許されるのが、webです。
でもしつこい男は、嫌われます。
○比較検討されやすい→選ばれる理由を考える
比較や検討が激しいweb業界。ここで勝ち残るには何が必要かを考えます。
お客さんが何を理由に選んでくれるのかをしっかり認識することが重要。自分の売り出したいものの価値はどこにあるかを理解することが大切。
「なぜそれを選ぶか？」を認識しよう。
○可読性が弱い→レイアウト、フォント、表現力
写真やロゴをうまく使うことや、商品名や原産をわかりやすくするなど、まずはそのサイトに長く居座ってもらうための工夫は必要です。
一人で搾り出すのもよし、グループで話し合うのもよし。
○実物が見られない→豊富な情報、表現力
たとえばアマゾンの「30日間返品ok」など。
お客さんが商品を購入する上でのデメリットやリスクをすべて払拭するような仕組みになっています。いや、でもアマゾンのリスクが高くない？これ。
○後回しにされやすい→背中を押す
なんだかな〜実際にお店に買いに行くわけじゃないんで、あんまり購買意欲が湧かないのが現実らしい。
「残りわずか」「あと2席」など、後回しにできない理由を考えることが大切。
アパレルと同じで、背中を押す工夫がwebにも必要です。でもそのぶん、背中を押すことに失敗した時のリスクは甚だしいらしい。こわ。
マスメディアは不特定多数ですが、
正反対に、webはターゲティングメディアです。たぶんさっきも言った。
不特定多数ではなく、性別や年齢、エリア、価値観など、どの人をターゲットにするかを考える必要があります。
競合が少ない場所をターゲットに選ぶことや、ファーストビュー（スクロール前のページ）でいかに心をつかめるかも戦略の一つになってきます。
最後に、webページの構成をざっくりと考えます。
webページの構成の仕方
例えば、ある通販サイトではこんな作りになってます。
トップページ
↓
一覧ページ
↓
詳細ページ
↓
カートページ
（このページのファーストビューで”買う”ボタンがないと、通販サイトとは判別されないようです。）
↓
フォームページ
↓
確認ページ
↓
完了ページ（サンクスページ）
通販サイトの場合、完了ページにいくことがコンバージョン（成果）になります。
また、
どのページをメインに集客するかで、お客さんの動向が伺えます。
トップページにくるお客さんは検索サイトで指名検索をしている。
もしくは、検索したい内容のキーワードが合致しているので、競争率は低いが、購入までのステップが長い。
一覧ページにくるお客さんは、カテゴリー名で指名検索。
詳細ページの場合は、商品指名検索。
商品指名をする場合が、いちばん購入までが近い。しかし、「他のサイトで扱ってないかしら」という理由で、離れる人もまた多し。
ざっくりとですがこんな構成。素人には違いがわかりませんでしたが、今後着目点を変えて、マーケティングのしてんからネットサーフィンするのもありやなって思いました。
結局何が言いたいかというと、
感じるな、考えろ。
webマーケティング概論１−１
昔腹筋を割っていましたが、最近は綺麗に脂肪が乗って、
脂肪がシックスパックです。
webマーケティング概論
全部で５回。連続ではなく、飛び飛びでやります。
久々に学生感覚の座学なのでめっちゃ新鮮しかし最後まで集中できるのか
webデザイナーとしてホームページを作るとき、マーケティングの視点からも見ていけるようになろうねという授業。
サイトやホームページを作成した後、
どのようにして成果を挙げるかを考えてねみたいなね。的なね。
どんなホームページにも成果があります。
作って成果を挙げて、初めて価値が生まれる。売り上げとかアクセスとか。
ホームページを作るとき、こんな風にすれば見てもらえるんだということについて学ぶ講義でした。
講義は全5回、今回は1回目のwebマーケティング！
１、webマーケティング
２、webディレクション
３、web解析
４、webプロモーション
５、SEO
---------------------------------------------------------------------
webマーケティング概論
第一回
webマーケティング
成果を挙げる
まず、webサイトの種別を考えます。
○ネットショップ
○ECサイト
○コーポレートサイト（企業）
○ポータル（玄関、入り口）サイト
○ブランドサイト
○ヘルプサイト
○検索エンジン
○まとめサイト
○Q&Aサイト
○SNS
では、これらのサイトにおける成果とは何でしょうか？
たとえばポータルサイトの成果（コンバージョン）は、
お客さんがそのサイトを使うことにより、スムーズに物事が進むこと。
コーポレートサイトでは、
直接的には売り上げの数字にはつながりませんが、
会社の信頼や、ちゃんとした企業かどうかなどをみることが目的です。
ブランドサイトでは、お客さんとそのブランドのコンタクトポイントを発生させる。セブンヒッツ（7回の接点で意識し始める）の法則に則っています。
検索エンジンは、googleやyahooのことです。これは広告やバナーで収益を得ているようです。新機能を実装し、リニューアルしながら、広告を載せる。
というか、大体は広告が収入元っぽいですね。
で、上に挙げたみたいな、サイトを作るとき、最終的にどこの数字があがれば成果なのかを事前に調べておくことが大切です。
「Google Trend」を使うと、一般的なキーワードを用いて簡単に検索の時期が見れます。
Google Trend、ググったら出てきます。
こんな感じ。
「忘年会」というワードでの結果。
このグラフで、一般ユーザーによるgoogle検索の解析ができるのです。
---------------------------------------------------------
「マーケティング」とは？
ここで問題です。
Ｑ：「裸足の島があります。あなたは、この島に靴を売りにいきますか？」
これをグループで考えました。
ちなみに、クラス内でも
売りに行くという人がほとんど！まあ予想通りですね。
では、
Ｑ：「裸足の島があります。あなたは、この島に靴を売りにいくことになりました。まず初めに何を懸念しますか？」
ここで挙げられる懸念を事前に対策しておくのが、マーケティングというものの本質的な考えだそうです。
○先に調査をして売りにいくか行かないかを判断する
○データを取っていくかいかないかを判断する
ここがメインの考え方になります。
調査すべきデータは、
○島の人口
○男女比
○経済面
○年齢
○なぜ靴を履かないのか？
○どういう靴を持っていくべきか？
○競合の存在
○住んでいる場所、売る場所
挙げだすとキリがないですが、つまりこういうことらしい。
考えるな感じろは通用しない世界なんだって〜( ◠‿◠ )
で、マーケティングを要約すると、
3Cを考えること。
Customer-お客さん（年齢層は？性別は？etc）
Competitor-競合（ライバル会社は居るか？どのように対抗して行くか？etc）
Company-自社（メリットはあるか？自社の技術で実現可能か？etc）
この三つを抑えて調査することが大切らしい。
新しく何かを進めるとき、設計の段階でこの３つに着目できるかで大幅に変わってくるようです。
反対に、これらを無視して進めるやり方を、
KKKDという。
K-カン
K-好み
K-経験
D-度胸
わし完全にこっち派やん〜〜〜
このKKKDで物事を進めると、あまり成果は出ない。
また、客先でプレゼンするときに、なぜ？と聞かれたときにカンとか好みとか言ったらやばいので答えられない。
いまだにこういった企業は多いそうで、
つまり事前に調べたデータに基づいた考えで設計をすることが大切。
余談ですが、最近はサイトやイラスト等、技術における製作単価はかなり下がってきています。
その理由として、ひとつはCMSの普及。
CMSとは、コンテンツマネジメントシステム。ワードプレスやECcubeなどがそうです。
無料、もしくは安価で提供されている、テンプレートや便利なサイトが出てきたことでなかなか技術者の立場は肩身の狭いものになってきて居るらしい。
また、競争相手が増えてきています。製作する人が増えている。
フリーランスや、海外の人など。
それとね、
「友達に技術の安売りをしない。」
これに尽きます。本当に。
後半へ続きます。
Photoshopスタート！！
前回の更新からかなり経ちました。
HTMLとCSSは、
無事に全工程を終え、テストも済み、
最近はポートフォリオやwebサイトを作るのに勤しんでおりました。
すでにいくつか下書きしてますが、まだまだブラッシュアップが必要ですね。
で、大きく話は変わりますが、
本日よりフォトショに入ります。
Photoshopとは
現在のバージョンはCC2017
デジタル加工（画素加工）ソフトの最高峰。
フォトショップとか正直、買ったはいいけど使い方わからんくて放置してる人なんかも多いんじゃないでしょうか？？
一緒に頑張っていきましょう！！
最終的にはバナーを制作できるようになるまで頑張ります。
-------------------------------------------------------------------------------------
ど素人がはじめるPhotoshop！！！
カラープロファイルをweb用に設定する
まずは初期化をして、セッティングを始めます。
カラープロファイルをweb用に設定します。
これは出力に使うモニターに適切な色を扱うための設定らしい（？）
[編集]メニューから[カラー設定]を選択します。割と下のほう。
この部分をWeb・インターネット用−日本にします。
この設定では、色領域がsRGBになります。
sRGBとは、
○マイクロソフト社が定めた色空間で、ほぼすべてのモニタで完璧に再現できる。
○表現できる色の範囲が狭い
○ざっくりとしか色が表現できないので、プロ向きではない。
違う設定のカラープロファイルでデータを受け取ることが後々あると思います。
その場合はダイアログが出るんで、臨機応変にしてね。キャプチャがないので説明が
むずい！！！
画像の保存時はカラープロファイルを埋め込むことを忘れないようにしましょう。これも後でキャプチャつきで説明します。
--------------------------------------------------------------------------------------------
環境設定をweb用にする
[編集]→[環境設定]→[インターフェース]
さらにインターフェースの中のワークスペースを選択します。
赤枠のなかの二つのチェックを外して、
パフォーマンスで赤線の部分が70％超えてないか確認します。
これが70%超えていると、PC内のメモリの70%以上をフォトショに食われるということで、かなり重くなるそうです。
単位、定規についてはピクセルを指定。
グリッド線についても１０ピクセルの１０分割指定です。
なんかよくわからんけど、こういう設定にしたらいいよとのことです。
後々わかってきたらまたブログあげるんで、
これからはフォトショメインに頑張っていきます。
HTML/CSS-14日目
横組みシンプルメニューを作る
CSSもかなり進んできました。
はよフェス行きて〜
-------------------------------------
CSSのプロパティで、displayというものがあります。その中で特に混同しやすい
inline-blockとinlineについて考えます。
inline-blockとinlineの違い
inline-block
一言で言うと、インライン要素のように使えるブロック要素。幅や高さを指定できる。
inline
インライン要素。幅や高さは指定できない。
この二つの共通点は、
ブロック要素のように、ブラウザの左端から右端まで領域を取らないこと。
また、floatしなくても勝手に左からつめて並びます。
今回はブロック要素にfloatの方法ではなく、
inline-blockを使って横並びメニューを作ります。前回より圧倒的簡単。
完成系はこいつです。
作っていきます。
横組みリストメニューを実装する
HTMLはこれです。
項目のみのリスト。
CSSはまず、ブラウザのオート余白を消します。これ毎回しましょう。
ulに対し、リストのマーカーを消します。
リストの内容のスタイルを指定していきます。
文字の色を指定し、
hoverを指定します。
完成です。
項目2のところにカーソルを載せています。
hoverプロパティが効いてます。
inline-blockがわかりやすいように枠線をつけてみました。
この赤い枠線がinline-blockの持つ領域です。floatを使わなくともボックスが横並びになるのがわかります。
ちなみに、hoverプロパティを使ってこんなこともできます。
このコードの赤線の部分。
transition:0.5s;
これで0.5秒かけて変化するということを指定します。
上の
.Atype ul li a
の中のtransitionは、hover後の変化を指定しています。
下の
.Atype ul li a:hover
の中のtransitionは、hoverしたときの変化を指定しています。
これをブラウザでやってみると、
この項目５にカーソルを載せると、
0.5秒かけてこうなります。
カーソルを離すと、また0.5秒かけて元に戻ります。
まだまだアニメーションプロパティはありますが、また今度！
HTML/CSS-13日目
はじめてセルフのジェルネイルに挑戦したんですが、
二度としたくないと思いました。
-------------------------------------------------------------
今日はこないだからやってる２段組レイアウトを少しいじってから、ナビメニューを作ってみます。
幅を％指定する
CSSで幅を指定するとき、pxをメインで使用して来ましたが、今回は％で指定してみようと思います。
pxは絶対値と呼ばれ、ブラウザのサイズが変わってもサイズは変動しません。
しかし％を使えば、（例外もありますが）サイズを変動させることができます。
％は、
こんな感じで使います。
じゃあこの場合、widthは何に対しての90％になるのか？という話ですが、
％が指定されたセレクタのひとつ外の要素
この場合、wrapperはbodyに内包される子要素です。
なので、これはbodyに対して90％で出力されます。
要するにbodyのサイズが変われば、wrpperのサイズも常にその90％を保って変動するということです。
しかし、親要素のサイズがpxで指定されていると、親要素のサイズは変わらないので、(今回でいうbody)、wrapperの90％も変動はしません。
このサイズによって変動する設定を持つサイトを、
レスポンシブサイトといいます。
PC用サイトをスマホで快適に見られるようにと、最近ではよく使用されています。
------------------------------------------------------------------
ナビメニューを作る
目指すのはこの形です。
たて向きと横向きの2種類のメニューを作ります。
この画像、横並びメニューの項目５が色違いますよね。
これはカーソルを乗せたときに色の変化が起こるように指定しています。
これも作っていきましょう。
HTMLはこんな感じ。
では、ここからCSSを記述します。
まず、リストのマーカーを消します。
line-heightについては、IE6以前のバグ対策用だそうです。
一気に増えた
各要素についてのコメントは記載していますが、
line-height: 34px;
これについて、ボタンの高さと行の高さは同じです。
heightで指定することも可能ですが、そうすると文字が中心に来ないので、また別で文字の高さを指定することになります。
また今回はline-heightにpxという単位がついていますが、これは一行のみの文字列を上下中央におきたいときに使用します。複数行のときは単位をつけずに調整しましょう。面倒そう。
text-decoration: none;
下線はHTML側の<a>タグで自然に発生するので、ここで消しといてあげましょう。
ブラウザではこうなります。
CSSに少し細工。
ボックスの内側に陰をつけました。
その下にhoverという擬似クラスを与え、カーソルが乗ったときの挙動を指定します。
.Atype ul li a｛....｝
.Atypeクラスの中の、<ul>の中の、<li>の中にある、<a>に作用してくださいねという指定方法です。
これでたて型メニューが完成しました。
少し立体感ない？
項目1にカーソルを乗せました。
へこんだっぽくない？
次は横並びのやつを作ります。
これであらかじめ全体の幅を指定しておきます。これをしないと、ブラウザの幅が狭くなったときに横幅を保ってくれません。
heightについて、このulの中にある子要素はfloatで左に浮かせます。そうすると、親要素であるulは、浮いているこのリストのボタンを認識できなくなります。
これを回避するため、前回はclearを使って解決しましたが、
今回はあらかじめ親要素に高さを持たせることで解決していきます。
さらに記述します。
floatで先頭を左に、後続の要素を右に回り込ませます。
ここはもうさっきのたて並びと同じ。色だけ変えていきます。
hoverプロパティを書いていきます。
これもさっきと同じ。
完成しました。
へこんだ感じになってない？
HTML/CSS-12日目
先日作った二段組のレイアウトですが、
全ての要素のpaddingとmarginはそれぞれ10pxずつでした。
でも、よくみるとなぜか余白がバラバラ......。
今回はmarginとpaddingのルールについて説明します。
そもそもmargin（外向きの余白）は、垂直方向には隣接するマージンは加算されません。
大きい方の値のみ適用されます。
でもその中で例外が存在します。
それについて説明します。
こないだ作ったレイアウトがこちら。
これ、余白が均等ではありません。
この理由を解明していきます。
まずはこんな風に余白に番号を振ります。
で、各番号について説明して行きます。
コードはこちら。コード見ながらじゃないとわかりづらい。
CSSです。
まず①、外側の余白。
これは上下左右均等です。
div.wrapperの内側のpadding:10px;
と、
headerとfooterのmargin:10px;
が、加算されて20pxになっています。
ルール１：paddingとmarginは加算される。
②について。
これは、
headerの外側下のmargin:10px;
と、
nav,articleの外側上のmargin:10px;
が、加算されています。
ルール２：marginの上下間のmarginは相殺が原則だが、floatしたものとは加算される。
CSSをみてみてください。
navとarticleはfloatされています。
③、
やたら広い余白。
navは左寄せ、
articleは右寄せなので、ここに関してはなんのあれもないです。
でももし仮に、
navとarticleを共に左寄せにした場合、③には加算された空白が発生します。
ルール③：フローとされた左右間のmarginは加算される。
④について、
フロートしたnavとarticleと、footerのmargin:10px;が相殺されています。
ルール４：フロートされた要素のmarginでも、次要素がclear:both;すれば、相殺される。
以上！
HTML/CSS-11日目
最初の方とかめっちゃきちんと内容書きよったのに最近ものっそい雑になりよる。
どうでもいいけど鶏に似合うスニーカー探してます。
今日は２段組のボックスレイアウトを作ります。
----------ぱっ-------------------------------------ぱっ----------------------------------------
ボックス要素を使用して二段組のレイアウトを作っていきます。
完成を目指すのはこの形。ものすごいレゲエ臭。
早速やっていきましょう。
中身を作る（HTML）
では、HTMLから。
完成図、わかりづらいけどグレーの背景色の中に白いまとまりがあって、
その中にさらにヘッダーやらなんやかんやと、各要素が入っています。
この白い、二段組ボックスレイアウトの一番外側のひとを、一般的にwrapperと呼びます。
HTMLで中身を書いていきます。
<header><article><nav><footer>
そしたらそのwrapperの中にさらに上の4つの要素があるので、適当にタグを作って書いていきます。
<header>には<h1>が、
<nav>には<ul>が、基本的には必須となります。
装飾なしですが、中身はこれで完了です。意外と少ないですね。
調子乗って色は自分好みに変えながら進めます。
完全に調子に乗った輩の挙動。
-------------------------------------------------------------------
各要素を装飾する（CSS）
CSSを書いていきます。
CSSを書き始める前に、まず、これらのすべての要素がボックスになっているか確認しながら進めたほうがいいです。今回ははしょる。
全体の背景色を決める
ここでついでにリセットもしておきます。
さらに、全体の背景色を設定。
少し詰まって、背景も変わりました。
ボックス関連を指定
ここから、
ボックス関連を指定していきます。
wrapper
外側からせめて行きましょう。
.wrapperはヘッダーやフッターなどを内包する一番大きい外側の箱です。
赤い下線部marginの10PX autoは、垂直方向に10PX、さらに左右方向に自動で余白を取って配置してという命令。
さらにそのネストに当たるボックスについて書いていきます。
header
頭の部分です。
背景色、高さ、内外余白を指定します。
横幅は指定しないので、外部余白分のみ左右に余白が発生します。
article
右側の箱です。黄色いやつ。
幅と高さを指定し、floatで右側に浮かせます。
nav
左側水色の箱です。リスト入りのやつ。
幅と高さを指定し、左側に浮かせます。
footer
一番下の箱です。
clear: both;
footerの上部にはnavとarticleがありますが、これら２つはfloatにより浮いています。
clear: both;と書くことで、フロートによる要素の回り込みを解除します。前回のブログでやったやつ。
これで完成です。
ちなみに、footerのclearを書かないとこうなります。
なぜなら、navとarticleがフロートにより浮いているから。
親要素であるwrapperがこの浮いている２つを認識できないのです。
footerにclearをかけてやることで、親要素にfooterを認識させ、footerまでの領域をwrappwrが確保できるようにします。
では、footerがない場合に領域を確保させるには？
clearfixを使う
先日のブログに書いた「clearfix」を使います。
親要素の最後に、clear=bothを含んだブロックレベル要素をおく、というやり方です。
おさらいもかねて、改めてやってみます。
①divにクラス[clearfix]を与える
クラスを二つ持たせるのは問題ないので、まとめて持たせてあげましょう。
②外部CSSにclearを書き込む
.clearfix:after
で、clearfixというクラスをもつ箱のafter(後)に、このCSSを適当します。という意味になります。
content="";
CSSから文字を出力することが可能になります。""の中に文字を入れると、clearfixというクラスを持つ箱の後に、その文字列が出力されます。
display: block;
ブロック要素にします。clear=bothを含んだブロックレベル要素をおかないと解除されませんので、ここでブロック要素にします。
clear: both;
これで解除の命令を出します。
綺麗にまとまりました。
これで段組レイアウトボックスは完成です。
レッツトライ↑
