webエンジニアになるために半年間死ぬ気で勉強するブログ(あと人のお金で焼肉行きたい)

可能な限り楽して生きていきたい。好きなものだけ食べて痩せたい。控えめに行っても玉の輿乗りたい。ほんとはプライベートブログにしたい。何もしてないのに尊敬されたい。家から出たくない。

Photoshop-3日目

 

今週の金曜日は〜〜〜〜〜

 

 

 

休みじゃ〜〜〜〜〜〜〜〜!!!!!!!!

 

 

 

 

 

 

 

 

レイヤーについて

レイヤーパネル

 

 

 

 

概念としてはイラレと同じで、複数の透明なフィルムを重ねてひとつの画像としています。

 

f:id:mocha0426:20170809131331p:plain

 


右側のこのパネルです。

 

 

f:id:mocha0426:20170809131356p:plain

 

 


この部分でレイヤーのオンとオフができます。出したり消したり。

このときの背景部分は市松模様じゃなくて透明です〜絵描きさんならわかると思う

 

 


alt+クリックで単一レイヤー表示(一枚残し)と、全レイヤー表示(全表示)を切り替えられます。

 

Photoshopは、選択したレイヤーのみしか編集できません。

 

f:id:mocha0426:20170809131413p:plain

 

 

これで言うと、レイヤー2しか編集ができないってことですね〜〜

 

新規レイヤー作成

 

レイヤーはここでつくれるよ

ctrl+クリックで背面にも作成できるよ

 

f:id:mocha0426:20170809131434p:plain

 

何かを書き込みたいときは、新しいレイヤーに書き込んだほうがいいかも

 
コピーする

 

レイヤーを新規作成のところに持っていくと増えるよ(コピー)



f:id:mocha0426:20170809131503p:plain

 

 

実は移動ツールを選択した状態でalt押しながら、レイヤーをドラッグしても増えるよ(裏技)

 

 

f:id:mocha0426:20170809131520p:plain




ctrl+クリックで選択レイヤーを変えられるよ

 

 

 

 

 

 

 

 

名称変更


名前のところダブルクリックで、レイヤーの名称が変わりますピ

 

f:id:mocha0426:20170809131603p:plain


 

こうやって前面とか背面とか入れ替えてね

 

 

f:id:mocha0426:20170809131620p:plain

 


ちなみに、レイヤーの入れ替えを紹介したけど、
背景レイヤーだけは粘って変えられない仕様になっている

 

 

 

 

 

 

 

背景レイヤーと通常レイヤー

 

f:id:mocha0426:20170809131648p:plain

 

この赤い部分を通常レイヤー、
青い部分を背景レイヤーといいます

 

 


他と違う挙動あり

○重なり順番が変更不可
○消しゴムツールで透明に消せない

 

 


たとえばJPEG形式って知ってますかね

 

f:id:mocha0426:20170809131708p:plain

 

これの白いところ、消しゴムで消してるんですが透明になりません


ここが白くなる理由は、JPEG形式には透明という概念がないからですねー

 

背景レイヤーは同じ考え方らしい


なので、背景レイヤーのみは消したら背面の背景色が出てくる仕様になってます


では背景レイヤーを通常レイヤーに変換しましょう

 

 

f:id:mocha0426:20170809131731p:plain

 

 

これでおkおすだけ

そしたら通常レイヤー簡単にできます

 

 

 

 

 


レイヤーの結合

 

f:id:mocha0426:20170809131803p:plain

 


見えにくいけど二つのレイヤーを選択して、右クリック

 

f:id:mocha0426:20170809132434p:plain


どん

この赤いところね

 


レイヤーを結合すると利点もあるよ


○データが軽くなる
○移動と変形が楽
○フィルター加工もできる


でもデメリットもあるよ

 

○一枚にしたレイヤーは分解不可能

 

覆水は盆にかえりませんよね


そういうことです

 


ちなみに、

alt+「レイヤーを結合」をクリックで、
元のレイヤーを残したまま合体できる。

 

 

 

f:id:mocha0426:20170809132450p:plain


レイヤーのグループ化

 

f:id:mocha0426:20170809132507p:plain

 


この二つを選択して、赤い枠内のフォルダのアイコンをクリックすることでこの二枚をグループ化します。


この長所は、


○グループ名を選択して編集すると、そのグループ内のすべての要素について一気に編集できる(レイヤーリンクと同じ)

○グループ名を複製すると、その中身も含めすべてを一気に量産できる。looks like ジャニーズ

 

 

f:id:mocha0426:20170809132539p:plain

 

ここを選ぶことで編集をレイヤーかグループか選べるよ

 

 

 

 

 

 

レイヤーのロック

 

f:id:mocha0426:20170809132555p:plain

 

ここのロックについて説明します

 

 

 

 

透明ロック



f:id:mocha0426:20170809132648p:plain

 

画素部分だけに描画
透明部分には描画されません

 


透明部、画素部の描画をロック

f:id:mocha0426:20170809133209p:plain

 

移動は可能

 


移動のみロック

f:id:mocha0426:20170809133226p:plain

 

描画は可能

 

 

移動、描画すべてロック

f:id:mocha0426:20170809133250p:plain

 

重なり順のみ変更可能

 

 

 

 

 

Photoshop-2日目

 

最近500mlのコーラを飲みきれんくなって、「これが大人になるってことか」って思った

 

ツールの続きします

 

 

 

 

 

Photoshopツール

 

スポイトツール


色をマネっこするやつ

 

f:id:mocha0426:20170807234704p:plain

これ

 

 

めっちゃ楽しい

 

f:id:mocha0426:20170807234732p:plain

 

 

赤枠のところに拾ってきた色が落ちてます。これ使えそう

 


てのひらツール

 

 

自由に動かせるやつ。

 

f:id:mocha0426:20170807234805p:plain

これ

 

他ツールを使っているときでも、スペースキーを使うと手のひらに切り替わる!

 

 

前回のズームと、手のひらのショートカットはイラレでも同じなので覚えておく

 

 

 


回転ビューツール

 

 

 

絵を描くとき、紙を回す感じのやつ。

 

f:id:mocha0426:20170807234901p:plain

 

手のひらの長押しで出てきます。

 

 

f:id:mocha0426:20170807234916p:plain

 

 


この赤いところ(ビューの初期化)で元に戻るよ

 

 

 

 

 

ブラシツール

 

 

ピクセル描画に使います。
本当は筆圧を認識してくれるペンタブを使うのがよかばってん、わし持ってない

 

 

f:id:mocha0426:20170807234951p:plain

これ

 

 

描画色を描画色ボックスまたはスウォッチからえらぶ

 

f:id:mocha0426:20170807235021p:plain

 

 

緑のところ選択するとカラーピッカーのウィンドウが出てきます。

 

hのところは間違えました。。。

 

 

f:id:mocha0426:20170807235104p:plain

 

 

 


ここクリックでブラシのサイズ変更できます。

 

 

f:id:mocha0426:20170807235127p:plain

 

 

なんかカビ生えたみたいなった。。。

 

 

 

f:id:mocha0426:20170807235144p:plain

 

 


こんなんなっても、



f:id:mocha0426:20170807235207p:plain

 

 


復帰で復活します。

編集した画面を保存せずに、再度開いてくれる。

保存はしないのがミソよ


ちなみに、「」←このキーでブラシサイズが変更できる便利機能。

 

 

f:id:mocha0426:20170807235229p:plain

 

 

赤枠部分「硬さ」変更で、

黄色が硬さ100%
青色が硬さ0%

同じ100pxでも輪郭が違うとかなり変わって見えるね



f:id:mocha0426:20170807235248p:plain

 

 

 

 

↑不透明度を落とすとこんなかんじ

 

f:id:mocha0426:20170807235305p:plain

 


↑流量を変えるとこんなかんじ

プリクラで言うとネオンペンみたいなかんじね


赤枠が不透明度落としたやつ
黄色枠が流量落としたやつ

割と違うね


ちなみにブラシツールでは、

数字を押すとワンキーショートカットとして反映されます

不透明度→数字キーで好きな数字を入力
流量→シフト+数字(テンキーだめかも)

f:id:mocha0426:20170807235348p:plain


あとこの赤枠の部分に隠れスライダーがあるよ



f:id:mocha0426:20170807235403p:plain

 

ここの赤いところで描画色と背景色を入れ替えられます

Dキーを押すと描画と背景色がデフォルトに戻るよ(黒と白)

 

で、で、色を変えるのにさっきはカラーピッカーを使いましたが、今回はスウォッチを使って変えてみましょう

 

f:id:mocha0426:20170807235417p:plain


ここの三本線を押すと

 

f:id:mocha0426:20170807235433p:plain

 

これが出てくるんで、好きにパレット変更をどうぞ
ちなみにスウォッチの初期化でリセットできます。


カラーパネルもこの三本線でいろいろできるんでやってみて(説明が若干だれてきた)

 

f:id:mocha0426:20170807235556p:plain

 


いざ描画とせん、我行かんとす(?)

 

 

 

f:id:mocha0426:20170807235541p:plain

 

 

雪を降らせてくださいって言われたけど、何回みてもカビにしか見えん、なんかごめん

 

 

 

操作の取り消しについて

 

 

Ctrl+zで戻れるのは直前のひとつの操作のみ。連打すると消えたり出てきたりします。

 

連続で戻りたいときは

 

alt+Ctrl+z

 

また、進みたいときは

 

Shift+Ctrl+z

 


いやでもぶっちゃけヒストリーパネルのほうがわかりやすいよ

 

 

f:id:mocha0426:20170807235655p:plain

 

 

ウィンドウ>ヒストリーで赤いとこのちっさいパネルが出て来るんでそれつかおう

 

ちなみにこのヒストリーは50個までしか覚えてないらしいので注意
50人前の元カレまでしか覚えんらしいよ
上等ですね!よくやった

 

 

ヒストリーブラシツール

 

ヒストリーパネルで指定したヒストリーブラシソースの画像をペイントするツールです。

今回は白黒のひまわりを部分的に色付けします。もとの画像が色付きじゃないとできないので注意

 


1、まずはこのひまわりを遺影にしてやろう

 

f:id:mocha0426:20170807235759p:plain

 


2、ウィンドウメニューからヒストリーを開こうではないか

3、ヒストリーブラシを使って復活させようではないか

 

f:id:mocha0426:20170807235815p:plain

赤枠のところをそれぞれ確認してね

 

 

4、やっぱフォトショ向いてないかも知れん

 

f:id:mocha0426:20170807235937p:plain

 

5、アートヒストリーブラシはヒストリーブラシの長押しで出てくるよ

 

 

 

 

 

 


修正する


修正できて、勝手に周りになじんでくれて、この上ねえな

 

 

f:id:mocha0426:20170808000028p:plain

これ

 

フォトショといえば修正なんですが、偏見でしょうか

 

 

スポット修正

 

f:id:mocha0426:20170808000059p:plain


この時計をきれいにします、赤枠のところね

 

f:id:mocha0426:20170808000116p:plain


すっげ

 

 

 


これはですねぇ、このオプションバーが大事なんですねぇ

 

f:id:mocha0426:20170808000141p:plain


ここの種類ってとこなんですが、

 

○近似色に合わせる→修正範囲の近くにあるピクセルを使って修正
○テクスチャ作成→修正範囲内のピクセルを使ってテクスチャを作成
○コンテンツに応じる→空気読んで回りにあわせる

 


Alt+クリックでクリック元の色を吸い上げて修正します。人間の肌とかはこれがいいかも。

 

 

 

修復ブラシ

 

f:id:mocha0426:20170808000206p:plain

 

この人を若返らせたい

 

シワとかクマとかね

 

f:id:mocha0426:20170808000336p:plain

 

 


Altで修正ポイントを吸い上げて、修正を繰り返すと、

 

 

f:id:mocha0426:20170808000426p:plain

 

ド下手

これはやばい


マジでセンスない

クリーチャーができた

 

 

でも正直ここまで知ってしまうと芸能人とかもうマジで信用できない、お姉さん悲しい

 

 

 

 


パッチツール

 

 

f:id:mocha0426:20170808000607p:plain

 


これは範囲を選択して修正するツールです。

 

写真は変わりますが、



f:id:mocha0426:20170808000649p:plain

 


こういうこともできます。オバチャンごめんね。

 

 


コピースタンプツール

 

 

 


なじみ機能無しの修正ツールです。

 

f:id:mocha0426:20170808000721p:plain


左側のツールね

 

f:id:mocha0426:20170808000735p:plain


これはなじみがないので、背景色まで忠実にコピーします


ゆがみフィルター


CC2015からの新機能。恐ろしいですばい、これは。

 

f:id:mocha0426:20170808000804p:plain

 

 

ゆがませたい範囲を選んで、フィルターからゆがみを選択。



f:id:mocha0426:20170808000836p:plain

 

 

っしゃ〜〜〜〜やれやれ

 

 

f:id:mocha0426:20170808000858p:plain


うっわ

 

f:id:mocha0426:20170808000928p:plain

 

 

いや、マジ誰

 

 

 

 

 

〜終〜

 

 

Photoshop-1日目

 


のろのろせんでさっと消えてくれ(台風)

 

 

あとばりばり身内ネタなラインスタンプができて大喜びしています

 

 

 

 

 


Adobe Bridgeの使い方

今回使っていくバージョンはフォトショCC2015。

 

 

Adobe Bridgeとは

 

フォルダ内の一覧をさっと確認してフォトショまたはイラレで開くためのソフト。

文字通り、フォトショ、イラレにおいてフォルダとの橋渡しになる。

 


起動したら大体こんな画面。

 

 

f:id:mocha0426:20170807232705p:plain

 

 

 


使用するフォルダはこんな感じでお気に入りに移しておきましょう。

 

 


写真を選別する

 


写真のチョイスやジャッジの力は完全に個人の力量です。
Bridgeで可能なので、やってみる。

 

 

写真を選択し、ラベルメニューを開く。

f:id:mocha0426:20170807232927p:plain

 

 

 

「選択」する。

 

f:id:mocha0426:20170807233001p:plain

 



 

 

 


黄色は第二候補のラベル。ショートカットキーでさくさく進めましょう。

 

f:id:mocha0426:20170807233024p:plain

 

 

 

f:id:mocha0426:20170807233052p:plain

 

 

星いくつみたいなレーティングもできるので活用しましょう。

 

 

 

 

 

 

f:id:mocha0426:20170807233109p:plain


左端のこのウィンドウで、ラベルや選択を確認できます。写真の加工に入る前に、まずは取捨選択を行うのが大事らしい。

 


ちなみに、自分で写真を撮るときはいっぱい撮っとけって言ってました。

 

f:id:mocha0426:20170807233128p:plain


右がわプレビュー画面の写真にカーソルをのせると、「ピン」と呼ばれるピント確認ができます。つまり拡大。

 

 

 


写真選択のコツ

 

○ピンとこないカットは捨てる。80%以上削れる。
○敗者復活は無し。まあまずスタメンにはなれない。恋愛と同じ。なんとなく良いはよくない。
○残りの10%〜20%でBridgeでチョイスし、レーティングする。

 

 


Bridgeでのデータの捨て方

 

 

消したいのを選択して

 

 

f:id:mocha0426:20170807233211p:plain

 

 

Deleteでこう!!!!

 

 

f:id:mocha0426:20170807233234p:plain

 


消すのが怖い人は、新規で削除候補みたいなフォルダを作っといて、移動させましょう。

 

 

f:id:mocha0426:20170807233251p:plain

 

 

 

 

 

 

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

 

グラフィックソフトウェア

 

 

概要


Photoshopとは?
Illustratoとは?

 

 

フォトショもイラレグラフィックソフトウェアと呼ばれる分類です。

 

Illustrator→ベクトル系ソフト
Photoshop→ラスター系ソフト

 

ラスターとは、画素加工ソフトのこと。
デジタル写真の加工ってことです。

 

ベクトル系ソフトは、パスを使って描きます。

 

 

最近ではお互いにお互いの機能を実装しつつあるようですが、状況に応じて使い分けてねだって〜

 

 


そしたらフォトショを開きますゥ〜

 

 

f:id:mocha0426:20170807233413p:plain

 

 

この右側の赤い枠のところを you say 「パネル」

 

 

f:id:mocha0426:20170807233443p:plain

 

こんな感じで引っ張り出したりも可能。すきにカスタマイズしていいらしい

 


ワークスペース

ンッンー♂

 

さっき言ったように、パネルは引っ張りだして好きなようにしていいです。
はじめは初期設定。

散らかした後に初期設定に戻したいときは、

 


1、オプションバーの右端のワークスペースメニューを「初期設定」にする。

2、ワークスペースメニューより、「初期設定をリセット」を選択。

 

f:id:mocha0426:20170807233612p:plain

この赤いところがオプションバー

 

 

f:id:mocha0426:20170807233746p:plain

 

 

 

この部分を順番に押してね

 

 

また、独自のパネル設定を保存したいときは、

 

 

f:id:mocha0426:20170807233808p:plain

 

 

ここで名前をつけて保存。


なんかも〜〜〜〜〜ここまででかなりしんどい〜〜〜〜〜〜〜

 

 


ツールパネル

 

f:id:mocha0426:20170807233831p:plain

 

 


これね〜ツールパネル

 

f:id:mocha0426:20170807233849p:plain

 

 

 

これを押すと二列になるよ

 

今からはツールの使いかたをみていくよ〜〜って

ツールを使うときは、

 

 

1、ツールを選択
2、オプションバーを確認する
3、使用する

 

 

この流れを守ってねだって!!!

 


ズームツール


クリックした場所を数%〜3200%まで拡大します。でも拡大したらめっちゃ画質悪い。ここがイラレとの違い。イラレはどんだけ拡大してもむっちゃなめらか。

 

 

f:id:mocha0426:20170807234003p:plain

これ

 

 


拡大、縮小をします。



以下はオプションバーだけ切り取った画像

 

f:id:mocha0426:20170807234032p:plain

 

 

ウィンドウサイズを変更
→拡大縮小にあわせて、ウィンドウサイズを自動で変更してくれる。

全ウィンドウをズーム
→複数の書類を一気に拡大縮小してくれる。通常はオフを推奨。

スクラブズーム
→画面左へ引っ張ると縮小、右へ引っ張ると拡大

 


ちなみによく使うショートカットは、

 

 

Ctrl+1=画像の100%表示
(ブラウザ表示と同じサイズ)

 

alt=逆操作
拡大モードでalt押しながら操作すると縮小になるってこと

 

Ctrl+0=画像の全体表示
(無理やり収めるよ)

 

 

で、拡大縮小してあそんだ

 

 

f:id:mocha0426:20170807234147p:plain

 

 


めっちゃ拡大したらなんか線出てきた

ピクセルグリッドというらしい。

 

[表示メニュー]→[表示・非表示]→[ピクセルグリッド]のチェックをオフにすると消えるよ

 


作業するときはCtrl+0で全画面表示にしてのびのび作業しようね

 

 

 

 

 

 

 

webマーケティング概論1−2

八代亜紀の舟唄まじかっけ〜〜〜〜〜〜〜

 

 

はい。

 

 

前回の続きです。

 

 

 

 

 

 

 

webの価値を考える

 


今回はwebの価値を考えます。

 

webはターゲティングメディアです。webを使う人はSNS等とは違い、目的を持って利用する人がほとんど。

 

なので、

 

webサイトを利用する人が何を目的としているかを考える。


その価値を考えて、理解しないと提供もできません。

 

 

 


では、メリットとデメリットを考えていきます。

 

 

 

 

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

 

 

web利用のメリット

 

○無料(広告費でまかなえる)
○手軽(手軽でなきゃwebじゃない!)
○誰とでもつながれる
○見やすい(デザイナーがいるからね)
○匿名性(良くも悪くも)
○遠くのものも簡単に入手
○エコ
○豊富な情報量
○すぐに使える
○共有が可能
○比較が簡単
○使う人を選ばない
○ログが残せる(蓄積される)
○リアルタイム
○発信、交換もできる
GPSなど

 

 

めっちゃ挙がった〜グループワークやべえ

 

ここで挙がったことの大半は、

みんなが当たり前だと思って居ること。

 

しかし、

応答の速さや、検索ができることなどは挙がりませんでした。

 

なぜなら、みんなが普段、当たり前だと思って居るからです。

 

当たり前のことが当たり前にできなければ、利用者は減っていきます。

 

では反対に、デメリットを考えます。一般ユーザの不満が大爆発します。

 


web利用のデメリット


○プライバシーが守られない
○情報が豊富過ぎて選べない
○検索しないと見てもらえない
○通信料など見えないお金がかかる
○端末によって見え方が一律ではない
○素人には信憑性の判断が難しい
○ウイルス感染
○電波や電源がないと使えない
○ネット依存
○保存され辛い
○後回しにされやすい
○シニアには難しい
○幼い子の利用リスク
○決済にハードルが低い
スマホばかりでキーボードがたたけない
○「見て」「触って」ができない
○「軽い気持ち」で取り返しがつかない
○読みづらい
○埋もれやすい
ブルーライト、疲れ目

 

 

これもすごい数wwwwww

 

 

メリットもデメリットも死ぬほど挙がりましたが、
デメリットを解決する策を考えます。これもマーケティングのうち

 

 

デメリットの解決策を考える

 

面接みたいですよね。あらかじめ質問を予測しておいて、答えを準備する的な。

 

 

 

例を挙げていくつかピックアップします。


○保存されにくい→繰り返し告知する

簡単なのは広告。それも、出す相手を考える。

たとえば、過去にそのサイトを訪問したことある相手を解析し、ピンポイントで表示します。
メルマガも、必要な内容であれば一日数度送る。

 

そのしつこさが許されるのが、webです。

でもしつこい男は、嫌われます。

 


○比較検討されやすい→選ばれる理由を考える

比較や検討が激しいweb業界。ここで勝ち残るには何が必要かを考えます。
お客さんが何を理由に選んでくれるのかをしっかり認識することが重要。自分の売り出したいものの価値はどこにあるかを理解することが大切。
「なぜそれを選ぶか?」を認識しよう。

 

 

○可読性が弱い→レイアウト、フォント、表現力

写真やロゴをうまく使うことや、商品名や原産をわかりやすくするなど、まずはそのサイトに長く居座ってもらうための工夫は必要です。
一人で搾り出すのもよし、グループで話し合うのもよし。

 


○実物が見られない→豊富な情報、表現力

たとえばアマゾンの「30日間返品ok」など。

お客さんが商品を購入する上でのデメリットやリスクをすべて払拭するような仕組みになっています。いや、でもアマゾンのリスクが高くない?これ。

 

 

○後回しにされやすい→背中を押す

なんだかな〜実際にお店に買いに行くわけじゃないんで、あんまり購買意欲が湧かないのが現実らしい。

「残りわずか」「あと2席」など、後回しにできない理由を考えることが大切。
アパレルと同じで、背中を押す工夫がwebにも必要です。でもそのぶん、背中を押すことに失敗した時のリスクは甚だしいらしい。こわ。

 

 

 

マスメディアは不特定多数ですが、

正反対に、webはターゲティングメディアです。たぶんさっきも言った。
不特定多数ではなく、性別や年齢、エリア、価値観など、どの人をターゲットにするかを考える必要があります。

競合が少ない場所をターゲットに選ぶことや、ファーストビュー(スクロール前のページ)でいかに心をつかめるかも戦略の一つになってきます。

 

最後に、webページの構成をざっくりと考えます。

 

 

webページの構成の仕方

 

 

例えば、ある通販サイトではこんな作りになってます。

 

 

 

トップページ

一覧ページ

詳細ページ

カートページ
(このページのファーストビューで”買う”ボタンがないと、通販サイトとは判別されないようです。)

フォームページ

確認ページ

完了ページ(サンクスページ)

 


通販サイトの場合、完了ページにいくことがコンバージョン(成果)になります。

 

また、

どのページをメインに集客するかで、お客さんの動向が伺えます。

 

 

 

 

トップページにくるお客さんは検索サイトで指名検索をしている。
もしくは、検索したい内容のキーワードが合致しているので、競争率は低いが、購入までのステップが長い。

 

 

一覧ページにくるお客さんは、カテゴリー名で指名検索。

 

 

詳細ページの場合は、商品指名検索。
商品指名をする場合が、いちばん購入までが近い。しかし、「他のサイトで扱ってないかしら」という理由で、離れる人もまた多し。

 

 

 

ざっくりとですがこんな構成。素人には違いがわかりませんでしたが、今後着目点を変えて、マーケティングのしてんからネットサーフィンするのもありやなって思いました。

 

 

 

結局何が言いたいかというと、

 

 

感じるな、考えろ。

 

 

 

webマーケティング概論1−1

 

 

 

 

 

 昔腹筋を割っていましたが、最近は綺麗に脂肪が乗って、

脂肪がシックスパックです。

 

 

webマーケティング概論

 


全部で5回。連続ではなく、飛び飛びでやります。

久々に学生感覚の座学なのでめっちゃ新鮮しかし最後まで集中できるのか

 

 

 

 

webデザイナーとしてホームページを作るとき、マーケティングの視点からも見ていけるようになろうねという授業。

 

 

 

サイトやホームページを作成した後、
どのようにして成果を挙げるかを考えてねみたいなね。的なね。

 

 

 

どんなホームページにも成果があります。

 

 

 

作って成果を挙げて、初めて価値が生まれる。売り上げとかアクセスとか。

 


ホームページを作るとき、こんな風にすれば見てもらえるんだということについて学ぶ講義でした。

 

 

 

講義は全5回、今回は1回目のwebマーケティング

 

1、webマーケティング
2、webディレクション
3、web解析
4、webプロモーション
5、SEO


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


webマーケティング概論

 

第一回

 

webマーケティング

 

 

成果を挙げる

 

まず、webサイトの種別を考えます。

 

○ネットショップ
ECサイト
○コーポレートサイト(企業)
○ポータル(玄関、入り口)サイト
○ブランドサイト
○ヘルプサイト
検索エンジン
まとめサイト
○Q&Aサイト
SNS

 

 

 

では、これらのサイトにおける成果とは何でしょうか?

 

 

 

たとえばポータルサイトの成果(コンバージョン)は、
お客さんがそのサイトを使うことにより、スムーズに物事が進むこと。

 

 

コーポレートサイトでは、
直接的には売り上げの数字にはつながりませんが、
会社の信頼や、ちゃんとした企業かどうかなどをみることが目的です。

 

 

ブランドサイトでは、お客さんとそのブランドのコンタクトポイントを発生させる。セブンヒッツ(7回の接点で意識し始める)の法則に則っています。

 

 

検索エンジンは、googleやyahooのことです。これは広告やバナーで収益を得ているようです。新機能を実装し、リニューアルしながら、広告を載せる。
というか、大体は広告が収入元っぽいですね。

 

 

で、上に挙げたみたいな、サイトを作るとき、最終的にどこの数字があがれば成果なのかを事前に調べておくことが大切です。

 

 

Google Trend」を使うと、一般的なキーワードを用いて簡単に検索の時期が見れます。
Google Trend、ググったら出てきます。

 

f:id:mocha0426:20170804231807p:plain


こんな感じ。
「忘年会」というワードでの結果。

このグラフで、一般ユーザーによるgoogle検索の解析ができるのです。


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

 

 

マーケティング」とは?

 

ここで問題です。

 

:「裸足の島があります。あなたは、この島に靴を売りにいきますか?」

 

 

これをグループで考えました。

 

ちなみに、クラス内でも

売りに行くという人がほとんど!まあ予想通りですね。

 

 

では、

 

:「裸足の島があります。あなたは、この島に靴を売りにいくことになりました。まず初めに何を懸念しますか?」

 

 

ここで挙げられる懸念を事前に対策しておくのが、マーケティングというものの本質的な考えだそうです。

 

 

 

○先に調査をして売りにいくか行かないかを判断する
○データを取っていくかいかないかを判断する

 

ここがメインの考え方になります。

 

調査すべきデータは、

○島の人口
○男女比
○経済面
○年齢
○なぜ靴を履かないのか?
○どういう靴を持っていくべきか?
○競合の存在
○住んでいる場所、売る場所

 

挙げだすとキリがないですが、つまりこういうことらしい。

 

考えるな感じろは通用しない世界なんだって〜( ◠‿◠ )

 

で、マーケティングを要約すると、

 

 

3Cを考えること。

 


Customer-お客さん(年齢層は?性別は?etc


Competitor-競合(ライバル会社は居るか?どのように対抗して行くか?etc)


Company-自社(メリットはあるか?自社の技術で実現可能か?etc)

 

 

この三つを抑えて調査することが大切らしい。

新しく何かを進めるとき、設計の段階でこの3つに着目できるかで大幅に変わってくるようです。

 

 


反対に、これらを無視して進めるやり方を、

 

KKKDという。

 

K-カン
K-好み
K-経験
D-度胸

 

わし完全にこっち派やん〜〜〜

 

このKKKDで物事を進めると、あまり成果は出ない。


また、客先でプレゼンするときに、なぜ?と聞かれたときにカンとか好みとか言ったらやばいので答えられない。

 

いまだにこういった企業は多いそうで、
つまり事前に調べたデータに基づいた考えで設計をすることが大切。

 

 

 

 


余談ですが、最近はサイトやイラスト等、技術における製作単価はかなり下がってきています。

その理由として、ひとつはCMSの普及。

 


CMSとは、コンテンツマネジメントシステムワードプレスやECcubeなどがそうです。

無料、もしくは安価で提供されている、テンプレートや便利なサイトが出てきたことでなかなか技術者の立場は肩身の狭いものになってきて居るらしい。

 


また、競争相手が増えてきています。製作する人が増えている。

フリーランスや、海外の人など。

 


それとね、

「友達に技術の安売りをしない。」

 

これに尽きます。本当に。


後半へ続きます。

 

 

Photoshopスタート!!

 

 

 

 

前回の更新からかなり経ちました。

 


HTMLとCSSは、

 

無事に全工程を終え、テストも済み、

 

最近はポートフォリオやwebサイトを作るのに勤しんでおりました。

すでにいくつか下書きしてますが、まだまだブラッシュアップが必要ですね。

 

 

で、大きく話は変わりますが、

 


本日よりフォトショに入ります。

 

 

 

f:id:mocha0426:20170804000057p:plain

 

 

 

 

Photoshopとは


現在のバージョンはCC2017

 

デジタル加工(画素加工)ソフトの最高峰。

 

フォトショップとか正直、買ったはいいけど使い方わからんくて放置してる人なんかも多いんじゃないでしょうか??

 

一緒に頑張っていきましょう!!

 

最終的にはバナーを制作できるようになるまで頑張ります。

 

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

 

 

ど素人がはじめるPhotoshop!!!

 

カラープロファイルをweb用に設定する

 


まずは初期化をして、セッティングを始めます。


カラープロファイルをweb用に設定します。
これは出力に使うモニターに適切な色を扱うための設定らしい(?)

 

f:id:mocha0426:20170804000430p:plain

 

[編集]メニューから[カラー設定]を選択します。割と下のほう。

 

 

 

 

 

 

 

f:id:mocha0426:20170804000519p:plain


この部分をWeb・インターネット用−日本にします。

この設定では、色領域がsRGBになります。

 

 

sRGBとは、
マイクロソフト社が定めた色空間で、ほぼすべてのモニタで完璧に再現できる。
○表現できる色の範囲が狭い
○ざっくりとしか色が表現できないので、プロ向きではない。

 

 

 


違う設定のカラープロファイルでデータを受け取ることが後々あると思います。
その場合はダイアログが出るんで、臨機応変にしてね。キャプチャがないので説明が
むずい!!!

 

 

 


画像の保存時はカラープロファイルを埋め込むことを忘れないようにしましょう。これも後でキャプチャつきで説明します。

 


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

環境設定をweb用にする


[編集]→[環境設定]→[インターフェース]

 

f:id:mocha0426:20170804000604p:plain

 

 

さらにインターフェースの中のワークスペースを選択します。

 

 

f:id:mocha0426:20170804000619p:plain

 

 

赤枠のなかの二つのチェックを外して、



f:id:mocha0426:20170804000638p:plain

 

パフォーマンスで赤線の部分が70%超えてないか確認します。
これが70%超えていると、PC内のメモリの70%以上をフォトショに食われるということで、かなり重くなるそうです。

 

f:id:mocha0426:20170804000650p:plain


単位、定規についてはピクセルを指定。

 

 

 

 

f:id:mocha0426:20170804000704p:plain

 グリッド線についても10ピクセルの10分割指定です。

なんかよくわからんけど、こういう設定にしたらいいよとのことです。

 

後々わかってきたらまたブログあげるんで、

これからはフォトショメインに頑張っていきます。

 

 

 

 

HTML/CSS-14日目

 


横組みシンプルメニューを作る
CSSもかなり進んできました。

 

 

はよフェス行きて〜

 

 

 

 

 


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

 

 

CSSのプロパティで、displayというものがあります。その中で特に混同しやすい
inline-blockinlineについて考えます。

 

inline-blockとinlineの違い

 

 

inline-block

一言で言うと、インライン要素のように使えるブロック要素。幅や高さを指定できる。


inline

インライン要素。幅や高さは指定できない。

 

 

 

この二つの共通点は、


ブロック要素のように、ブラウザの左端から右端まで領域を取らないこと。
また、floatしなくても勝手に左からつめて並びます。

 

 

 

今回はブロック要素にfloatの方法ではなく、
inline-blockを使って横並びメニューを作ります。前回より圧倒的簡単。

 

 


完成系はこいつです。

 

f:id:mocha0426:20170727132941p:plain

 


作っていきます。

 

 

横組みリストメニューを実装する

 

 

f:id:mocha0426:20170727132953p:plain

 

 

 

HTMLはこれです。
項目のみのリスト。

 

f:id:mocha0426:20170727133010p:plain

 

CSSはまず、ブラウザのオート余白を消します。これ毎回しましょう。

 

f:id:mocha0426:20170727133025p:plain

 


ulに対し、リストのマーカーを消します。

リストの内容のスタイルを指定していきます。

 

f:id:mocha0426:20170727133039p:plain


文字の色を指定し、
hoverを指定します。

 

f:id:mocha0426:20170727133050p:plain

 

完成です。

 

f:id:mocha0426:20170727133104p:plain

 


項目2のところにカーソルを載せています。
hoverプロパティが効いてます。

 


inline-blockがわかりやすいように枠線をつけてみました。

 

f:id:mocha0426:20170727133126p:plain

 

この赤い枠線がinline-blockの持つ領域です。floatを使わなくともボックスが横並びになるのがわかります。

 

 


ちなみに、hoverプロパティを使ってこんなこともできます。

 

f:id:mocha0426:20170727133143p:plain


このコードの赤線の部分。

 

transition:0.5s;

 

これで0.5秒かけて変化するということを指定します。

 


上の


.Atype ul li a
の中のtransitionは、hover後の変化を指定しています。

 

 

下の


.Atype ul li a:hover
の中のtransitionは、hoverしたときの変化を指定しています。

 


これをブラウザでやってみると、

 

f:id:mocha0426:20170727133240p:plain

 

この項目5にカーソルを載せると、

 

f:id:mocha0426:20170727133258p:plain

  

 

0.5秒かけてこうなります。

カーソルを離すと、また0.5秒かけて元に戻ります。

 

まだまだアニメーションプロパティはありますが、また今度!