スタッフ厳選おすすめ情報

ホームページ改善

おすすめ情報

2017年3月22日

SSL化(HTTPS化)していますか?-ワードプレスサイトのSSL化-

have-you-made-ssl-https-ssl-encryption-of-wordpress-site
みなさんのWEBサイトはSSL化(HTTPS化)していますか?
大切な個人情報などを守るために
WEBサイトのSSL化(HTTPS化)についてまとめてみました。

▼SSLとは?

SSL(Secure Sockets Layer)とは、
インターネット上で情報を暗号化して送受信する仕組みです。
この仕組みをプロトコルと言います。
利用者の個人情報やクレジットカードなどの
大切な情報をサーバからPC間で通信するときに
その情報を暗号化して、安全に通信することができます。
SSLを利用していないと大切な情報を盗まれる可能性があります。

▼SSL化(HTTPS化)の確認方法

SSL化していないWEBサイトと
SSL化してあるWEBサイトはURLがちがいます。
SSL化していないWEBサイトはURLの最初が
「http://」から始まり、SSL化してあるWEBサイトは
URLの最初が「https://」から始まります。
そしてSSL設定をしていると、
WEBサイトのURLの部分に鍵のマークが表示されます。
ブラウザによって表示は少し違いますが
SSL化されている場合は必ず『鍵』のマークが表示されています。
URL横の『鍵』のマークをクリックすることで、
そのWEBサイトのSSL証明書の情報を
確認することができるようになっています。
SSL証明書を発行してもらうには、
「認証局」の認証を通過しないといけません。
そのため、SSL証明書を設置している運営元のWEBサイトは、
利用者の情報の安全性と、
WEBサイト運営元の信頼性を強調することができます。

▼SSLの役割は?

1.暗号化通信
インターネット上の情報の通信を
暗号化することで他人からの盗聴を防ぎます。
最近ではWEBサイトの大きさにかかわらず、
情報の送信を行うときには、
SSLを利用して通信の安全性を高くすることが一般化してます。

2.WEBサイト運営元の確認
SSL通信ではWEBサイトの所有者の情報・送信される情報の
暗号化に必要な鍵・証明書発行者の
署名データを持つSSL証明書を利用します。
利用者は、SSL証明書をみて、
そのサービスの運営元が誰なのか確認することができます。

▼SSLはいつ使う?

WEBサイトから大切な情報を送信するときに、
送信する情報を暗号化する為にSSLを使用します。
WEBサイトを管理している人は利用者から送信される情報を
悪意を持った他人から守る・送信される情報が
勝手に変更されていないことを証明することができます。
つまり、WEBサイトを運用していく上で
SSLはとても大切な設定となっています。

▼なぜSSL設定が必要なのか

最近ではインターネットでの
お買い物(ネットショッピング)を利用する人が
増えていますが、その裏で悪意のある
ハッカーなどのネット上の犯罪の危険も増えています。
SSLを実装して、通信を暗号化することで
他人による情報の盗聴や改善を防ぎます。
SSLを実装することにより利用者が
ネットショッピングやサイト内のなんらかのサービスを利用するときに
重要視することとして
『SSL暗号化通信がされていること』が挙げられています。
クレジットカード等の個人の情報を
暗号化することで情報漏えいを防止し、
WEBサイト運営元の情報を表示できることによって、
利用者はネットショップに対する信頼度があがり、
安心してネットショッピングを楽しむことができるようになります。

▼SSL化(HTTPS化)のメリット

・サイトの利用者からの信頼性が上がる。
・サイトの運営者を装ったWEBサイトが
利用者の個人情報やクレジットカードなどの情報を盗み、
他人に悪用されるリスクを減らします。
・個人情報を盗聴することで、
住所やメールアドレスなどの
個人情報を悪用されるリスクを減らします。
・通信された情報を改ざんすることで
ネットショップで注文した内容などを
他人に変更されるリスクをなくします。
・検索結果で有利になると言われています。
・サイトの表示速度が上がります。

▼SLL化(HTTPS化)のデメリット

・SSL化するためにお金がかかります。
・サイト内の「http」を
全て「https」に書き換えるという作業が発生します。
・「http」で開かれたときに
「https」にリダイレクトする設定作業が発生します。
・SNSのカウントがリセットされ0になります。
(WordPressサイトなら、
WordPressプラグイン
SNS Count Cacheを使えばカウント戻せるるみたいです。)

▼エックスサーバー

先ほどデメリットの説明の時に
・お金がかかる
と説明しましたがエックスサーバーを利用する場合、
SSLが無料で使えるようになり、
SSLの設定に費用がかからなくなりました。

▼共有SSL/独自SSL

共有SSL…レンタルサーバー内の他の利用者と
SSLサーバー証明書を使う事になります。
エックスサーバーでも共用SSLは無料で使用できますが、
独自ドメインでは使用できません。
Webサイトの内の一部のページでの利用が可能です。

独自SSL…一つの独自ドメインに対して
SSL証明書の発行ができます。
常時SSLが可能です。基本的に有料となります。

▼エックスサーバーを使ってのWordPressの変更方法

独自SSLが反映され『https』から始まるURLで
Webサイトが表示されるようになったら、
『https』へWebサイトをリダイレクトをさせる為、
そのWordPressサイトの
管理画面にログインしてWebサイトのURLを変更していきます。

・WEBサイトのURLを変更
WordPress管理画面の一般設定画面を開きます。
管理画面左側のメニューから設定→
一般の中の”WordPress アドレス (URL)”、
”サイトアドレス (URL)”の
「http」を「https」に書き換えましょう。
書き換えが終わったら一旦ログアウトし、
再度ログインすると作業完了です。

・WEBサイトの中で使用している画像・リンク・
プログラムのパスURLの変更
WordPressのテーマ内の画像・リンク・プログラムを
絶対パスで指定している場合は、
パスのURLを「http」から「https」に変更しましょう。
(WordPressプラグイン
『Seach Regex』で一括変更できるみたいです。)
WordPressのテーマ内で絶対パスではなく
テンプレートタグを使用している方は
変更する場所が少ないと思います。
「http」から始まるWEBサイトと
「https」から始まるWebサイトは別サイト扱いになるので、
301リダイレクトで
検索エンジンからの評価の引き継ぎをしましょう。

・Google Search Console
(グーグル サーチ コンソール)の登録
Google Search Consoleの登録に関しても
「http」と「https」のWEBサイトは別サイト扱いになるので、
Google Search ConsoleにSSLを設定したWebサイトを
新しく登録しましょう。Search Consoleに、
HTTPSから始まるWebサイトのサイトマップを送信して、
今までのHTTPから始まる
Webサイトのサイトマップは削除します。
(サイトマップ移行に1~2週間かかるみたいなので、
その間は、HTTPのサイトマップも残しておく必要があります。)

▼まとめ

今回の記事では、『SSLについて』
『SSL化のメリット・デメリット』
『WordPressサイトのSSL化』についてまとめました。
SSL化(HTTPS化)大切ですね。
SSL化(HTTPS化)することでのメリット・デメリットは
いろいろありますが利用者が安心して利用出来る
WEBサイトにしていくためにはとても大切なことだと思います。
利用者の「個人情報」や「クレジットカード情報」等の
大切な情報を扱う場合は、
SSLの設定は必須だと思うので、
SSLに対しての知識をしっかり身につけていきたいと思います。

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2017年2月18日

WordPress おすすめプラグイン

WordPress_Recommended_Plugins
WordPress(ワードプレス)のプラグインはたくさんあります。
しかし使ってみないと何ができるかわからないプラグインや、
そもそもどんなプラグインがあるかわからず、
困っている人もいると思います。
今回は使いやすく便利なプラグインをご紹介しようと思います。

WordPressプラグイン(以下WPプラグイン)とは?

ワードプレスの機能を拡張するための便利なツールです。
ワードプレスを使う人が
使用する目的にあったプラグインを使用して
カスタム機能を使えるように作られています。
目的が一つであっても
その目的を達成するためのプラグインは多数あるので
使いやすいものを探して使用することをおすすめします。

WPプラグインの使い方(インストール方法)

WPプラグインをインストールする方法です。
利用したいワードプレスサイトの管理画面を表示し、
管理画面の左メニューの
『プラグイン』→『新規追加』をクリックしてます。
『プラグインを追加』画面が表示されるので、
画面の右上に表示されている検索ボックスに
探したいWPプラグインのキーワードを入力します。
目的のWPプラグインが見つかったら
インストールボタンをクリックし
インストールを行います。
検索の結果の上にあるプラグインに表示された
「いますぐインストール」と書かれたボタンを
クリックして下さい。
プラグインのインストールが開始されます。
インストールが完了したら有効化をクリックして
そのプラグインが利用できるようになります。
必要な設定などをしてから使用できるようになります。

投稿に関するおすすめWPプラグイン

ワードプレスには記事の投稿をカスタマイズできる
『カスタム投稿』機能があります。
例として、通常のブログや新着情報に関しては
普通の投稿機能を使い、
『商品の紹介』や『お客様の声』など通常の投稿と
記事の内容や
見せ方を変えたいときに効果的です。

カスタム投稿機能を使うには主に二つの方法があります。
今回はプラグインの紹介なので
『Custom Post Type UICustom Post Type UI』を紹介します。

先ほど説明したプラグインのインストール方法で
『Custom Post Type UICustom Post Type UI』を
インストールします。
ダッシュボードに『CPT UI』と表示されるので
表示されている項目に、
必要なことを入力していくだけで
超簡単にカスタム投稿機能が作成できます。

この『Custom Post Type UICustom Post Type UI』と
セットでおすすめしたいWPプラグインが
『Advanced Custom Fields』。
このプラグインを使用すると
記事の編集画面の入力フィールドがとても見やすくなります。
使い方も簡単です。
『Advanced Custom Fields』をインストールして
有効化したら設定していきます。

『Advanced Custom Fields』の設定方法

まずは『新規追加』でフィールドグループを追加します。
グループ作成ができたら三つの項目を入力します。
『フィールドラベル』『フィールド名』
『フィールドタイプ』があり、
『フィールドラベル』は編集画面で表示される名前、
『フィールド名』は半角英数で入力しphpにその半角英数を書き込み、
フィールドの値を出すために使用します。
『フィールドタイプ』はフィールドの種類です。
テキストや画像、チェックボックすなど
基本的なものからグーグルマップなど
いろいろ用意されています。
自分の投稿タイプにあったものを選んでください。

その他にも必須項目かどうか、
記事作成者のための説明を設定したりできます。

ここで設定しただけではWebサイトの指定ページに
反映できていないので
それを出力できるように
phpにコードを書き加えていきます。

出力する『フィールドタイプ』によってコードは変わりますが、
短いコードで簡単に出力できるので
ストレスなく使用できるWPプラグインだと思います。

画像関連プラグイン『EWWW Image Optimizer』

先日初めて使用したWPプラグインも
とても簡単にす変えたので紹介します。

『EWWW Image Optimizer』は画像の品質を落とさずに
画像圧縮を行い、
容量を軽量化してくれるWPプラグインです。
画像ファイルの容量を減らすことで、
Webサイトの表示速度高速化してくれます。
WPのメディアライブラリに
アップロードされた画像をボタン一つで
最適化することができるプラグインです。

検索エンジン関連プラグイン『WP BASIC Auth』

WordPressサイトにBASIC認証をかけるための
WPプラグインです。
公開前のWebサイトで、人に見られたくないときや
検索エンジンにアクセスされたくないときに便利なプラグイン。
BASIC認証で使うID・パスワードは
『WP BASIC Auth』を
インストールしたWordPressの管理画面へのID・パスワードと
同じなのでいくつもID・パスワードを
管理しなくてもよく、簡単に使用できます。
このプラグインはインストールして有効化するだけで
BASIC認証がかかります。

SEO対策・ユーザビリティ関連プラグイン『Breadcrumb NavXT』

『Breadcrumb NavXT』はサイトに
パンくずリストを表示してくれるWPプラグインです。
パンくずリストはカテゴリ―、タグ、
日付などをベースに表示することができます。
パンくずリストとはユーザーが
Webサイトのどの位置にいるのかを分かりやすくするため、
Webサイトのページを階層順に表示しリンクを
設置したリストのことです。
ユーザビリティの向上やSEO内部対策のために大切なものです。

サイトマッププラグイン『Google XML Sitemaps』

『Google XML Sitemaps』は
検索エンジン用のXMLサイトマップを作成してくれたり、
ブログ記事などを更新したときに
自動的にサイトマップを更新してくれます。
サイトマップに含むコンテンツの種類なども
選択することができます。
初期設定のままだと、カテゴリーページや
アーカイブページは含まれていないので
しっかり設定しましょう。

WPプラグインを使用するときの注意点

便利なWPプラグインですがなんでもかんでも
プラグインに頼ることはおすすめしません。

・機能性はどう?
同じような機能を持つWPプラグインはたくさんあります。
その中でも自分が必要とする機能が備わっているか
他のプラグインとよく比べて選びましょう。
・ワードプレス本体のバージョン
ワードプレスの本体はバージョンアップされていきます。
本体のバージョンアップによって
使用できなくなるWPプラグインもあるので気をつけましょう。
・WPプラグインの使いすぎ
WordPressのデメリットは、機能が多いため
サイトに負荷がかかりやすい点です。
必要のないプラグインを入れすぎると
無駄な情報が増えてしまい、
サイトに負荷がかかるので
必要最低限のプラグインで作成しましょう。
・定期的にバックアップを!
WPプラグインの中でも、
サーバーの設定に影響するものもあります。
もしものときのために、
定期的にバックアップファイルを作るようにしましょう。

まとめ

定番で使いやすいWPプラグインと
使用するときの注意点をいくつか紹介してみました。
同じような機能がついているWPプラグインはいくつもあり、
プラグインどうしの相性みたいなのもあるみたいなので
使ったことのないWPプラグインも試してみて
今後、新たな発見ができるといいなーと思いました。

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2017年2月12日

キーワードを設定して記事を書こう

write-keywords-and-write-articles

今まで検索ユーザーにサイトを見て欲しい。
アクセス数をアップしたいと思って
記事を書いても検索上位にアップされなくて
埋もれてしまっている
記事コンテンツがあると思います。

検索ユーザーの目に留まるように
ロングテールSEO対策する
手順方法についてご紹介します。

キーワード検索でユーザーの目に留まる記事にリライトするには?

新しく記事を書くのも良いです。
しかし、過去にアップした記事を検索時に
引っかかるようにすることも
コンテンツ全体の品質向上に繋がります。
そのためにもキーワードを設定して
記事を書くことが重要となってきます。
それでは、ポイントついてご紹介します。

上位サイトを読んで見る

自分の書きたい内容設定、検索ワードで
上位検索させていてブログSEOしている記事
コンテンツを確認してみると良いです。
上位表示させている記事、QAサイトを
読んでみることで上位サイトが
どのような機能や特徴、関係性があるのかを
分析してみましょう。

過去に書いた記事をもう一度読み直す

作成したサイトの主旨に、
この記事は必要は必要では無いかの
選別作業をする必要があります。

検索ユーザーがなんでこんな記事が
このサイトに載っているの?と
感じないように、
まず自分でサイトのテーマや目的を見直し、
それに当てはまっている記事を
ピックアップします。

自分の記事内容確認

下記の文章内容を確認しましょう。

    • この記事は検索ユーザーが検索してまで
      知り得たい情報が記載されているのか?
    • この記事は何について
      書いている記事なのか?
    • この記事は自己主張をしすぎていないか?
    • この記事にニーズに
      見合ったキーワードとは何か?
    • 文字数が足りているか?

(テキスト量:3,000文字程度)

SEO対策ツール・検索数調査の無料ツールでキーワード選定をする

SEO対策ツールとして
「キーワードプランナー」
「Google検索」
「キーワードウォッチャー」
「フェレットプラス」
「Googleサジェストワード」

といったツールから
関連度の高い検索数と関連検索語
共起語検索を洗い出し確認して、
月間平均検索ボリュームアップを
目指しましょう。

タイトルの見直し

上記のような見直し作業をしていくと
アップ時につけられた
タイトルに違和感を感じたり
見直す必要がでてきます。

そのなかで重要なことは
文章内に散りばめられた共起語の
大元のキーワードが
タイトルに含まれているかどうかです。

例えば、
修正前のタイトル
「今日受験だけど、
頭が痛いから合格する気がしない…。」

のようにつぶやきのようなタイトルより

「合格体験記
頭痛時でも集中できる3つの対処法」
みたいに記事を書きたいと思った
最初のイメージは同じでも、
タイトルを明確にするだけで、
ひとりのつぶやきから
検索されやすいタイトルになります。

そして、
タイトルを変更するメリットとして
キーワードで検索がされやすくなります。
この場合だと、
「合格体験記 頭痛 対処法」と
検索エンジンで
キーワード検索されやすくなり
検索者にもわかりやすいため
検索数アップ
SEO効果の可能性も期待できます。

記事を書き直す(リライト)

上記でお話したキーワードが本文の内容と
マッチしているかということです。

タイトルをみて
「合格体験記 頭痛 対処法」と
キーワードを決めたとしても、

修正前の記事の内容が
「受験 頭痛 」では内容にブレが生じます。
タイトルと内容の意味合いが違えば
より良いコンテンツになりません。

そのために、
検索ユーザーに選ばれやすい状態に修正した
タイトルから決めたキーワード
「合格体験記 頭痛 対処法」で
記事を書き直します。

この際に検索ユーザーに対して
最終的な答えが記載されているかも
大切なポイントになります。

この2点に注意してリライトするだけでも
記事の価値は上がります。
説明するにあたって足りない箇所や、
共起語を文章内に散りばめるために
必要な箇所は追記しましょう。

念のために、Fetch as Googleをする

記事を書き直したことを
Google検索ロボットに
確認しにきてもらいましょう。

一応、なにもしなくても、
いつかのタイミングでかは
Google検索ロボットが巡回してくれて、
リライト内容などを読み取ってくれます。

しかし、できるだけ早く変更、追記箇所を
反映して月間検索ボリュームアップと
検索上位表示欲しいと思うので、
このFetch as Googleを使います。

キーワード検索の際に上位検索される順位を
決めているのは検索エンジンです。

サイトの検索上位表示されるためには、
なによりこの検索エンジンの仕組みを
知り理解する必要があります。

その中で覚えておきたいのはこの2つです。
クロールとインデックスという
用語についてご紹介します。

クロールとは?

Googleがウェブクローラーという
ソフトウェアを使用して、
世界中に存在するWEBページの
情報収集する作業をクロールといいます。

最もよく認知されているのが
ウェブクローラーです。
ウェブクローラーとはGooglebotという
巡回してまわるためのロボットです。

検索エンジンの大元、
組織のボスはクローラーという
巡回ロボットを手下に従えています。

クローラーロボットの仕事内容は、
検索エンジン(組織のボス)の命令を受けて
世界中に存在するWEBサイトの情報を
仕入れてくることです。

その動きは、蜘蛛に似ていることから、
Spider(スパイダー)とも言われます。
このように、這いずりまわって
世界のウェブサイトの
情報収集をする仕事を
Crawl=クロール:(這うという意味)と
呼ぶようになりました。

そして、
そのロボット自体を
「クロールする者」という意味で
クローラー=Crawlerと呼びます。

実は、クローラーロボットが
WEBページに
一度だけチェックしにきただけでは
正確な情報を持ち帰れないという
特徴があります。

クローラーロボットは、
そこまで優秀じゃないので
一回巡回しただけでは、
ページ情報の限られた箇所しか
情報収集することができないです。
そのため、ページの情報を正確に
読み取ってもらうためにも、
何回かクローラーに巡回してもらう
必要性があります。

クローラーが情報収集の際に確認するポイント

過去にクロールが情報収集した
Webページのリスト
所有者からWebサイトに情報提供された
サイトマップに含まれる情報

をもとに巡回を始めます。

クローラーロボットは、
一度パトロールし情報収集したことのある
サイトサイトマップで提供されている
サイトを訪れ、
そこから他のページへのリンクを
探し移動していきます。

その中でも情報収集の際に重要視する
ポイントがあります。
・新しいサイトの使い方、内容
・今あるWEBサイト内容の変更箇所
・無効なリンクがあるか

このことを理解しておきましょう。

クロールの頻度を上げることが大事
クロールを沢山してもらった方が、
より確実な情報を最新版で持って
帰ってもらうことができます。
その結果、
クオリティーの高い記事
コンテンツが正確な評価をされ、
検索結果の上位表示を狙いやすくなると
言われております。

そのためにも、
頻繁にクローラーに巡回依頼は重要です。

インデックスとは?

インデックスとは検索エンジンに
情報として記録された
WEBサイトという意味です。

英語では
「索引(さくいん)」
「見出し」という意味になります。

ロボットクローラー(手下)の
仕事内容としては、
世界中のWEBサイトの情報を収集して
組織のボスとなる検索エンジンのために
持って帰ってくることです。

そして、集められた情報を
仕分けをし記録する作業です。

このように、
クローラーロボットが持ち帰ってきた情報を
整理してインデックスに登録することを
「インデックスされる」とも言います。

インデックスには、
クローラーロボットが組織に
持ち帰った情報が綺麗に仕分けされ
記録されています。

インデックスに登録される際のポイント

どのWEBサイトが
どんな情報を持っていているか
扱っている話題とは何か
という内容です。

検索ユーザーが実際に、
Google検索を使用する際に
使われるデータとなります。

もしWEBサイトが
インデックスに登録されていない場合、
どんなキーワード検索法でもヒットしません。

まとめ

新たに記事を作成する場合も、
リライトする場合も同じことが言えますが、
このツールを
必要としているであろう人のことをよく考え
記事の内容軸となるキーワードを決めて
SEOツールで検索候補の
キーワード選定をしないと
作業が困難になります。
コンテンツ作成の下準備を
しっかりしたうえで作業を始めましょう。

Googleが求めるコンテンツと
キーワード検索ユーザーの検索意図を理解し
キーワードの出現率を上げましょう。
検索条件に関連性のあるリンクを貼るなどの
関連ワードのリンク対策をして
検索回数を増やし、かゆいところに手が届く
コンテンツに仕上げて、
アクセスアップ
検索順位アップを目指しましょう。

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2017年2月5日

Webサイトの表示速度改善をしよう!

speed-up-your-website

ホームページを見ていて、
なんだか読み込みが遅いなぁ・・・と思った事
ありませんか?
ユーザーにとっても
Webサイトの表示速度が遅いことは
ストレスになりますが、
SEO対策としても
ページの表示速度を改善することは
とても重要なことです。
今回はそのWebサイトの表示速度について
サイトを作り上げるWebデザイナーが
取るべき対策をご紹介したいと思います。

ページの表示速度がもたらす影響

実際に、ページの表示が遅い場合
どのようなデメリットがあるのでしょうか?
まず、ページの読み込む速さは、
Googleの検索順位を決定付ける指標のひとつとされています。
表示速度が速ければ速いほど
評価は高く、検索順位が上がる要因の
ひとつになりえます。
またページの表示スピードは、
コンバージョンにも深く関係すると言われており、
「1秒のページスピードの遅延で、コンバージョンの7%減少する結果に」
と言われることもあるようです。
ページの読み込み時間を短くすることによって、
ユーザビリティも向上できます。

どうやってページの読み込み速度を調べるのか?

Google推奨のページ表示速度チェックツールがあります。
ひとつはGoogleアナリティクスのサイト速度です。
アナリティクスを導入しているサイトであれば
誰でもこちらは見ることが可能です。
もうひとつは、GoogleのPage Speed Insightsです。
こちらはサイトのURLを入力するだけで
ページ速度のスコアと改善方法のアドバイスを
してくれます。
モバイルとPCでそれぞれ出してくれるので
とっても便利です。

サイトを高速化する具体的な方法

では、どういいた点を改善していけば、
サイトを高速化でき、表示速度を改善していけるのか?
先ほどあげたPage Speed Insights
改善案として出されるものをご紹介していきたいと思います。

画像を最適化しよう!

画像ファイルの容量を減らすことは
大きくページの表示速度に関係します。
ご存知だとは思いますが、
必要以上にサイズが大きな画像は表示に時間がかかります。
最近では画像を全画面表示で大きく表示させるようなデザインも
よく見かけますが、
そちらも多用してしまうと
どんどんページの表示速度が落ちてしまうので、
画像のサイズを考えて加工することが必要です。
サイトで使用する画像のサイズに合わせて
最適なサイズに画像をトリミングすることや、
できるだけjpgを使うことも、大事ですね。
画像のトリミングに関しては、
実際に試すとわかると思いますが、
大きなサイズの画像を
HTMLやCSSで小さなサイズを指定して
縮小してみせることによって
画像がぼやけたように見えます。
ユーザーにとっても画像を見れるのは
当然良いことですし、
小さなサイズを指定することによって、
ブラウザでは、一度画像を取得した後にリサイズを行うので
再計算の時間がかかりますので
画像サイズに関しては
制作時に徹底して行っていきたいところですね。

サーバーへのHTTPリクエストの回数を最小限にしよう!

ページの表示時間の大半は
ページの画像、スタイルシート、スクリプト、Flashなどのパーツを
ダウンロードする時間だと言われています。
これらの要素は
それぞれに対して1回ずつ
サーバーへHTTPリクエストが送信されます。
ページの要素が多ければ多いほど
表示されるのに時間がかかります。
サイトのデザインがシンプルであれば
あるほど、
これらの要素も少なくなってくるので
いいのですが、
デザインをシンプルにすることが
難しいサイトももちろんあるでしょう。
そういった場合は、最低限、
できるだけ画像ではなく
 cssでできるものはcssですることや、
複数のスタイルシートを使わない、
スクリプトを減らし、
読み込む順番を遅くするため、
ページの最下部に記述すること
などは意識して対応するといいでしょう。

WordPressの場合はプラグインをチェック!

WordPressを用いたサイト構築は
とても多く、制作している側なら
きっとおわかりだとは思うのですが、
プラグインって、本当に助かるのです。
カスタマイズの点でいうとなかなかなのですが、
システムに明るくなくても、
ある程度プラグインで対応できてしまうことも
多々ありますよね。
ただ、このプラグイン、
データ量が大きいこともあり
Webページの表示速度に
そこそこ悪影響をもたらします。
不要なプラグインは削除することはもちろんですが、
できるだけプラグインを使わないことも
表示速度を改善する一歩になります。
プラグインなしでも解決できる方法が
最近では検索すれば結構出てくることも多いので、
Webページの表示速度に悩んだ場合は
一度そちらも見直して見ると良いかもしれません。
見直しの方法としては、
プラグインをひとつずつ無効化して、
表示速度を計測していくのが
わかりやすいかと思います。
サイトのスピードを落とす原因となっている
プラグインを探しあて、
そのプラグインを使わずに対処することで
表示速度の改善につながります。

ブラウザのキャッシュを活用しよう!

サーバーでブラウザのキャッシュを有効にしましょう。
Webサイトを訪問したときにそのページの要素が
キャッシュ、または一時ファイルとして
ハードディスクに保存されます。
そうすることによって、
次に同じサイトを訪れたとき、
ブラウザはサーバーにHTTPリクエストをもう一度送ることなく
表示することが可能です。

jsやCSSファイルを軽量化しよう!

余分なスペースや改行、インデントなどの
不要なバイトを取り除いていきましょう。
javascriptやcssの記述なんて
微々たるものと思われる方も多いかもしれません。
しかしながら、
ページ数の多いWebサイトや
デザイン性の高いWebサイトほど
jsファイルやCSSファイルの
データ量も大きくなってしまい
読み込み時間に影響するほどの
サイズになってしまうのです。
圧縮をかけることで
改善されるのでぜひ活用しましょう!
よくxxx.min.jsやxxx.min.cssなどという
ファイルを見かけることがあるかもしれませんが
そういったファイルのminは
minify(圧縮化)の略で
無駄な改行や余白やコメントが
全て削除されたファイルを表しています。
実際にファイルを開くとわかりますが、
改行がほぼ(もしくは一切)ないファイルです。
CSS/javascriptファイル minify化ツールも
いくつかありますのでご紹介させていただきます。

CSS Compressor
Online JavaScript/CSS/HTML Compressor
※いずれも海外のサイトなので
圧縮化で使用する際には必ず
バックアップをとっておきましょう!

小技として・・・CSS スプライトを使ってみよう!

CSSスプライトってご存知でしょうか?
方法としては結構前からある方法ではあるのですが、
個人的にはあまり好きではありません・・・。
ただ、この方法を使うことによって、
画像ファイルにリクエストする回数が減るので、
Webページの表示速度改善にはつながるようです。
簡単にどのようなものか説明すると、
サイト内で使っている画像(パーツ)を
できるだけ一枚の画像にまとめて、
サーバへのリクエスト回数を減らす
というような方法です。
画像とCSSだけで高速化が実現できるので
お手軽ではあるのですが、
スプライト用の画像を準備するには
工夫も必要なため、
慣れるまでに時間がかかるかもしれません。
バナーなどでホバー時に画像が変わるものなどで
よく使っているのを見かけます。
通常時の画像とホバー時の画像を
1枚の画像にしてしまい、
cssで画像置換を行なっていきます。

まとめ

いかがでしたでしょうか?
特にWordpressを使ったサイト構築ですと、
ページの高速化で悩まれる方が多いのではないでしょうか?
いろんなことが実現できるWebサイト制作ではありますが、
いろんなものを使えば使うほど
ページの読み込みに時間がかかってしまうので、
よりよいWebサイトを作り上げていくには、
サイトの高速化について
考慮していくことも必要だと思います。
どれも地道な作業ではありますが、
ユーザビリティ向上のため、
是非実践してみてください!

このエントリーをはてなブックマークに追加
メルマガ登録

おすすめ情報

2017年1月4日

Webデザイナーがこだわるべき情報設計とは

information-design-webdesigner-should-consider

Webデザインを制作するとき、
みなさんはどんなことに気をつけているでしょうか?
もちろんデザイン性や
クライアントの要望に沿うことも
大事なことと言えますが、
それ以前に
まずはWebデザイナーなら知っておいて欲しい
過程が、「情報設計」です。
「情報設計」と聞くと、
デザインとはかけ離れて聞こえるかもしれませんが、
情報設計にこだわることで
ユーザーにとって使いやすく、
わかりやすいサイトができあがってきます。
この情報設計の過程は、
Webサイト制作をしていく中で
ワイヤーフレームやサイトマップの作成以前に
取りかかるべき工程です。
そしてしっかりと情報設計を行った上で
ページ構成・サイト構成といった
ワイヤーフレームやサイトマップを
作成していくのが良い手順だといえます。
今回は
その情報設計について詳しく紹介していきたいと思います。

情報設計とは何か?

Webデザインを制作したとき、
「なぜこういうデザインにしたのか?」
と聞かれて、あなたは即答できるでしょうか?
情報設計とは、簡単に言ってしまえば
利用者にとってわかりやすく、使い勝手がよい
設計をしていくことを指します。
情報設計をしていくことで、
デザインができあがったとき、
ボタンひとつにしても、
「なぜここにこのデザインで
ボタンを置いたのか?」
という質問にも答えられるようになるでしょう。
制作する上で必要な情報をまとめ、
ユーザにとってわかりやすく、
使い勝手がいいように設計をしていくこと、
更にはユーザーをゴールまで
きちんと誘導できるような設計を
していくことが、
情報設計といえます。

情報設計の流れ

実際に情報設計する際に、
まずはクライアントのヒアリングで
詳しく色々な情報を聞き出していきましょう。
その中でも最低限こちらは
考慮していくべきというポイントを
挙げていきたいと思います。

なぜWebサイトを作るorリニューアルするのか?

Webサイトを制作するにあたり、
まずはなぜサイトを作りたい、
もしくはリニューアルをしたいと思い、依頼したのか?
その点は必ずヒアリングしていただきたい項目です。
なぜなら、
その「きっかけ」が
今回制作するサイトの課題であり、
改善するポイントであるからです。
例えば、
・訪問数が少ない
・必要な情報が載せきれていないためユーザーが不満に思っている
・ECサイトの売り上げを伸ばしたい
・企業の認知度をあげたい
などなど、
Webサイトを制作する上で期待している効果が
どういったものなのか?
何を問題と感じているのか?
そういった点を明確にしていきましょう。
企業サイトの場合などには、
とりあえず案内できるホームページが欲しい、という
クライアントも多くいるかと思います。
そういった方にも、
せっかく作るのであれば、
ホームページを通してどういうことを
伝えていきたいか?
を必ず聞くべきだと思います。
例えば、採用情報をサイトにしっかりと載せていき
サイトからの応募も受け付けたいなども
出てくるかもしません。
特にサイトを作る目的がなく、
案内できるものでいいのであれば、
最近はテンプレートなどもあり、
専門知識がなくてもWebサイトが作れてしまうので、
自社で簡単に作ってしまった方が
コストもかからず良いとは思いませんか?
それでも費用をかけて制作会社にお願いをする、
ということは少なからず制作をすることで何かを
求めているということは理解しなければいけません。
それが何なのか、
それに応えるためにはどうしていけばいいのか
クライアントと一緒に考えていくことが
大事だと思います。

原因を分析しよう

こちらはサイトのリニューアルの際に
特に重要となってきます。
現行サイトで、問題と感じているものが
なぜ発生しているのか?
どこで発生しているのか?
問題点の分析をしていきましょう。
この分析においては、
制作会社によっては他部署がしてくれたり、
また何かツールを使ったりと
様々な方法があります。

戦略をたてよう

現状の問題点やその原因の分析、
把握ができたところで
どうしていくべきなのか戦略をたてていきましょう。
その中で、競合他社との比較、
差別化、
または対象となるユーザー(ペルソナ)の設定など
を考えていく必要があります。
そして、ゴールの設定、
そこまでの誘導など様々なことを
この段階で整理していきます。
ゴールに向けての施策を練っていき、
しっかりとした目的・目標をもった
Webサイトを制作していきましょう。

Webサイトの設計をしよう

施策とゴール、
今回制作するWebサイトの目的・目標を
明確にしたところで、
ようやくWebサイトの中身を考えていきます。
設計前の情報整理がないと、
設計をする際にそもそもの目的がブレてしまったり、
クライアントの意向にばかり沿った設計に
なってきてしまいがちなので、
まずはここまでの過程(情報整理)を
必ずしっかりと行い、
クライアントにもそれを共有していきましょう。

必要なコンテンツを洗い出そう

まずは現行サイトを参考にコンテンツを洗い出し、
その中でも必要なコンテンツ、
必要でないコンテンツ、
または載せていきたいコンテンツなどを
整理していきましょう。
ゴールを明確にしていることで、
そのコンテンツがゴールに向けて
必要なのかどうか検討しやすくなると思います。
また、この時に重要なのが、
必ずしも全ての情報を
Webサイトに載せるべきではない、
ということです。
コンテンツが多くなれば多くなるほど、
ユーザーに何を伝えたいのか?が
わかりにくくなり、
結局のところ何のためのWebサイトなのかが
わからなくなってしまうことが
多々あります。
ユーザーにとって本当に必要なのかどうか
Webサイトに載せるべき情報なのかどうかを
この工程でじっくりと考えていきましょう。

コンテンツを見せる流れを考えよう

コンテンツを見せていく中でも、
その流れによって
伝わりやすさが格段に違ってきます。
どんな流れで見せていけば
ユーザーがわかりやすく、
納得してくれるのかを考えましょう。

サイト構成・ページ構成を作成しよう

必要なコンテンツと流れ(重要なコンテンツ)を整理したところで、
ようやくサイト構成とページ構成を作成していきます。
この工程がいわゆる
サイトマップ・ワイヤーフレームの作成となります。

ここまでの一連の流れが
「情報設計」となります。
これ、全部Webデザイナーがやる仕事なの!?と
思われる方も多いかもしれません。
制作会社によって異なってくるとは思いますが、
制作側との認識の違いを
減らしていくためにも、
制作側もこの流れを必ず知っていなくてはいけません。
その中で、
ヒアリング・情報整理までは他部署で行い
その情報を制作側に落とし込むという
制作会社も多いのではないでしょうか?
情報設計に全て携われないとしても
最低でも情報の落とし込みをして、
実際の制作担当が
しっかりとそのWebサイトを制作する
目的やゴールがわかっていないと
結局中身がブレたサイトができあがってしまいます。

Webデザイナーとして、
デザイン・構築をすることが全てではありません。
指示通りにデザインをおこして
構築するだけなら知識さえあれば
誰でもできることです。
言ってしまえば、
ここまでは学生の範囲です。
お仕事としてこなしていくのであれば、
それ以上が求められるのは
当然のことですよね。
自分が満足するだけのデザインでは
もちろんお仕事とはいえませんし、
もちろんクライアントのことだけを
考えたデザインでもいけません。
Webデザイナーとして大事なのは
その先にユーザーがいることを
踏まえた上で、
そのWebサイトの目的を達成できるような
デザイン・設計をしていくことです。
その一歩として、
まずは情報設計を自分の中でしていってみるのも
良い方法なのではないかと思います。
ぜひ実践してみてください。

このエントリーをはてなブックマークに追加
メルマガ登録
1 2 3 4 5 6 7 12