ウェブ屋の備忘録

日々の業務で工夫していることや便利なツール、新たに得た知識などを共有しています。

emmetを使いはじめました

emmetを使いはじめました

 

いまさらですがemmetを使いはじめました。

慣れないemmetを使うより自分で打ち込んだほうが速いと思っていました

かつて、すごく便利な書き方があるよと話題になり、私も導入をしてみたことがあります。
当時はZen codingなどという呼ばれ方をしていました。

そのころ、普段はバリバリの手打ちでコーディングをしておりました。
Zen codingを使ってみると、どうもいつものリズムで打つことができず、こんなの使うより全部手打ちの方が速いにちがいない、と早々にZen codingを使うのをやめました。

emmet使い始めました。

最近はコーディングといった作業をほとんどやらなくなりました。
たまたま珍しくコーディングの作業をすることになり、いろいろ最新の便利なコーディング方法などを収集しているとemmetが出てきました。

以前の記憶から、あまり劇的に速くなるイメージもなかったのですが、せっかくなので使ってみることにしました。

実際使ってみるとめちゃくちゃ便利ですね。
速いです。

以前、全部手打ちの方が速いと思ったのは、思い込みだったのでしょう。
慣れたリズムでコードを打ち込んでいるのがスムーズで速いと思いこんでいたのだと思います。

HTML/CSSを爆速コーディング Emmet入門 第3回 エディタのコードヒントよりも早い!EmmetのCSSの記法とは?
の記事にも、コードヒントとemmetを比較したGIF動画がありますが、一目瞭然ですね。

emmetの導入

私はエディタにbracketsを使っており、以下の記事を参考に導入しました。

HTML/CSSを爆速コーディング Emmet入門 第1回 Emmetを薦める理由

Chatwork使い始めました。プロジェクトのやり取りがとてもスムーズです。

Chatwork使い始めました。プロジェクトのやり取りがとてもスムーズです。

Chatworkを使い始めました。
これもGit同様ずいぶん前から「Chatworkで共有させてもらっていいですか?」とか「Chatworkめっちゃ便利やで」とか言われていたのですが、やっと使い始めました。
常にブラウザでChatworkを立ち上げておかないといけないのが億劫だったのですが、周りがいよいよChatworkだらけになったので、もう本腰入れて使い始めようかと決意いたしました。

Chatworkこんな風に使っています。

そんなに特殊な使い方ではないと思いますが、以下わたしの使い方を記載しておきます。

プロジェクトごとにグループチャットをつくる

プロジェクトごとにグループチャットをつくり、メンバーを招待します。

[Chatwork]グループチャット

概要を記入

概要に以下を記入しておきます。

  • メンバー
  • 簡単なプロジェクト概要
  • スケジュールもしくはスケジュールを記載したスプレッドシート等へのリンク
  • 資料や素材の置き場所のリンク
  • テスト環境・本番環境のリンク

[Chatwork]概要

チャットでやりとり

あとはそのグループチャット内で、やりとりをします。
個人宛にメッセージを送ったり、ファイルを送ったりします。

メールではプロジェクトごとに宛先を選んだり、「お疲れ様です~」みたいな挨拶を書いていたりしましたが、それが省けるだけでもかなりスピーディーにやり取りができると実感しています。

[Chatwork]チャットでやりとり

タスクを設定する

やらなければならないことはタスクとして設定をします。
自分のものも設定できますし、他人にタスクを割り振ることもできます。
タスク内容・担当者・期限を設定できます。無期限というのも可能です。

[Chatwork]タスク

無料プランです

無料プランで使っています。
グループチャットの作成上限が14ですが、これを超え出すと仕事のキャパシティ的にも無理が出てくるので、その目安としても活用できて良いです。

実際に使い始めて

使い始めるとめちゃくちゃ便利で、これもGit同様なぜもっとはやくから使わなかったのだろうと悔しくなっています。
そのプロジェクトに関わっているメンバーは、そのグループチャット内に揃っているので、情報の共有がはかどります。メールとちがって「○○さん お疲れ様です。~」のような挨拶もいりませんし、スピーディーにやりとりできます。
そしてタスクの設定・概要の確認もそこでできるので、かなりスムーズにプロジェクトをすすめることができます。

Gitを使い始めました。

f:id:webbibouroku:20171127165705j:plain

Gitを使い始めました。
もうずいぶん前から、まわりから「Git使わないの? めっちゃ便利やで」などという声を聞いていたのですが、なぜか使わずにいました。異様に億劫に感じていました。
いざ使い始めてみると、とても便利で何故いままで使わずにいたのだろうと悔しくなりました。
もしこの記事を見ている、Gitを使い始めるのが異様に億劫に感じている方がいらっしゃいましたら、使い始めるのは何にも難しくないので、はやく使い始めれば良いと思います。

わたしのGit環境

bitbucket

GitHubだと無料のアカウントでは非公開リポジトリを作成できなかったので、bitbucketを使用するようにしています。

SourceTree

GitクライアントはSourcetreeです。
Atlassian社提供のものになります。
bitbucketもAtlassianなのでなんとなく安心です。
https://ja.atlassian.com/software/sourcetree

Gitを使い始めるにあたって参考にした記事

たぶんこれだけ読んでもらえれば、とりあえず使えるようになるかと思います。

一歩踏み出すフロントエンド入門 | 株式会社LIG
https://liginc.co.jp/series/gitbasic

【連載Git入門 第2回】SourceTreeでGitを始めよう!まずは試しに使ってみよう!
http://naichilab.blogspot.jp/2014/01/git-2sourcetreegit.html

Gitフロー

とりあえずは、作業用のブランチを切って作業し、maseterブランチにマージするという簡易的なフローでやっています。

大掛かりなプロジェクトになってくると、「Git flow」でやっていくとかなり効率よくできそうです。

Gitを最大限に活用できる「Git flow」で、効率よく開発を進めよう!
https://liginc.co.jp/248864

コンテンツメディアへの記事登録を効率よくするために行った3つのこと

コンテンツメディアへの記事登録を効率よくするために行った3つのこと

いまはオウンドメディアがたいへん流行していて、いろんな企業さんからつくりたいという声をいただきます。
そして実際につくって、運用も任せていただいているところも複数あります。
で、そのオウンドメディアに記事を登録していく作業なんかもわたしたちがやるわけなんですが、少しでも効率的にできないかと工夫しながらやっております。

ここでは3点ほど、新たに取り入れた記事登録の効率化の方法を紹介させていただきます。

[Photoshop]書き出し形式

最近知ったのですが、Photoshopの「書き出し形式」という機能を使って一気に必要な画像を書き出すことができるんですね。

[Photoshop]書き出し形式1


レイヤーに書き出した際のファイル名をつけておき、選択します。

[Photoshop]書き出し形式2


そして右クリックで「書き出し形式」を選択。

[Photoshop]書き出し形式3


それぞれの画質や、拡張子を選んで、「すべてを書き出し…」をクリック。

これで全レイヤーが一気に書き出されます。

これ以前はひとつずつレイヤーを非表示にして「ウェブ用に保存」とやっていたので、ずいぶんな短縮になりました。

[Photoshop]必要な画像サイズのアートボードをひとつのファイルに用意しておく

これもPhotoshopでの作業になります。

キービジュアル用・記事本文用・縦長用・プロフィール画像
のアートボードを作成しておきます。

そしてこれをさきほどの「書き出し形式」をすれば、複数のファイルを開かずに必要な画像が一気に書き出せます。

[Photoshop]アートボード

[記事本文]MarkDown記法で成形

これをやる前はテキストエディタでタグをいちいち書くか、WYSIWYGエディタで作業をしていました。

以下のような感じで作業しています。

  1. Wordで原稿をもらう
  2. テキストエディタにコピー&ペースト
  3. MarkDown記法を用いて成形
  4. stackEditに貼り付けてhtmlをコピー

MarkDown形式エディタstackEdit

 

MarkDownは以下のように記述します。

見出し

##
#2個でh2、#3個でh3という具合に見出しを設定します。

区切り線


ハイフン3本で区切り線


になります。

 

リンク

[リンク文字](リンク先URL)
[]の中にリンク文字を入れ、続けて()の中にリンク先のURLを記します。

斜体

*~*
*と*で囲んだ部分が斜体になります。

太字

**~**
*2個で囲んだ部分が太字になります。
*3個で囲むと、太字かつ斜体になります。

リスト

-
- ではじめるとリストになります。
-のあとには半角スペースが必要です。

引用

>
>ではじめると

引用になります。


これを用いる前にやっていたように、htmlのタグを直接書いたり、WYSIWYGエディタで該当部分を選択して~、などという作業をしなくて良いので、かなり短縮になりました。

3つの基本的なSEO施策で、あるメーカー様のウェブサイトの検索順位が向上しました

f:id:webbibouroku:20171124164227j:plain

あるメーカー様のウェブサイトの検索エンジン最適化を行いました。
その結果、大きく順位が向上しましたので、事例として紹介いたします。

複数のキーワードで上位表示に

トップページ

・ 会社名
Yahoo: 2→2 / Google: 2→2
変化なし。もともと上位。

・ (株)会社名
Yahoo: 1→1 / Google: 1→1
変化なし。もともと上位。

・ キーワードA
Yahoo: 圏外→14 / Google:45→17

・ キーワードB
Yahoo: 21→11 / Google: 33→13

・ キーワードC
Yahoo: 圏外→圏外 / Google:圏外→圏外

・ キーワードD
Yahoo: 圏外→18 /Google: 67→30

主要下層ページ

・ キーワードE
Yahoo: 圏外→圏外 / Google: 圏外→圏外

・ キーワードF
Yahoo: 圏外→8 / Google: 圏外→7

検索上位表示を実現した3つの方法

上記の上位表示を実現したのは、3つの基本的な最適化施策です。

上位表示を目指すキーワードを絞り込む

最適化前は、各ページのタイトルに大きなキーワードが入っていました。
それをより細分化して、ターゲットとするユーザーがこの会社をイメージするであろうキーワードに狙いを定めることにしました。

例えば、
最適化前:「菓子メーカー|会社名」

最適化後:「カステラメーカー|会社名」
といった感じです。

メタ情報をユニークなものに

最適化前は、すべてのページに同じDescriptionが入っていました。
それをすべてのページでユニークなものに変更しました。
内容には、そのページにまつわるキーワードを盛り込むようにしました。

検索エンジンのクロールを促す

上記ふたつの対策が完了したら、検索エンジンのクロールを促すために、以下の4つを実施します。

Google Search Consoleにてサイトマップ登録
https://ferret-plus.com/1352

Google Search ConsoleにてFetch ad Google
https://support.google.com/webmasters/answer/6066468?hl=ja

Googleクロール申請
https://www.google.com/webmasters/tools/submit-url

・Bingクロール申請
https://www.bing.com/toolbox/submit-site-url

アクセス数の変化

以上のように検索エンジンへの最適化によって、検索順位を上げることができました。
それによりアクセス数がどう変化したかと言うと

約3,000 → 約3,500
(最適化前の2ヶ月と最適化後の2ヶ月を比較)

およそ1.17倍になりました。


作業としてはたいしたことはしていません。キーワードを選定し、各ページのメタ情報を変更したりといった基本的なことを確実にやっただけです。
それだけでずいぶんと検索エンジンにとって、このサイトにはどんなことが書かれてあるのか、ということがわかりやすくなったのでしょう。
あとは実際のコンテンツにどれだけ重要なことが書かれてあるか、ユーザーが欲しい情報がどれだけ書かれてあるか、ということことで比較されていくのでしょう。

コンバージョン率アップ!Amazon Pay・楽天ペイを導入で約1.3倍に。

コンバージョン率1.3倍!Amazon Pay・楽天ペイを導入で。

Amazon Payとは

Amazon以外の通販サイトで、Amazonアカウントを利用して、購入ができるようになるサービス。
Amazonアカウントを利用することで、住所やクレジットカード情報などの入力を省くことができます。

楽天ペイとは

Amazonペイメント同様、楽天アカウントを利用して購入ができるようになるサービス。
楽天ポイントの使用と獲得もできます。

カラーミーショップで運営する通販サイトにAmazon Pay・楽天ペイを導入

しばらく運営をしておった通販サイト。
カゴ落ち率が80%を超えるなど、非常に高かったです。
住所入力やクレジットカード情報入力の際に、面倒さを感じ、離脱しているのかもしれないと考え、少しでも解消ができればと、Amazon Payと楽天ペイの導入を検討しました。

カラーミーショップの場合の、Amazon Pay・楽天ペイの利用料は以下。

Amazon Payの利用料

月額2,000円(税抜)+決済手数料4%

楽天ペイの利用料

月額2,000円 + サービス利用手数料:5%(決済手数料 4% + 楽天ポイント原資負担分 1%)

Amazon Pay・楽天ペイ導入前との購入数比較

Amazon Pay・楽天ペイを導入する前とで、各決済ごとの購入数を比較してみました。

ある月の購入件数を1年前の同月との比較

  1年前 今年
クレジットカード 75 59
商品代引 46 31
銀行振込 18 18
Amazon Pay 0 47
楽天ペイ 0 21
合計 139 176

1年前と比較して購入件数が27増えました。
もちろん1年前はAmazon Pay・楽天ペイをやっていなかったので、そこがまるごと増えています。
とはいえ、購入件数合計の176に対して、68件と約40%も占めています。
クレジットカード決済は16減り、商品代引も15減りました。Amazon Pay・楽天ペイの導入で、普段クレジットカードや商品代引で購入していた方がそっちに流れた、とも考えられますが、全体で増えた27件は、やはり新たな決済方法の導入のおかげではないかと思います。

Amazon Pay・楽天ペイ導入前とコンバージョン率を比較

今度はコンバージョン率を比較してみます。
これはAmazon Pay・楽天ペイ導入から数ヶ月を見てみます。

  1年前 今年
1ヶ月目 0.41% 0.53%
2ヶ月目 0.48% 0.61%
3ヶ月目 0.42% 0.55%
4ヶ月目 0.30% 0.44%
平均 0.4025% 0.5325%

すべての月で前年を上回りました。
増加率にして、約1.3倍です。


自分に置き換えて考えてみても、住所入力やクレジットカード情報の入力をせずに、Amazonのアカウントとなるとめちゃくちゃ便利なので当然の結果だと納得しています。

アパレルブランドのECサイトを制作しました

f:id:webbibouroku:20171117185653j:plain

とあるアパレルメーカーのECサイトを作成しました。

それまではセレクトショップなどへの卸のみで展開していたのですが、今後を見据え自社ECサイトを立ち上げたいとのことで相談をいただきました。

カラーミーショップのスタンダードプランで作成

なるべく予算を抑えたいとのことでカラーミーショップをご提案。

レギュラープラン
月額:3,240円/月
初期費用:3,240円

決済方法は、打ち合わせの上

  • クレジット
  • 商品代引
  • 銀行振り込み

の3種類としました。
※ 手数料等は各種決済サービスのサイトなどを参照ください

公開時の商品登録数は30点ほど。

公開してすぐ売れる

誘導は、公開と同時に既存のブランドサイトに、ECサイトへのバナーを貼ったのみ。
ブランド名や商品名で検索しても、今回作成したECサイトはもちろん上位に上がってきません。
既に卸先が運営する通販サイトでも、今回作成したECサイトよりも安で売られています。なのでなかなか売れないだろう、とは思っていたのですがそんなことはありませんでした。
公開1週間で数点の購入があり、初月は数十点売れました。
そこから数ヶ月、コンスタントに売れ続けています。

1.ブランド名で検索

2.ブランドサイトに辿りつくECサイトは検索上位にないため)

3.バナーからECサイトへ移動

4.購入

というフローで商品を買う方が一定数いらっしゃるということを知ることができました。

雑誌掲載商品がちゃんと売れる

数点の商品が、雑誌にも掲載されたのですが、その商品がよく売れました。

1.雑誌を見る

2.掲載されている商品が欲しくなる

3.ネットで検索する

4.ブランドサイトに辿りつくECサイトは検索上位にないため)

5.バナーからECサイトへ移動

6.掲載されている商品を探し、買う

というフローをちゃんと辿ってきたのだろう、と想像できます。
雑誌って意外とちゃんと見られているのですね。

4.、5.の手順を省くことが出来ればもう少し売れていたのかもしれません。

雑誌に掲載されることがわかっている場合

  • 検索で上位に表示されるようにしっかりと最適化を行っておく
  • このキーワードで検索すればスムーズにサイトに辿りつける、というキーワードを表記しておく
  • 掲載商品をトップページなどの目立つところに表示しておく

といった工夫で、効果を上げられそうです。

あとはポイント導入や、メルマガの配信などでリピーターを増やしていく、とかでしょうか。