【自社も他社も】サイト分析を簡単に!無料分析ツール4選

【自社も他社も】サイト分析を簡単に!無料分析ツール4選

by 泉雄大

皆さんこんにちは。セールス部の泉です。
暦の上では残暑ということですが、日々暑さが増していっているように感じるのは私だけでしょうか。お盆も明けたということで涼しくなっていくことを願うばかりです。

ECサイト運営者の皆様はお盆商戦でご多忙のことだったかと思いますが、来年は更に売り上げを上げるための準備を今からしていきましょう。今回は、中長期的に見て売り上げを上げるためには不可欠であるサイト分析を行うことができる無料分析ツールをご紹介します。
Read More

非SSLサイト、Google Chromeアップデートで警告が常時表示の仕様に

非SSLサイト、Google Chromeアップデートで警告が常時表示の仕様に

by 上林洋介

かねてからの告知通り、Googleが提供するウェブブラウザ「Google Chrome」の7月24日のアップデートで、非SSLサイト(https通信でないサイト)にアクセスした場合、アドレスバーに「保護されていない通信」と表示されるようになりました。

常時SSL(https://〜で始まるアドレス)への対応は待ったなし、となっています。

Read More

SNSでのシェア時に適正な画像・説明文を表示させよう!

SNSでのシェア時に適正な画像・説明文を表示させよう!

by 泉雄大

みなさんこんにちは、セールス部の泉です。暑い日が続いてます。水分などこまめに摂って熱中症には気をつけましょう。

さて、最近では検索からの自然流入だけでなく、SNSからの流入の割合も徐々にではありますが増えつつあります。これからhSNSからのシェアをどう掴んでいくかもこれからのサイト運営では必要になってきます。

今回はSNSでシェアされたときに任意の画像や説明文などを表示するように設定し、サイト内容を適正に把握してもらうことを目標に説明していきます。

Read More

GoogleがSpeed Updateを開始、ページの読み込み速度がランキング要因に

GoogleがSpeed Updateを開始、ページの読み込み速度がランキング要因に

by 上林洋介

2018年1月、Googleはページの読み込み速度をモバイルでの検索時のランキング要因として利用する「Speed Update」を7月に導入する予定であることを発表していましたが、7月9日に導入開始のアナウンスが行われました。

2018/7/9 追記
すべてのユーザーを対象に Speed Update のロールアウトを開始しました。
ページの読み込み速度をモバイル検索のランキング要素に使用します

Googleの公式ツイッターでもアナウンス

モバイル検索で利用されるSpeedUpdateがすべてのユーザーにロールアウトされました!

Speed Updateでどのような影響があるのか?

Googleのウェブマスターブログには影響を受ける可能性のあるページは少ない旨が書かれています。

ユーザーに本当に遅い体験を提供しているようなページについてのみ影響し、ごくわずかな割合のクエリにしか影響しません。 そのページがどのような技術を用いて制作されたかに関係なく、すべてのページに同じ基準を適用します。

しかしページをすべて読込するのが○秒以内、などといった明確な基準はなく、様々な指標に基づきGoogleが独自で判断するようです。指標の一つには、Chromeのユーザーエクスペリエンスレポートも利用しているとのことです。

Speed Updateは速いページの評価が上がるものではなく、ユーザーにとってあまりにも遅いページの評価が下がるアップデートになります(もっとも、速いページはユーザー満足度を高めるため、コンバージョンを高める要素にもなります)。ただ検索クエリはこれまで同様に、非常に強い評価指標であり、検索クエリと関連性の非常に高いコンテンツページは、たとえ遅い場合でも評価がされる場合もあります。

ユーザーにとって良いコンテンツを用意し、満足度の高い読み込み速度を意識してサイトを制作していきましょう。

CSSの優先順位を自在に適応させる方法

CSSの優先順位を自在に適応させる方法

by 泉雄大

みなさまはじめまして。6月よりセールス部に配属されました、新入社員の泉(いずみ)と申します。初投稿ですがよろしくお願い致します。

さて、見やすいページであったり、操作性の良いページはユーザーにより良い体験をしてもらうことができますし、結果的にコンバージョンにつながる重要な要素です。

優れたUIを持ったページを作成するためにCSSで見せ方を考えて編集していくわけですが、同じHTML上で複数のCSSルールが存在すると、重複したルールが適応されないといったような問題が起こってしまうことがあります。そこで今回は「こっちのルールを適応したいのに…」「でも、このコードは消せない…」といった時に役立つCSSルールの優先順位を操作する方法をご紹介します。
Read More

インスタグラムからECサイトで直接購入可能に!ショッピング機能「ShopNow」が日本解禁。

インスタグラムからECサイトで直接購入可能に!ショッピング機能「ShopNow」が日本解禁。

2010年に公開されて以降、世界中に多くのユーザーを抱えるInstagram。日本でも「インスタ映え」という言葉が流行していますが、筆者も2011年ごろから使い始めて、投稿した写真も2,500枚を超えるまでになりました。

そして6月5日に、Instagramから直接ECサイトへリンクして購入までできる、「ShopNow」機能が日本で解禁になりました。

Read More

サイトロゴ作成~初心者でも簡単に無料で作れるサイトロゴ~

by 空岡大地

=========================================

サイトを作成する上で必要になるのがサイトの目印、サイトロゴです。
サイトを初めて作る方にとって大きなハードルになるかもしれません。

「サイトロゴをどうやって作ればいいかわからない」「外部に依頼すると高くつくからどうしよう」といったお悩みを解消します。
誰でも簡単に無料でサイトロゴを作れる方法をご紹介致します。

最後に作ったサイトロゴの画像のサイズ変更方法もご紹介します。
サイト作成を気持ちよくスタートさせてください。

==========================================

初心者にオススメのサイトロゴ作成ツール
store.jp logo maker ・・・柔らかく、優しい印象のロゴが作りたい方向け
Squarespace Logo・・・オシャレな印象のロゴを作りたい方向け

===========================================

◇LOGO MAKER(store.jp)
~シンプルでかなり簡単にロゴを作れます~
https://stores.jp/logo

作成手順
1.ロゴの名前を入力してください
ロゴの名前を編集したいときは、テキスト欄で編集。
2.キャッチコピー欄を入力(必要がなければ入力しなくてもOK)
3.画像・テキストをドラック&ドロップしてお好みのレイアウトに。
POINT・・文字カラーやフォントも選べます

4.完成したら保存するだけ。
5.保存する画像サイズを選択。

◇Squarespace Logo
~シンプルかつオシャレなロゴが簡単に素早く作れます。~
URL:https://logo.squarespace.com/

サイト表記は英語ですが、
操作方法は簡単でLogoMakerとほとんど同じです。

作成手順
1.ロゴの名前を入力してください
ロゴの名前を編集したいときは、テキスト欄で編集。
2.キャッチコピー欄を入力(必要がなければ入力しなくてもOK)
3.画像・テキストをドラック&ドロップしてお好みのレイアウトに。
POINT・・文字カラーやフォントも選べます

4.完成したら保存するだけ。
5.保存する画像サイズを選択。

POINT : ロゴのダウンロードについて
・商用利用禁止ですが、400x400px(PNG)が無料でダウンロードできます。
・Squarespace Logoの会員は5000x5000px(PNG)までの解像度の高いダウンロードが可能です。
非会員の方でも10ドルで購入可能です。

アイコンは今見えているものだけではありません。
Squarespace Logoはアイコンのバリエーションが豊富でなおかつオシャレです。
もちろん文字フォントや色も好みに合わせて変更できます。

たとえば、アイコンと文字フォントを変えてみるだけでこんなに印象が変わりますよ↓

AIRPLANE、BOAT、STAR、CIRCULE、FLOWERなどSearch欄で自由に検索してみてください。
GOODやHAPPYといった形容詞でもたくさんアイコンが出てくるので面白いですよ。
お気に入りのアイコンが見つかるのではないでしょうか?

==========================================

・サイトロゴ画像のサイズを変更しよう。

サイトロゴが完成したら、次は画像をお好きなサイズに変更します。
画像サイズを変える時に便利なツールがあります。「IMAGE440 画像変換サービス」です。
早速ですが画像変換サービスを使って画像ピクセルを変更しましょう。
URL:https://www.image440.com/

◇編集手順
1.「ファイルを選択」で画像を選択。
編集したい画像を選択して下さい。

2. 変換フォーマットを用途に応じて選択。

※表でご案内の予定
JPEG形式:写真の保存に使われる形式です。
1677万色以上のフルカラーで保存ができます。

GIF形式:イラストに使われる形式です。
256色までしか表現できませんが、背景の透ける透明色を指定できるなどの特徴があります。

PNG形式:次世代のWEB用画像ファイルです。
フルカラー、透明色や透明度を指定できる、可逆圧縮ができるなど優れた点が多いです。

3.変更方法を選択。

画像のサイズ変更方法が選択できます。
~横・縦のピクセルを自分で設定したい場合は「縦横サイズ」を選択すると、
自由に横縦のピクセルを決めることができます。~

あとは「変更実行」をクリックするだけ。
これで画像サイズの変更は完了です。

==========================================

みなさんお気に入りのサイトロゴはできましたでしょうか?
サイトロゴはサイトの中でも大切な要素の一つです。
サイト作成初心者の方はこれから分からないことがたくさん出てくるかと思いますが諦めずに頑張りましょう!

ファーストビュー一秒以内を実現するために!HTML/CSS/JS記述の工夫

ファーストビュー一秒以内を実現するために!HTML/CSS/JS記述の工夫

ECサイトの運営だけでなく、サイトを運営するウェブマスターにとって重要なのはサイトの表示速度です。2018年7月からGoogleは「スピードアップデート」を実施し、ユーザーにとってあまりにも遅いサイトの評価を下げる発表をしています。

特にユーザーがランディングした際に表示されるファーストビューは特に重要とされ、コンバージョンや離脱率にも大きな影響を与える要素となっています。

Read More

Facebook広告で自社ECサイトのコンバージョンを計測する方法

Facebook広告で自社ECサイトのコンバージョンを計測する方法

検索連動型広告やリターゲティング広告、純広告等、Web広告には様々な種類の広告が溢れています。今回は多くの方が登録されているFacebook広告の基本的な特徴を押さえ、自社ECサイトで商品の購入や会員登録促進に活用する方法をご紹介したいと思います。

Read More

【jQuery】レスポンシブなサイトで、デバイスサイズで適用させるjavascriptを切替

【jQuery】レスポンシブなサイトで、デバイスサイズで適用させるjavascriptを切替

レスポンシブウェブデザインではCSS(スタイルシート)を画面の横幅に応じて設定したブレイクポイントを切り替えることで、HTMLコンテンツの見た目を調整しています。CSSではメディアクエリを利用してこの切り替えを実施していますが、JavaScriptの切り替えはどのように行えばよいのでしょうか?

今回はレスポンシブウェブデザインでブレイクポイント毎にJavaScriptの切り替えを実現するjQueryの実装方法をご紹介します。

Read More