WEBサイト改善の【視覚的】なポイント

WEBサイト改善の【視覚的】なポイント

1・WEBサイトの構成は、一般的なパターンか

まず一つめのポイントです。
結論から言ってしまえば、サイトの構成は世の中でよくある、よくみられるパターンが良いのです。さらに言えば、その業種の中でよくある構成が好ましいのです。

面白みがないし、差別化にもならないから良くないのではないか? と思われるでしょうか。見慣れた構成でなく奇をてらった構成は、成果を下げる要因になっても、上げる要因にはなりません。

まず、見慣れない構成は使い勝手が悪いのです。

ユーザーはどこに何があるかを見つけられず、サイト上で迷子になり、イライラします。そうすると、そのサイトだけではなく、サイトを運営する企業にまでネガティブなイメージがついてしまう恐れがあるのです。

また、せっかく良い訴求があっても、奇をてらった構成では、その訴求をユーザーが見つけられないかもしれません。

ユーザーは構成が変わっている(面白い)からという理由で、サービスを選ぶわけではありません。サービス内容が良いと思うから選びます。

サイトの構成が珍しいことでユーザーへ何かしら印象を与える効果になることはあるかもしれないですが、それがサービスを受ける要因になる可能性は非常に低いのです。

サイト構成は簡単に変えることが難しいと思いますので、今のサイトの構成が要改善となった場合、まずはランディングページを作りましょう。

2・WEBサイトの表示速度は遅くないか?

WEBサイトの表示速度は重要で、最終的なサイトの成果に大きな影響を与えます。あなたも、ネットが繋がりにくくてストレスを感じたことが多くあるのではないでしょうか?

どれだけ優れた訴求やデザインでも、サイトが表示されなければ良いコンテンツも見られません。表示速度が遅ければユーザーにストレスを与え、表示される前に離脱してしまう恐れが生じます。

特に、スマートフォンやタブレットの利用比率が増えてくれば、さらに重要になります。移動中や電車の中など色々な環境で使用することが増え、電波状況があまり良くない環境での利用も増えるためです。

デザインや画像に凝ったことにより少しでも速度が遅くなっているのならば、すぐに見直しを図りましょう。本当は高いコンバージョン率を記録できるサイトが、表示が遅いという理由でユーザーの離脱を招いているかもしれません。

なお、以下のような調査結果も報告されています。
・Google:「表示速度が500ms(ミリ秒)遅くなることで、検索数が20%減少」
・Amazon:「表示速度が100ms(ミリ秒)遅くなることで、売上が1%減少」

3・文字の見出しと本文のメリハリは適切か?

ユーザーは、サイトに書いてある説明を一つひとつ丁寧に見てはいません。できる限り手っ取り早く、サービスの特徴を教えてほしいと思っています。

そんな中で、興味のある見出しがあればユーザーはその詳細を見ようと思います。

逆に、だらだらと続く文章がパッと目についてしまったら、ユーザーはそもそも見ることに嫌気がさしてしまい、次のサイトへ移動しようと考えることでしょう。

加えて、本文もできる限りにシンプルにして、あまり時間をかけずに読める範囲に抑えなくてはいけません。

伝えたいことは多くても、そもそも文字量の多いページはユーザーに読まれないのです。

見出しと本文のメリハリがなく、文字量が多いサイトは、すぐに改善することをおすすめします。折角考えた文章も、良い内容も、読まれなければまったく意味がなくなってしまいます。

4・このサイトのゴールは明確か?

サイトの目的、役割はそれぞれあると思いますが、購入、会員登録、資料請求、お問合せ、来店予約、お申込、相談・・・等様々なゴールを用意していると思います。

EC以外のサイトを持つ企業様については、「リードを取る=見込み客」ことを目的として、サイト上に複数のゴールを用意していることがよくあります。

このゴールは、ユーザーにわかりやすく提示することが重要です。そして、本来であればメインとなるゴールを一つに絞らなくてはいけません。

つい「ユーザーの、何かしらのニーズに引っかかればいい」ということでユーザーに選択肢を提示してしまうことが多いのですが、これは成果を下げる要因になる可能性があります。

サイト上でユーザーに選択肢を複数与えた瞬間に、ユーザーには思考する必要が出てきます。ユーザーはこの時点で「面倒くさい」「どうしよう」「後にしよう」となります。

メインとするゴールは、ユーザーの心理ハードルができる限り低いもの・・・頭を使わせないものが良いのです。

頭を使わせる導線に導こうとした瞬間に、ユーザーは嫌になって離脱してしまう可能性が上がるからです。

サイトに複数のゴールがあるのであれば、メインとしての導線は1本に絞った上で、こんなゴールやあんなゴールもありますよ。こっちが良ければこっちも選べますというストーリーにするようにすると良いでしょう。

関連記事:WEBサイト改善の【思考的】なポイント

見慣れたものが好きになる、心理学マーケティング

飼い犬と飼い主は似るらしい。
一緒に生活するうちにだんだん似てくるのではなく、飼い主が自分に似ている子犬を選ぶ傾向があるからだと言われています。関西学院大学の中島教授は「人は見慣れたものに好感を抱く性質があるため」と考えています。

これはザイアンスの単純接触効果で説明ができます。繰り返し接すると好感度や印象が高まるという効果で、見たり聞いたりすることで作られる潜在記憶が、印象評価にバイアスをかける現象です。

人は自分の顔を鏡で繰り返し見たり、自分と似た血縁者と生活を共にすることで、無意識のうちに自分と似た顔に対する好感度がアップするというわけです。

同様に、男性は自分と似ている女性を魅力的だと感じ恋人に選ぶから、カップルの顔は似る。という研究結果もあります。(フランスのモンペリエ第2大学)

ミシガン大学の心理学者ザイアンスが発見したこの単純接触効果は、マス広告の代表格であるテレビコマーシャルが活用しています。繰り返しコマーシャルを見ることで、その商品の好感度が上がります。YouTubeはさらにターゲティングされた対象者に、コマーシャルを繰り返し見てもらうことができます。

単純接触効果は広告の基本原則ではありますが、やり過ぎると逆効果になることがあります。一時期流行ったリマーケティングは、一度でもそのサイトを訪問すると、様々なサイトのGoogle Adwords枠にその関連情報が表示され続ける、という仕組みです。どのサイトを閲覧しても、まるで自分を追いかけてくるように同じ広告が表示されるので、だんだん嫌気がさして逆効果になることが多く、リマーケティングはかなり注意深く使う必要があります。

潜在意識に自然と好意的な印象を働きかけることが条件。そもそも嫌悪感のあるものを繰り返し提示されれば、ますます嫌いになります。

その意味でGoogleの検索広告やYouTubeのターゲティング広告は、うまく使えばプラスの効果を得られやすいといえます。

【Illustrator】単位をピクセルからセンチメートル(px→cm)に変更する方法

「環境設定」というメニューにも【編集→環境設定→単位】のように単位の変更項目があるのですが、こちらを変えてもオブジェクト等の編集ファイルの単位は変わりません。

ずばり「ドキュメント設定」!

上部メニュー【ファイル】→【ドキュメント設定】→【裁ち落としと表示オプション設定】内の【単位】を「センチメートル」に変更

これでOK!

ちなみに変えられる単位は、ポイント/パイカ/インチ/ミリメートル/センチメートル/歯/ピクセルの7種類です。

All-in-One WP Migration – WordPressのサーバー移設が簡単にできるプラグイン

All-in-One WP Migrationは、WordPressのサーバー移設が簡単にできるプラグインです。サイトデータのバックアップおよび復元の機能もあります。

このプラグインを利用すると、WordPressのサイトデータ(データベース、画像、テーマ、プラグイン)を丸ごとインポート&エクスポートできます。インポートする際に、WordPressの設置先URLをプラグイン側で自動的に変更してくれます。

このプラグインを上手く活用すると、WordPressのサーバー移設作業やテストサーバー構築作業を効率化できます。例えば、MAMPなどのローカル環境にテストサーバーを構築する際に、このプラグインを利用してサイトデータをエクスポート&インポートするだけで、ローカル環境にテストサーバーを構築できます。非常に便利なプラグインなので活用しましょう。

このプラグインが優れている点

  • WordPressのサーバー移設が簡単にできる。
  • WordPressのサイトデータ(データベース、画像、テーマ、プラグイン)を簡単にインポート&エクスポートできる。
  • サイトデータをインポートする際に、WordPressの設置先URLをプラグイン側で自動的に変更してくれる。ドメインや画像ファイルのURLも自動的に変更してくれる。
  • WordPressのサイトデータのバックアップおよび復元が簡単にできる。
  • サイトデータをエクスポートする際にデータベースの内容を指定キーワードで置換できる。移設先サーバーでのリンクURLの変更に対応できる。
  • プラグインの管理画面が日本語化されているのでわかりやすい。

プラグインの使い方

管理画面の場所

プラグインの管理画面は下記の場所にあります。

WordPress管理画面 > All-in-One WP Migration


WordPressのサイトデータ移設の流れ

  1. プラグインを移設元と移設先のWordPressにインストールして有効化する。
  2. 移設元からサイトデータをエクスポートして、自分のPCにファイルをダウンロードする。
  3. 先ほど自分のPCにダウンロードしたファイルを移設先のWordPressのプラグインにインポートします。
  4. ファイルのインポートが完了すると、WordPressのサイトデータの移設が完了です。ブログを表示して確認してみましょう

【移設元】サイトをエクスポート

WordPressのサイトデータは、専用のファイルとしてエクスポート(書き出し)されます。

ファイルをエクスポートする際は、データベース内にある文言やURLを置換することもできます。また、オプションでエクスポートしたくない対象を除外指定することもできます。何も指定しなければ、サイトデータを丸ごと出力します。

ちなみに、オンラインストレージサービスやFTPを利用したインポート&エクスポートは、有料の拡張機能として提供されています。

エクスポート

エクスポート実行中

完了するとファイルをダンロードできる

【移設先】サイトのインポート

先ほど自分のPCにダウンロードしたファイルを移設先のWordPressのプラグインにインポート(取り込み)します。

インポートを実行すると、WordPressのサイトデータ(データベース、画像、テーマ、プラグイン)が上書きされます。

ファイルのインポートが完了したら、WordPressのサイトデータの移設が完了です。ブログを表示して確認してみましょう。

最大アップロードサイズ

無料版のプラグインで利用できる最大アップロードサイズは「512MB」以内となっています。

それ以上の容量のファイルをアップロードするには、有料の拡張機能を利用する必要があります。

最大アップロードサイズを超える場合のヒント

サイトデータをエクスポートした際に、ファイル容量が「512MB」を超えてしまう場合は、メディアライブラリ(画像ファイル)をエクスポート対象から除外してみてください。

画像ファイルが一番容量が多いので、それを除外すれば「512MB」以内に収まるはずです。

画像ファイルは、FTPソフトなどを用いて、手動でアップロードすると、最大アップロードサイズの問題を解決できるはず。

サイトデータのバックアップ&復元

このプラグインにはWordPressのサイトデータのバックアップおよび復元する機能があります。

サイトデータをエクスポートすると、サーバー上にもバックアップファイルが保存されます。そのファイルを利用してサイトデータの復元ができます。

参考サイト:https://netaone.com/wp/all-in-one-wp-migration/

Bootstrap4 YouTubeをレスポンシブで貼り付ける(普通の動画でもOK)

Bootstrap4を使えば、レスポンシブなYouTubeリンクを貼り付けることができます。レスポンシブというのがミソです。

普通にYouTubeリンクを貼ると、固定サイズになってしまいますからね。Bootstrap4を使えば、クラスを追加するだけでレスポンシブなYouTubeリンクの出来上がりです。

もちろんYouTubeだけでなく、普通の動画でもOKです。

Bootstrap4 YouTubeをレスポンシブで貼り付ける(HTML)

<div class="embed-responsive embed-responsive-16by9">
<iframe class="embed-responsive-item" src="https://www.youtube.com/embed/JYzTYXD6fGU" allowfullscreen></iframe>
</div>

「div」に「embed-responsive」と「embed-responsive-16by9」を追加します。「16by9」は動画の比率を表しています。

  • embed-responsive-21by9
  • embed-responsive-16by9
  • embed-responsive-4by3
  • embed-responsive-1by1

動画を設定する「iframe」には「embed-responsive-item」を設定すれば完成です!

Bootstrap4を使ってCSSだけでコンテンツの高さを揃える

Bootstrap4を使ってCSSだけでコンテンツの高さを揃える

カードデザインでカードの高さを合わせたい時ってありますよね。意外と大変なコンテンツの高さ合わせ。ちょっと前まではJSを駆使しないといけませんでした。

実際にBootstrap3を使っているHowMaでも、jQueryプラグインのequalizerを利用してカードデザインの高さを合わせています。そんなコンテンツの高さ合わせですが、Bootstrap4を使えばCSSだけで超簡単に実現できてしまいます!!

Bootstrap4の導入

公式のドキュメントに記載されているとおりですが、CDNのリンクを読み込むだけでOKです。

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

高さを揃える方法

レスポンシブデザインで多用するgrid systemを使って、1コンテンツ1colで組んでいきます。それをrowで囲います。

Bootstrap4だと、なんとこれだけで高さが揃ってしまいます!(v3までしか知らない人はビックリですね)なぜそうなるかというと、v4ではrowがdisplay:flexになっています。

flexはデフォルトで子要素の高さが揃うようになっているので、指定してあげるだけでこうなっちゃいます。一点ポイントを上げるなら、colの子要素にh-100(height:100%のクラス)を入れてあげることでしょうか。

基本単位がremに変更されグローバルフォントサイズが14pxから16pxに変更された

remという単位はルートのフォントサイズを基準にしており、直前の親の影響などを受けないサイズを指定することができます。

マージン・パディングなどの余白にもこの単位が採用されています。

    
html{
      font-size:16px;
    }
    h1{
      font-size:2rem; // 32px
    }
    p{
      font-size:1rem; // 16px
    }
html{
font-size: 16px; 
}
p{
font-size: 1rem; /* 1rem = 16px */
}
h1 {
    font-size: 1.875rem; /* 30px / 16px = 1.875rem */
}

投稿記事をループさせPHPに書き直す

ループ処理の基本

表示させる記事の件数をそれぞれの記事一覧ページで異なる設定をしたい場合や、特定のカテゴリーの記事のみを表示させたい場合があると思います。

ビジネスサイトなどではページ内容によって特定のカテゴリーの記事として、おすすめのカテゴリー記事や今の時期だけプッシュしていきたいカテゴリーの記事があったりします。

そのような場合のために、WordPressのループ処理の中で、表示を制御することのできる「query_posts」の使い方について説明させていただきたいと思います

まず、ループ処理の基本として。

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
//ループさせたい投稿内容
<?php endwhile; endif; ?>

こちらを使用した例として。

<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
    <h1><?php the_title(); ?></h1>
    <div><?php the_content(); ?></div>
<?php endwhile; endif; ?>

こちらのループ処理は、「記事があればタイトルを、h1タグで囲み、次に本文をdivタグで囲んで表示させるという処理を、ある記事の数だけ繰り返して行ってください」という意味になります。

bootstrap4ではremフォントサイズを使う

ォントサイズを「rem」で指定するべき理由

一般的に、相対指定は「%」や「em」、絶対指定は「px」を使ってフォントサイズを制御していると思います。しかし、CSS3から新たに追加された「rem」での指定の方が、IE8対応が少なくなってきた昨今、シンプルでいいのではないかと思うようになりました。

そこで今回は、この記事で「rem」の素晴らしさを紹介したいと思います。

remとは?

さて、「rem」とはどのような単位なのでしょうか。「em」や「%」の場合、親要素(が基準)に対して相対的に指定する単位になりますが、「rem」は「root em」の略の通り、root要素(最上位の要素)に対して相対的に指定する単位になります。

では、「rem」を理解するために、下記に「em」と「rem」のコードを具体的に記載しましょう。

emでフォントサイズを指定

body { font-size:62.5%; } /* 10px */
p  { font-size: 1.6em; } /* 16px */
li { font-size: 1.6em; } /* 16px */

まず、ベースフォントサイズを作ります。bodyに「%」を使って、主要ブラウザのデフォルトフォントサイズ「16px」を「10px」になるように記述します。こうすることで、フォントのサイズを「16px」にするためには「1.6em」、「20px」にするには「2em」とシンプルに指定できるようになります。

しかし、「em」の場合、入れ子の構造になると、複利計算されてしまいます。例えば、「li」の子要素の「p」は「16px」にはならなく、「1.6px × 1.6」で「26px」となります。したがって、下記のように「li」の子要素の「p」に「1em」を記述してあげて、複利計算を避けなければなりません。

body { font-size:62.5%; } /* 10px */
p  { font-size: 1.6em; } /* 16px */
li { font-size: 1.6em; } /* 16px */
li p { font-size: 1em; } /* 16px */

remでフォントサイズを指定

html { font-size: 62.5%; } /* 10px */
body { font-size: 1.6rem; } /* 16px */
p  { font-size: 1.6rem; } /* 16px */
li { font-size: 1.6rem; } /* 16px */
li p { font-size: 1.6rem; } /* 16px */

一方、「rem」でのサイズ指定は、ルート(根)という名の通り、最上位の親要素(html要素)を基準値とするため、複利計算の心配はいらなくなり、どんなに入れ子になろうとも、シンプルに「1.6rem」は「16px」となるのです。

参考サイト:https://www.plusdesign.co.jp/blog/?p=5152

※計算方法

h1 {
    font-size: 1.875rem; /* 30px/16px=1.875rem・何px計算は1.875rem*16px=30px */
}