Category Archives

19 Articles
ECサイトとWordPressを使ったオウンドメディア事例

ECサイトとWordPressを使ったオウンドメディア事例

「オウンドメディア」皆さんも一度は聞いたことがあると思います。実際、EC事業者様をご支援させていただく中で「ブログもやりたい」というご要望を良くお聞きします。
しかし良くお聞きするとオウンドメディアがなぜECを展開する上で有効な手段なのかを理解されていないEC事業者様もおられます。

今回、まずは「オウンドメディア」とは何か?をおさらいしたいと思います。
Read More

WordPressのプラグインで簡単にAMP対応をする方法

WordPressのプラグインで簡単にAMP対応をする方法

WordPressプラグインでAMP対応

以前の記事、「Googleなどが立ち上げたAMPが静的ページを超高速化する!」でご紹介した、検索結果からのコンテンツ表示を高速化するAMP。AMPのHTMLの仕様に則って記述をすればAMP対応が可能ですが、今回はWordPressのプラグインを使って簡単にAMP対応する方法をご紹介します。
Read More

【サンプル有】レスポンシブなグローバルナビの作り方3選
photo credit: <a href="http://www.flickr.com/photos/a_kohsaki/9010938055/">ak_tokyo</a> via <a href="http://photopin.com">photopin</a> <a href="http://creativecommons.org/licenses/by-nc-nd/2.0/">cc</a>

【サンプル有】レスポンシブなグローバルナビの作り方3選

photo credit: ak_tokyo via photopin cc

photo credit: ak_tokyo via photopin cc

レスポンシブサイトを構築する際、意外と引っかかるのが「グローバルナビ」

ページの横幅(キャンバス)いっぱいに表示させることが多い関係上、キャンバス幅が一定でなくなるレスポンシブWebデザインでは一筋縄ではいきません。

慣れない内は考えるのが面倒で「スマホ専用のナビゲーションを別途用意」したり、「グローバルナビをまるごと非表示にしてしまう」ということをされた方の少なくないのではないかと思います。

今回は「レスポンシブWebデザインで使えるグローバルナビ」をまとめました。

1:【CSS】Table-cellで1行表示

「グローバルナビは絶対に1列固定。それ以外は認めない」という方向けの方法。
これを使うと間違いなく1列のグローバルナビが作れます。
原理は簡単で、1列だけのtableを作るというだけのことです。
CSSでtableにするため、マークアップとスタイルはこんな感じになります。

<nav class="globNav-row">
<a>HOME</a>
<a>メニュー1</a>
<a>メニュー2</a>
<a>メニュー3</a>
</nav>
.globNav-row{
 display: table;
 width: 100%;
}

.globNav-row > a{
 display: table-cell;
 vertical-align: middle;
 text-align: center;
}

この方法の最大のメリットは「高さ揃え不要」というところです。

aタグがtdタグと同じ振る舞いをするため、これだけのコードで高さを揃えたグローバルナビが作ることができます。

スクリーンショット_022714_091312_PM

2行の項目・1行の項目が混在する場合でも高さも文字位置も自動で調整されるので、非常に便利です。

一方デメリットは、「融通が効かないこと」です。

tableタグと同じ振る舞いになるため、tableでできないことはすべてNGになります。

改行禁止処理を入れたりすると、デバイス幅によってはレイアウト崩れが起きることもありますのでご注意ください。

おすすめシチュエーション:メニュー項目数が4つ以下の時

2:【Javascript+CSS】Toggleでスマートフォン対応

BootstrapやGumbyFrameworkなどのCSSフレームワークでよく採用されている方法です。

スクリーンショット_022714_091546_PM

CSSとJavaScriptでスマートフォン幅ではトグルメニューに変化します。

マークアップは「トグルボタン」と「メニュー項目」の2要素に分割するタイプが主流です。

<nav class="globNav-row">
 <span class="globNav-toggle">MENU+</span>
 <ul class="globNav-inner">
  <li><a>HOME</a></li>
  <li><a>メニュー1</a></li>
  <li><a>メニュー2</a></li>
  <li><a>メニュー3</a></li>
 </ul>
</nav>

タブレット以上ではspanが非表示に、スマートフォンではulが非表示になるようにCSSが設定されています。

.globNav-toggle { display: none;}
.globNav-inner{ overflow: hidden;}
.globNav-inner > li { float: left;}

@media only screen and (max-width: 480px){
.globNav-toggle { display: block;}
.globNav-inner{ display: none}
.globNav-inner > li { float: none;}
}

@media only screen and (min-width: 481px){
.globNav-inner{ display: block!important;}
}

あとはJavascriptでspanをクリックした際にulの表示を切り替える構文を記述するだけです。

<script>
    $(function(){
        $(".globNav-toggle").on("click", function() {
            $(this).next().slideToggle();
        });
    });
</script>

こちらのメリットは「項目数を気にしなくても良い」ということにあるかなと思います。

画面幅が狭いスマートフォンではトグルメニュー化するため、項目数が多くとも見た目が変化することはあまりありません。

そしてデメリットは「スタイルの制約が多いこと」です。

スマートフォン表示とPC表示、どちらも同じソースを使用しているため、マークアップが複雑になるようなスタイルやスクリプトを組むことはお勧めできません。

どうしてもリッチなデザインを採用したい場合は、この次の方法を採用することをおすすめします。

おすすめシチュエーション:メニュー項目数が5つ以上の時

3:【WordPress+Javascript+CSS】「メニュー」で専用タグ作成

スクリーンショット_022714_092430_PM

メニュー項目を管理画面で事前に作成し、PHPでスマートフォン・PCそれぞれにタグを出力させるというやり方になります。

WordPressなどのCMSを使用している人限定の実装方法ですね。

WordPressでは「wp_is_mobile();」を使用することでスマートフォン・PCでの出力タグを切り替えることができます。

ですのでスマートフォンでのみ表示させる場合は

<?php if ( wp_is_mobile() ) {
    スマートフォンで表示させるコンテンツ
} ?>

反対にスマートフォン以外で表示させる場合は

<?php if ( !wp_is_mobile() ) {
    スマートフォン【以外】で表示させるコンテンツ
} ?>

となります。

設置位置は一緒だけど、マークアップを変えたい場合は

<?php if ( wp_is_mobile() ) {
    スマートフォンで表示させるコンテンツ
} else {
    スマートフォン【以外】で表示させるコンテンツ
} ?>

で対応できます。

メリットは「デザインが自由自在」ということです。

そもそもタグ自体が別物になりますので、出力方法さえわかればだいたいのことは実装可能です。

タグの出し方だけを変えているので、メニュー項目は1・2同様一括管理できるのもメリットですね。

しかしその反面、「コーディング知識が必要」「PHPを組むのが面倒」というデメリットもあります。

WordPressなどのオープンソース系CMS共通のデメリットですが、「自由にできる分全部自分で設定する必要がある」ということですね。

おすすめシチュエーション:こういうことをしたい時

仕様をしっかり確認し、正しくお使いください

まとめます。

  • メニュー項目が少ない&1列表示・・・table-cell
  • メニュー項目が多い&手軽に対応・・・toggle
  • スマートフォン・PCで大きく変えたい・・・wpismobile

それぞれの特性をしっかり理解し、状況に合わせて正しく使い分けることが大事です。

追記:2014/3/5 19:00
記事中「wp_is_mobile();」が「wpismobile();」と表示されておりましたので修正いたしました。

ご指摘ありがとうございます。


[WordPress]2014年1月の新着無料レスポンシブテーマ5選

[WordPress]2014年1月の新着無料レスポンシブテーマ5選

LizardBusiness
こんにちは。ECプロデュース部の岡本です。

ブログやウェブサイト構築に用いられるCMS「WordPress」はオープンソース・ソフトウェアのため、日々新しいテーマが登場しています。

今回は2014年1月にWordPress<公式テーマディレクトリに登録された新着テーマの中から5つ、レスポンシブかつ無料のテーマをご紹介いたします。

1:固定サイドバー付きのレスポンシブテーマ:typefocus

typefocus

技術系ブログにありそうな固定サイドバー付きレイアウトの「typefocus」です。

gitのアイコンがデフォルトであることや、仮画像が猫なあたりがより技術系ブログっぽい印象です。

サムネイル無しのタイトル勝負です。
typefocus

スマートフォン版ではヘッダーに表示が切り替わる様子。

物書きさんのブログなんかにも使えそうです。

WordPress ? typefocus ≪ Free WordPress Themes

2:モバイルファースト系テーマ:Syntax

Syntax
凄まじくモバイルファーストなテーマ「Syntax」です。

モバイルに最適化されているだけに留まらず、しっかりデザインにも拘りが見える所が良いなと思います。
Syntax
モバイルではタップ表示のメニューがヘッダーに移動しています。

ブラウザで動かすとちょっと面白いものが見れますので、ぜひお試しを。
WordPress ? Syntax ≪ Free WordPress Themes

3:LP系レスポンシブテーマ:BizFlare

BizFlare

「まさにLP」という印象なデザインのテーマ「BizFlare」です。

フラットにデザインされていますので、ちょっとしたアプリやソフトウェアの配布に使ってみると良いかもしれません。
BizFlare
モバイルサイズでもしっかり見れるようにはなっていますが、サンプル画像がモバイル非対応ですね・・・

WordPress ? BizFlare ≪ Free WordPress Themes

4:Bootstrapベースのシンプルテーマ:Hypnotist

Hypnotist
Bootstrapベースのフラット系レスポンシブテーマ「Hypnotist」です。

FlatUIは使用されていないようですが、配色がどことなく似ている印象を受けます。
Hypnotist
スマートフォンではヘッダーがかなり大きく見えるので、気になる方は要修正です。
ワードプレス>催眠術師≪無料ワードプレスのテーマ

5:リッチな企業向けテーマ:LizardBusiness

LizardBusiness
LizarThemesによるビジネス向けテーマ「LizardBusiness」です。

スライダーやメニュー画面など、管理画面から様々な設定が実施できる多機能なテーマとなっています。

管理画面設定項目

管理画面設定項目

LizardBusiness
スマートフォンでは検索バーとドロップダウンメニューが中央に配置されるようになっています。
WordPress ? LizardBusiness ≪ Free WordPress Themes

まとめ

いかがでしたでしょうか?

WordPressのテーマは様々な場所で無料配布されておりますが、公式の審査を通過したテーマはこの「公式テーマディレクトリ」のものだけです。

*無料テーマの「リスク」についてはこちらの記事をご覧ください。

PHP/WordPressに慣れていない・自信がない方は、ぜひこの「公式テーマディレクトリ」をご活用頂きたいと思います。

[WordPress]端末ごとにタグを切り替える方法3つ

[WordPress]端末ごとにタグを切り替える方法3つ

typing_code

こんにちは。ECプロデュース部の岡本です。

SEOやサイト更新の手間を考えるとレスポンシブウェブデザインが一番なのですが、
やはり状況によっては端末ごとに出力するタグを切り替える方が良い場合もあります。

今回はWordPressで端末ごとにタグを出し分ける方法についてご紹介します。

PHP で、ユーザーエージェント(iPhone・Android・タブレット・携帯・PC)によってページを振り分ける | モノリオ

ECサイトは1つでいい

パターン1:テンプレートタグを利用する

デバイス毎にテンプレートファイルを作成し、UA判定後に読み込ませるタイプです。

デバイスの数だけphpファイルを作る必要があるので、「メニュー」や「ウィジェット」を活用するなど「保守の負担にならない方法」を考える必要がありそうです。

<?php
	$ua = $_SERVER['HTTP_USER_AGENT'];
	if (
	(strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) ||
	(strpos($ua, 'iPod') !== false) ||
	(strpos($ua, 'iPhone') !== false) ||
	(strpos($ua, 'Windows Phone') !== false)){
	 get_template_part( 'content', 'sp' );
	} elseif (
	(strpos($ua, 'DoCoMo') !== false) || 
	(strpos($ua, 'KDDI') !== false) || 
	(strpos($ua, 'SoftBank') !== false) || 
	(strpos($ua, 'Vodafone') !== false) || 
	(strpos($ua, 'J-PHONE') !== false)) {
	 get_template_part( 'content', 'ketai' );
	} elseif (
	(strpos($ua, 'Android') !== false) || 
	(strpos($ua, 'iPad') !== false)){
	 get_template_part( 'content', 'tablet' );
	} else { 
	 get_template_part( 'content', 'other' );
	}
?>

パターン2:htmlタグのみの場合

phpコードが入っていない場合、「ヒアドキュメント」を使うことで比較的簡単に記述できます。
ヒアドキュメント – Wikipedia

言語によって記述法が異なりますが、WordPressで使用するPHPの場合

<<<EOD <文字列> EOD;

となります。

そしてこちらが実装例です。

<?php
	$ua = $_SERVER['HTTP_USER_AGENT'];
	if (
	(strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) ||
	(strpos($ua, 'iPod') !== false) ||
	(strpos($ua, 'iPhone') !== false) ||
	(strpos($ua, 'Windows Phone') !== false)){
echo <<<EOD
	<p>スマートフォンから閲覧中</p>
EOD;
	} elseif (
	(strpos($ua, 'DoCoMo') !== false) || 
	(strpos($ua, 'KDDI') !== false) || 
	(strpos($ua, 'SoftBank') !== false) || 
	(strpos($ua, 'Vodafone') !== false) || 
	(strpos($ua, 'J-PHONE') !== false)) {
echo <<<EOD
	<p>携帯から閲覧中</p>
EOD;
	} elseif (
	(strpos($ua, 'Android') !== false) || 
	(strpos($ua, 'iPad') !== false)){
echo <<<EOD
	<p>タブレットから閲覧中</p>
EOD;
	} else { 
echo <<<EOD
	<p>PCその他のデバイスから閲覧中</p>
EOD;
	}
?>

パターン3:CSSファイルを出し分けたい場合

htmlタグとphpが混在している場合、phpを分割してしまうことが効率的かもしれません。

<?php
	$ua = $_SERVER['HTTP_USER_AGENT'];
	if (
	(strpos($ua, 'Android') !== false) && (strpos($ua, 'Mobile') !== false) ||
	(strpos($ua, 'iPod') !== false) ||
	(strpos($ua, 'iPhone') !== false) ||
	(strpos($ua, 'Windows Phone') !== false)){
?>
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/mobile.css" type="text/css" media="all" />
<?php
	} elseif (
	(strpos($ua, 'DoCoMo') !== false) || 
	(strpos($ua, 'KDDI') !== false) || 
	(strpos($ua, 'SoftBank') !== false) || 
	(strpos($ua, 'Vodafone') !== false) || 
	(strpos($ua, 'J-PHONE') !== false)) {
?>
	<link rel="stylesheet" href="<?php echo get_template_directory_uri(); ?>/ketai.css" type="text/css" media="all" />
<?php	
	} elseif (
	(strpos($ua, 'Android') !== false) || 
	(strpos($ua, 'iPad') !== false)){
?>
	<meta name="viewport" content="width=device-width,initial-scale=1.0">
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<?php	} else { ?>
	<link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="all" />
<?php	}?>

もっと手軽な方法

いちいちUAを記述しなければならないことや、タグ・テンプレートファイルを個別に作成しないといけないなどどれもなかなか保守性に難ありです。

身も蓋もない話ですが、「そもそも使わないか、最小限に抑える」ということが最も保守性を高めるのではないかと思います。

例えばパターン3のCSS振り分けなどは、「WPtouchプラグイン」や「Stingerテーマ」などで使用されている手法です。

しかしCSSの振り分けをしたいだけであれば、「メディアクエリ」を利用した記述法のほうが圧倒的に行数が少なくなります。

<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link rel="stylesheet" media="screen and (max-width: 480px)" href="mobile.css">
<link rel="stylesheet" media="screen and (min-width: 481px)" href="other.css">
<!--[if lt IE 8]>
<link rel="stylesheet" href="other.css">
<![endif]-->

WordPressはPHPさえ使いこなせば何でもできるCMSですが、

その分「本当にそうすべきなのか?」をしっかりと考えて制作をする必要がありそうです。

さらに手軽な切替方法[PR]

スクリーンショット_013014_064416_PM
aishipRでは、デバイス別の表示切り替えを1クリックでできるようになってます。

スマートフォンやフィーチャーフォンでは、画像リサイズ・不要なhtmlタグの削除などがサーバー側で実施され、かなり気軽に表示切り替えができるようになってます。

ECサイトは1つでいい


ECサイト運営者が今こそブログを始めるべき3つの理由

ECサイト運営者が今こそブログを始めるべき3つの理由

MBAを見る女性

SEOにおける独自コンテンツの重要性

日頃、EC事業者様のお手伝いをさせて頂いている中でご相談される内容の1つに「集客」があります。

集客というとリスティング/DSP広告/アフィリエイト等様々な広告手法がありますが、近年広告費の高騰やSNSの台頭により広告そのものを見直されておられる企業様が非常に多いように感じます。

そしてその中でもやはりSEOはどの企業様も差し迫って見直されている項目の一つです。今回はECサイトのSEOの一つである「独自コンテンツ」の重要性について解説していきます。

  1. お客様は優良な情報を求めている
  2. 検索ニーズの多様化
  3. Googleの検索エンジンも優良コンテンツを重視している

1,お客様は優良な情報を求めている

スマートフォンで検索

photo credit: sinkdd via photopin cc

これまでECサイトで物を売るということは、EC事業者様は情報を提供し(Push型)、エンドユーザーに情報提供をしてきました。

しかしスマートフォンなどのモバイル端末の普及によりお客様は手軽に自分から知りたい情報を「いつでも」「どこでも」検索し自分にマッチした情報を得ることができます。

またブログやFacebook/twitterなどにより簡単に情報を共有することができ、優良な情報はすぐに拡散されていきます。これまでの一方通行の情報発信ではなく真にお客様に必要とされる情報提供が求められています。

2,検索ニーズの多様化

ECサイトで必要とされる情報は商品情報/商品価格など様々な情報がありますが、ここで取り上げるのはこれらの情報+αの情報です。

例えば今お読み頂いているこのブログも情報発信コンテンツの一つです。

本ブログにアクセスしてくるユーザー様はEC事業者様や企業のWeb担当者、IT業界に携わる人など様々で検索されてこられる内容も多岐にわたります。そこで弊社はレスポンシブWebサイトやスマートフォンECサイトなどを最も得意とし、これまでの実績・ノウハウを貯めているので、その情報を本ブログにて情報を提供しています。

このモバイルファーストマーケティングラボをしっかり運用するようになってから、Google経由の自然検索流入数がここ1年で約3倍に伸びました。それもビッグワードではなく、ニッチなキーワードを掛けあわせて検索してくる方が大半をしめています。

Googleorganic検索数推移

コンテンツはフローで消費されるのではなく、蓄積されていくため、意外なワードで検索してきた昔の記事などがアクセスを集める場合もあります。

EC運営でも同様で、例えば「お米を販売したい」というEC事業者様が、お米をECサイト上に並べておくだけでは単純に価格だけで比べられてしまい競合他社へ流れてしまう可能性が高くなります。

しかし商品販売と連動する形で「レシピ」等のコンテンツ付け加える事で、お米を使った料理を検索している人にもリーチすることができ、お米意外にもニッチなキーワードからの流入が期待できます。

3,Googleの検索エンジンも優良コンテンツを重視している

Googleの検索

photo credit: JD Hancock via photopin cc

これまでのSEOというと「被リンク」をいかに集めるかということが重要視されてきましたが、昨今では優良コンテンツ(情報)をどれだけ提供しているかという傾向に変わってきています。

Googleさん本気やで!お金でSEOするのは全スパムの時代へ

実際弊社がお手伝いさせて頂いているお客様でもここ1〜2年のGoogleの仕様変更で大きく検索順位を落とされたお客様がおられました。

原因の一つに楽天等のモールと内容が重複しているためにGoogleの検索エンジンから独自のコンテンツと見なされずコピーサイトと見なされたため検索順位を落とされたお客様もおられました。

よって優良コンテンツ(独自のコンテンツ)はこれからのSEOで非常に重要なポイントになってきます。

コンテンツ作りのテーマはその企業様にとって様々ですが、自社サービスとお客様とのエンゲージメントを考えた時に何を求められているのかを徹底して追求しコンテンツをつくる必要があります。

コンテンツ作りに最適なWordPress/Movabletype

これまでの情報発信というと多くのEC事業者様はアメブロなど外部サービスを使い店長ブログとして情報発信をされておられる企業様が多いように思います。

しかし外部のブログサービスを使うとSEOはもちろんコンテンツ作りにも限界がでてきます。

わっしょい。アメブロなどの外部無料ブログからのリンクに意味が無くなる日

そこで無料で使えるWordPressやMovabletypeを使います。WordPressやMovabletypeは無料で使えるだけでなくソースコードも自由に記述できるため思い通りのコンテンツ作りに適しています。

またプラグインやテンプレートも豊富にあるため初心者の方でも運用できるのがポイントです。

参考:【厳選】安全・レスポンシブなWordPress無料テーマ10選

本ブログもaishipRでサービスサイトを構築した上でWordPressを組み込み情報サイトを運営しています。
aishipRサービスサイト:http://www.aiship.jp/
WordPressで構築した情報サイト:http://www.aiship.jp/knowhow/

同一ドメイン内でコンテンツを運営することによりSEO効果を期待できるだけでなく本サイト(ECサイト)への集客が期待できます。

そして何よりも重要なことはコンテンツ作りを継続するということです。

確かにコンテンツを考え、更新するというのは労力のいる仕事ではあります。しかし続けることによりリスティング広告等のような一過性の広告効果ではなく中長期的なサイトへの誘導が行えます。

まとめ

ECサイトへの集客となるとどうしてもすぐの結果を追い求めてしまいます。もちろん結果(売上)を出すことがECサイトの最大の目的ではありますが、中長期的な施策としてお客様に役立つ情報(優良コンテンツ)は今後不可欠になってきます。

岡村直寿