タグ: ホームページ作成

  • 【簡単】WordPressバックアップ用プラグインAll-in-one WP Migrationの使い方

    【簡単】WordPressバックアップ用プラグインAll-in-one WP Migrationの使い方

    all in one wp migrationのロゴ

    All-in-one WP Migrationの特徴
    インストール数400万以上
    53言語表示
    バックアップがとても簡単
    復元 (インポート) がとても簡単
    データをファイルでダウンロードできる
    →サーバー内のデータが消えても安心
    データを別サイト (ドメイン) に引っ越しするのが簡単
    インポート (データのアップロード) するときのデータ容量に制限がある
    →ほとんどのサイトは制限にひっかかります

    エクスポートのやり方

    エクスポートとは、丸ごとデータを保存することです。
    保存先は選択が可能ですが、ここではファイルとしてダウンロードできる方法を紹介します。

    1. 左メニューの「All-in-one WP Migration」をクリック

    all-in-one-wp-migrationのエクスポート使い方1

    WordPressの左メインメニューにある「All-in-one WP Migration」をクリックします。

    2.「エクスポート先[icon name=”bars” style=”solid” class=”” unprefixed_class=””]」をクリック

    all-in-one-wp-migrationのエクスポート使い方2

    「エクスポート先 [icon name=”bars” style=”solid” class=”” unprefixed_class=””]」をクリックします。

    3. 「ファイル」をクリック

    all-in-one-wp-migrationのエクスポートファイル保存方法

    エクスポート先内の「ファイル」をクリックします。

    4. エクスポート作業中

    エクスポート中の画面

    自動的にエクスポートが始まります。

    5. ダウンロードをクリック

    ダウンロードの画面

    エクスポートが終わるとダウンロードできます。
    ファイル保存先を指定して保存しましょう。

    ファイル形式は「〇〇〇.wpress」となります。

    インポート方法

    インポートとは、保存されたデータファイルをアップロードし、サイトを丸ごと復元することです。

    1. 左メニューのAll-in-one WP Migrationの中の「インポート」をクリック

    all-in-one-wp-migrationのインポート

    WordPressの左メインメニューにある「All-in-one WP Migration」をクリックし、その中の「インポート」をクリックします。

    2. 「インポート元 [icon name=”bars” style=”solid” class=”” unprefixed_class=””]」をクリック

    all-in-one-wp-migrationのインポート方法

    「インポート元 [icon name=”bars” style=”solid” class=”” unprefixed_class=””]」をクリックします。

    3.「ファイル」をクリック

    all-in-one-wp-migrationのファイルからのインポート方法

    インポート元内の「ファイル」をクリックします。

    4.エクスポートした「〇〇〇.wpress」ファイルを開く

    保存してあるデータファイル「〇〇〇.wpress」を選択して「開く」をクリックします。

    注意

    アップロードできるファイルサイズの制限があります。もし制限にかかっている場合、下のような画面になります。
    Xserverを利用している人は30MBが制限となります。 (2021年9月現在)

    all-in-one-wp-migrationのファイル容量制限画面

    5.インポート中

    all-in-one-wp-migrationのインポート中画面

    ファイルを開くとインポート作業が始まります。

    6.インポートの確認「開始」をクリック

    all-in-one-wp-migrationのインポート確認画面

    インポート準備が整うと最終確認となります。

    「開始」をクリックするとサイトが丸ごと復元されます。

     

     

  • 【初心者向け】おすすめWordPressバックアップ用プラグインAll-in-one WP MigrationとUpdraftPlusの比較

    【初心者向け】おすすめWordPressバックアップ用プラグインAll-in-one WP MigrationとUpdraftPlusの比較

    WordPress初心者でも使えるデータバックアップ用のプラグインはありませんか?

    そんな疑問にお答えします。

    「All-in-one WP Migration」と「UpdraftPlus」が簡単でおすすめです。
    でもちょっとだけ注意があります。

     

    こんにちは。
    Wordpressを初めて間もない頃は、データのバックアップなんて考えてもいませんでしたが、サイトやブログが充実してくると、ちょっとしたトラブルから「突然データが消えたらどうしよう?」という不安を感じることもあります。

    そこで、初心者におすすめのWordpressのデータバックアップ (保存) プラグインを2つご紹介します。

    もちろんここで紹介する以外に他にも良いプラグインがあります。
    私はいくつかのバックアッププラグインを使ってみましたが、総合的にこの2つに絞らせていただきました。あまり多いと悩んでしまいますのものね。
    初心者の方はこの2つをベースに、より自分に合ったプラグインに巡り会えることを願います。

    [icon name=”exclamation-triangle” style=”solid” class=”” unprefixed_class=””] 注意

    [icon name=”marker” style=”solid” class=”” unprefixed_class=””] 内容は2021年9月現在。
    [icon name=”marker” style=”solid” class=”” unprefixed_class=””] 内容は人によって意見が分かれる部分や、経験によってそれぞれの考え方があることをご容赦ください。
    [icon name=”marker” style=”solid” class=”” unprefixed_class=””] あくまでこれからサイト制作を目指す初心者に向けたひとつの読み物として参考程度に受け止めてもらえれば幸いです。この記事をほんのささやかな踏み台に、より活躍されることを願って・・・

    All-in-one WP MigrationとUpdraftPlusについて

    All-in-one WP MigrationとUpdraftPlus

    [icon name=”play” style=”solid” class=”” unprefixed_class=””] All-in-one WP Migration (オールインワン ワードプレス マイグレーション)
    [icon name=”play” style=”solid” class=”” unprefixed_class=””] UpdraftPlus (アップドラフトプラス) 正式名称「UpdraftPlus WordPress Backup Plugin」

    どちらのプラグインも1~2クリックでデータをバックアップでき、復元も簡単に行える便利なプラグインです。

    保存できるデータの内容

    ・画像
    ・投稿内容
    ・テーマ情報
    ・データベース
    まで「まるごと」保存してくれます。

    どれほど丸ごとかと言いますと、別のドメインにWordpressがインストールさえされていれば、そのサイトを一発で再現できてしまうほどです。
    ※もちろん上のプラグインのインストールは必要です。

    All-in-one WP MigrationとUpdraftPlusの比較

    私が実際に使用しているバックアップ用プラグインはこの2つです。
    2つは「どちらかが完璧でこれだけ入れていればよい」というわけではなく、
    それぞれ良い点と惜しい点がありますので、機能や特徴を知ってうまく使い分けてみましょう。

    なお、ここではいくつかの専門用語を使用していますので、かんたんではありますが先に説明します。

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] バックアップ …データを保存すること
    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] ダウンロード …インターネット上からファイルを保存すること
    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] エクスポート …データをファイル化して保存すること
    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] インポート …保存したデータをサイトに復元すること
    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 復元  …保存したデータを元に戻すこと

    All-in-one WP Migration UpdraftPlus
    インストール数400万以上 インストール数300万以上
    53言語表示 32言語表示
    バックアップがとても簡単
    復元 (インポート) がとても簡単
    バックアップが簡単
    復元が簡単
    データをファイルでダウンロードできる
    →サーバー内のデータが消えても安心
    データをファイルで保存するにはひと手間必要
    →サーバー内のデータが消えると共に消失
    プラグイン内で保存可能
    →サーバー内のデータが消えるとデータも消える
    データを別サイト (ドメイン) に引っ越しするのが簡単 データを別サイト (ドメイン) に引っ越しするのはひと手間必要
    インポート (データのアップロード) するときのデータ容量に制限がある
    →ほとんどのサイトは制限にひっかかります
    復元 (データのアップロード) するときのデータ容量に制限がない
    公式ページ
    https://ja.wordpress.org/plugins/all-in-one-wp-migration/
    公式ページ
    https://ja.wordpress.org/plugins/updraftplus/

    バックアップはどちらもお手軽

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] All-in-one WP MigrationとUpdraftPlusどちらもバックアップは簡単です。

    ほとんど1~2クリックでサイトに必要なデータを丸ごと保存できます。

    All-in-one WP Migrationは丸ごとバックアップしてファイル1つ
    UpdraftPlusは丸ごとバックアップすると複数のファイル
    ができます。

    保存先の選択肢の違い

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] All-in-one WP Migrationは誰でも「ファイルでダウンロード」できます。
    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] UpdraftPlusは「プラグイン内にデータを保存」することができます。

    All-in-one WP Migrationのメリット

    All-in-one WP Migrationはファイルをパソコンに保存しておけるので、万が一サーバーが飛んでWordpress内すべてのデータが消えてしまっても、後々簡単に復元が可能です。

    また、ドメイン (URL) を変えてサイトやブログを移設したいときも、Wordpressをインストールした後にここで保存したファイル1つをインポートするだけですべて復元できます。
    Migrationとは英語で「移行」という意味になります。
    まさにサイトの移行を意識しても作られていますね。

    UpdraftPlusの惜しい点

    UpdraftPlusもデータ保存が可能です。
    しかし、基本的にFTPやGoogleストレージなどのクラウドサービスに保存するため、設定やアカウント開設などひと手間かかります。

    また、サイトを移設する時にもひと手間かかります。

    ※UpdraftPlusで保存先を指定しない場合、サーバーの「wp-content」の中の「updraft」フォルダ内にファイルが保存されます。便宜上「プラグイン内に保存」と書きます。

    一見All-in-one WP Migrationの方が安心だし便利じゃない?と思われますが、実はこれらには落とし穴というか、どちらもメリット・デメリットがあります。

    復元 (インポート) 方法の違い

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] All-in-one WP Migrationはファイル1つで復元できます。しかしアップロードにはファイルサイズの制限があります。
    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] UpdraftPlusはプラグイン内にデータを保存していれば1~2クリックで簡単に復元できます。しかもファイルサイズに制限はありません。

    All-in-one WP Migrationの惜しい点

    先ほど説明した1ファイルだけでサイトが元通りになったり移植も簡単なプラグインですが、新しいバージョンでは、実はアップロードする際のファイルサイズに制限があります。
    (2021年9月現在Xserverで30MB)

    ※これは本来プラグインの仕様ではなく、もともとのサーバーの仕様です。
    それをプラグインがうまくプログラムで大容量もアップロードできるようにしてくれていたのですが、その機能を撤廃したようです。

    有料プランを買うことでファイルサイズ無制限にできます。
    (2021年9月現在69ドル)

    30MBだとほんの小さなブログ程度しかカバーできません。
    プログラムを改変して128MBや512MBまでアップロードできるファイル容量を増やせるという情報もありますが、初心者にはおすすめできません。
    69ドルはけっこうなお値段ですね。

    いままで無料で大きなデータも使えていたバージョンを知っている人にとってはAll-in-one WP Migrationの唯一の問題と言っても過言ではありません。

    UpdraftPlusのメリット

    UpdraftPlusは基本的にデータ制限がありませんので、All-in-one WP Migrationでの唯一の問題はパスできます。

    また、プラグイン内にデータ保存した場合でも、しっかりサーバーの「wp-content」の中の「updraft」フォルダ内にファイルが存在しますので、いざというときのために取り出すことは可能です。
    (FTPの知識が必要になります)

    初心者におすすめの使い分け

    私は、はじめのうちはAll-in-one WP MigrationとUpdraftPlusどちらもインストールし、どちらも使うことをおすすめします。

    どちらのプラグインも使うのがおすすめの理由

    All-in-one WP Migrationは外部にファイルを保存できます。
    UpdraftPlusはサイト内にファイルを保存できます。

    サーバー内のデータが消えたり、重大なトラブルに見舞われたときは、お金を払ってでもAll-in-one WP Migrationを使うという選択ができます。
    サイトが崩れてしまったトラブルに見舞われたときはUpdraftPlusで容易に復元できます。

    はじめのうちは被害が少ないかと思いますので、All-in-one WP Migrationの出番はほぼ無いかと思います。でもそれこそがバックアップです。
    いざというときは誰でもどの世界でもお金を払って安全を買います。

    無料で何でもという意識であれば、少しずつ経験値や知識が増えたところで、UpdraftPlusの外部保存を試してみるのも良いかと思います。

    All-in-one WP Migrationを選ぶのがおすすめの人

    外部から委託されているウェブサイトや膨大なサイト、ブログを1つ~2つ程度管理している人は、All-in-one WP Migrationをおすすめします。

    とにかく手間がかからずサイト移設なども簡単に行えます。
    バックアップしたデータを使うときに有料プランを申し込む形で良いと思います。

    UpdraftPlusを選ぶのがおすすめの人

    ブログ運営や小さなサイト、複数の小規模サイトを運営している方、とりあえずバックアップという程度でよければUpdraftPlusをおすすめします。

    UpdraftPlusはAll-in-one WP Migrationに比べれば少しだけ設定が面倒な部分があります。
    いざとなったときにあれ?あれ?と調べて時間を浪費してしまうこともあります。
    しかし、サーバー内のデータが消えるとか、サイトが復旧できないほどのトラブルは、ブログの更新程度ではあまり起こりにくいです。

    私は経験上、通常のデータ復旧 (ブログ投稿とかの復元) を行う事例はほぼありません。
    復旧したいときはWordpressの管理画面にすら入れない状態が多いですので、UpdraftPlusを使うためにFTPでデータを取り出す作業が必要になることもあります。
    そこまでできるのであれば初心者の域は超えていることでしょう。

    本音を言えばAll-in-one WP Migration一本で行きたいところですが、用途やサイトの状態に合わせてどちらのメリット・デメリットも体験してみることをおすすめします。

    [icon name=”book-reader” style=”solid” class=”” unprefixed_class=””]
    記事について
    ――――――――
    執筆者  :ロコウェブ
    記事作成 :2021年9月8日
    写真・画像:ワードプレスプラグイン公式、自作

     

    最後に。

    ワードプレスのプラグインには本当に向き不向きがあります。
    私はこれが使いやすい、私はこの機能が必要など、人によって比重が異なります。
    インターネット上にはさまざまな情報があふれていますが、その中でこの記事を見ていただいた方には、ぜひこの記事だけを鵜呑みにせず、視野を広くさまざまなプラグインを試してみてください。

  • WordPressの画像設定|代替テキスト・タイトル・キャプション・説明の使い方と入力のコツ

    WordPressの画像設定|代替テキスト・タイトル・キャプション・説明の使い方と入力のコツ

    WordPressのメディアに画像をアップロードすると、
    「代替テキスト」「タイトル」「キャプション」「説明」と項目が出てくるのですが、
    どれをどのように記入すればよいですか?

    毎回それらの項目すべてにテキストを入力するのが面倒なのですが、何かコツはありませんか?

    こんにちは。
    ホームページ (webサイト) やブログをWordpressで制作していると必ずと言ってよいほどついて回る画像の扱い方問題。
    その中で画像に入力する項目は必要なのか、何を入力したらよいのかを説明します。

    [icon name=”exclamation-triangle” style=”solid” class=”” unprefixed_class=””] 注意

    [icon name=”marker” style=”solid” class=”” unprefixed_class=””] 内容は2021年9月現在。
    [icon name=”marker” style=”solid” class=”” unprefixed_class=””] 内容は人によって意見が分かれる部分や、経験によってそれぞれの考え方があることをご容赦ください。
    [icon name=”marker” style=”solid” class=”” unprefixed_class=””] あくまでこれからサイト制作を目指す初心者に向けたひとつの読み物として参考程度に受け止めてもらえれば幸いです。この記事をほんのささやかな踏み台に、より活躍されることを願って・・・

     

    WordPressで画像ファイルに設定できる項目

    Wordpressの画像に入力する項目

    [icon name=”play” style=”solid” class=”” unprefixed_class=””] 代替テキスト
    [icon name=”play” style=”solid” class=”” unprefixed_class=””] タイトル
    [icon name=”play” style=”solid” class=”” unprefixed_class=””] キャプション
    [icon name=”play” style=”solid” class=”” unprefixed_class=””] 説明

    必要とされる主旨をまとめてしまうと、主に使っているのはこのうちの2つ「代替テキスト」と「キャプション」だけです。

    さらに、一般的に推奨されているSEO対策のために入力が必要な項目は「代替テキスト」のみとなります。

    画像の下に文字を表示させるにはキャプションという機能項目があります。

     

    代替テキスト

    Wordpress画像設定の代替テキスト

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 代替テキストとは、画像が表示できない場合に代わりとして表示されるテキスト、またインターネット上の解析用に画像の説明を示した項目です。

    いわゆる「alt属性」のことを指します。

    alt属性は、Google社のロボット型検索エンジン (クローラー) などに読み込ませその画像が何を表しているのかを説明します。

    現在の検索システムは画像を見て何の画像かを判断できません。そのため、代替テキストの説明を判断に画像の中身を認識します。

    また、テキストリーダーなどに対応しています。

    SEO対策として代替テキスト (alt属性) の記入を推奨されています。

    alt属性に何を記入すればよいか、SEO対策で有効な記入はどのようなものかを考察した記事を下記リンク先に書きました。
    画像の説明「ALT属性」に何を書けばよい?書き方・メリット・注意点を考察

     

     

    タイトル

    Wordpress画像設定のタイトル

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] タイトルとは、画像のタイトルのことを指します。

     

    無記入にすると自動的にファイル名が入るようになります。

    HTMLには反映されません。
    管理用の項目になります。
    画像を拡大したときにタイトルが上部に表示されることがあります。

    私はいつも無記入にしています。

     

     

    キャプション

    Wordpressの画像設定のキャプション

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] キャプションとは、画像下に表示する説明文や内容、補足などの項目です。

    画像下に補足や説明文、タイトルなどを表示したい場合に入力します。

    キャプションを空白にした場合と記入した場合の例

    キャプションを空白にした場合と記入した場合の例空白の場合は画像の下には何も表示されません。

    私は必要のない限り無記入にしています。

     

    説明

    Wordpress画像設定の説明の項目

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 説明とは、画像のメモの項目です。

    webサイトの画面上にもHTMLにも反映されません。
    完全な管理用の項目になります。

    私はいつも代替テキストをコピーして貼り付けています。

     

     

    設定方法

    1. WordPressのメディアをクリックします。

    画像の設定方法

    2. ライブラリギャラリーから、設定したい画像を選択するとキャプション・代替テキストを含む4項目を画像に設定することができます。

    Wordpressメディアのライブラリ画面

    メディアにアップロードするとそのまま編集画面となりますので、そのまま記入してもOK。

    ライブラリから編集する場合は、テーマの仕様やインストールされているプラグインによって多少異なります。
    もし設定項目が出てこない場合は「画像編集」「画像の詳細を編集」というようなリンクがありますので、そちらをクリックします。

    3. 各項目に入力します。

    画像の設定の例

    4. 画像編集ウィンドウ右上の✕をクリックします。「保存する」的なボタンはなく、このまま画面を閉じても内容が更新されます。

    インストールしているプラグインによっては更新ボタンが付きますが、多くの場合は記入したまま他の画面に移るだけで更新されます。

    不安な場合はもう一度ライブラリから見てみましょう。

     

    [icon name=”book-reader” style=”solid” class=”” unprefixed_class=””]
    記事について
    ――――――――
    執筆者  :ロコウェブ
    記事作成 :2021年9月1日
    写真・画像:ワードプレスプラグイン公式、ロコウェブ

     

     

  • 画像の説明「ALT属性」に何を書けばよい?書き方・メリット・注意点を考察

    画像の説明「ALT属性」に何を書けばよい?書き方・メリット・注意点を考察

    「画像のalt部分には何を書きこめば良いですか?」
    「画像を説明するのだから、画像について詳しく説明を書いた方が良い?」

    今回はブログやウェブサイトで使用する画像についての考察です。

    画像を使用する際に、内部情報としてalt属性 (altタグ) があるのをご存じですか?
    専門的な説明は割愛して、altというものがどのようなもので、どのような役割なのかをさっとご紹介します。

    画像のALT属性とは

    alt属性 (オルト) とは、画像をテキスト情報で表すことです。画像について説明を入力できる情報部分です。altはそれが何の画像なのかをテキスト説明する部分です。

    Google社などの検索システムに向けて

    検索システムは画像の内容まで把握することができません。そのためその画像を解説してあげることで、サイトページとの照合でどのような画像なのかを伝えてあげることができます。
    つまり検索SEO対策にとってalt属性は大切な部分と考えられます。

    見る側に向けて

    画像が表示されなかったときに代替として表示される「代替テキスト」として、見る人にも優しい情報となります。
    見る側にも行き届いたサイトということで、こちらも検索SEO対策にプラスの部分と考えられます。

    では、altは実際にどのようなことを記入していけばよいでしょうか。

    ここで紹介しているものは、これが正しいという情報ではありません。
    定説や一般的な考え方、そして個人的な考えをもとにみなさんがご自身で最適なALT属性を入力できるきっかけとなれるような記事を目指しています。

    altに入力する最適な言葉

    altに入力する言葉は、その画像や内容に偽りや乖離がなければ、何でも良いと思います。

    とはいったものの、実際はどのように入力されているのか気になりますよね。
    そこで画像のalt部分を軽く調査、私が実際に会社に所属していた時の経験も交えて例をあげてみます。

    altは「全部空欄」「ファイル名だけ」「連番」というのもありますが、あまり理想では無いため割愛します。

    一般的に見られるalt

    ・画像を簡潔に解説
    ・すべての画像にタイトルなどを全コピー
    ・それぞれ画像に適した単語を表記
    ・画像を細かく解説
    ・画像にキーワードがたくさん入っている

    ざっと目を通した感じ、良くも悪くもさまざまなパターンが見受けられました。
    私が調べた結果、上の方が最も多く、下へ行くほど珍しいケースです。

    では、それぞれどのような意図、メリット、デメリットがあるか考えてみたいと思います。

    例として下記画像にalt属性を入力してみましょう。

    パソコンのステップアップ

    画像を簡潔に解説

    SEOを意識した最もシンプルであり、最も頭を使うのがこちら。
    画像が何を示しているのかを簡潔に説明しています。

    上の画像に対するaltの例

    アクセスPVの推移グラフ

    考えられる意図

    画像の説明を簡潔にして機械的にもユーザーにも優しいALT入力を目指したものと考えられます。

    メリット

    ・検索エンジンにも認識してもらいやすいです。
    ・代替テキストになっていても文字数が少なく意味がわかりやすいです。
    ・画像検索でより詳細なキーワードに引っ掛かる可能性があります。

    デメリット

    ・簡潔な解説を作るのに頭や手間を使います。
    ・画像管理でキーワード検索すると文章内容もバラバラになってしまい管理しづらいです。

    すべての画像にページタイトルなどを全コピー

    使われている画像にページ・記事タイトルや、ページの説明を使います。
    すべての画像に同じ文言をコピーして使います。

    上の画像に対するaltの例

    SEO対策に効果あり?alt属性の入力をおすすめする理由

    考えられる意図

    ・画像のALT属性入力の手間を省くことができます。
    ・ある程度のキーボードが入っているのでSEO対策も十分と考えられます。
    ・ページ=画像となり、画像管理がしやすいです。

    メリット

    ・コピー貼り付けなので簡単でalt入力の手間や時間が省けます。
    ・使用するすべての画像とページ内容の照合性がマッチさせるのが楽です。
    ・altが同じだと画像管理がしやすいです。

    デメリット

    ・タイトルや内容とまったく関係のない画像もすべてが同じ文の解説になり、ページとの照合性が合わない場合もあります。
    ※例えば、たまたまそのページで使う記号や人物も同じaltとなります。

    それぞれ画像に適した単語を表記

    カメラの画像やイラストの場合、「カメラ」。人が握手をしている場合は「契約成立」などという感じで、画像が表しているものを単語で入力する方法です。

    上の画像に対するaltの例

    アクセスグラフ

    考えられる意図

    ・画像ごとにことなる意味合いがあるため、画像ごとの内容を簡単な単語で入力します。
    ・説明を考える労力を省くことができます。
    ・画像altにそこまでSEO対策に比重が無いと判断されるため、力を入れすぎない。
    ・画像検索にひかっけるために。

    メリット

    ・画像ごとの的確な説明になります。
    ・単語がメインとなるため、内容を細かく考えずに済みます。
    ・キーワードとしての要素が強いため、画像検索にも引っ掛かるかもしれません。
    ・画像のテキスト代替になった場合もわかりやすいです。
    ・単語での画像管理となり、管理しやすいです。

    デメリット

    気になるほどのデメリットはあまりない気がします。あえて言うなら…
    ・ビックキーワードでざっくりとしているため、かえって検索に乗りにくい可能性もあります。

    画像を細かく解説

    画像が何を示しているのか、何が描かれているのかの詳細を細かく説明します。

    上の画像に対するaltの例

    ビジネスデスク上のパソコンディスプレイ上に表示されたGoogleアナリティクスのpv推移グラフの例

    考えられる意図

    ・細かく説明することでSEO対策にプラスと考えるケース。
    ・検索システムに向けて、細かい解説を意識しています。

    メリット

    検索システムに、より詳細な説明ができます。

    デメリット

    ・内容を考える労力や時間、手間がかかります。
    ・画像の情報量が多すぎ、それぞれバラバラの内容のため、画像管理がしづらくなります。
    ・代替テキストになると文字数が多く何の画像かわからない可能性があります。
    ・検索システムを意識しすぎて、見る人に優しくないため、SEO的にマイナスになる可能性があります。
    ・情報量が多すぎて検索評価がマイナスになる可能性があります。

    画像にキーワードがたくさん入っている

    ごめんなさい。これは実際には見たことがありませんが、過去にはこのようなことが行われていたのを散見していました。
    画像に検索でひっかけたいキーワードをたくさん詰め込むことです。

    上の画像に対するaltの例

    アクセス、パソコン、デスク、アナリティクス、Google、グーグル

    考えられる意図

    ・検索にひっかけるため。

    メリット

    今の検索システムではメリットは無いと感じます。

    デメリット

    ・やみくもなキーワード入力はいったいどのキーワードが主なのか判断しづらく、検索システムの評価がマイナスになる可能性があります。
    ・キーワードが多すぎて画像管理がしづらくなります。

     

    私が実際に行っているalt入力の法則

    法則というといかにもという言い方ですが、あくまで参考程度の個人的ルールです。

    ルール

    ・すべての画像にその画像が何を示しているか簡潔に書きます。
    ・外部素材をそのまま使う場合は、空白またはタイトルのキーワードのみ。

    以上のように、「自作または自分で手を加えた画像」と「素材」を大きく分けました。

    理由は、検索エンジン上には同じ素材がありふれています。それにaltを細かく設定する方がかえって都合が悪い判断を下されかねないからです。
    つまり、素材はあくまで他人のものを使っていますので、というところを割り切って、altを空欄にしてしまうということです。

    自作画像に関しては、上で説明した「画像を簡潔に解説」と同じです。

    メリット

    ・検索システムにそれが何の画像かを解説できます。
    ・代替テキスト上でも簡潔な解説により、見る側にとって優しくなります。
    ・画像検索でより詳細なキーワードに引っ掛かる可能性があります。
    ・それぞれの画像の違った内容をわかりやすく説明できます。

    デメリット

    ・手間がかかる
    ・管理上、あとで画像を探すが面倒 (記事タイトルだったり同じタイトルならわかりやすい)

     

    実際のalt属性記入例とその結果

    実際に記入しているのが下記の画像です。

    画像のalt属性や各項目の記入例

    同じお寺の画像ですが、クローズアップしているものが違います。
    でもしっかりとメインキーワードは入れています。
    その結果Google画像検索でどのようなことが起こったでしょうか。

    Google画像検索の画面

    これは画像一覧の1ページ目です。
    赤枠で囲ったものが同じサイトの画像です。

    どちらが良いかはみなさんの判断と経験によります。

    検索エンジンも日々進化していますし、Googleアップデートにより検索においてこれが絶対プラスということは無いと感じています。

    ただ、画像も丁寧に取り扱うことで、見えないところでアクセスにつながることと信じています。

  • 【簡単説明】Contactform7とMW WP FromとNINJA FormとBisual Form Builderの比較

    【簡単説明】Contactform7とMW WP FromとNINJA FormとBisual Form Builderの比較

    注意:当記事は後日内容を修正いたします。

    こんにちは。
    今回はWordPressのお問い合わせフォーム導入プラグインでどれが自分に合っているのか、特徴の比較をしてみます。

    私は主に4種類のお問い合わせフォーム作成プラグインを使用してきました。

    1. Contact Form 7
    2. Visual form builder
    3. MW WP Form
    4. Ninja Forms

    他のプラグインは使用していないので、口コミやネットの評判だけでは書けません。
    すべて私自身が実際に使用してみた上で比較しました。
    ちなみにちょっと触ったと言うよりは、わりとコアに使い込んでいた4種類です。

    私のレベルと求めるプラグイン像

    ・私はプログラマーではないため、細かいコード修正や専門的なプログラムは苦手。
    ・いかに感覚的に作れるかに重点を置く。
    ・デザインも重視。
    ・俗に一般的に見るお問い合わせフォームの形式 (確認画面など) を好む。

    つまり素人目線です。

    比較表

    プラグイン名 インストール数 使いやすさ 標準機能 日本語対応 自由度
    Contact Form 7  500万以上 ★★ ★★ ★★★★ ★★★★★
    Visual form builder 6万以上 ★★★★ ★★★ ★★
    MW WP Form  10万以上 ★★★ ★★★★★ ★★★★ ★★★★
    Ninja Forms  100万以上 ★★★★★ ★★★★ ★★★★ ★★

    使いやすさ比較

    プラグイン名 直感性 ビジュアル確認 管理画面がシンプル
    Contact Form 7
    Visual form builder
    MW WP Form
    Ninja Forms

    直感性

    この中で分類できるのは、直感で操作してフォームを作成できる組とある程度プログラムを組んで作成する組です。
    いわゆるドラッグ&ドロップで作成できるかどうか。

    [icon name=”broom” style=”solid” class=”” unprefixed_class=””] 直感でドラッグ&ドロップ操作してフォームを作成できる組

    Visual Form Builder
    Ninja Forms

    [icon name=”code” style=”solid” class=”” unprefixed_class=””] プログラムを組んで作成する・ドラッグ&ドロップ操作ではない組

    Contact Form 7
    MW WP Form

    海外製と日本製ではっきり分かれました。
    操作感やフォームの作りやすさはもちろん直感でドラッグ&ドロップ操作してフォームを作成できるに越したことはありません。

    ビジュアル確認

    ぱっと見でどのようなデザインのフォームになっているか確認できる (ビジュアル確認) 組とできない組に分かれます。

    [icon name=”chalkboard” style=”solid” class=”” unprefixed_class=””] ビジュアル確認できる組

    Visual Form Builder
    Ninja Forms
    MW WP Form

    [icon name=”code” style=”solid” class=”” unprefixed_class=””] ビジュアル確認できない組

    Contact Form 7

    初心者の私にとって、作っている最中にどのような見え方になっているのか確認できる方が助かります。

    管理画面のシンプルさ

    管理画面はすべてのプラグインにおいてわかりやすくなっています。
    その中でも群を抜いてわかりやすいのが、

    Ninja Forms

    標準機能の比較

    少し手の込んだ機能は紹介せず、基本的なものを表記しています。

    Contact Form 7 標準機能

    ・必須
    ・エラー
    ・メール自動送信

    Visual form builder 標準機能

    ・確認画面
    ・必須
    ・エラー
    ・メール自動送信
    ・セキュリティー文字入力

    MW WP Form 標準機能

    ・確認画面
    ・送信後のサンクスページ作成
    ・エラー
    ・必須
    ・メール自動送信

    Ninja Forms 標準機能

    ・確認画面
    ・エラー
    ・必須
    ・メール自動送信

    日本語対応・サポート

    Contact Form 7

    が最も安心です。
    ダウンロード数が多いだけに、サポートに頼らずとも多くのユーザーがブログなどでノウハウやトラブルを紹介しています。

     

    初心者におすすめのプラグインはNinja Forms

    とっかかりに初心者向けを結論付けますと、初心者向け、または簡単なお問い合わせで済む場合は圧倒的に「Ninja Forms」をおすすめします。

    私が今メインで使用しているのはMW WP Form

    私が現在総合的に見て利用しやすく、すべてのお問い合わせフォームで統一しているのは「MW WP Form」です。
    その理由と経緯も後ほど説明します。

    あくまで個人的な内容となりますので、参考程度に見ていただければ幸いです。

    Contact Form 7についてのレビュー

    私が世間で最も多く見かけたプラグインは「Contact Form 7」。
    WordPress初心者向けのテキストでも紹介されています。
    日本人が開発したと言うことで、日本ではContact Form 7が標準であり、それ以外は考えられないという風潮もありました。
    なんというか…それも日本的な風潮かもしれませんね。

    Contactformで苦手なこと

    1. コード編集のみとなりビジュアル確認しながら作成ができない。
    2. 確認画面が出ない。(やろうと思えば可能。)
    3. サンクスページを作れない。 (やろうと思えば可能。)
    4. デザインが味気ない。(CSSで自由にカスタマイズは可能。)

    大きなところだとこの4点。

    Contact Form 7の良い点

    はじめに使いにくいと言っておきながら、結局最後の最後まで使用していたプラグインのContact Form 7。
    何が良かったかというと、

    1. カスタマイズの自由度が高い。
    2. 日本語で検索するとあらゆる情報が出てくる。
    3. あらゆることが無料でできる。

    まさにこの3点。
    デザインを凝れば凝るほど「Contact Form 7だからこそ無料でできる。」ということが多かったのです。
    やはり評価されるのは当然ですよね。

    Ninja Forms・Visual Form Builderの良い点

    海外製と聞いて「英語だから」と切り捨ててしまう人も多いかと思います。

    しかし、世界では英語がわからなくても文字が読めなくても直感的にできるというのが標準的な流れです。まさにユニバーサル。
    細かい機能や説明がぎっしり詰まったものを好む日本とは相反するものです。
    それを目の当たりにするのが下記2点。

    Visual Form Builder
    Ninja Forms

    特にNinja Formsは英語がわからなくてもフォームを完成することができます。
    無料の範囲ではNinja Formsだと内容が物足りないという場合、Visual Form Builderがその役割を果たします。

    Visual Form Builder・Ninja Formsで苦手なこと

    カスタマイズ自由度が低い

    ある程度デザインもできあがっていて、完成度が高いゆえに、自分の思うようにカスタマイズしたいと思ってもなかなかできません。

    また、メール配信がテキスト配信ではなく「html形式配信」だったことも却下の理由です。

    日本だとhtml形式配信は敬遠されがちな風潮がありませんか?

    MW WP Formのレビュー

    さて、私にとってContact Form 7と最後まで天秤にかけたプラグイン。

    MW Formで苦手なこと

    1. フォーム項目だけはコード表記。
    2. テーマのデザインに大きく左右される。

    Contact Form 7とMW WP Formの違い

    Contactformは全てhtmlコード表記ですが、
    MW WP Formはビジュアル表示・ビジュアル編集が備わっていて、アイコンやテキスト編集なども通常の投稿画面と同じようにできます。

    ただ、フォームの項目だけショートコード表記ですが、それもクリックして項目に入力するだけなので、説明書いらずです。

    最後の決め手はカスタマイズ自由度でした。
    これはVisual Form BuilderやNinja Formsではなかなかできません。

    MW WPの良い点

    1. Contact Form 7で作ったデザインをほぼ忠実にMW WP Formで再現できる。
    2. 自動確認画面が標準装備。
    3. サンクスメッセージも標準装備。
    4. テキスト配信できる。
    5. ビジュアル編集できる。
    6. 必須項目設定がわかりやすい。
    7. 標準のデザインがある程度完成されていて見栄えが良い。

     

    4つのお問い合わせフォーム作成プラグインまとめ

    プラグイン名 機能性 使い勝手 自由度
    Contactform 7 ★★★ ★★★★★
    Bisual Form Builder ★★★ ★★★★ ★★
    NINJA Form ★★★★ ★★★★★
    MW WP Form ★★★★★ ★★★ ★★★★

    Contact Form 7・・・自由度が高く機能性にも満足。しかし見栄えが捉えづらく使い勝手が合わず、最後まで使用していたけれどやめました。

    Visual Form Builder・・・使い勝手が抜群に良いけれど、2桁のセキュリティーコード入力が強制であったり、デザインを自由に変更できずにやめました。「時間選択」も求めるものと異なりました。

    Ninja Forms・・・使い勝手は抜群でビジュアルも良い。しかし内容が基本的すぎて、デザインにも自由なキャパがないので実用化しませんでした。

    MW WP Form・・・使い勝手は少々慣れが必要だけれど、Contact Form 7の良いとこ取りができ、自由なデザインも可能。確認画面やサンクスメッセージも備わっているので、これに統一しています。

     

  • WordPressでファビコンの設定方法|Webサイトのタイトル横のアイコンの絵は何か

    WordPressでファビコンの設定方法|Webサイトのタイトル横のアイコンの絵は何か

    ファビコンとは

    こんにちは。
    パソコンでインターネットを見ていると、お気に入りのサイトを見つけることもあります。
    そのサイトをお気に入りにお登録すると、お気に入り一覧に載ります。
    その一覧を開くと、Webサイトのタイトルの一番左にアイコンのようなちっちゃな絵が付いていませんか?

    ファビコンの位置とアイコン

    これがファビコンと言われるものです。

    ファビコンとは

    下記はWikipediaから

    favicon(ファビコン)は、ウェブサイトのシンボルマーク・イメージとして、ウェブサイト運営者がウェブサイトやウェブページに配置するアイコンの俗称である。favorite icon(フェイバリット・アイコン:お気に入りアイコン)という英語の語句を縮約したかばん語である。

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 簡単に言うとWebサイト (ホームページ) のシンボルマーク。サイトアイコンです。

    地図に出てくるセブンイレブンやイオンや出光のマークみたいなものです。

    ファビコンは便利なもので、お気に入りの一覧にたくさんサイト名が並んでいても、ファビコンがあれば目的のWebサイトが一発で見つけられるのではないでしょうか。

    ファビコンは特殊なファイル形式

    実はファビコンのファイルは「.ico」という見慣れないファイル形式になっています。
    インターネットで検索すると簡単に「.ico」ファイルに変換できるページが出てきます。
    私もかつては何度もお世話になりました。

    ファイルを作成し、
    変換し、
    ファイルをアップロードし、
    html上で表示を指定する必要があります。

    しかし、Wordpressなら「.ico」に変換する必要なく、簡単にファビコンを指定することができます。

    WordPressでファビコンを設定する方法

    必要なもの

    WordPress (テーマは何でもOK)
    理想は512×512ピクセルの「.png」画像

    ここでは画像サイズに関わらずファビコン (サイトアイコン) を設定する流れを紹介しますので、あえて600×600ピクセルの画像を選択しています。

    「png.」形式も見慣れない人が多いかもしれませんが、ほとんどの画像編集ソフトに備わっていますのでご安心ください。

     

    1. WordPress管理画面の「外観」→「カスタマイズ」をクリック

    Wordpress管理画面の外観

    WordPress管理画面の左側のメニューの真ん中のあたりにある「外観」の中の「カスタマイズ」をクリックします。

    [icon name=”chevron-down” style=”solid” class=”fa-3x” unprefixed_class=””]

    2.「サイト基本情報」をクリック

    Wordpress管理画面のサイトの基本情報

     

    [icon name=”chevron-down” style=”solid” class=”fa-3x” unprefixed_class=””]

    3. 「サイトアイコンを選択」をクリック

    サイトアイコンの選択画面

    画像ファイルを画面に放り込むと画像がアップロードされ、同時に選択されます。

     

    [icon name=”chevron-down” style=”solid” class=”fa-3x” unprefixed_class=””]

    4. 「ファビコンにしたい画像」を選択し「選択」をクリック

    サイトアイコンを選択する画面

    [icon name=”chevron-down” style=”solid” class=”fa-3x” unprefixed_class=””]

    画像の編集画面「画像の切り抜き」をクリック

    サイトアイコンのトリミング

    画像のサイズが512×512ピクセルでない場合は、この編集画面でトリミングなどを行います。
    1:1の画像サイズの場合はそのまま「画像の切り抜き」をクリックします。

    [icon name=”chevron-down” style=”solid” class=”fa-3x” unprefixed_class=””]

    5. サイトアイコンの表示を確認し「公開」をクリック

    Wordpressサイトアイコンの公開画面

    [icon name=”chevron-down” style=”solid” class=”fa-3x” unprefixed_class=””]

    お疲れ様でした。以上です。

    ファビコンを作る際の注意点やコツ

    ファビコンを作る際は、
    ・背景を透過 (透明) にするかしないか
    ・四隅まで絵や写真がある場合に削られる可能性がある
    ・文字を入れる場合は文字の大きさ
    などに注意して作ってみると上手に作れます。

    ごちゃごちゃした写真より、パキッとした色味の方が見やすいです。

     

    ファビコンを設定できるプラグイン

    このほかにテーマ別に設定できるものがあったり、プラグインで設定できるものもあります。
    参考までにファビコンが簡単に設定できるプラグインをご紹介します。

    → プラグイン「Favicon Rotator
  • 【簡単説明】ホームページやブログ|サイトで使用する画像サイズの例を公開

    【簡単説明】ホームページやブログ|サイトで使用する画像サイズの例を公開

    こんにちは。
    私はWebサイトやブログを制作しはじめる初期のころにいくつか疑問に思うことがありました。

    その中で、「画像のサイズはどのくらいの大きさを使用すればよいか」というのが地味に決められなかったのを覚えています。
    実はほんの1~2年前までこれが決まらなかったですね。
    理由は、パソコン環境の変化が激しかったからです。
    ディスプレイやスマホの大きさ、レスポンシブなどの環境がそれを大きく悩ませました。

    画像サイズ…悩む方はいるでしょうか。

    今回は実際にWeb制作を主として活動する当事務所で使用する画像サイズがどのくらいの大きさなのかを公開します。

    画像サイズを気にするか気にしないか

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 画像サイズを気にする人はすでに一歩先を進んでいると思います。

    特にブログの場合、この画像サイズを悩む時点でわりと一歩前を歩いている方だと推測します。
    というのも、ブログ初心者の方はスマホやデジカメの画像をサイズ縮小せず使用している人が多いからです。

    つまりサイズを気にするということは、SEO対策に意識があったり、サイズ変更のスキルがあり、トリミングや画質調整なども行う用意ができている方になります。

    なぜ画像サイズを気にするの?

    画像の容量が重ければ重いほど、表示にも負担がかかります。

    表示に負担がかかるのは見ている人にとってもストレスになりますし、インターネットのやり取りにも優しくありません。
    結果、サイトやブログの評価が下がってしまい検索でも不利になる可能性もあります。

    しかし、画像が小さければサイトが軽くなるのですが、画像が荒くなったり、見るに堪えないぼやけた画像だとそれもまた気になります。

    結局「中間を取る」ことが近道だとは思いますが、その中間ってどのくらい?と思いますよね。
    私も実際のところ答えは決まっていません。

    5Gが主流になっていく日本で、それほど画像サイズを気にすることは無くなってはいますが、その時代の流れとともにデジカメやスマホの画像サイズも増えているんですよね。
    だから結局サイズを考えなくてはならないのです。

    では、実際に使用しているサイズを公開します。
    これは世間の標準だとは限りません。

    あくまでこの人はこうなんだ、程度でたたき台の参考の一つにしていただけたらと思います。

    実際にやってみて自分なりの最適なサイズを見つけられることを願います。

    ポートレートサイト・ブログ画像サイズ例

    通常画像・記事内画像サイズの例

    800x533ピクセルの画像

    800ピクセルx533ピクセル (3:2)
    800ピクセルx800ピクセル (1:1)
    など

    基本的に縦横は一眼デジカメの撮影比率の3:2を基準としています。
    時には1:1の正方形。
    ポイントは意外と大きめの画像で統一していること。本音を言えば1000ピクセルでも良いのですが、やはり容量が大きくなりすぎるのを考慮して800ピクセルに抑えています。
    600ピクセルでもOKです。

    本来なら300ピクセルなどのような表示だとしても、元画像は600~800ピクセルで作っています。

    「表示サイズ」が大きすぎるという方は、表示だけ600ピクセルなどにしてみると良いと思います。

    理由

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 当事務所での制作サイトの多くは、ページ部分の幅 (ブログでは記事部分) を800~1,000ピクセルにしています。
    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] レスポンシブにすると、スマホやタブレットなどの表示媒体によって画像がぼやけてしまうので大きめにしています。

    バナー画像サイズの例

    800x533ピクセルの画像

    幅600~800ピクセル

    バナー画像も通常画像と同じサイズ幅で制作しています。
    上の画像は800×533ピクセルの画像を300×200ピクセルのサイズで表示していますが、元の画像が大きいので表示媒体が変わってもそれほど違和感なく表示されます。

    逆に希望表示のサイズ (例えば300×200ピクセル) のままで作ってしまうと、スマホやタブレットなどの表示で見え方が変わり、ぼやけてしまうことも少なくありません。

    理由

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 例え表示サイズを300ピクセルにしても、表示媒体によって見え方が変わる可能性もあります。
    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 後々大きなバナーに転換したり、転用しやすいように、あらかじめ大きめに制作しています。

     

    フルスクリーン画像サイズ例

    ホームページトップ画像フルスクリーン

    1500×800ピクセル

    理由

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 横幅1500ピクセルだと私の使用しているディスプレイでも両端が空いてしまうのですが、ブラウザを開いている人にはお気に入りブックマークをサイドバーに表示している人も少なくないかと思いこのサイズにしました。
    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 逆に1500ピクセルを超えるとファイル容量が大きくなり、画像が重くなるためフルスクリーンでもある程度のサイズで決めました。
    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 1800ピクセルなどの完全な画像の方が、フルスクリーンでは端の余白ができずに画像もきれいですが、あえて1500ピクセルをディスプレイ画面に合わせて拡大しています。
    それほどビジュアルを売りにしたサイトを作っていないのも理由です。

    サイドバー画像サイズの例

    幅600~800ピクセル

    当事務所の場合、サイドバーの幅は300ピクセルで設定するものが多いようです。
    しかし、サイドバー用画像も通常画像と同じサイズ幅で制作しています。

    理由

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 例え表示サイズを300ピクセルにしても、表示媒体によって変わる可能性もあります。
    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 後々大きなバナーに転換したり、転用しやすいように、あらかじめ大きめに制作しています。

    Retinaディスプレイ対応用画像の例

    Retinaディスプレイはアップル製品で主に利用される高解像度表示ディスプレイです。
    このディスプレイで表示すると、わりと多くの画像がぼやっとした表示になってしいますので、それ相応の画像サイズで対応しなければならないのです。

    しかし当事務所の場合、閲覧者像やサイトの特性によって画像のサイズをある程度絞っています。

    ロゴ

    幅800ピクセル程度

    ロゴはRetina用に大きめに制作していますが、それほどしっかりと大きなサイズで利用しているわけではありません。
    認識できる不快ではない程度の表示として、このサイズにしています。

    その他の画像

    その他の画像は残念ながら通常のサイトの画像と同じサイズにしています。
    当事務所のサイト制作の意図はデザイン性やビジュアル性よりも、マーケティングやSEOに重きを置いているため、妥協と言わざるを得ない判断としました。

     

     

  • サイト速度はSEOに影響するか考察|日本のブログ上では関係ないかも

    サイト速度はSEOに影響するか考察|日本のブログ上では関係ないかも

    こんにちは。
    SEO対策という言葉が多くの人の間で使われるようになった今、多くのブログでSEOのなんたるかを説明する人も増えました。

    今回はそのSEO対策で最近よく見かける
    「サイト速度」
    について私なりに書き進めたいと思います。

    [icon name=”book-reader” style=”solid” class=”” unprefixed_class=””] この記事のご注意お願い
    ――――――

    「SEOはあくまで推測」であると思っています。
    誰が「こうだ!」と豪語しても、それがGoogle社のアルゴリズムに携わる人でない限りは、100%正解だとは言えないと感じています。
    ここで書く内容は、実は世間で言われていることと少し反する考えをあえて書いています。
    それを読んで批判する気持ちになっても良いですし、改めてSEOについて考えてみるきっかけにもなれば良いかと思い、意図的にこの記事を公開させていただきました。

    ――――――

    サイト速度は大切か

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] サイト速度は大切だと思います。

    どんな媒体 (パソコンの性能やスマホ、ガラケー) でもストレスなく閲覧できるに越したことはありません。

    サイト速度はSEOに影響するか

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 影響するけれども日本ではそこまで気にする必要はないと思います。

    問題はここです。
    解説します。

    Google社ではサイト速度についての言及がある

    あらゆるSEO対策の記事を見ていると、多くの方がGoogle社のサイト速度に関する文言を引用しています。

    「Google社はサイトの速度はある程度大事ですよ~と言っているのだから、SEOには影響がありますよ。」
    「サイトが開かなかったら見るのをやめちゃう (離脱) 確率が上がるでしょ。そしたらサイトの評価が下がって、結果SEOに影響がありますよ~。」

    すごくわかりやすく言い換えるとこんな感じです。

    これはもうまさに同意です。

    しかし私はそんなに神経質にサイト速度にこだわる必要はないと書きました。

    Google社の公表は世界に向けて

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 世界の国々の多くは、いまだインターネット環境が十分ではありません。

    つまり、過半数以上の人々が動画ぐりぐり、大きな画像、アニメーションといったサイト表示だと思うように見ることができないのです。

    そのため「サイト速度をある程度考慮してユニバーサルに対応してね」ということだと感じています。

    私もアメリカで仕事をしていた経験上ですが、アメリカで発信することはアフリカ人もシンガポール人でも見ています。なぜなら英語だから。
    日本人が思うより世界はつながっていました。

    通販マーケットではまさに世界発送が標準。
    当たり前ですが、日本以外のAmazonが世界中の国から注文を受け、それらの国に配送するのは普通になっています。

    何を発信してどんな人が読むか

    では、みなさんがおそらく抱いているであろうサイト、その多くはブログではないでしょうか?
    そのブログのサイト速度に関して世界基準で考えてみましょう。

    日本で日本人が発信しているという前提

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] ここでは多くの人が日本語で発信し、日本人が読むことを前提で考えました。

    おそらく世界中の人は日本語を読めません。
    アルファベットで書かれたスペイン語やイタリア語なら推測できる単語も、日本語となれば絵文字にしか見えません。
    私はタイ語や韓国語からは何も想像もつきません。

    日本で日本人が発信しているという前提ならば、おそらく日本という国での閲覧が圧倒的なのではないでしょうか?

    あっても海外在住日本人とか、海外からの迷惑アクセスもあるでしょうけれど、多くのブログが少数になるような気がします。
    勝手な推測です、すみません。

    日本のインターネット環境を世界の中で考える

    では話を戻しましょう。
    Google社が世界基準で公表した内容は、日本というマーケットに限って言えばどれほどの位置にあるでしょうか。

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 日本のインターネット環境は恵まれていると推測されます。

    例え世界の80%が3G通信だったとしても、日本だけで発信するならば、そこまでサイトの容量などを考えることは無いのではないでしょうか。

    Webの種類で考える

    サイト速度を気にされている人の多くは、どのようなコンテンツを発信しているでしょうか。

    Google社が抱えるWebの世界は、すべて動画や複雑なプログラムで作られたサイトから、ペラ1枚の画像までさまざまです。

    その中でもしあなたのサイトが日本においてサイト速度を気にされるならば、5Gが標準となる流れの中で少し様子を見ても良いのではないかなぁ、という意識で思っています。

    日本の流れは5G

    話はそれますが、アメリカではこういったシステムがあります。

    [icon name=”play” style=”solid” class=”” unprefixed_class=””] アプリ上で野菜や加熱加減などをチョイスし、ピッとするとその場で料理してくれる自動販売機。
    [icon name=”play” style=”solid” class=”” unprefixed_class=””] AIロボットが注文を受け、自動的に配膳されるレストラン。
    [icon name=”play” style=”solid” class=”” unprefixed_class=””] カウンターでスマホを置いておくと自動的に充電されるスタバ。
    [icon name=”play” style=”solid” class=”” unprefixed_class=””] タクシーやUberはスマホでどの車両がどこにいるかアイコンで動いています。何分後に到着するかも一目でわかります。

    こういったものもインターネット上のやり取りになります。

    日本でも5Gが標準となる流れに向かっています。
    5Gってなんぞや?ということですが、とにかく今までよりも膨大なやりとりが高速でできるわけですね。

    コンテンツの充実こそSEO対策の近道

    [icon name=”check-circle” style=”solid” class=”” unprefixed_class=””] 私の結論は、サイト速度を気にして時間をかけるより、コンテンツを充実する方を優先します。

    WordPressでは画像の読み込みをずらしてくれるものがあったり、
    画像を圧縮してくれるものがあったりしますので、
    そういったものを取り入れて対策するのは良いかと思います。

    しかし、ポートレートサイトやブログなどのコンテンツにおいて、よほどのデータ量のやり取りが無い限り、多くの人はそこまで気にする必要はないのではないでしょうか?

    WordPressテーマJINから見たサイト速度

    私はWordpressの有料テーマ「JIN (ジン)」を使って書いているものがあります。
    JINは素人の私から見ても非常に表示が重いんですよね。

    画像はたいてい1500ピクセル程度のものを使っているページも多いですし、Smartsliderなどのスライドショー系のプラグインも併用しています。
    その他プラグインは10個以上積んだ状態です。
    ある程度経験ある方なら絶対に避けたいことをしています。

    しかしそんなサイトでもビッグキーワードでも上位5位以内を取っている記事がたくさんあります。

    また、JINを使ってわかるのですが、わからないことがあって検索するとたいていJINを使ったブログが上位にいませんか。

    ブログだと競合が多いという悩み

    ブログなら気にしなくて良いみたいな書き方でしたが、
    「ブログだと競合が多いので、ある程度良い条件にSEO対策する必要があるのではないでしょうか?」
    と思った方も多いかと思います。

    もちろんその通りだと思っています。
    しかしそれはしかしインターネット上のデータのやりとりの中で、

    ・数々のブログが画像の数キロバイトの容量や表示
    ・内容やサイトの充実性や読みやすさ

    あなたならどちらに重きを置きますか?

    もし内容がほとんど変わらないのであったとしても、日本において、同じブログ世界において僅差のサイト速度で順位を変えるほどのこととGoogle社は考えているでしょうか。

     

    この記事も数ある個人ブログの個人の考えに過ぎず、信憑性も信頼性も埃のようなものです。

    もしご縁があってこの記事を読んでいただき、内容が少しでもSEOを別の視点から考えるきっかけ、もしくは読み物として触れてもらえたらと思います。
    ありがとうございました。

  • ホームページ制作の見積もり|デザイン料とは何?

    ホームページ制作の見積もり|デザイン料とは何?

    こんにちは。

    ホームページを制作会社に作ってもらうときに、
    見積もりや設計・作業工程を見ても、
    「難しい単語が並んでいてよくわからない。」
    「これってお金かかる分野なの?」
    と思ったことはありませんか?

    説明をさらっとされてしまい、「よくわからないからお任せした」という経験をされた方もいらっしゃるかもしれません。

    ここではホームページ (ウェブサイト) 制作の見積もりや明細にたびたび出てくる専門的な項目
    「デザイン料」について簡単に説明します。

    ホームページ作成におけるデザイン料とは

    ホームページ (Webサイト) を制作する上でかかせない、見栄え、画像編集、写真編集などをはじめ、サイト自体の「レイアウト」や「設計」に関わる対価です。

    ホームページを作るうえで、デザイン (設計や作り) は欠かせない分野です。
    そのデザインはテンプレートから持ってくる人もいれば、ゼロから考えて作る人もいるでしょう。

    ゼロから作る場合、たとえ仕上がりがシンプルだとしても、その過程にはとてつもない時間が費やされていることが多いです。

    ではテンプレートではどうでしょうか?
    例えばどこかのサイトからテンプレートを持ってきても、自社で用意しているテンプレートを用意しても、依頼者のイメージやカラーに合わせ、適切なものを選ぶのにも非常に時間と知識が必要です。
    やみくもに選んだテンプレートではバランスが悪くなり、思うような効果が発揮されないからです。

    デザインと言っても、芸術的な描写のデザインだけではなく、サイト全体の設計図作りも含まれます。

    いわゆる家を建てるときの設計図のようなものとイメージしていただければ納得のいくものかと思います。

    デザイン料は必要?

    デザイン無くしてウェブサイトはできないため、必ず必要な分野です。
    デザインはプログラムを組む人とは違うスキルが求められますので、コーディング料と同等またはそれ以上の対価が料金としてかかります。

    もし「デザインは何でもいいから安くしたい、メニューのデザインも位置もお任せ、写真はテキトーにフリー画像で良い。」という方がいらっしゃったとしても、その設計、レイアウト、見栄えはもちろん、コンセプトカラー (色) などは必須です。
    それらをひとつだけとっても大きく状況が変わります。

    フリー画像で良いという要望があったとしても、数十万と世に出回っているフリー画像でどれが適切かを選択し、バランスやサイズを調整し、そこに文字を埋め込むとなればひと手間ではすみません。

    デザインは完成品を見ればなんてことないものでも、その表現に至るまではかなりの時間を費やす分野です。

    コードを記述する人とデザインする人は違う

    プログラマーとデザイナーは全く違う分野の技術者です。

    上記のように、コーディング (プログラムを組んでウェブサイトを構築する人) と、デザイン (見た目やレイアウト、設計、画像の編集や写真編集などを適切に行う人) とは、まったく違う技術が求められます。

    プログラミングを得意とする人は、「デザインはわからないんだよね。」と言う方も多いですし、デザイナーさんたちは「プログラムなんて見たこともない。」という方も多いです。

    コーディングとデザインが両方できる人

    例えば、フリーランスでウェブ制作を行う人には、得意不得意こそあれ、コーディングとデザインの両方のスキルが長けている人も多いです。

    逆に大企業などはプログラムはプロフェッショナルだけど、デザイナーはまったく別の人というケースも多いです。

    どちらが良いかどうかは一長一短あります。

    コーディングとデザイン両方できる人に頼むメリット

    安い・効率が良い・融通が利く

    人件費がかからないし、人を介して作業を行う必要が無いので、効率よく融通が利きます。

    コーディングとデザインが別担当の場合のメリット

    複雑な仕組みづくりやトラブルを信頼してお任せできる

    専属のプログラマーを控えている会社は、仕組みづくりやトラブル対応などに対してとても頼りになります。

    デザイン料金が含まれる場合と含まれない場合

    デザイン料はホームページ制作料金に含まれている会社もあれば、当事務所のように明細で項目別に記載している会社もあります。
    もしくは、各項目をデザイン料という名前で明記している会社もあります。

    どちらが良いかはそれぞれの判断となりますが、当事務所がなぜデザイン料をあえて項目で表記しているのかをご説明します。

    ホームページ制作は中身がわかりづらい

    ホームページ制作料金の内訳は中身が非常にわかりづらいため、全体をわかりやすくするためにデザイン料を含また一括の料金で明記している会社が多い印象です。
    その内訳はプロから見ても「あれは含まれていてあれは含まれていないのね。」というように把握することは困難です。

    逆に言えばあまり詳しくない人にとっては「一括でいくら」と表記してくれた方が助かります。

    通常であればこのような料金表示の方が良いと思います。

    しかし当事務所では、あえてデザイン料として項目を分けています。
    これには理由があります。

    1. 業務の線引きをしやすくするため
    2. 料金が明瞭になるため
    3. ホームページ制作に関する料金に納得していただきたいため

    1. 業務の線引き

    これは当事務所が小さいがゆえの理由です。
    いろいろ含めていくら、にすると内訳でこれはできる、これはできない、ということが後々になって出てきます。
    その線引きをするためにすべての業務を項目分けし、すべてに値段付けをしたのです。

    料金が明瞭になるため

    すべての業務に細かく項目分けし、値段をつけ、それを明示すれば、誰もが要望に合わせた料金がいくらなのか把握することができます。

    保守管理契約で、「かんたんな修正は無料」と書いているところもありますが、簡単な修正とはどこまでか、何回お願いしていいのか、お客様によっては頼みにくい性格の人もいれば、何回でもちょこちょこと頼む方もいます。

    項目ごとに料金を示していれば、例え当事務所でも「それくらいなら無料でやりますよ。」と言っても、本来はこれくらい料金がかかっているんだとわかります。

    つまりホームページに関わるあらゆることに値段を付けたのです。

    ホームページ制作に関する料金に納得していただきたいため

    すべての理由はつながっています。
    当事務所では不明な部分をなくし、これにはこれくらいの報酬をいただいておりますとあらかじめ明記することで、ホームページ制作や管理における対価と内容をお客様が評価できます。
    ご納得されたうえでのご契約ですので、項目によってはお力添えできていなければ、解約またはこの部分が弱いよ、とお申し出いただけます。