さくらのレンタルサーバーからMixHostに移転しました。良かったこと、イマイチだったこと色々。

約4年間、お世話になったさくらのレンタルサーバー(スタンダードプラン)に別れを告げ、先月MixHostに移転しました。移転の前後はその作業に追われてバタバタしてましたが、1か月経って、個人的に良かったことイマイチだったことをまとめてみました。

ブログのサーバー移転を検討中の方は良かったら参考にまで。

さくらサーバーに別れを告げた理由

さくらのレンタルサーバーを止めようと思った理由は幾つかあるのですが、ざっくりと書くと以下のような感じかと思います。

  • WordPressのモッサリ感がどうしても嫌だった
  • SSL化をするにあたって、よりお得なサーバーを探していた
  • 5万PVを超えて、ちらほらサーバーエラーが目立つようになった
  • 単純に飽きた

 

WordPressのモッサリ感がどうしても嫌だった

これはもう長年ずっと思っていたことなのですが、さくらサーバーでWordpressを動かすとモッサリした動きになります。スピードだけで言うなら、さらに格安のロリポップと比べても、遅いと思います。

それでキャッシュプラグインを使ったりCDN(Cloud Flare)を使ったり、工夫はしていたのですが、何となく遅くてヤだな~という気持ちが抜けませんでした。

 

SSL化をするにあたって、よりお得なサーバーを探していた

最近のブラウザの仕様変更とかを考えても、Googleの方針を見ても、いい加減SSL化しないとまずい感じですよね。単なるブログとはいえ、今年中にはSSL化は必須だなと思っていました。

最近はドメイン認証型のSSL証明書は年額1500円くらいから使えるところも増えてきて、さくらサーバーもそうなのですが、複数のドメインを使っている場合は、そのドメインの数分だけ申し込まないといけません。

もっとお得なプランはないのかな?とふと思ったところからサーバー探しが始まった感じです。

 

5万PVを超えて、ちらほらサーバーエラーが目立つようになった

月間5万PVを超えてから、ちらほら503サーバーエラーを見かけるようになりました。5万PVってそんなに負荷がかかるほどのアクセスだとは思えないのですが。。。

さくらのスタンダードプランを利用されている方だと、10万PVを超えるとそういう問題が出てきたというようなことを書いているブロガーさんは何人か見かけました。

このさき10万PVまで行くのかどうか…ズボラな私のブログ運営では何とも言えませんが、エラーが出ていることは事実なので、これもサーバー移転を考えるきっかけにはなりました。

 

単純に飽きた

4年も同じのを使っていると、何だかつまらなくなった、という気持ちもありました。(別にサーバーに面白さを求めているわけではないのですが…)

さくらサーバーは、初心者の私には可も不可もなく、使い勝手もコストパフォーマンスも悪くなく、と最も無難な選択肢だったと思います。が、「これ!」という何かのメリットが強く感じられなかったこともあり、何となくフレッシュな気持ちになりたくて移転先を探し始めることとなりました。

 

移転先の候補で考えていたサーバー

幾つか候補はあって、当初は多くのブロガーから厚い信頼を得ているエックスサーバーが第一候補でした。



エックスサーバーは、とにかく安定していて高速だという話をいろんなところで目にします。

コストはロリポップやさくらサーバーよりかかるけど、

  • アクセスが月間10万PVを超えたらエックスサーバー
  • しっかりブログやサイトを運営したい人にはオススメ

という感じで書いているブロガーが多いと思います。

 

エックスサーバーを使っている=ブログ上級者

みたいな雰囲気が漂う、あこがれの存在みたいな感じですかね(笑)

 

ほぼほぼ、エックスサーバーに心が決まっていたところ、色々調べてみると…「ん、何だか他にもよさそうなサーバーがある?」という気がしてきました。

気になったのは、Zenlogic(ファーストサーバー)とMixHostです。

 

Zenlogicのすごいところは、300GBと大容量で月額890円、初期費用無料、そしてドメイン認証型のSSLサーバー証明書が無料で使えるということです。個人レベルのブログにはこういうSSL証明書で十分だと思っているので、無料で使えるのはありがたい。

ただ、Zenlogicは「中小企業のためのレンタルサーバー」というタイトルがついているとおり、雰囲気がブロガー向けではなく企業向けな感じです。300GBも容量は使わないし(さくらのスタンダードで100GBも全然使いきれていないかった)、エックスサーバーよりはコストは下がるけどどうかなぁ…と決め手に欠ける感じでした。

 

そしてその後に見つけたのが、今回の移転先となったMixHost。



 

私がMixHostを選んだ理由

MixHostを選ぶ決め手となったのは、コストパフォーマンスがめちゃくちゃ良いということと、ページ表示が高速化できることです。

コストパフォーマンス

月額480円から使えて、初期費用は無料。ドメイン認証型のSSLサーバー証明書も無料(複数の独自ドメイン、サブドメインにも使えます)。なので、さくらのスタンダードプランを使っていたのとほぼ同じコストで、サーバー証明書が使えることになり、高速化もできるという有難い話。

もちろん、月間PV数がもっと多い場合は月額980円プランがよさそうですが、5万PV前後なら一番安いプランで十分でしょう。

 

高速化を実現可能

これには幾つか理由があります。まずSSDであること、またWordpressの高速化プラグインとして「LiteSpeed Cache」というプラグインが使え、「圧倒的な高速表示」を実現するとのこと。PHP7に対応、HTTP/2に対応なので、これら全部ひっくるめたら、きっとページは圧倒的に早くなりそう!!!という感じがします。

でも、あまりうまく説明できないので詳しくはMixHostの公式サイトをご覧ください。

→ https://mixhost.jp/services/features

 

その他に、サーバー側でDBとファイルの自動バックアップを行ってくれるのも嬉しい機能です。さくらでは自動バックアップがなくて、Wordpress側でバックアッププラグインを使う以外なかったので。

あとは、30日間無料でお試しで使えること、cPanelで言語を英語その他に変更可能(ロシア人の夫とも共用できる)なことも、気に入りました。

一番安いプランだと、SSDということもあり10GBが容量制限ですが、一番大きな容量を占めているこのブログでも数GBレベルなので、これも問題なし。

30日あれば良し悪し分るだろうということで、MixHostに決めて移行したのが先月半ばです。

 

で、

移行した後の満足度は…

85点くらいかなと。

「あれテンション下がってる?」と思ったかもしれませんが、基本はすごく満足しています。

 

良かったことは、

  • SSL化が簡単だし、やっぱりお得
  • マニュアルが分かりやすい
  • WordPressの表示が体感的に早くなった

ということですね。移行するのに、DBとファイル類を自分で移動させる一番マニュアルな方法でWordpressを引っ越しましたが、特に大きな問題もなくすんなりできました。

移行するためのマニュアルもあるので、わかりやすくて助かった。

複数のドメインも全部SSL化できるのは本当にありがたいです。自分のサイトをブラウザで表示させたときにアドレスバーがちゃんと緑色になっているのって結構うれしいものですね(笑)

 

イマイチだったことは、

  • 何度かサーバーが5分ほどダウンするときがあった(日本の夜中の時間帯)
  • ページ読み込み速度はそんなには早くなっていなかった

 

使い始めた最初の2週間で、2~3回、夜中の時間帯ですがサーバーがダウンしてサイト表示ができなくなる時がありました。5分ほどでしたが、「安定していないのかな」と若干不安になりました。

とはいえ、サーバーの安定性を高めるメンテナンスが行われ、それからはそういった現象は見かけていません。今後に期待、という感じですね。

 

あとあ、LiteSpeed Cacheの効果にすごく期待を寄せていたのですが、Google AnalyticsやGtmetrixの結果は良いとは言えず、むしろ、平均するとさくらサーバー時代より表示時間が長くなっている感じがしました。

PHPバージョンも7に上げて、抜群に読み込みが早くなるだろうと期待が大きかっただけに、ちょっと残念な気がしています。

体感的にはもちろん早くなったんですが、なんとなく「ムラがある」のかなぁ…と思ったり。

結局、LiteSpeed Cacheはやめて、以前から愛用しているW3TotalCacheとCloudFlareの組み合わせにしています。こうしてからは、安定してそこそこ高速表示ができている感じです。

少なくとも、さくらサーバーの時よりWordpress管理画面の表示もスムーズなので、このコストで考えれば、文句は言えないかなと。

 

というわけで、個人的には、

  • コストパフォーマンス重視で、あまり容量が必要なくて、ある程度高速に使いたいならMixHostのエコノミープラン(月額480円~)
  • コストより高速・安定性が重要ならエックスサーバー
  • その間くらいなら、MixHostのスタンダードプラン(月額980円~)

という選択肢になるのかなと。

 

今後のブログ、その他のサイトの運営状況によって様子を見ていこうと思います。

しばらくはMixHostにお世話になる予定です。

【ECキューブ3系】商品ページのタイトルタグがページ名/店名の順になるように変更する方法

ECキューブ3系(現3.0.13)で、タイトルタグが「店名 / ページ名」の形式になっているのを「ページ名(商品名)/ 店名」になるようにカスタマイズする方法について書いています。

SEOの観点からも、また商品名で検索するユーザーへの分かりやすさという意味でも、店名が先に来るのはあまりよくありません。大抵のオンラインショップ(に限らず基本的なSEOを抑えているブログ・サイトも)なら「ページ名(商品名)/ 店名」の順にタイトルタグが設定されているはずです。

ECキューブだと何でいまだに店名が先になっているのだろう…と思いますが、それはともかく、3系のデフォルトテンプレートを使用している場合を例に、変更するファイルの場所、変更箇所を以下にまとめてみました。

修正すべきファイル

/app/template/default/

のディレクトリにあるdefault_frame.twigファイルを編集します。

もし上記のディレクトリに該当するファイルがない場合は、

/src/Resource/template/default/

から複製してください。

/src/…のところにあるのは、元のテンプレートファイルです。カスタマイズしたいときには、元のファイルを直接いじるのではなく、/app/…のほうに複製してから使う方が安全です。

参考)EC-CUBE3.0初心者の簡単なテンプレートカスタマイズ方法

 

タイトルタグを編集する

default_frame.twigを開き、以下のタイトルタグがある場所を見つけます。

 

ここを以下のように変更します。

 

参考)簡単解決!EC-CUBE3系のSEO問題 

 

変更が終わったらファイルをサーバーにアップロードして確認します。(変更が反映されない場合はECキューブの管理画面からキャッシュを削除します)

これでひとまずOKです。ただし、一つだけ難がありました。

トップページのタイトルを店名のみに

上記のように変更すると、トップページのタイトルは

「TOPページ / 店名」

というふうになってしまいます。

このままだとちょっと美しくない。トップページは「店名」のみのほうがよいので以下のように条件分岐します。

 

参考)EC-CUBE 3.X:デフォルトのtitleを任意のものに変更する方法

 

これでタイトルタグがきれいに設定できました。

themeforestでWordPressテーマを選ぶときに必ずチェックしている6つのポイント

themeforestはHTMLサイトやWordpressなどのCMSで使えるデザイン性・クオリティの高い有料テンプレートの販売サイトです。Wordpressをそこそこ長く使っている人なら、一度は見たことのあるサイトだと思います。

WordPressで作るブログやサイトのデザインは無料で使えるテーマもたくさんあり、個人のブログでわざわざ有料テーマを使う必要はないかもしれません。

でも以下のような場合には、有料テーマの利用を考える価値があります。

  • 記事が多くなったブログをお洒落なニュースサイト風に見せたい
  • 企業のコーポレートサイトを素早くかつクオリティ高めで作りたい
  • オンラインショップを運営したい

特に単なるブログではなく、「ウェブサイト」である場合、そしてデザインや機能にある程度のクオリティが求められるようなサイトをつくるなら、無料テーマではなく品質が確保されたテーマを使用するのがベターです。

Webデザイナーに一から頼むよりはずっと安くできますしね。

themeforestで販売されているWordpressテーマの多くは、Visual Composerなどのページビルダープラグインが付いており、コーディングができなくても直感的にページのレイアウト作成やコンテンツ配置を行うことができるのも魅力です。
(ビルダーの扱いに慣れるのに2,3日苦戦するかもしれませんが・・・それを超えればとても楽々です)

でもthemeforestには非常に多くのWordpressテーマが販売されていて、いざ選ぼうとすると、どれがいいのか迷ってしまいます。

デザインが気に入ったからという理由だけで買うと、あとから「この機能が欲しかったのにない」とか「Wordpress本体のアップデートがされてテーマの機能がちゃんと使えなくなった」なんていうこともありえます。私もそういうのを選んでしまったことがありました。

そこで、今回は、私がthemeforestでテンプレート類(Wordpressテーマ、HTMLテンプレート*)を選ぶときに、後から失敗しないよう、必ずチェックしているポイントを上げてみたいと思います。

Themeforest サイトへ

*以下はWordpressテーマを選ぶことを前提として書いていますが、HTMLテンプレートを選ぶときにも大体当てはまりますので参考にしてみてください。

 

テーマの最終更新日と対応バージョン

更新日が半年前とかだと、Wordpress本体のアップデートに伴ってテーマが更新されていないことになります。それでも使えるテーマもあるのですが、更新がおろそかだと、何かあった時のサポートなどもあまり期待できませんし、動かない機能が出てきたりする可能性もあります。

最新更新日が1~2カ月以内で、Wordpress本体の最新バージョンに対応しているかは必ずチェックします。

またWordpress本体のバージョン、さらにオンラインショップを作る予定ならWooCommerceのプラグインバージョンも最新版に対応しているかも要チェックです。

 

購入者のレーティング、販売数

購入者の評価が高いことと、購入された数がそこそこあることは重要です。多くの人が使っていれば、当然今後もサポート、アップデートがしっかりされるでしょう。購入者が多いほうがレーティングにも信頼性がでます。

 

デモをよーく見てデザイン、コンポーネントをチェック

デザインと必要なコンポーネントがあるかどうかをチェックするには、デモをじっくり見てみることが重要です。

デモサイトでは以下の点にも注目しています。

  • ショートコードの中に自分が使いたいと思っているコンポーネント(パーツ)があるか。例えば価格表とか、アコーディオンとか、グラフとか。あるなら、デザインは気に入っているか。
  • 作成したいと思っているページの種類があるか。ランディングページ、ショップ、ギャラリーなど。
  • 段組みや、ボックス型、ワイド(Full Width)型など、レイアウトの選択肢に欲しいものがあるか。
  • 使えるアイコンフォントのデザインがどうか(意外とアイコンフォントのデザインでお洒落感がぐっと変わったりする)

 

含まれているプラグインに何があるか

ページビルダーやスライダーのビルダーが含まれているか。どのプラグインが使われているか。Visual Composer、Layer Sliderなど。

Visual Composerを独自に拡張している場合があるのですが、Wordpress本体のバージョンアップに伴って使えない機能が出たりすることがあるので注意です。購入者数がものすごく多ければいいですが、私はこういうのは選ばないことにしました。なぜかというと、Wordpress本体のアップデートでプラグインに不具合が出ると拡張版のアップデートと待つのが結構長くなることがある(最悪アップデートされないかも)からです(経験済み)。

 

多言語化プラグインに対応しているか

海外にいると多言語化が結構ポイントだったりするので。

 

どんなサイト向けのテーマか

多目的Multi Purposeなテーマはデザインバリエーションも豊富だが、デザインに余り自信がない人、デザインのカスタマイズに自信がない人は、逆に方向性を見失いやすいです。

もしサイトの目的が決まっているなら、その目的に合ったカテゴリーから選ぶとデザインが決まりやすいと思います。(不動産系、IT系、クリエイティブ系などのカテゴリで絞る)

 

以下はカテゴリ別の人気テーマ

ニュースサイトっぽく(記事の多いブログ)→ Newspaper

クリエイティブ系→ Bridge – Creative Multi-Purpose WordPress Theme

医療系→ MediCenter – Responsive Medical WordPress Theme

トラベル系→ Tour Package – WordPress Travel/Tour Theme

 

とにかくデモをしっかり見て、デザインが気に入り、かつ、そのテーマを使ったサイトのイメージが湧いてくれば候補に入れることにしています。最終的には、幾つか選んだ中から、前述の機能面と信頼度から一つに絞っています。

注意点: 表示されている価格は、1サイトに使うための価格です。テーマを複数のサイトに適用することはライセンス違反となるのでご注意ください。

ThemeForestへ

 

国産のテーマが安心、という方は…

英語だと何となく心配、国産テーマのほうが何かと安心、という方には、デザインプラスのテーマがおススメです。細部までのクオリティにこだわった美しいデザインがそろっています。(以下はほんの一例です)

コーポレートサイト用テーマ VeNus

WordPressテーマ「VENUS(TCD038)」

 

「縦書き」を美しく魅せる和風サイトテーマ KADAN

WordPressテーマ「KADAN(TCD056)」

EC-Cube3系 送料無料商品の設定方法とカート内メッセージのカスタマイズ

EC-Cube3系では管理画面のショップマスターから、買い物の合計金額が●円以上なら送料無料、合計個数が●個以上なら送料無料という風に設定ができます。

が、特定の商品だけ、例えばプロモーション商品とか、軽量でメール便発送可能な商品などを個数や合計金額に関わりなく送料無料にしたい場合もありますよね。その場合は商品種別を使った設定が必要になります。

ということで、以下にEC-Cube3系で一部の商品を送料無料にしたい場合の設定方法をまとめました。

※使用しているバージョンはEC-Cube3.0.12です

 

 

送料無料商品用に商品種別を作成する

基本的にはEC-Cube2系で解説されている方法と同じ感じでできます。送料無料の商品種別を作成する感じです。

参考) 【EC-CUBE2.13】商品ごとに異なる配送方法を設定する

 

1.設定 > システム情報設定 > マスターデータ管理 を選択します。

プルダウンから mtb_product_type を選択。

今回はID2を送料無料という商品種別にしましたが、必要ならIDを追加してもOK。

 

2.続いて基本情報設定 > 配送方法設定 で送料無料用の情報を作成する。

商品種別を送料無料にし、全国一律送料の欄を0にすればOK

 

あとは、「商品管理」から送料無料対象にする商品情報の「規格設定」で、商品種別に「送料無料」を選択しておけば、送料無料商品となります。

基本的な設定はこれだけです。簡単♪

でも、これだけだと送料無料条件を設定している場合に混乱を招くおそれがあります。

 

送料無料条件を設定している場合は要注意

今回は5000円以上は送料無料の設定をしていますが、この場合、送料無料商品を購入する場合でも、5000円以上になっていないとカートの中身を見た時に「商品の合計金額は「¥ ○○」です。あと「¥○○」のお買い上げで送料無料になります。」という表示がでてしまいます。以下のような感じ。


実際に最後のお会計(支払いの手前)まで進むと、送料が加算されていないことが分かるのですが、ユーザーは混乱するに違いない。これが原因で購入を止めてしまう可能性だってありますよね。

 

なのでこの文言も併せて修正しておく必要があります。これを修正する方法は・・・分かってしまえば意外と簡単でした。(ECCube3の初心者の私は相当時間ロスしましたけど)

 

管理画面から、コンテンツ管理 > ページ管理 と選択し、「カートの中身」の「ページを編集」を選択。

以下のように変更していきます。

まずは

という行を見つけてください。

その下に{# ここから追加 #} {# ここまで #}の間にある部分を付け加えます。

あとはendifで最後閉じないといけないので、pタグが閉じられている手前に上記のようにendifを追加します。

{% if ProductType.id == 2 %}
のところの数字は送料無料に設定した商品種別IDにします。(今回は2)
これで合計金額に関わりなく、送料無料商品を購入する場合は「現在送料無料」と表示されます。

※今回はショップマスターの「複数配送を有効にする」をオフにしており、商品種別が異なる商品を同時購入できない設定になっている。これを有効にした場合の動作は未確認です。

 

あとがき

EC Cube3系の情報が少なすぎて初心者にとってはかなりきついですね。

今回はtwigタグのif文条件分岐で{% break %}が使えるものと思ってエラーになり、ハマりました。
なんでbreak使えないの??>_<

あまりきれいな方法ではないので上記の方法以外にもっといいやり方があったらぜひ教えてください!

 

ネットショップ運営おススメ参考書

一冊あるとショップ運営の方向性や売り上げアップのためにやるべきことがすっきり分かります。何から始めたらいいか分からないという人は、まずこの本に書いてあることを一通りやるのがいいと思います。難しいことは何もないですが、ユーザー目線で現状のショップに何が足りないのかが見えてきます。

EC Cube 3系 商品ページを縦長のランディングページ風にするごく簡単な方法

オンラインショップを作成するのに便利なオープンソースEC-Cubeを先日から使い始めました。

WordPressにすっかり慣れた自分としては、オープンソースでオンラインショップならWordpressにWooCommerceなどのプラグインを入れるのがいいでしょ、とすぐ思ってしまうのですが、EC-Cubeはオンラインショップに特化した国産プラットフォームということもあり、直感的に設定していくのも難しくないような感じがしています。慣れたら楽そう。

とはいえ、細かいカスタマイズ方法になると、Wordpressと違ってEC-Cubeはユーザー数がさほど多くなせいか、単なる自分の知識不足のせいか、ちょっとしたことでも調べるのに結構時間がかかる。。。

EC-Cube3系は比較的新しいバージョンなので情報がまだ足りない気もします。

そんなわけで一度迷って解決したことは今後迷わぬよう、しばらくEC-Cube関連の記事を覚え書きとしてアップしていこうと思っている次第です。

長くなりましたが、今回は「ある特定の商品ページだけ、縦長のランディングページ風にする方法」を覚え書きとして記録しておきます。

 

 

特定の商品ページだけ縦長にするごく簡単な方法

EC Cube3系のデフォルトテンプレートの場合、商品の詳細ページを開くと左側に画像、右側に商品の詳細情報と購入ボタンが表示されるようになっていますよね。(以下のキャプチャのような感じ)

 

良く知られている有名な商品を扱うとか、とりわけ詳しい説明のいらない(例えば商品画像+スペック情報だけで済む)ような商品だったら、このようなレイアウトでも全然問題ないですが、そうじゃないほうがいい場合もあります。

例えば、

  • ショップの一押し商品について詳しく紹介したい場合
  • 知名度が高くないため、商品の魅力を十分に訪問者に伝える必要がある場合

こういう時は、いわゆるランディングページ風の、縦長の商品ページを使うほうがいいです。
楽天市場のショップなんかは結構ランディング風のページを作っているところも多い気がします。

 

ランディングページのコンテンツを作るのはまあいいとして、じゃあそれをEC-Cubeの商品詳細ページにどう埋め込むか。

バリバリカスタマイズできるなら方法などいくらでも見つかるのでしょうが、何といっても初心者ですので。。できるだけデフォルトテンプレートのコア部分には手を入れず、ごく簡単な方法でサクッと作れることを考えてみました。

で、「特定の一押し商品だけを縦長にする」なら以下の方法が一番簡単じゃないかという結論になりました。

 

ランディングのコンテンツをブロックとして作成して、該当する商品のIDの時だけそのブロックを表示させる

みたいな感じです。

具体的な方法

今回は商品情報がすでに作成されていて、商品IDが1の商品をランディング化することとします。

まずEC-Cube 管理画面のコンテンツ管理>ブロック管理で、新規にブロックを作成。

ブロックデータの部分に以下のように記述します。

ポイントはランディングページにする商品IDに該当する場合のみこのブロックデータが読み込まれるように設定すること。

あとは、「ページ管理」メニューから商品詳細ページのレイアウト管理を選択。#contents_topのところに先ほど作成したブロックを設定すればOK。

 

これで商品ID1の商品詳細ページのランディング化をする準備が整ったことになります。あとは、上記コードの「ここにランディングページのコンテンツを作成」の部分につらつらとランディングのコンテンツを書いていけばOKです。

EC Cube 3のデフォルトテンプレートはBoostrapベースで作られているのでレスポンシブ対応でコンテンツを作るのも楽ですね。

EC Cube初心者の私にとっては何もかもが新しいことだらけでやたら時間が取られてますが、せめてBootstrapであることが唯一の救い。

企業向けランディングページ22の実例から見るファーストビューのデザインパターン

ランディングページのファーストビュー(表示して最初に画面上で見れる部分)は訪問者が下にスクロールするか(先を読むか)、ページを閉じて離れてしまうかが決まる一番重要な部分です。幾つかデザインの構成パターンやファーストビューに表示するべき項目を知っておくと、素材を見つけたりイメージを膨らませるのも楽になると思い、22つの実例を分類してみました。

ファーストビューを構成するパーツ

ファーストビューはほとんどの場合以下のパーツからできています。

  • 背景部分
  • フロント部分(背景に対して)
  • キャッチコピー
  • CTA(コールトゥアクション)ボタン
  • ヘッダーナビ(ロゴ・メニュー・連絡先情報など)
  • 付加的情報(対象ユーザ、実績、効果)

それぞれのパーツにも幾つか種類があり、何を使うか、どんな組み合わせにするかによってファーストビューの印象が変わってきます。

もちろん、配置とかパーツの大きさとか、デザインスタイルも重要ですが、まず今回は上記のパーツにどんな素材を使えるのか、実際のLPの例から見てみます。ちなみに、以下で紹介するLPはキャプチャ画像をクリックすると該当LPが新しいタブで開きますので気になったものがあったら実物でチェックしてみてください。

 

背景部分

ファーストビューのなかで一番大きな面積を占めるのが背景部分です。背景の素材が変われば印象もガラっと変わるので、LPが扱う商品・サービス、対象ユーザーに合わせてどんな素材を使うのか注意深く検討したいところです。

背景素材の種類には以下のようなものがありました。下に行くほど情報量も多くなって、背景からユーザーが受けるインパクトも大きくなります。それぞれ例を挙げてみます。

 べた塗りまたはグラデーション(1~3色)

背景がべた塗りまたはグラデーションのLPは、シンプルで情報量の少ないファーストビューのデザインが多いと思いました。

シンプルにすることに徹したファーストビューともいえるかもしれません。インパクトはないですが、余計な装飾がない分、分かりやすいというメリットもあるかと思います。

デザインにフォトショップやイラストレータを多用する必要もないのでLPを始めて作るときはこういうシンプルなものから始めてもいいかもしれません。

べた塗り・グラデーション背景の例

lp-eg2

 

lp-eg1

 

lp-eg3

 

パターン素材

背景にパターン素材を使うと(使うパターンにもよりますが)カジュアルでポップな雰囲気をだせます。

背景パターン素材+フロントに写真かイラスト素材+画像フォントという組み合わせは結構よくあるタイプのLPファーストビューかなと思います。

Web上の無料・有料素材を使って、Photoshop上でさほど難しくなく作れそうです。

パターン素材背景の例

lp-eg7

 

lp-eg5

 

 

イラスト・グラフィック素材

背景にイラスト・グラフィック素材を使うとパターン素材やべた塗背景などよりオリジナリティ、インパクトが上がります。でも写真や動画素材ほど情報量が多くならないので、キャッチコピーなどの文字も目立ってちょうどよい感じ。私はこのタイプが一番好きですね。

でもイラストやグラフィックで製品・サービスの特徴を表すのが難しかったり、デザインセンスやスキルも求められるので難易度的は一番高そうです。

イラスト・グラフィック素材の背景の例

lp-eg11

 

lp-eg18

 

写真

写真を全面背景に使ったファーストビューもよく見かけます。写真さえしっかり選べばそれだけで印象的なファーストビューになりそうです。以下の例にもあるように、製品・サービスに合うように写真にイラストを追加したり、エフェクトを使ってキャッチコピーが目立つような編集をするなどの一工夫を加えるのがポイント。

無料写真素材も最近は充実していますが、ファーストビューくらいPixtaなどの有料の写真素材からちゃんとしたものを選びたいところです。

写真背景の例

lp-eg13

 

lp-eg22

 

アニメーション・スライド

グラフィックアニメーションやスライドを使って動きのある背景にしているLPもと見かけました。動きがあると自然と目がとまりますし、効果的に使えばよいブランディングにもなりそうです。

でも難易度はあがりますね(特にアニメーションは)。

lp-eg17

 

lp-eg4

 

動画

ファーストビューの背景全体が動画というのも時々あります。キャッチコピーその他の言葉で伝えるより動画のほうが断然良さが伝わる製品・サービスならぜひ取り入れたいところです。わざわざ動画を撮るとなると大変ですが。

動画を背景にした例

lp-eg15

 

lp-eg16

 

上記の複数組み合わせ

写真素材だけだとインパクトに欠ける、ブランディングという面からも何か物足りないというときに、写真とグラフィックを合わせて印象を変えることができます。以下はその一例。

lp-eg21

フロントパーツ

どういう風に表現したらいいか分らなかったのですが、「背景パーツ」に対して、「フロントパーツ」と書くことにしました。キャッチコピーの隣などに表示されるイラストや写真素材です。商品やサービスを連想させるものだったり、単にキャッチコピーへの注目をより集めるために使われている場合もあります。

  •  シェイプ・数字
  • イラスト
  • 写真

 

シェイプ・数字

キャッチコピーの一部、実績や価格情報などの数値の一部の数字にデザインを施したり、矢印やシンプルなシェイプなどを使う場合が見受けられます。インパクトは結構大きいです。

lp-eg23

 

lp-eg12

 

イラスト

製品・サービスのイメージをイラスト化して一目で内容が想像できるようにするものもあります。PCやスマホ関連だと、モニターやスマホのイラストもよく使われています。

lp-eg20

lp-eg19

写真

人物の写真が特に多いです。表情やポーズの選び方でも情報の伝わり方が変わるので、対象ユーザやサービスの内容に応じて相応しい人物の写真を選ぶ必要がありますね。

lp-eg6

lp-eg24

 

キャッチコピー

ユーザーが真っ先に読むのがおそらく「キャッチコピー」です。キャッチコピー自体は、キャッチコピー専門のプロが作成する場合もあるかもしれませんが、デザインする側としては、そのキャッチコピーの狙いやインパクトをしっかりユーザーに伝えられるようにデザインする必要があります。

フォントには大きく分けて以下の二種類があります。

  •  デバイスフォント(or Webフォント)
  •  画像フォント

デバイスフォントやWebフォントはいわゆるウェブサイトの通常の文章の表示に使われているものです。画面サイズが変わってもぼやけることがないため、LPをレスポンシブ対応にする場合は、キャッチコピーもデバイスフォントを利用する必要があります。難点はインパクトに欠けること。Webフォントを使うとコンテンツ部分の文章とは違ったフォントを使えるかもしれませんが、いずれにしても文字自体に施せる装飾や文字の回転などはできません。

一方、画像フォントはフォントを文字通り画像として保存したものです。なので、配置やサイズ、回転・変形なども自由にでき、それだけインパクトのあるキャッチコピーをデザインすることができます。しかし、「画像」なのでレスポンシブ対応のLPを作る場合は慎重になる必要があります。(ぼやける危険があります)

 

デバイスフォント(or Webフォント)

lp-eg9

lp-eg10

画像フォント

lp-eg15

lp-eg7

 

CTAボタン

ファーストビューにCTAボタンを設置する場合とそうでない場合がありますが、設置する場合、キャッチコピーのすぐ下に置くケースが大半です。その他の場合では、マウスでクリックしやすく、左上から右下へと移ると言われる目の動きに合わせてファーストビューの右下部分に配置されることもあります。CTAボタンにはオレンジや黄色、赤などの目立つ色が使われることが多いですが、背景に使われている素材や他のパーツと比較して目立つようにデザインする必要があります。

キャッチコピーの下にボタン配置した例

lp-eg13

ファーストビューの右下に配置した例

lp-eg8

ヘッダーナビ

商品・サービスのロゴ、連絡先情報がメイン。ナビゲーションメニューがある場合もあります。背景に同化させたり、あるいはヘッダーバーは別の色で区切りをつけている場合もあります。これもデザインやコンセプト次第ですね。

背景と同化

lp-eg13

背景と別に区切り

lp-eg19

 

 

ファーストビュー下部

ファーストビューにはキャッチコピーのテキストに加えて、商品やサービスの対象ユーザ、実績など、ターゲットユーザーに「自分にも関係がありそうだ」「面白そうだ」と思ってもらうための情報が列挙されることが多くあります。

3点に絞って具体的な数字を含めて強調すると印象に残りやすいようです。

lp-eg11

以下の例のように頭だけファーストビューに表示されるようにし、詳細はスクロールすると見れるようになっているタイプも見受けられます。

lp-eg23

lp-eg23-1

lp-eg15

lp-eg15-1

 

 

…という感じで分類してみましたが、これでファーストビューのデザインがバッチリできるようになるわけではありません(残念ながら。笑)

でも色々なランディングページを見て個々のパーツに注目してみることで、ファーストビューを作るにはどんな要素について検討する必要があるのかが頭の中でスッキリ分かるようになったかなと。

ファーストビュー以外の部分についてもまた次の機会に分類してまとめてみたいと思っています。

LP制作がイマイチだった3つの原因と救いの一冊「ランディングページ・デザインメソッド」

lp特定の商品やサービスの売り上げを効率よく行うために、ランディングページ(以下、LP)の導入を検討するケースはよくあります。基本一枚のページでコンバージョン(売り上げや問い合わせ)につなげられ、リスティング広告と併せて効果をすぐに実感しやすいからです。

最近は安定した集客・ブランディングのツールとしてサイトやブログを育てつつ、即効性のあるLPを作るパターンが多くなっていると思います。

 

そういうわけでLPがしっかり作れるとWeb制作者としては今後しばらく食いっぱぐれることがないなという感じですが、幾つかLP制作をやってみて、Webサイトやブログ制作に慣れているからといってLPが「すんなり」できるわけではないのだということに気づきました。

LPは基本的に縦長の一枚ページで完結するため、幾つものページからなるWebサイトよりも工数がかからなくて「かんたん」と心のどこかで思っていたのですが、甘かった。。

「かんたん」どころか、実際に作ろうとするとものすごく難しく、あれこれやっても時間だけが過ぎてく感じでした。

 

そんな感じで、とにかく最初の頃はあまりに出来が悪かったのですが、今振り返ってみると以下の三つの点が分かっていなかったように思います。

LPがうまく作れない原因1.WebサイトとLPは全然別モノ

まず分からないといけなかったのは、LPとは「Webサイトを一枚ページにしたものではない」ということです。

 

Webサイト・ブログの場合、重要度の高い順に並べると

  1. コンテンツの質とボリューム
  2. サイト構成(メニュー・サイトマップ)
  3. デザイン

という感じで、デザインその他よりも絶対的にコンテンツ重視です。

Webサイト・ブログは以前はかなり装飾が凝ったものも多かったですが、最近はフラットデザインも定着し、見た目よりもコンテンツ重視の傾向が強いです。

読みやすいWebサイトのレイアウトパターンってもう大体決まっているので、そんなにコンテンツの配置とかにも悩まなくていいですし、有料・無料のテンプレートでもいいものがたくさん出回っているので自分で一からデザインしなくてもOKなことが多いと思います。(プロのWebデザイナーさんには怒られちゃいそうですが)

また、コンテンツボリュームも、読みやすさや中身のクオリティは重要ですが、文章量が多ことに問題はない(むしろ歓迎?)し、 あまりにボリュームが多ければ2記事に分割してもいいわけです。

 

それが、LPの場合は全然違ってきます。

LPの場合、

  • キャッチコピー・コンセプト作り
  • デザイン
  • コンテンツの質とボリューム
  • コンテンツの配置

のどれも順序つけがたく重要度が高いです。

一枚のページで商品やサービスの魅力を充分に伝え、ユーザーを行動に促すにはすべてに手が抜けません。

Webサイトやブログの「コンテンツの質」とLPの「コンテンツの質」はまるで違うし、キャッチコピーやデザインも重要な位置を占めます。

 

LP制作に慣れている方は、構成や配置もキャッチコピーの作り方もパターン化されていてさほど難しく感じないのでしょうが。

Webサイトやブログばっかり作っていた自分がチラッとLP制作方法についてのウェブ記事を読んで、いきなりLPを作ろうとしても非常に残念な結果になりました。。

 

本当に「LP制作ができます!」と言えるようになるには、結構な勉強量と実践・経験が必要ということですね。

 

 

LPがうまく作れない原因2.日本のランディングページは広告に近い

色々なLPを見ていて気付いたのですが、海外のLPと日本のLPは少し趣向が違う気がします。

 

海外のLPは

  • Webサイトの延長上 にあるようなシンプルお洒落なデザイン
  • レスポンシブ対応=Bootstrapベースが多く、フォントやアイコンもベクター素材が多い
  • よくある一枚モノのテンプレートをベースに作ると何となく出来上がる

という感じのが多いです。

例えば、以下のようなLP。

lp-en1

lp-en2

 

思えばLP制作というものに初めて手を付けたころは、「海外風」のLPをよく見たり参考にすることが多かったように思います。

こういうLPならBootstrapベースの無料テンプレートでもいいし、ThemeforestのLPテンプレートを使って「スマート&シンプルに」なデザインにできますが、レスポンシブという制約の中で作っていることが多いせいか(あるいはBootstrapベースが多いせい?)、どのLPもデザイン面での大きな差はなく、インパクトにはどうしても欠けてしまうかと。(個人的にはこっちのほうが好きなんですが)

 

一方、日本のよくあるLPは

  • 紙ベースの広告をWeb化したようなインパクト重視のデザイン
  • レスポンシブ対応ではなく、PC用とスマホ用を分けて作ってある
  • フォントやグラフィックは画像ファイルであることが多い
  • デザインはテンプレートに頼らずオリジナリティが高い

という感じです。例えばこんな風です↓

lp-jp1

lp-jp2
日本のLPは電子版の広告を作るようなイメージに似ているかもしれません。イラストレータやPhotoshopを使ってオリジナリティのあるデザインを作っているものも多いし、ダイナミックでインパクト重視です。

「広告」という位置づけから考えると、当然ながら、Webサイトとは違うデザイン力とセンスも求められるし、キャッチコピーのセンスも必要になる。

LPが難しいと感じた原因はここにもありました。

 

LPがうまく作れない原因3.Web記事だけで勉強すれば十分と思っている

LPを作り始めたころは、LPの作成方法やコピーライティングなどについてオンライン記事を片端から読んで勉強するというやり方をしていたのですが、そうやっていたころは全然ダメでした。

知識がどうしても偏ってしまって、「こういう手順を踏んでいけばちゃんと作れる」というパターンが身につかないからだと思います。

ブログやサイトからの情報は、キーワード選定やライバルサイトとの比較から始まって、大きな流れを作り、テキストに落とし込み、コンテンツを作る。ここくらいまでは結構参考になるサイトもあります。

例えばFerretプラスの記事なんかはとても良い記事だと思います。

が、そこからさらにコンテンツをデザインに落とし込み、細かなデザイン・コーディングの注意点についても学ぶとなるとWebからの情報だけでは難しいです。また、サイトの情報だけだと断片的になって、ゼロから完成までの一貫したプロセスを学びにくいというデメリットがあります。

 

LPの作り方とか、構成例とか、デザインの方法とかをしっかり勉強したい場合は、まずランディングページに関する参考書を一冊買って、その本に書いてある通りの手順で制作をしてみるほうがよっぽど身に着くと感じました。

私が何度も繰り返し参考にしているのはこちらの書籍です。Kindle版もあるのがありがたい。

 

 

上の本では、LPを作るための4段階

  • 戦略設計
  • 構造設計
  • デザイン
  • コーディング

のプロセスにわけて解説がされています。各プロセスをどうやって行っていくのか、非常に詳しく解説されていますし、優良な実例で視覚的にも理解が深まります。特にデザインの部分はなかなかウェブ上にまとまった情報がないので、貴重な情報。

  • LPがイマイチうまく作れない
  • LPの完成までの流れをしっかり理解したい
  • LPのデザインについての理解を深めたい

という方は、読む価値があるオススメの一冊です。

 

「LPのプロです!」と胸を張れるまでの道のりはまだ長いですが、最近はLP制作のプロセスも頭に入り、デザインのほうもイマイチ→OKくらいまでは成長したと思っています。

サイトやブログづくりとはまた別の面白さもあり、Web制作者にとってはやりがいのある仕事だと思います。本を読んでわかった気にならず手を動かして経験を積んでいくことがLPマスターの近道ですね。がんばります!

WordPressサイトを引っ越しする3つの方法。サイト規模・難易度別まとめ

moving-wordpress最近Wordpressで作ったWebサイトやブログを別のサーバに引っ越しさせたり、二つのサイトを一つにまとめる(このブログがそう)といった作業を立て続けに何度かやる機会がありました。

サイトの規模が小さければチャチャっとプラグインで移動できますが、少し規模が大きくなってくるとプラグインでエラーがでたり、うまくいかなかったり…と何だかんだ時間が取られるもので、次回の引っ越し作業で困らないように3つの方法を覚書きにしてみました。

 

 

1.難易度:易、小規模~大規模サイトに。Wordpressのインポート・エクスポート機能(+手動での作業)

この方法は基本的に小規模でも大規模なサイトでもOKな方法です。DBの管理画面(phpMyAdmin)やFTPを必要とせずWordpressの管理画面からだけの作業なので、あまりWeb関連の作業に自信がない場合は、この方法が一番心理的負担も少なくオススメ。でも丸ごと引っ越しさせられるわけではないので、基本的なコンテンツを引っ越した後、最後は手作業が必要になります。なので、ちょっと面倒くさいですが、誰にでもできる方法だと思います。

以下が手順。

投稿や固定ページ、カスタム投稿、コメント、カテゴリー、タグなどを引っ越し

まずはWordpressのインポート・エクスポート機能を使って基本的なコンテンツを移行させます。

  1. 引っ越し先のサーバーにWordpressを新規インストールしておく
  2. 引っ越し元のサイトのWordpress管理画面から、ツール>エクスポート を選択、全てのコンテンツをエクスポート(ダウンロード)する
  3. 1でインストールしておいたWordpressの管理画面で、ツール>インポート を選択。
  4. WordPressの欄から「インポータの実行」をクリックする
  5. 2でエクスポートしたファイルを指定し、「添付ファイルをダウンロードしてインポートする」にチェックを入れてインポートを実行する

 

これで投稿や固定ページなどメインのコンテンツは引っ越しできているはずです。

※「添付ファイルをダウンロードしてインポートする」にチェックが入っていると、投稿や固定ページないでリンクされているメディアファイル(画像など)も自動的にインポートしてくれます。が、サイトの規模が大きい場合にはうまくインポートが行われないこともあるようです(経験済み)。この場合は、手動でFTP経由でファイル類を引っ越しさせる必要があります。

 

ウィジェットの引っ越し

WordPressのインポート・エクスポート機能ではウィジェットやメニュー、ユーザーなどはエクスポートできません。

このうちウィジェットはWidget importer & exporter というプラグインを利用することで元サイトからウィジェットをエクスポート&新サイトにインポートすることができます。とても便利なのでオススメです。

 

その他のコンテンツを手動で復元させる

上記以外のコンテンツは、引っ越し前のサイトとにらめっこしながら自分で手作業で新しいサイトに作成していくことになります。具体的には

  • ユーザー情報
  • サイトの各種設定(表示設定、パーマリンク、タイトル、テーマのカスタム設定など)
  • メニュー
  • プラグイン
  • 投稿のアイキャッチ画像

といった情報です。面倒くさいですが、ここが終わればほぼ引っ越し完了です!

 

ドメインが変わる場合は投稿や固定ページ、ウィジェット内のリンクを変更する

引っ越しに伴ってドメインが変更となる場合、投稿記事や固定ページ、ウィジェット内に貼られている内部リンク(サイト内リンク)や画像URLなどが古いサイトのままになっている可能性があります。チェックしてみてください。

これを新しいドメインに変更するのに一個一個変更しているのではあまりに面倒くさすぎる!ので、Search Regexというプラグインを使って一括変換します。

※ドメインが変更となる引っ越しでは重複コンテンツでのGoogleペナルティを避けるために元サイトから301リダイレクトをし、Google Search Consoleでアドレス変更の申請をする必要あり。このあたりは、以下の過去記事で書いているので良かったら参考にしてみてください。

サイト移転時の301リダイレクト手順とSearch Consoleでのアドレス変更まとめ

 

複数のサイトやブログを統合する場合は、この方法で

一つのサイトを別サーバーに移動させる、というのではなく、AサイトとBサイトがあって、BサイトにAサイトを統合させるという場合は、この方法、つまりWordpressのエクスポート・インポート機能を使うことになります。

ざっくりメモ書きしておくと、Aサイトから投稿その他のコンテンツをエクスポートして、Bサイトにインポート。その後、プラグインSearch Regex等を使ってリンクを調整、AサイトからBサイトへ301リダイレクト、Search Consoleでアドレス変更通知という感じです。やることは難しくないのですが、やはりちゃんと移行できているかどうか一記事ずつ表示チェックをしたりするとやたら時間がかかります(80記事の移動で一週間くらいダラダラ作業していました。。)

 

では続いて2番目の方法。

 2.初級。小規模サイト・ブログ向け。Duplicatorプラグインで楽々引っ越し

WordPressの引っ越しに非常に便利なプラグインがあります。Duplicatorというのですが、これでできる引っ越しほど楽なものはないです。多分、1時間もかからずに作業が完了してしまうのではないでしょうか。。

WordPressサイトの引っ越しを考えている方はとりあえずこのプラグインで引っ越しできるかどうか試してみることをオススメします。

「試してみる」とかいたのは、サイトの規模が大きくなるとほぼエラーが出てしまうからなんです。。コンテンツに含まれる画像の量やサイズにもよると思いますが、80記事くらいのブログはエラーがでて全然ダメでした。。

ただ、最初にエラーがでても不要なプラグインとかメディアファイル、キャッシュを削除するなどすれば使える可能性もありますのでトライしてみてください。

具体的な使い方はウェブさえさんの以下の記事がとても詳しく分かりやすい解説でオススメです。

プラグインでWordPressを楽々お引っ越し!duplicatorならサーバー移転も簡単。

 

3.難易度:やや難、中~大規模サイト向け。プラグインなしで自分でDBとファイル類を引っ越す方法

Duplicatorプラグインで簡単に引っ越しができない中~大規模サイトの場合、DBとファイル類を手動で移動させることができると1のやり方のように面倒な手作業が少なくて済みます。

やり方は以下の通り

 

DBのエクスポートとインポート

  1. 前準備として引っ越し先のサーバーに新しいDBを作成しておく
  2. 引っ越し元のサーバーでデータベース管理画面(phpMyAdmin)にアクセスし、引っ越し元サイトのDBのテーブルを一括エクスポートする
  3. ダウンロードした2のsqlファイルをテキストエディタなどで開く
  4. sqlファイルを見ていき、元のテーブル名の接頭辞が、新しいDBのテーブル(1で作成)の接頭辞((例:テーブル名がwp_posts, wp_postmetaなどとなっている場合は接頭辞はwp_)と異なる場合は、新しいDBのテーブルの接頭辞になるように変換する(テキストエディタの文字列一括置換などで)
  5. 準備しておいたDBで4のsqlファイルをインポートする

 

ファイル類のエクスポートとインポート

  1. 元サイトのサーバにアクセスし、サイトのファイル類(Wordpress本体が入っているフォルダ)を丸ごとローカルにダウンロードする
  2. 1でダウンロードしたファイル類の中からweb-config.phpを開き、新しいDBの接続情報に変更する
  3. ダウンロードしたすべてのファイルを新しいサイトのサーバーのWordpressを設置する場所にアップロードする

 

書いてみると1番目よりこの方法のほうが随分シンプル。。一度慣れてしまえば一番面倒くさくない方法かもしれません。

 

ドメインの変更がある場合はコンテンツのリンクを一括変更

引っ越しに伴ってドメインの変更がある場合、投稿その他のコンテンツ内のリンクを新しいドメインに変更する必要があります。これにはSearch Regexというプラグインがお勧め。一括変換してくれるので楽々です。1番目の方法の最後にも書いていますがドメインが変わる場合は301リダイレクトとSearch Consoleでのアドレス変更通知をお忘れなく!