インデックスとは?│Web用語集

インデックスとは?│Web用語集

インデックスとは索引の意味ですが、ウェブの仕事をしていると状況に応じて複数の使われ方をします。

状況によって意味合いが変わって来ますが、索引という意味をベースに使用されていると認識していると、使い分けの意味もすんなりと入ってきます。

 

サイトのトップページ名、ファイル名としてのindex

ウェブサイトのトップページのファイル情報名ですが、
「index.html」または「index.php」が使われていることが多いです

検索エンジンに対するindex

用語集のウェブクローラのページで書いたように、グーグルなどの検索エンジンはウェブの全ての情報を検索対象ではなく、
グーグルが持つウェブのインデックスから検索されています。
検索エンジンに登録され、検索に引っかかるようにすることを、インデックス登録と言います。

自分のサイトがどうやっても検索にでてこないなぁ、というときは下記ページやサーチコンソールからインデックス登録をします。
https://www.google.com/webmasters/tools/submit-url?hl=ja

最近話題になっているMFI(モバイルファーストインデックス)というのもモバイル端末を優先してインデックスさせますよ、というグーグルの施策です。

 

インデックスについてもっと知りたい方は下記をご覧ください。

 

目次

他のサイトでの説明
使い方や場面
復習クイズ

 

●他のサイトでの説明

Google ー クロールとインデックス
https://www.google.com/intl/ja_ALL/insidesearch/howsearchworks/crawling-indexing.html

「分かりそう」で「分からない」でも「分かった」気になれるIT用語辞典 ー ウェブ、プログラミング、データベースでの意味を説明しています。
http://wa3.i-3-i.info/word11906.html

ferret ー 目次という意味と目次化されるという2つの意味。と説明されています。
https://ferret-plus.com/1023

●使い方や場面

インデックスという言葉がよく使われる場面・会話
「このサイト、グーグルにちゃんとインデックス登録されている?」
「トップページのファイルってindex.html?それともphp?」
「モバイルファーストインデックスって、なんか重要なんでしょ。」
「あなたのサイト、インデックス数はいくつ?」

 

●復習クイズ

説明がわかりづらい、間違っているなど御指摘ありましたらお問い合わせよりご連絡いただけると幸いです。

Twitterの“中の人”になって感じること

Twitterの“中の人”になって感じること

11月からランガレウェブのTwitterアカウントを開設して、記事を更新したときにツイートをしたり、「ランガレウェブ」で検索をしてみたりと、いわゆる公式アカウントの“中の人”をやらせていただいています。

Web制作の仕事をしていると、お客様に「Twitterをやるといいですよ」なんて勧める機会は多いのですが、実際に公式アカウントの運用をしてみると改めて感じることがいろいろあったので、一旦まとめてみることにしました。

・フォロワーが増えにくい問題
12月25日現在、ランガレウェブのTwitterアカウントのフォロワーは10人。なかなか増えません。これはWeb制作という業種だからなのかなあと感じています。

例えば飲食店だと相性が非常に良くて、店舗名で検索してフォローしてくれる人もいれば、メニュー名で検索する人もいますし、ハッシュタグもわかりやすいものをつけやすい。店舗でフォロワーに対するキャンペーンもしやすいですし、フォローを促すことだってできます。内容が充実した投稿を続けていれば、フォロワーはどんどん増えていくはずなのです。

Web制作だと飲食店と比べてわかりやすい検索ワードもないですし、店舗でフォローを促すこともできません。ただ、たまにランガレウェブの記事が他のアカウントで紹介されると、一定の「いいね」がついたり、リツイートをされたりもしているので、需要は必ずあるはず。今のまま地道に投稿を続けていくことが大切になるとは感じています。

・闇雲にフォロワーを増やす意味はあるか?
フォロワーを増やすためには、相互フォローをしてくれるアカウントをフォローするという方法もあります。こちらからフォローをすれば、フォローをし返してくれるという方は多いので、これをすればフォロワー数自体はすぐ増やせるはずです。

しかし、闇雲に増やしたフォロワーがランガレウェブの記事に興味を持ってくださるかと言うと、相当低い割合になることは間違いありません。

数だけでもフォロワーを増やしていくべきかどうか。これは様子を見ながら考えていきたいと思います。

・投稿する内容について
Twitterでフォローをしてもらうということは、ある意味アカウントのファンになってもらうということ。更新情報がただ流れてくるだけのアカウントでは、なかなかフォローしてもらえないのは間違いありません。

では、更新情報以外の投稿をどの程度、どんな内容で行っていくかと考えるとなかなか難しいところです。

例えば大手家電メーカーのSHARPなどは“中の人”が個人的な投稿も行い、「大企業の公式アカウントなのにおもしろい」とフォロワーが増え続けていますが、さじ加減が絶妙なのですよね。ある程度は真似をしていっても良いのかと思いますが、やりすぎるとTwitterがマイナスにも作用してしまうでしょうし、どの程度やるかの判断が難しいのです。

これもしばらく様子を見ながら試してみようと思っています。

Twitterはアナリティクスの機能がしっかりしているので、どの投稿がどのくらい閲覧されて、どのくらいリンクをクリックされたか、というデータを把握することも可能です。反応の良かった投稿や、反応が多くなる時間帯などを分析することもできるので、検証を繰り返しながら続けていきたいと思います。

ロンドン地下鉄のフォント

ロンドン地下鉄のフォント

研修でロンドンへ行ってきました。

宿泊ホテル近く、ピカデリーラインのラッセルスクエア駅

ロンドン地下鉄では100年前からJohnstonというロゴ書体が使用されています。40年ほど前に日本人デザイナーの河野英一氏も関って一度改定されているそうですが、昨年Johnston100として再改定されました。

それまでは太いフォントしかなく、小さく使用すると視認性が落ちるということもあったようなのですが、Johnston100は、基本的なデザインはそのまま、非常に微細な修正と細いウェイトの書体が追加され、複雑になった路線図やウェブ・スマートフォン用にも使えるよう最適化されたのです。

Johnston 100はやや丸みを帯びた形状とダイヤモンド型の点部分が印象的 引用元:Monotype 公式サイト

せわしなく動く大都市の利用客にほっと一息ついてもらえるような親しみを感じられる、ロンドンに永く住んでいなくてもそんな印象を受けるデザインです。
注意喚起ポスターは、日本ではイラストを使用したものが多いのですが、ロンドンの注意喚起ポスターは下の画像のようにスタイリッシュ、これもお国柄でしょうか。このポスターにもJohnston100フォントが使用されています。(エスカレーターに乗りながら撮影したのでブレてしまっています…)

手すりをHOLDのOが囲み、ひと目で手すりに捕まりなさい!ということが理解できます

100年愛され続けてきたフォントが時代に合わせてより使いやすくなり、これからもずっと愛され続ける。
タイプデザインの背景に歴史というものが加わることで、かくも美しく重みがあることに非常に感銘を受けました。
実際に運用されている現場を見ると、ネット上で検索して味わうこととはまた別の発見もあるのですね。

遠目から探しても目につきやすい「UNDERGROUND」ロゴも改めて素晴らしい

Johnston100フォントはロンドン地下鉄公式サイトでもウェブフォントとして使用されているので、興味がある方はこちらをご覧ください。

ロンドン地下鉄公式サイト[Tube – Transport for London]

画像形式とは?(GIF,PNG,JPEGなど)│Web用語集

画像形式とは?(GIF,PNG,JPEGなど)│Web用語集

パソコンやスマートフォンを使用していると、画像ファイルを閲覧する機会はとても多いはず。インターネットをしてWebサイトに表示される画像を見たり、デジカメで撮影した写真をパソコンに取り込んだり、スマホで写真撮影をしたり……と、少し考えただけでも画像ファイルを扱うシーンが次々に思い浮かびます。

これらの画像ファイルですが、同じ画像に見えても実はたくさんの画像形式があることをご存知でしょうか。

パソコンでは画像ファイルのファイル名のうしろに「.jpg」「.png」などという英字がついていますが、これは拡張子と言って、どんなファイル形式なのかを示すものとなっています。画像ファイルについている拡張子を見れば、どんな画像形式のファイルなのかわかるのです。

画像形式にはいろいろありますが、それぞれに特徴があり、それぞれに適した使い方があります。

詳しく知りたい方は以下をご覧ください。

目次

画像形式の種類
他のサイトでの説明
復習クイズ

●画像形式の種類

マニアックなものも含めるとかなりたくさんの画像形式がありますが、一般的なものについて紹介していきます。

■JPEG
「ジェイペグ」と読み、拡張子は「.jpg」や「.jpeg」になります。「Joint Photographic Experts Group」の略で、JPEGという画像形式を作った会社の名前がそのまま画像形式名になりました。

デジカメやスマホで撮影した画像は一般的にはこの形式で保存され、ウェブサイトにも使用されることが多いため、最も目にすることが多い画像形式と言えるのではないでしょうか。

目に見えないほど細かい色の違いを省略することでファイルの容量を小さくしているというのがJPEGの大きな特徴。普通に閲覧するには十分きれいな画質でありながら、ファイルサイズを軽くできるというのが、広くJPEGが使われている何よりの理由でしょう。

■GIF
GIFは「Graphics Interchange Format」の略で「ジフ」と読み、拡張子は「.gif」です。画像ファイルの中でも最も個性的な形式かもしれません。背景透過処理が可能で、動きをつけたアニメーション動画を作ることもできるからです。

GIFをウェブサイトに使えば、簡単なアニメーションのついたボタンを作ることができますし、近年は簡単な動画のキャプチャをGIFで表現することも増えてきました。ネット初期にはGIFを使ったパラパラ漫画のような作品を公開する人も多かったです。

ただし、GIFは256色までの色数しか表現できません。写真のような画像をGIFにしてしまうと、ほとんどの色が失われて一気に粗い画像になってしまいます。

■PNG
「ピング」と読み、拡張子は「.png」。「Portable Network Graphics」の略で、その名の通りインターネットに適した画像形式だとされています。

なぜインターネットに適している形式なのかというと、GIFと同様に背景透過処理が可能であり、なおかつ256色以上使用することができるから。GIFのアニメ機能がなくなったけど、JPEG並に画質が良い。そんな画像形式なのです。

写真を丸く切り抜いて背景を透明にしたい場合には、PNGが最適です。ちなみに容量は、同じ写真を同解像度で保存すると、JPEGよりも少し大きくなります。

■TIFF
「ティフ」と読むこの形式は、主にデジカメなどで高画質な画像保存をする際に使用される画像形式です。JPEGのように画像を圧縮せず、目で判別できない色もデータとして残されているため、ファイルサイズは非常に大きくなります。

プロカメラマンや、大きく印刷する前提の撮影などでない限りは、使う必要性はあまりないかもしれません。

■BMP
「ビーエムピー」は昔からWindowsを使用していた人にはおなじみの画像形式ではないでしょうか。「Microsoft Windows Bitmap Image」の略で、拡張子は「.bmp」になります。

Windowsのお絵かきアプリケーション「ペイント」で画像作成をすると、以前はBMPファイルでしか保存することができませんでした。しかもBMPはも画像を圧縮しない形式なので、ファイルサイズが大きくなりがち。せっかくBMPファイルの画像を作っても、サイズが大きくて送ることができない、なんていうこともありました。

 

●他のサイトでの説明

今回紹介した5つの画像形式が表で比較されているのでわかりやすいです。
https://sole-color-blog.com/blog/103/

JPEG,GIF,PNGについてさらに詳しく解説されています。
https://liginc.co.jp/web/design/material/50037

現在注目されている新しい画像形式「SVG」についての説明です。
https://ferret-plus.com/7089

どちらかと言うと「離脱」よりも「離脱率」について解説しているページが多くなっています。

 

●復習クイズ

説明がわかりづらい、間違っているなど御指摘ありましたらお問い合わせよりご連絡いただけると幸いです。

 

直帰率減・ページビュー減が悪いとは限らないケース

直帰率減・ページビュー減が悪いとは限らないケース

WEBサイトのアクセス解析の数値は、一般的には
・直帰率が低い方が良い
・ページビュー数は多い方が良い
・滞在時間は多い方が良い

ということは知られていますが、果たして本当にそうなのでしょうか?

実は、リニューアル前後のサイトの作りによっては
「直帰率減・ページビュー減が悪いとは限らない」ということがあるのです。

先日、リニューアルを担当させていただいたA社担当者とのミーティングがあり、リニューアル後一定期間が経過した現在と、以前のアクセス数値を比較したレポートを提出させていただきました。

A社のリニューアル前のWEBサイトは、ユーザーが知りたい情報のページに行きやすい設計になっておらず、会社側が出したい情報を出しているページ構成になっていました。
まず入り口の段階で二つの分岐があり、分岐先のページにはそれぞれに同じ項目もあって、ユーザーが”迷子”になりがちな作りになっていました。
入り口の分岐ページでは、ほとんどのユーザーはクリックしますから、当然直帰率は低い数値となっていましたし、ページビュー数は滞在時間のわりには多いなという印象でした。
1セッション平均滞在3分で、ページビューは6.7ページでした。

そこで、サイトに訪問するユーザー層を意識して、迷いづらいページ構成にすることをリニューアル目的のひとつとしました。
ページタイトルを明確にするなど、検索エンジンやユーザーの検索するキーワードを意識したコーディングも行い、WEBサイトのトップページを経由せずに、サイト内の各ページへ行きやすい作りを心がけました。

その結果としてリニューアル後は
・直帰率は高くなるー20%から30%にアップ。
・1セッションごとの閲覧ページ数の減少ー6.7ページから4.2ページへ減少

という一般的には悪いと思われている結果になったのですが、
ユーザーにとっては良いサイトになった。という状況になりました。

くどいようですが、
今回のサイトの場合

・直帰率が高くなる。
というのは「目的の情報にすぐたどり着いた」と言えますし

・1セッションごとの閲覧ページ数の減少
というのはサイト内の欲しい情報がどこにあるかわかりやすくなった、と言えます。

何が言いたいのかというと、サイトごとにあるべき姿と、目指す数値は異なるということです。

A社のケースは、
WEBサイトを見ている人の動きを意識して、数字を判断した方がよいということを改めて思った案件なのでした。

ウェブクローラとは?│Web用語集

ウェブクローラとは?│Web用語集

ウェブクローラとはインターネット上の情報を収集するプログラムのことです。

クローラ(またはクローラー)は英単語ののcrawlerのこと。
crawlはみなさんご存知、水泳のクロールと同じ単語で「はう」「腹ばいで動く」という意味です。
(私はクロールの語源を今初めて知りました。)

ということで、ウェブクローラとは、
ウェブで、クロールするもの(プログラム)ということです。

GoogleやYahoo!などの検索エンジンがなぜ、検索結果を出せるかというと、
ウェブクローラがネット上を巡回・収集しているからです。

また、webcrawlerを画像検索をすると、蜘蛛(スパイダー)の画像がたくさん出てきます。これはネット上の情報を這ってさがす、という動きが蜘蛛に似ているからでしょう。Googleもクロールのロボットを「スパイダー」と名付けています。

具体的にはウェブサイトのファイルのソースコードを読み取り、
・タイトルは何か
・見出しは何を入れているか
・リンクしているサイトは何か
などの情報をデータベースに登録していきます。

簡単に言ってしまえば、検索エンジンとは
ウェブクローラが収集した情報を整理し、検索結果として返す仕組みです。

クローラや仕組みについては、Google検索の仕組み検索が情報を整理する仕組みページに掲載されているので、興味がありましたらご覧ください。

「実はGoogle検索が行われるとき、ユーザーはウェブを検索しているのではなく、Googleが持つウェブのインデックス、つまりGoogleがウェブ上で見つけることができたものの中から検索をしているのです。」という説明、結構衝撃的じゃないですか?

そうなんです。ウェブ上には検索に引っかからないサイトや情報が検索できる情報量より多いといわれています。
深層ウェブとかいわれたりしますが、その説明はまた今度。

ウェブクローラについてもっと知りたい方は下記をご覧ください。

 

目次

他のサイトでの説明
使い方や場面
復習クイズ

 

●他のサイトでの説明

weblio辞書 ー 別名「検索ロボット」「サーチボット」だそうです。
https://www.weblio.jp/content/クローラ

Serch console ー Googleのクローラ紹介ページです。
https://support.google.com/webmasters/answer/

うぃる育成日記 ー Webクローラを作ってみよう。という記事。クローラを作る視点で見るとウェブはもっと面白くなると思います。
https://will-ikusei.blogspot.jp/2016/02/wget.html

 

●使い方や場面

ウェブクローラという言葉がよく使われる場面・会話
「クローラを意識したコーディングが重要です。」
「グーグルボットはグーグルのクローラーです。」
「あー、クロールエラーが増えてるー」

 

●復習クイズ

説明がわかりづらい、間違っているなど御指摘ありましたらお問い合わせよりご連絡いただけると幸いです。

Instagramを使ったPR

Instagramを使ったPR

「インスタ映え」という言葉が今年の流行語大賞に選ばれましたし、今回はインスタ(Instagram)に関連する話を。

先日、ライターとして東京都内に新しくオープンするレストランのレセプションパーティーにお招きいただきました。新規オープンする飲食店のレセプションパーティーは、無料で美味しいご飯が振る舞われることが多く、本当に幸せな気分に浸れるので、お誘いを受けたらなるべく参加するようにしています。

この手のイベントは、PR会社がプレスリリースを配信し、メディアの人が内容に興味を持てば取材班を派遣し、「ネタになる」と思われてはじめて記事にしてもらえると言うパターンが多いです。

実際僕も招待を受けたメディアの人に誘われて今回のパーティーに参加したのですが、結局美味しいご飯を食べるだけ食べて記事化はしませんでした。(すみません…)

もちろんメディアにお金を払えばPR記事として確実に掲載をしてもらえるのですが、その費用は媒体の規模によって大きく異なるものの、ウン十万円はかかると思っていいでしょう。とても気軽に頼める金額ではないですよね。

そのため、レセプションパーティーにメディア関係者を招待し、掲載費を払わずに運良く記事化してもらえることを期待するというのも有効なPR手段のひとつなのでしょう。

ところが、この日は今までに参加してきたレセプションパーティーとは違う点がありました。
5~60人の参加者のうち半数が、明らかにメディアと関係のなさそうな若者だったのです。

その人たちはどうやらInstagramに写真を投稿してもらうために呼ばれたらしく、料理や店内の写真をスマホで撮影してはInstagramに投稿していました。

しかも、お店側も使用してほしいハッシュタグを資料として参加者に配布したり、「この場所で、こういった角度で撮影すれば綺麗に撮れます」という案内を店内のあらゆる箇所に貼っていたり、Instagramへの投稿を徹底的にサポートしていたのです。

レセプションパーティーが終わったあとにInstagramをチェックしてみると、店名のハッシュタグをつけた綺麗な写真がたくさん投稿され、かなり良さそうなお店に見えるようになっていました。

最近はInstagramを使って検索をする人が増えていると言いますが、もしこのお店のことを気にした人がInstagramで検索をしたら、お店に対して良い印象を抱き、来店に繋がりやすくなることは間違いないでしょう。

レセプションパーティーでここまでInstagramでの投稿を促していたのは初めての経験でしたが、きっと今はすごく効果的な使い方なのだろうなと感じました。

飲食店以外でもPRをにうまくInstagramを使えることはたくさんあるでしょうし、利用者が多い今だからこそ、有効利用できる手段を考えてみるといいかもしれませんね。

ペルソナ

ペルソナ

ペルソナという言葉を聞いたことがありますか?マーケティングに関わるお仕事をされている方はご存知のはずです。
もともとは、人とか仮面といった意味を持つ言葉ですが、マーケティングにおいては、「架空の人物」という意味で使われます。
「都会に暮らす30代の中小企業に務める独身男性」などといった明確な消費者像を複数設定し、彼らが満足をする商品・サービスを提供する、これをペルソナマーケティングと呼びます。

ペルソナマーケティングは、WEBサイト制作においても大切。閲覧者像を具体的に設定することで、よりよいWEBサイトに近づきます。
できるだけ複数人の詳細なプロフィールを設定し、そのパーソナルデータに基づいた視点でサイト構成やデザインを考えるのです。
WEBサイトが、彼ら(ペルソナ)の求めている情報を適切に提供できているか、商品購入や問い合わせまでの導線設計は適切などの検討しながら制作していきます。

しかし、運営者側にとって都合が良いだけの理想像を設定してしまったり、設定がいい加減だったりしてしまうと、意味がなくなってしまいます。
また、価値観や嗜好を網羅しようと大量のペルソナを設定してしまうと、漠然と区別したターゲティングと変わらなくなってしまいます。一度設定したら終わりというものでもないので、繰り返し見直すということも必要になります。

いかがでしたでしょうか?頭のなかで、うちのWEBサイトユーザーはこうだ、属性はこうだ、という像は持っていると思います。
それを言語化し、架空ではあるけれど生きた人間のような人格をもった「ペルソナ」を設定してみると色々な気づきがあり非常に面白いです。

離脱とは?│Web用語集

離脱とは?│Web用語集

Webにおいての「離脱」とは、主にアクセス解析で使われる数値のひとつです。

Webサイトに訪問してきた人が、次のページに進まずに閲覧をやめてしまうことを「離脱」と言います。
サイト内の別のページに進まないで他のサイトに行ってしまったり、ブラウザを閉じてしまったり、ページを開いたまま30分以上経過してしまうと「離脱」としてカウントされます。

また、そのページの閲覧数のうち、そのページを見て離脱された回数がどのくらいあったかを算出した数値を「離脱率」と言います。
例えば、10回の閲覧があったページで、そのページから離脱された回数が6回だった場合の離脱率は60%です。

離脱率はWebサイトのコンバージョン(成果)を高めるために重要な指標となります。

詳しく知りたい方は以下をご覧ください。

目次

他のサイトでの説明
「離脱率」の考え方
復習クイズ
 

●他のサイトでの説明

「離脱」「離脱率」について詳しく解説されています。
https://cont-hub.com/knowledge/glossary/abandonment_rate/

こちらでは「離脱率」について動画付きで説明されています。
https://ferret-plus.com/1018

こちらでは「離脱ページ」と「離脱率」の解説が2ページに渡り書かれています。
https://support.google.com/webmasters/answer/156184?hl=jal

どちらかと言うと「離脱」よりも「離脱率」について解説しているページが多くなっています。

 

●離脱率の考え方

離脱率が高いページと聞くと、あまり良くないページのように思えてしまうかもしれませんが、離脱率の高いページのすべてがダメだということではありません。

サイトに訪問した人は、必要な情報を得られたらサイトを離脱するのは当然の行為ですし、いつも閲覧しているサイトのトップページを見て、サイトが更新されていないことがわかったらすぐ離脱するのも当然でしょう。
検索から下層のページにたどり着いた人も、そのページの記事を読み終えたら内容に満足したとしてもサイトを離脱する可能性が高いですし、離脱率が高いページすべてを改善する必要はないのです。

では、どんなページで離脱率が高くなっていると問題なのでしょうか。

例えば、ショッピングサイトで商品をカートに入れ、発送先を入力させるページを経て、購入完了のページへと遷移させるサイトがあったとします。

商品をカートに入れた人の大多数は、購入完了のページでサイトを離脱するはずなのですが、途中の発送先の入力ページの離脱率が高くなっていた場合は、そのページに何らかの問題があると考えられます。
フォームの入力項目が多すぎて面倒になってしまったのかもしれませんし、必須項目が多すぎて何度もやり直しをさせられるのが鬱陶しくなってしまったのかもしれませんし、そもそもフォーム自体に何らかのエラーがあるのかもしれません。

このケースでは、商品を購入する気だった人を離脱させてしまっているため、利益を上げる機会を逃してしまっていることになります。
非常にもったいないですよね。
逆に、発送先の入力ページの離脱率を下げることができれば、それだけで売り上げが増える可能性があるとも言えます。

このように、離脱率が高くあるべきではないページで高くなっている場合は、何らかの改善が必要だということになります。
ページごとの役割と離脱率を照らし合わせて改善をしていくことで、コンバージョン率を高めることができるのです。

 

●復習クイズ

説明がわかりづらい、間違っているなど御指摘ありましたらお問い合わせよりご連絡いただけると幸いです。

 

WEBサイトには、フォーム・電話・メールのどれを表示すべきか

WEBサイトには、フォーム・電話・メールのどれを表示すべきか

フォーム・電話・メールのどれを表示すべきか、という質問に対して正解はありません。
正解はありませんが、問い合わせ手段のメリット・デメリットを整理すれば、
どの連絡手段で対応するのかを決めやすくなります。

おもな問い合わせ手段は3つ
①電話
②メール
③フォーム

それぞれ【閲覧者】【サイト運営者】ごとにメリット・デメリットがあるので、
総合的に判断することをお勧めしています。

①電話番号の表示
メリット
【閲覧者】 すぐに連絡がとれる
【運営者】 すぐに連絡が来る
デメリット
【閲覧者】特になし
【運営者】電話が増えると時間が拘束される。

②メールアドレスの表示
メリット
【閲覧者】自分の書きたいことだけを書ける。いつ送っても良い
【運営者】閲覧者にとって連絡がしづらい手段
デメリット
【閲覧者】特になし
【運営者】どんな内容の連絡が来るか不明。(内容によっては対応に手間がかかる)
メールが届かない場合がある。
アドレスが公開されるのでスパムメールが届きやすい。

③フォームの設置
メリット
【閲覧者】いつ送っても良い。
【運営者】カテゴリを分けて受付しやすい
自動返信ができる
届くメール内容が項目立てされているので整理しやすい
フォームに確認画面を設置しておけば、内容やメールアドレスの間違いを防げる
収集したい情報をもれなく集められる(氏名・電話・住所など)
デメリット
【閲覧者】ただ質問したいだけなのに、必要以上の情報入力を求められる場合がある。
項目が多く設定されている場合は入力が面倒
フォームの内容が限定されている場合は、問い合わせたい内容で問い合わせができない
【運営者】導入費用が発生する。(作成費用・SSLの証明書の費用もときには必要)

 

フォームを作る場合、外部サービスを使う場合もありますし、顧客データベースにそのまま登録して、管理までしてしまう、というカスタマイズもできます。
また、不動産業界のウェブサイトなど、日中は電話番号が表示されて、営業時間が終了すると電話番号表示ががフォームに切り替わる、というような作りのサイトもあります。
自社のビジネスにあわせた最適な方法を考えて、実施・改善するのがベストだと私は思っています。

どうすれば、閲覧者・運営者にとって良いのか整理してから制作会社に伝えると、
信仰はスムースになります。

検索クエリとは?│Web用語集

検索クエリとは?│Web用語集

検索クエリとは検索窓に入力した言葉やフレーズのことです。

searchquery

 

例えば「ウェブ制作会社 埼玉」という2つのキーワードを入れた場合は、「ウェブ制作会社 埼玉」が検索クエリとなります。

Google検索の仕組みのページを見ると、検索クエリという言葉がが当たり前のように使われています。

一般的な検索クエリの場合、関連がありそうな情報を掲載しているウェブページは、数千件どころか、場合によっては数百万件も存在します。
ーGoogle検索「検索の仕組み」ページより

また、Googleのアクセス解析ツールである「Google Analytics」や検索結果の管理ツールである「Search Console」でもメニュー内に「検索クエリ」「クエリ」という単語がでてきます。クエリという言葉は馴染みづらいですが、ウェブに携わると必ず出てくる言葉なので、覚えておいた方が良いです。

キーワードと検索クエリは何が違うのか

クエリ(query)という単語自体は「質問・問い合わせ」という意味です。また、Googleでは「キーワード」と「検索クエリ」を別の言葉として定義しています。
簡単に説明してしまうと広告で設定する言葉に対して「キーワード」という単語を使います。

Googleで「キーワード」について説明した動画があります。


Google AdWordsヘルプ キーワードについて

検索クエリについてもっと知りたい方は下記をご覧ください。

 

目次

他のサイトでの説明
使い方や場面
復習クイズ

 

●他のサイトでの説明

SEO HACKS ー 検索クエリの分類についても説明されています。
https://www.seohacks.net/basic/terms/search-query/

Udemyメディア ー 検索クエリをサイト改善に役立てる方法が紹介されています。
https://udemy.benesse.co.jp/marketing/search-query.html

サバナビ ー 検索クエリとキーワードの違いをわかりやすく説明しています。
https://sabanavi.com/seo-term/search-query/

 

●使い方や場面

検索クエリという言葉がよく使われる場面・会話
「検索クエリを意識して、サイトのタイトルをつけよう」
「検索クエリから顧客ニーズを洗い出してください」
「サチコ(Search Consoleの意)で、クリック数順にクエリが並んだものを出力しといて」

 

●復習クイズ

説明がわかりづらい、間違っているなど御指摘ありましたらお問い合わせよりご連絡いただけると幸いです。

公式SNSアカウントの誤爆

公式SNSアカウントの誤爆

昨今ではさまざまな企業がFacebookやTwitterなど、公式のSNSアカウントを開設しています。SNSの更新を担当することになった人は、企業アカウントのIDとパスワードでログインして、いろいろな投稿を行うことになります。

ところがたまに発生して話題となるのが“誤爆”のニュース。誤爆とは、個人のアカウントでログインしていると勘違いしてプライベートな投稿をしたら、実は企業のアカウントでログインしている状態になっていて、プライベートな投稿が企業のSNSに掲載されてしまうことを言います。

最近ではミスタードーナツの公式Twitterで誤爆が発生し、話題となりました。

ミスタードーナツのTwitterアカウントは32歳独身の女性広報が投稿を行っていると言う設定になっていたのですが、ある日突然競馬に関する投稿が行われ、アカウントが乗っ取られたのではないかと心配の声が多数寄せられたのです。

すると数時間後にその投稿は削除され、「投稿を委託していた業者のミスによる不適切な投稿だった」と発表されたのですが、これによって女性広報が投稿をしているという設定がウソだったと言うことも明らかに。ショックを受けたフォロワーがフォローを解除するような事態に発展してしまいました。

プライベートと間違えて公式アカウントに投稿することも、業務委託していることが明らかになってしまうことも、どちらもちょっとした気の緩みで明らかになってしまうトラブルです。SNSの公式アカウントの運用を担当している方は、常に細心の注意を払いながら投稿しないといけません。

実は、ランガレウェブも先日からTwitterアカウントの運用を開始し始めまして、現在は僕が投稿を担当しています。(ぜひフォローをお願いします)

実際にやってみると、積極的に公式アカウントへの投稿をしようと意識するほど、やらかしそうなミスだなと感じます。
本当に明日は我が身ですので、誤爆には気をつけながら、なるべくたくさん投稿していきたいと思います。

WEBサイトの制作コストを抑える[WordPress編]

WEBサイトの制作コストを抑える[WordPress編]

「WEBサイト制作のコストを抑えたいからテンプレートを使いたい」というご相談をいただくことがあります。
テンプレートといえば代表的なものがWordPressということになるのですが、、本当にコスト面で優れた選択なのでしょうか?
WordPressについては、以前ウェブディレクター新田が書いていますが、今回は制作現場視点でご紹介します。

[おさらい:WordPressとは何か?]
もともとはブログ作成のために開発された無料のソフトウェアですが、今では管理画面からWEBページの作成・管理・修正ができるコンテンツ管理システムとして広く利用されています。
このシステムに、表側のデザイン部分がセットになったものがWordPressテンプレートと呼ばれており、独自にデザインを作る必要がないためコストを抑えられる、と言われます。

[WordPressを採用したほうが良い場合]
自社で新着情報の投稿やページ修正を行い、更新も頻繁に行うWEBサイトで、更新担当者がWordPressに対する知識がある場合は、採用をする価値があると思います。制作会社へ運用や修正を依頼するとコストが削減できます。

[WordPressを採用しないほうが良い場合]
更新頻度が低く、更新担当者がWordPressに詳しくない場合は、WordPressを採用するメリットは少なくなります。他のテンプレートを使用する方法もありますので、WordPressそのものにこだわる必要はありません。

[WordPressテンプレートを使用して、コストは本当に下げられるのか]
WordPressテンプレートは、色を変えたい、構成を変更したい、パーツのサイズ調整をしたいといった要望に応えることが難しかったり、その要望に応えること自体にコストがかかったりしてしまいます。一方で、テンプレートのデザインそのままで内容の書き換えのみで良いという場合は、コストを大幅にカットすることが可能です。細かい要望がある場合は、WordPressテンプレートを採用しないほうが、結果的にコストを下げられるケースも多いのです。

[WordPressテンプレートを使用した時に起こりがちな問題]
WordPressテンプレートは表示サンプルで見たときはとても格好良かったのに、写真や内容を入れ替えたら全く別の印象になってしまった、ということがよくあります。
また、海外製のテンプレートは無料かつ高品質なデザインのテンプレートが大量に配布されていますが、表示部分でもシステム部分でも日本語の使用が考えられていない作りになっているので、そのまま使用することはできないと考えるのが無難です。手を加える必要が出てきます。

WordPressはWEBサイトを適切に運用するための優れたコンテンツ管理システムで、コストカットの手段ではありません。WEBサイトの内容やデザインの方向性、サイト構築後の運用の部分を考慮することで、WordPressテンプレートを使用しなくてもコストカットは実現できます。

サイトマップとは?│Web用語集

サイトマップとは?│Web用語集

サイトマップはWebサイトの案内図のようなもので、ページの構成を一目で伝えるための一覧のことを言います。
サイトマップというページが用意されているWebサイトはとても多いので、誰でも一度は目にしたことがあるのではないでしょうか。

厳密にはこのサイトマップのことをhtmlサイトマップと言います。

htmlサイトマップはひとつひとつの項目がリンクになっているため、情報が多く複雑な構成のWebサイトでは、目的のページを探す際にメニューから探すよりもサイトマップを見たほうが早いこともあります。

また、サイトマップにはhtmlサイトマップのほかにxmlサイトマップと言うものもあり、こちらはSEO的に大きな役割を持っているのです。

詳しく知りたい方は以下をご覧ください。

目次

2種類のサイトマップ
他のサイトでの説明
復習クイズ

●2種類のサイトマップ

サイトマップにはhtmlサイトマップとxmlサイトマップの2種類があります。

htmlサイトマップ

htmlサイトマップとは、Webサイトのコンテンツのひとつとして設置されているサイトマップページのこと。
複雑なサイトの構成を整頓し、ユーザーが目的のページを探しやすいように設置するページです。

どこに行けば目的のページがあるのかを探し出せる、まさに地図のような役割を担っています。

xmlサイトマップ

xmlサイトマップもWebサイトのコンテンツをまとめていると言う点では同じですが、ユーザーではなく検索エンジンに認識してもらうために用意する物になります。
検索エンジンに認識されていないページは検索結果に表示されません。
検索からのサイト流入を増やすためには欠かせないSEOの施策のひとつだと言えるでしょう。

xmlサイトマップを作らなくても、主要なページはだいたい検索エンジンが検出してますが、どこからもリンクされていないページや新しいページなどは検索エンジンにも気づかれないことが多いのです。
新しいページは時間が経過すれば認識してもらえますが、すぐに検索で表示させたい場合にはxmlサイトマップを用意し、検索エンジンに通知すればすぐにページを認識してもらえます。

 

●他のサイトでの説明

htmlサイトマップについての説明です。
https://promonista.com/glossary/html_sitemap/

htmlサイトマップとxmlサイトマップの違いについて詳しく解説されています。
https://bazubu.com/how-to-create-an-effective-site-map-26793.html

どんなサイトにxmlサイトマップが必要か、Googleが説明しています。
https://support.google.com/webmasters/answer/156184?hl=jal

 

●復習クイズ

説明がわかりづらい、間違っているなど御指摘ありましたらお問い合わせよりご連絡いただけると幸いです。

 

すべてが高速化していく

すべてが高速化していく

先週、ウェブデザイナー角田がWEBサイトの表示速度について書きましたが、
彼があの記事を書いたのには理由があります。

11月中旬、日本のウェブ業界で話題になったサイトがありました。
そのサイトはdev.to
「爆速すぎて笑う」という感想がブログやツイッターにあふれて、なぜ速いのか、どうするべきか、ということがまた、ブログや記事で盛んに話題に上がっていました。

実際サイトに訪問すると通信していることなんて感じないほどに速い。
これを体験してしまうと制作者としては速度の重要さを意識せざるをえません。
通信速度の進化に甘えて、速度に対する対応については甘えていた部分があったと思わされました。

また、表示速度については、Googleも2016年からAMPというプロジェクトを開始しています。
Accelarated Mobile Pagesの略称でウェブサイトの高速化を目的としています。
こちらはもう導入済みです。ニュースサイトやレシピサイトなどは導入済みのサイトが多くあります。

一歩引いた視点では、通信自体も高速化の整備が進んでいます。
HTTPの通信方式が1.1から2に変わったのが、2015年のこと。

HTTP/2に対応するためのハードルは低くはありませんが、ある速度実験では
HTML/1.1の読み込みが0.486秒だったのに対して、2の場合は0.007秒だったそうです。(参考サイト/bitWave
その差は約70倍。かなり違いますよね。

また、通信の世界も5Gの技術が2020年には導入されることや、
量子コンピュータも実用段階に入っているそうです。
量子コンピュータは、ある条件下においては現在のパソコンの1億倍のスピードがでる(参考サイト/GIZMODO)、という研究結果が発表されています。

コンピュータ・通信・プログラム・無線など私たちが普段何気なく触れているもののスピードがここ数年で大きく変化していると言う状況だけは認識しておいた方がいいと思います。
予測できなすぎて、個人的には10年後がとても楽しみですが、人間の日常生活はあまり変わらないと言うかうまく取り込んでいくのだろうと思います。
10年前はiPhoneは存在していませんし、20年前はインターネットを使っている世帯は6.4%※しかいなかったのですから。

※総務省 情報通信白書平成12年版「ITがひらく21世紀~インターネットとモバイル通信が拡げるフロンティア~」P10.図表 我が国におけるインターネットの普及状況より
http://www.soumu.go.jp/johotsusintokei/whitepaper/ja/h12/pdf/H12_07_C2E81BECF.pdf

オーガニック検索とは?│Web用語集

オーガニック検索とは?│Web用語集

オーガニック検索とは広告を含まない検索結果のことです。
オーガニックサーチ・自然検索・ナチュラル検索も同義で使われます。

オーガニック検索

検索結果の順位をあげたい。というような要望をいただくことはありますが、
「オーガニック(自然)検索の順位をあげたい」というのがより具体的な表現になります。

オーガニック検索についてもっと知りたい方は下記をごらんください。

 

目次

他のサイトでの説明
使い方や場面
復習クイズ

 

●他のサイトでの説明

Google AdWords ー 無料のリスティング、という説明がされています。
http://uxmilk.jp/50243

ミエルカ ー 検索の仕組みや1位のクリック率など一歩踏み込んだ説明をしています。
https://mieru-ca.com/blog/organic-search/

サバナビ ー 言葉の説明だけではなく、Google Analyticsでの画面説明もしています。
https://kotobank.jp/word/

 

●使い方や場面

オーガニック検索・自然検索という言葉がよく使われる場面・会話
「オーガニックの流入が減ってきているので、何か対策をしなければ」
「自然検索の順位を増やさないと広告費用ばかりが増えてしまう」
「オーガニックのキーワードを分析して、新規作成ページのタイトルやコンテンツに反映させたい。」
最後の質問は本当によく聞かれます。

 

●復習クイズ

説明がわかりづらい、間違っているなど御指摘ありましたらお問い合わせよりご連絡いただけると幸いです。

原稿のリズムについて

原稿のリズムについて

WEBサイトを作る際、デザインを見やすくしたり、サイト構成をわかりやすくするのはもちろん大切なことですが、原稿もとても大切。どんなにかっこいいWEBサイトでも、書いてある内容がわかりにくければ読者に何も伝わりません。

そこで、僕がブログやWEBサイト用の原稿を書く時に心がけているポイントを紹介させていただきます。

今回は「原稿のリズム」について。

僕は他の人に原稿を書いてもらい、編集してから納品するという作業をすることもあるのですが、その時に最も意識しているのがリズムだったりします。まず、以下の文章を読んでみてください。

=====
安室奈美恵さんの魅力をいち早く見抜き、沖縄アクターズスクールへ入学させたのは、同校のマキノ正幸校長でした。
それも、友達の付き添いで来たという安室さんを見込んで、スカウトしたそうです。
ご家族が驚き困惑する中で、授業料はいらないと異例の特待生という扱いで入校することになったのです。
マキノ校長によると、安室さんは当時から目力がすごく、人を惹き付ける魅力がある少女だったそうです。
=====

2018年での引退を発表している安室奈美恵さんの話ですが、2行目~4行目がすべて「~です。」で終わっているため、どうも単調な感じがしますよね。
この文章に少し手を加えると、以下のようになります。

=====
安室奈美恵さんの才能をいち早く見抜き、沖縄アクターズスクールへ入学させたのは、同校のマキノ正幸校長でした。
スカウトのきっかけは、安室さんが友達の付き添いで来校したこと。
マキノ校長は安室さんに目力の強さと人を惹き付ける魅力を感じ、安室さんをスカウトしました。

突然スカウトされた安室さんの家族は驚き、困惑しましたが、マキノ校長はスカウトを継続。
授業料免除の特待生と言う異例の扱いで、安室さんを入校させることに成功したのです。
=====

文章の意味をなるべく変えずに構成を組み換え、文末に「~です。」が続かないようにしてみました。
これだけで単調さがなくなって読みやすさが増し、しっかりした文章に見えるのではないでしょうか。

また、元の文章では安室さんをスカウトのきっかけと理由が離れた位置にあったので、近づけています。

何かを説明する文章だと「~です。」「~ます。」と言う文末が続いてしまいがち。文章を書き終えたら最後に一度見直し、文末を整えるだけでも文章のリズムが良くなり、読みやすい文章になるはずです。

WEBサイトの表示速度

WEBサイトの表示速度

WEBサイトの表示速度は、制作者としても常に気にかけていることです。
ユーザーの半数は2秒以内のページ表示を期待して、3秒以上かかると4割近くが離脱してしまうとも言われてますから、コンバージョンやSEOに影響する重要な要素なのです。

表示速度は、ユーザー側の回線やサーバー性能にも左右されますが、WEBサイトそのものに遅くなる要因もあります。

・使用している画像のデータ量が知らないうちに大きくなっていた
サイト立ち上げ当初は適切な画像が表示されていたのに、運用しているうちに知らずにデータ量の大きな画像をアップしてしまって表示速度が遅くなってしまっているということがあります。更新の多いサイトを複数の担当者が分担して運用している場合などに発生しがちです。
よく見かける事例です。運用側の回線速度が速い気づきにくく、お客様やユーザーからの指摘で発覚することが多いです。

・Twitter、Facebook、Instagramなどの情報をサイトに表示している場合
サイトを更新しなくても最新の情報を表示できるので非常に便利なソーシャルメディア読み込み機能ですが、実は動作が非常に不安定でサイトの表示を遅くする要因になります。外部サービスから提供されている機能なので高速化にも限界があります。
ソーシャルメディアの情報提供と、表示速度が遅くなるリスクを比べて判断してください。

・WEBサイトが適切にコーディングされていない
WEBサイトはhtmlという言語で構成されています。同じ表示のサイトでも、書かれているhtmlの最適化の有無によって読み込むコードの分量が全く違ってきます。
表示が頻繁に崩れるような場合は、コードやサイトを構成するデータがめちゃくちゃだった、という場合があるので注意が必要です。

表示速度を意識するなら、「高速化を目指す」というよりも「遅くする要因を可能な限り排除する」ということに尽きます。
表示速度はGoogleが提供する無料ツールで測定をすることができますので、この機会に試してみてください。

↓↓↓
Google PageSpeed Insights

ヘッダーとは?│Web用語集

ヘッダーとは?│Web用語集

ヘッダーは英語では「header」と書きます。
つまり直訳すると「頭の部分」と言うことです。

受信したFAXの一番上に、相手のFAX番号や受信日時などが印字されていたりしますよね。
これもヘッダーと言います。
書類でヘッダーと言う言葉を使用することは多いですね。

Webにおけるヘッダーの意味ですが、どのページを開いてもページ上部に表示される部分のことを指します。

例えば、ランガレウェブ(スマホ版)は以下の赤枠で囲んだ箇所がヘッダーです。

ヘッダーの役割などについても知りたい方は以下をご覧ください。

目次

ヘッダーの役割
他のサイトでの説明
復習クイズ

 

●ヘッダーの役割

ヘッダーはすべてのページの上部に共通して表示される部分のことを指します。
ヘッダーが持つ役割は主に以下のとおりです。

(1) 何のサイトを見ているのか明確にさせる

ランガレウェブのヘッダーには「ランガレウェブ」とサイト名が大きく表示されています。
もしブログの記事を何ページも読み続けても、常にページの上部にはランガレウェブと表示されるため、読者は常にランガレウェブのサイト内にある記事を読んでいると認識できます。

(2)ブランドイメージを訴求する

ヘッダーは全ページに表示されるのと同時に、Webサイトを開いて一番最初に表示される部分でもあります。
ヘッダーのデザインがサイト全体のイメージを作ると言っても過言ではないでしょう。

(3)「目次」となるメニューを配置する
ヘッダー部分にはWebサイトの「目次」となるメニューが表示されていることが多いです。
ヘッダーに重要なページへのリンクを設置することにより、例えばサイト内の商品に興味を持った人をすぐ購入ページへと誘導させたりできます。

また、ヘッダーメニューはサイト内のどのページを読んでいるのかをハッキリさせるのにも役立ちます。
サイト内で迷子になってしまうことを防ぐことができるのです。

ヘッダーは大きければ良いと言うものでもないですし、メニューが多すぎてもわかりにくくなってしまいます。
サイト制作の際にはまずサイトのコンセプトや目的をしっかり決めてから、どのようなヘッダーを作るかを決めていくと良いでしょう。

 

●他のサイトでの説明

Webにおけるヘッダーについての説明です。
https://ferret-plus.com/1001

ヘッダーデザインがかっこいいサイトのリンク集です
http://fukuoka-web.hustle.ne.jp/header/

図を交えてより初心者向けに解説されています。
http://www.pc-master.jp/words/header-footer.html

 

●復習クイズ

説明がわかりづらい、間違っているなど御指摘ありましたらお問い合わせよりご連絡いただけると幸いです。

 

サーバーダウンっていうけど、何が起きているの?

サーバーダウンっていうけど、何が起きているの?

WEB制作会社にいると、「サーバーが落ちた」という連絡を受けることがありますが、調べてみて本当にサーバーが落ちていたことはほとんどありません。

サーバーが落ちる、とは、
・サーバー自体の処理超過による、コンピュータの停止。
・サーバー自体に電源が入っていない。停電等で電気が切れる。
などサーバーというマシン自体が停止していることを指します。

連絡を受けてよくあることとしては、

・端末がネットに繋がっていない。
ノートパソコンのWifiをOffにしていた、と言うことがあります。

・ネットワーク自体に障害が起きている。
WEBサイト自体が落ちているわけではなく、ネットワークの障害。
この場合、該当サイト以外にもアクセスできなくなるサイトがたくさんあります。

・同時アクセスの上限数に達している。
レンタルサーバーの共用プランなどを使用していると発生することがあります。
よく表示されるメッセージは「Service Temporarily Unavailable」「503 Service Unavailable」。

・存在しないページにアクセスしている。
404エラーとも言います。
存在しないURLにリンクを貼っている場合など、存在しませんという表示が出ます。
サーバー側の文言設定をしていない場合、「404 Error – Not Found」などと表示されるため、サーバーが落ちたと思ってしまう方が多いです。
ちなみに404については用語集で説明していますので、興味ありましたらご覧ください。

それでは「落ちた!」と思って困った場合、どうするべきか。
まずは、落ちたと思われれる画面のスクリーンショットを、詳しいと思われる人に送ってみましょう。
案外、エラーメッセージから判断できることがたくさんあります。