クライアントワーク ～メタ書き直し編～

横浜のおいしいパン屋ル・ミトロンのメタ書き直し

横浜神大寺にあるおいしいパン屋ル・ミトロンさん。今回のサイト制作では狙ったキーワードで検索1ページ目に入ることを狙っていたのですが、なかなか上位表示が上手くいかなかったため、SEOに詳しい学校の先生と再度相談して、meta情報を書き直しました。

横浜のおいしいパン屋ル・ミトロンは神奈川区神大寺にある、横浜のおいしいパン屋さんです。横浜のおいしいパン屋ル・ミトロンは毎日焼き立てのおいしいパンを横浜神大寺の町から皆様にお届けしています。横浜市営地下鉄片倉町駅、東急東横線白楽駅から徒歩14分！

ちょっと、かなり、、ねちっこい感じですが、今度はなかなか上手くいきそうです。

（余談ですが、metaだけでなく、h1タグはロゴ画像だったものを、テキストに変更。pタグもキーワードを多くして対応しています。）

インデックスが減ってしまった件

2週間ほど、諸事情でサイトそのものが消えてしまうトラブルがありまして、消える前のインデックスステータスは5/5だったのですが、復帰後4日目の今日時点では2/5ページのみです。

先生曰く、順位は初動のものでほぼ確定するそうですが、この3ページがインデックスされたら、少しは結果が変わるかな・・・？

コッペパン専門店ミトロンランディーのページ

ル・ミトロンカフェのページ

ル・ミトロンについてのページ

ちょっと時間がかかるのは404でほっといたバツなんでしょうか。しばらくはGoogle先生が気分次第で来てくれるのを待ちぼうけすることになりそうです。

アップしてから思うこと

食べログとFB強いな！に尽きると思います。授業でSEOちょろっと習っただけですが、ききかじったなりに、改めて観察するとOutlineを見るだけでも工夫がいっぱい詰まっています。この辺は今度別の記事で分析してみたいなぁと思っていたりします。

前回の記事はこちら

webdesign-nonnna.hatenablog.com

Google Analyticsだけじゃない高度(そうな？)アクセス解析ツール～Ptengine

アクセス解析ツール～Ptengineを使ってみるよ！

無料のアクセス解析ツールといえば、まず挙げられるのがGoogle Analyticsですが、ほかにも面白そうなツールを見かけたので今回制作したサイトに使ってみました。

www.ptengine.jp

こちらのPtengineというツール、売りはサーモグラフィでページ内のどのあたりが集中的にみられているかを視覚的に確認できることだそうです。
ちょっと面白そう！ということで、今回はざっくり導入編です。

Ptengine導入編

Ptengineのご利用料金は？

いろいろ制限はありますが、1サイトだけのお試しなら無料で利用可能です。
　・無料版だとヒートマップは1ページしか見れないみたい。
　・月間PV数上限25000までってなっていますが、今回超えることはなさそう。

導入の流れ

1.メールアドレスとパスワードを登録
↓
2.トラッキングしたいサイトのurlを入力。
（プロファイル名は適当で大丈夫です。）

↓
3.トラッキングコードをコピー

↓
4.コードをサイト内の各ページのbody内に貼り、サイトを更新。
下の方がPtengine、上の方にあるのがGoogle Analyticsのトラッキングコードです。
私は、直前に置く派です。本当はもっとscriptタグまとめちゃって良いと思いますが。。。

おおまかな導入の流れは以上です。

登録後プロファイルを開いたら、ついでにこの3つも設定しておきましょう。

・除外計測（自分のIPアドレスをカウント外にする）
・urlの統一（全てONで大丈夫です。）
・ヒートマップのページ管理
（ここでurl登録後、一日しないとヒートマップは使えないみたいです。）

フリープランだと個人情報の入力もメールアドレスだけですぐ使えるところが、非常にシンプルなシステムで良いですね。
（登録となるといろいろ入力させたがるサイトが多いですが、間口を広くするというのはこういうことですよね！）

もっと詳しく知りたい！Ptengine

以下、便利そうな機能紹介や、Google Analyticsとの比較記事などいろいろありましたので、リンクをぺたぺたと。
どうやら「はてなブログユーザー向け特別無料プラン」なんてのもあるみたいですね。

ohako-inc.jp
liginc.co.jp
staff.hatenablog.com

導入編まとめ

百聞は一見に如かず。というわけで今回は実際に入れてみた編でした。

「クライアントワークで作ったサイトを持つと勉強になるよ」というのはこういうことかーっというのがしみじみ実感できました。
私の個人ブログのコンテンツの非充実度では全くPV数見込めないので（←）、本当にクライアント様様ありがたや～ですね。

気が向いたら、解析編もやるかもしれませんノシ

横浜のおいしいパン屋ル・ミトロン

横浜のおいしいパン屋ル・ミトロン

横浜のおいしいパン屋ル・ミトロン(Le mitron/ルミトロン)。ル・ミトロンは神奈川区神大寺にある、横浜のおいしいパン屋さんです。横浜市営地下鉄片倉町駅、東急東横線白楽駅から徒歩14分！ル・ミトロンは毎日焼き立てのおいしいパンを横浜神大寺の町から皆様にお届けしています。

はじめてのクライアントワーク

・・・というわけで、横浜のおいしいパン屋『ル・ミトロン』さんのホームページを作成させていただきました！
学校の中間制作課題のため、8月に飛び込み営業でお願いして、夏休みをはさんで1か月強。ようやく完成です。
素人ながらに、先生と相談しながら、今の時点でできる限りのことを詰め込みました。

制作側からすると、非常にありがたいクライアントさんで、撮影やライティングのためのヒアリングにも丁寧に応対いただいております。
文章もデザインもほぼお任せいただいたおかげで、検索エンジン対策もかなり理想に近い形でできたかなぁと思っています。
有料サーバーも快く手配いただいて、本当にお世話になりました！

こちらのパン屋のオーナーさんは、独立開業を目指すパン屋さんへの技術指導コンサルとして、かつて全国を飛び回り、フランスにも修行に行かれた職人さんです。

パンがおいしいのはもちろん、一見高級店のような店構えなのですが、パンの値段が全然高くないΣ(◎ω◎)！
これは私が、最初とても感心したところです。
いわゆる町のパン屋さんの普通の値段というか、クオリティを考えたら安すぎない？という値段なのですが、それはお店の方針なのだそうです。

神奈川大学の近くですので横浜方面へお出かけされる際は是非足を運んでみてください。lemitronpains.com

Web用に保存のショートカットキー

1. Web用に保存のショートカットキーは押しにくい

Photoshopでpngにデータを書き出したりするときは、『Web用に保存』メニューを頻繁に使います。
これ、かなりよく使う機能の割にショートカットキーがめんどくさい。。。

デフォルトで、「Alt+Shift+Ctrl+S」・・・って4つも押してられないよー。と思いつつ、毎回ファイルメニューから選んで保存をしていました。

2. 小技というほどでもないけれど

ショートカットキーの割り当てをカスタマイズしているという人の記事を見かけ、「なるほどなぁ」と私も早速「F2」キーに「Web用に保存」を割り当ててみました。

(デフォルトではF2には「カット」(Ctrl+Xと重複)が割り当ててありましたが、私は使っていなかったので。）

なにこれ、びっくり快適Σ(〇ω〇)！！

Photoshopのキーの割り当ては「編集」→「キーボードショートカット」から簡単に変更可能です。

皆さまもぜひ余ってるキーでお試しあれ～

Photoshopのアクションフィルタ

1.良い感じの写真を手軽に作りたい！

撮った写真がいまいちな時は、フリーのアクションをダウンロードして使ってみよう。
でも、ここでまとめるまでもなく、分かりやすく使い方がまとまってるブログがあるよね！

number333.org

アクションリンク集

アクションの拡張子は、atn。ダウンロードしてひとまとめにしておくと便利そうです。photoshopvip.net
liginc.co.jp

2.ついでにノイズフィルタの作り方も

アクションじゃないけど、ノイズがかったフィルタの作り方のリンクです。
トーンの濃すぎる写真をちょっと軽くしたいときにも使えます。

photoshopvip.net

3.感想

素人でもこんなに簡単にそれっぽい加工ができちゃうなんて良い時代だね！と思う一方、アナログ時代の昔のカメラマンって本当にすごかったんだなぁと思う次第です。
昔の加工は、フィルムに直接鉛筆で書き込んだりとかしてたみたいですね。一発勝負の現像、完成形を想像しながらの作業、今よりもっと職人の世界だったんでしょうね。

photoshopの高速化

1. photoshopをよく使うようになりました。

学校の授業はjQueryとDOMがもっぱらですが、同時進行の課題として8月からクライアントワークがスタートしました。

実在する「企業」「団体」「個人」のHPを作るという課題で、アテのない人は自分でそこら辺のお店や教室に営業をかけにいくスタイル。
中々のスパルタ式ですが、こういった経験を積ませていることも、おそらく私の学校の就職率が良い要因だと思います。

お家で写真の編集の機会も多くなり、photoshopが毎日大活躍です。

2. サクサク動く方法ないかな？

基本的にはメモリを8GB積んでいるので、そこまで挙動が重たいこともないのですが、ビルボードのようなやや大きめの画像をWeb用に保存する際に一瞬フリーズする様子。

キャッシュのクリア的なことできないのかな？と思って調べたところ、いくつかのガイダンスを見つけたので、ご紹介します。

helpx.adobe.com
www.webworkersclip.com
coliss.com

3. この辺が簡単そう

リンク先からの抜粋ですが、お手軽そうなものをいくつ抜き書きします。

メモリの解放

使用していないメモリと仮想記憶ディスクを Photoshop から解放できる。「編集／メモリをクリア／すべてを選択」

メモリ使用量の調整

他のアプリケーションとの兼ね合いになりますが、RAM(ランダムアクセスメモリ)の使用量を調整できるそうです。割り当ての初期値は60～70％なので、PSしか使わないときはもっと多くしても良さそうです。「環境設定／パフォーマンス／メモリの使用状況」

作業の区切りごとに再起動

一区切り付いたら、データを保存してPSをいったん切っちゃう方法。やはりつけっぱなしより良いんでしょうか。

学校で先生から本当にエラー続きで調子の悪い時は、PSの起動の瞬間に「Alt+Shift＋Ctrl」を押すように言われていますが、これをやると環境設定が初期化されちゃうので、まだお家では使ったことがありません。

とりあえず、上のいくつかでしばらく様子見ですね。

Google Analyticsの数字が変・・・？

授業ブログ書くより、課題課題というわけで、ほったらかしにしていました。

しばらくぶりの更新です。今日は覚書程度に。

1.  Google Analyticsの数字が変？

知っている人は知っている、アクセス解析ツールのGoogle Analytics。

当ブログでも勉強がてら使っているのですが、

うちのブログ絶対こんなにアクセスあるはずないよね？

という状況がずっと続いていました。

参照元（見ている人が、どこからサイトにたどり着いたか）で一番熱心な

floating-share-buttons.comにいたってはセッション数593。なんなんでしょう・・・？

2. これがスパムというものらしい

結論からいうと、上の1～10位の参照元のうち、9つはすべてスパムのようでした。

これらのスパムのターゲットは、アクセス解析をする人達。『どうやらここから沢山アクセスがあるけど、この参照元のサイトってどんなところかな？』と、URLを訪問させることが目的です。

URLからして怪しいサイトもあるのですが、初心者だとうっかり踏んでしまいそうになることうけあいです。

また、アクセスデータの質もこのままでは著しく劣化してしまいます。本来解析ツールを使用して求めたかったアクセス傾向の分析は非常に難しい状態です。

3.  対応策：フィルタをかけて除外！除外！

一体どうしたものやら・・・ということで、

こちらのサイトを参考に、特定のスパムサイトからのアクセスカウントを除外するフィルタを設定しました。

w3g.jp

その時々で活発なスパムボットがあるので、上のブログにもあるようにイタチごっこにならざるをえないのですが、ひとまず2015年8月の時点での対策をまとめてくれています。 

4. 早めの設定がおすすめです

「フィルタをかけて、さっそく正しいデータを見よう」と思ったのですが、あれあれ？スパムのアクセス履歴は残ったままです。

調べてみたところ、どうやらフィルタは設定した時点から反映されるようで、過去のデータにさかのぼってフィルタをかける仕様ではないようです。（下参照） 

Google アナリティクス ヘルプ フォーラム

『フィルタに自分のＩＰアドレスを除外した場合、いつから反映されるのでしょうか。』

productforums.google.com

使い始めに設定しとけば良かったのになぁ。というわけで、これから新規にGoogle Analyticsを使うときは忘れずフィルタの設定をしたいと思います。

（自分のIPアドレス除外も忘れずに！）

2015,9,20追記

アナリティクス設定→すべてのウェブサイトのデータ→ビュー設定

ここのチェックも大事みたいです！