ヘッダーとは?│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については用語集で説明していますので、興味ありましたらご覧ください。

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

ランディングページ(LP)とは?│Web用語集

ランディングページ(LP)とは?│Web用語集

ランディングページ(Landing Page)とは検索結果や広告、SNSやリンクなどを経由してユーザーが最初にアクセスするWebページのことです。
ランディングという言葉の通り、飛行機の着地が語源です。

landing

転じて、最初にアクセスするページの意味として使われるようになりました。
ビジネスの場では頭文字だけを用いて「LP(エルピー)」と呼称されることが多いです。

また、LPという名前でこの言葉が使われる時は、
広告をクリックしたときに表示される1ページの縦長ページを示すことが多いです。

ランディングページ集めました。というサイトがありますが、
このサイトでは、広告をクリックしたときに表示されるLPのデザイン集です。

ランディングページという名前自体は、Google Analyticsのメニューにもありますが、
文脈によって内容が変わることがあるので、注意が必要です。

ランディングページについてもっと知りたい方は下記をごらんください。

 

目次

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

 

●他のサイトでの説明

LISKUL ー そもそもどういうものなのか、という説明から費用感まで説明されています。
https://liskul.com/lp-toha-1530

コトバンク ー ユーザが初めにアクセスするWebページの入り口となるページ。と説明されています。
https://kotobank.jp/word/

UX MILK ー 「商品・サービスの特性」や「目的」に応じて作ることが重要、と説明されています。
http://uxmilk.jp/50243

 

●使い方や場面

ランディングページ(LP)という言葉がよく使われる場面・会話
「ランディングページをA/Bテストしよう」
「リスティング広告の準備は進んでいるけどLPのデザインはどんな状況?」
「御社ではLP制作はいくらでやっているのでしょうか?」
最後の質問は本当によく聞かれます。

 

●復習クイズ

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

 

スマホを持っている人ってどのくらい?

スマホを持っている人ってどのくらい?

俳優の東出昌大さんが、携帯電話をスマートフォンからガラケーに変更したとテレビで発言してインターネット上で話題となったようです。
仕事用の携帯電話としてガラケーを持っている人は珍しくないですが、スマホを辞めてガラケーに機種変更する人は珍しい気がします。
東出さんは「スマホは億劫だなと思った」と言う理由で機種変更をしたそうなのですが、同じように感じている人も多いのでしょうか。

そもそもスマホの利用者は現在どのくらいいるのでしょうか。気になったのでちょっと調べてみました。

平成28年度 スマートフォン個人保有率の推移
出典:総務省 通信利用動向調査

2011年にはスマホを持っている人が全体の15%ほどしかいなかったのですが、2016年には55%を突破しています。増え方は凄いですが、2人に1人程度だと少ないような気もします。

でも年代別の数字を見てみると、20代は94.2%、30代は90.4%とかなり高い数字になっていますし、50代でも3人に2人はスマホユーザー、60代でも3人に1人はスマホユーザーだと思うと、東出さんのように若くしてスマホからガラケーに機種変更するのはやはり珍しいケースなのでしょう。

また、Webサイトの運営においても、年代別のスマホ利用者数を調べることはとても重要なことになります。

先日、僕が担当しているクライアントがスマホサイトをリニューアルして、今後はスマホサイトに力を入れていこうと言うことになったのですが、方向性を決めるのにこのデータが参考になりました。

データを調べる前は「年齢の高い顧客も多いし、高齢の人たちはパソコンでWEBサイトを見ているはず。パソコン版のページにも同じく力を入れるべき」と言う意見があったのですが、アクセス解析をして調べてみた結果、50代以上の層も大半がスマホでそのWEBサイトを閲覧していたことがわかったのです。
それなら安心だと、スマホサイトのリニューアルを進めるきっかけになりました。

自社サイトがどんな年齢層の人に見られていて、スマホユーザーがどのくらいいるか、と言うデータはGoogleアナリティクスを使ったアクセス解析で調べることができます。

さようならFlash

さようならFlash

トップ画像部分をFlashアニメーションで表示するWEBサイトが、とても流行った時期がありました。
今ではほとんど見られなくなりました。

なぜFlashアニメーションが無くなったのかと言うと、Flashはセキュリティが非常に脆弱であるうえ、端末のメモリーを大量に消費するということで、スマートフォンで再生させてしまうと都合の悪いところばかり。そのためアップルは、2010年にFlashをiPhone上で再生させないことを決定し、Flashが担っていたアニメーションは、HTML5やJavascriptという別の技術に代替され、現在に至ります。

ところが、あまりに一世を風靡した技術でしたから、保守のされていないWEBサイトの中にFlashコンテンツが残っているのを見かけることがあります。お気づきの方も多いと思います。

余計なお世話ですが、セキュリティは大丈夫かなと心配してしまいます。
ただ危険なだけならまだしも、Flashのせいでマルウェア(※)に感染し、顧客の個人情報を拡散させてしまうような事態になってしまうことは避けなくてはなりません。

Adobe社は、2020年にFlashのサポートを完全に終了する、と発表しています。「サポートを終了する」ということは、「もう何があっても知りません」ということと同義です。大変な事態になってしまう前に、セキュリティの事をより意識しないといけません。

マルウェア(wikipedia)

 

404とは?│Web用語集

404とは?│Web用語集

インターネットをしていると、ときどきページが表示されないことがあると思います。
その理由はさまざまで、

インターネットに接続されていないとき
サーバーでエラーが起こっているとき
URLが間違っているとき

上記のようなときにはエラーメッセージが表示されて、見たいページを閲覧できません。
そして、エラーメッセージには番号が一緒に表示されます。
その番号の代表的なもののひとつに「404」があるのです。

もっと知りたい方は以下をご覧ください。

目次

「404」の意味
他のサイトでの説明
復習クイズ

 

●「404」の意味

「404」は、存在しないページを表示させようとしたときに出るエラーです。
「Not Found(見つかりません)」と言うメッセージも同時に表示されることが多いです。

入力したURLが間違っていたり、リンク先の設定が間違えていたり、ページが削除されていたりした場合に「404」となります。
URLの英語が全角になっている場合も別の文字と認識されてしまい、「404」となってしまうでしょう。

また、リダイレクトの設定が失敗している場合も404となることが多いです。

無機質なページで「404」と表示されると、インターネットに慣れていないユーザーは混乱してしまう可能性があるため、
近年は404ページもしっかりとデザインするケースも増えています。

 

●他のサイトでの説明

「404」エラーについて詳しく説明されています。
https://digital-marketing.jp/seo/what-is-a-404-error/

Yahoo!知恵袋でも多く質問されています。
https://detail.chiebukuro.yahoo.co.jp/qa/question_detail/q1011275740

個性的な「404」ページのデザイン集です。
http://www.billionplan.com/blog/design/404-error-pagedesign48.html

 

●復習クイズ

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

 

サイト内の熱いところ、知ってますか? 無料のオススメツールを紹介

サイト内の熱いところ、知ってますか? 無料のオススメツールを紹介

今回は、WEB解析ツールの「ヒートマップ」について。
Google Analyticsがウェブサイト内を移動する導線を追うツールだとしたら、ヒートマップはページ内の動きを把握するツールです。
サイト閲覧者がページのどこでクリックされたのか、どの部分まで読まれたのか、マウスの動きはどうなっていたか、という情報の解析が可能です。
ページごとのアクセス解析では読み取れない離脱してしまった細かい場所を探すには効果的な解析ツールと言えます。

色々使ってみたことがありますが、無料の中でオススメなのがUser Local社が提供する「User Heat」です。(2017年11月時点)
無料プランで提供されているのは「熟読エリア」「終了エリア」「クリックエリア」「マウスムーブ」「離脱エリア」の5種類。
それぞれ見ていきましょう。

・熟読エリア

© 2017 UserLocal, Inc.

マウスの動きや滞在時間、閲覧者のブラウザの幅からどの部分がよく見られているかが表示されています。
赤色がよく見られている部分になるので、上記画像の場合は「ページトップ」よりも「01ヒートマップとは?」が見られていることがわかります。

キャンペーンページなどスクロール量の多いページを作った時に、見せたい部分と実際見られている部分の差を知るのに使えます。

・終了エリア

© 2017 UserLocal, Inc.

ページがどこまで見られたかを表します。
上記画像の場合、赤が100%で青が0%を示すと同時に、色がついいている幅がそのまま見られている人の割合になります。50%と書かれている場所は、この場所まで見る人が50%という意味です。

ページ内の見せたい情報が見られているか確認するために使います。

・クリックエリア

© 2017 UserLocal, Inc.

ページのどこがクリックされたかを表示します。
赤くなるほどクリックする人が多いことを示し、上記画像では、ロゴマークが最もクリックされていることがわかります。

リンクじゃないのにクリックがされてしまうボタンなど、デザインの意図とサイト閲覧者の動きの違いに気づけます。

・マウスムーブ

© 2017 UserLocal, Inc.

ページ内のマウスの動きを追うことができます。
上記画像では色ごとにユーザーが割り振られていて、「start」から次はどこに行ったの計測結果が表示されています。

私はこの機能はすごいとは思いますが、サイト改善に実際に活かせたことはありません。

・離脱エリア

© 2017 UserLocal, Inc.

ページ内のどの位置でページを移動、または閉じたかを確認できます。
色が赤くなるほど該当位置での離脱率が高いことになります。上記画像では、FREEとかかれたトラックの下で離脱する人が14%いることが示されています。

熟読や終了と近いですが、離脱はページの移動とも違い、サイト自体から離れたということになるので、
「サイト閲覧者が目的を達成した」のか「内容を理解されなかったので、サイトから離れた」なのか判断する材料になります。

他のヒートマップツール

日本製、海外製色々ありますが、まずは「User Heat」を使うことをオススメします。
他ツールだと、ページビューに制限がかけらていることが多いのですが、「User Heat」の場合は30万ページビューまでは無料なので、試しに入れるには申し分ありません。
また、もし30万を超えたとしても課金が始まるわけでもないのも良いポイントです。

使ってみるとこういう機能あれば良いのに、と思うことが出てくると思います。
そうなったときに他の無料ツールや有料ツールを検討しましょう。

最後に
解析ツールの注意点です。
解析関連の数値は結果を見るとその数値に引っ張られてしまいがちなので数字にとらわれすぎないように
参考程度にしましょう。

 

プロトコルとは?│Web用語集

プロトコルとは?│Web用語集

プロトコル(protocol)とは規約、規定、約束事、取り決めという意味です。
はい、なんか難しそうだからいいやと思った方。
私も同じでしたが、知っておくと便利なのでもうちょっと読んでみてください。

なんだか難しそうな言葉ですが、ウェブやITの世界では「通信規約」という言葉をよく使われます。

protocolという英単語の意味は「儀礼」を意味します。
なんか難しそうだからやっぱいいやと思った方。もうちょっとだけ。
「儀礼」のほかに「議定書、協定、典礼」の意味もあります。

最近名前を聞く機会が減りましたが温室効果ガスの数値目標を取り決めた「京都議定書」ですが、英語表記だと「Kyoto Protocol」。シンプルですね。
この「取り決め」がプロトコルです。なんだかわかってきた感じがしませんか?

ちなみに「STAR WARS」に出てくる金ピカのロボット「C-3PO」は「プロトコルドロイド」と呼ばれ、様々な人種が存在する世界での種族の仲介役として通訳や儀礼を覚えているロボットです。

c-3po
© Disney © Lucasfilm Ltd.

そのほか、映画「ミッション・インポッシブル」の第4作のサブタイトルは「ゴースト・プロトコル」でした。この意味についてはWikipediaで説明されています。

元のTVシリーズであるスパイ大作戦でお馴染みの「例によって君もしくは君のメンバーが捕らえられ、或いは殺されても当局は一切関知しないから、そのつもりで。」にある通り、アメリカ政府が非合法の秘密作戦に対して一切の関与を否定する、つまりIMFの組織そのものが存在しない物(比喩的に幽霊(ゴースト))だとして扱うという「取り決め(プロトコル)」を指す。ーwikipedia

そのほか、フィギュアスケートの採点表のことをプロトコルというそうです。
プロトコルについてもっと知りたい方は下記をごらんください。

 

目次

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

 

●他のサイトでの説明

コトバンク(ASCIIデジタル用語辞典) ー 「コンピューター同士が通信をする際の手順や規約などの約束事」と説明されています。
https://kotobank.jp/word/

weblio辞書 ー 「外交儀礼。国際儀礼。」「実験・治療などの手順。」という説明もされています。
https://www.weblio.jp/content/

ワカテク ー 【具体例あり】通信プロトコルって?実はネットワーク発展の立役者!
https://wakatech.jp/protocol

 

●使い方や場面

プロトコルという言葉がよく使われる場面・会話
「HTTPって、ハイパーテキストトランスファープロトコルの略でしょ。で、プロトコルって何?」
「HTTPSのSってセキュアの意味でしょ。安全って意味でしょ。あれ、プロトコルって何?」
「プロトコルの脆弱性が見つかった」

 

●復習クイズ

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

 

WEBサイト用の原稿で心がけていること

WEBサイト用の原稿で心がけていること

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

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

今回は「不要な言葉を削ること」について。

人間は喋っていると「あのー」「えー」などと間を持たせながら話したり、「とりあえず」「たぶん」などと話題を曖昧にしたり、人それぞれの口癖があったりします。これらはそのまま文章にしたら“不要な言葉”になりますよね。

これと同様に、普段書いている文章も“不要な言葉”が含まれていることが多いです。削ることができれば文章全体が読みやすくなり、意味が間違って伝わることも減るでしょう。

いくつか例をあげて紹介していきますね。

■「~という」「~すること」

「~という」「~すること」は削っても問題ないことが多い言葉です。


「新幹線で直行するということを決めました」
→「新幹線で直行します」

ここまでスッキリさせても問題なく意味が伝わりますよね。
曖昧な言葉は削るか置き換えるほうがスッキリしますし、言いたいことも明確になって良いです。

「明確になって良かったりします」→「明確になって良いです」
この一文も前者と後者で説得力が全然違います。

■主語

もちろん主語がまったくない文章はだめですが、繰り返される主語は削れることが多いです。

「私はラーメン屋に行きましたが、今日の私は炒飯を食べたい気分だったので、私は炒飯を注文しました」
→「私は今日ラーメン屋に行きましたが、炒飯を食べました」

これでも伝わりますよね?
さらに削って「私は今日ラーメン屋で炒飯を食べました」としても大きな問題はないでしょう。

■同じ意味の単語の繰り返し

長嶋監督の「巨人軍は永久に不滅です」は有名ですが、同じ意味の単語を繰り返してしまう文は案外多いです。

「一番最初」→「最初」
「一番最後」→「最後」
「およそ1万円くらい」→「およそ1万円 or 1万円くらい」
「あとで後悔する」→「後悔する」
「郵送で送る」→「郵送する」
「各家庭ごと」→「各家庭 or 家庭ごと」
「期待して待つ」→「期待する」

文字数はそこまで変わりませんが、修正すると文がスッキリした印象は出るはずです。

■接続詞

「だから」「そして」「しかも」「しかし」などの接続詞も、割と削っても大丈夫です。


「私はラーメンを食べた。そして餃子も食べた。しかし炒飯はテイクアウトにした」
→「私はラーメンと餃子を食べ、炒飯はテイクアウトにした」

ただし、接続詞を削ろうとしすぎると、今度は一文が長くなりすぎて読みにくくなることもあるので要注意ですね。

大切なことを伝えようと思うとつい文字数が多くなりがちですが、余計な言葉が多いと逆に伝えたいことが伝わりにくくなってしまうことがあります。原稿を書き終えたら、最後に「削れるところはないかな」とチェックするだけで、かなり印象が変わってくるはずです。

WEBサイトの当たり前を疑う[カルーセルパネル編]

WEBサイトの当たり前を疑う[カルーセルパネル編]

以前こちらの記事でも紹介したカルーセルパネル。(ローテーションバナーやスライドバナーとも呼ばれます)
現在でも非常に多くのWEBサイトで採用されており皆様も良く目にするのではないかと思うのですが、最近では積極的に使用するべきではないという専門家の意見を目にするようになりました。(参考:ConversionXL

私自身、制作をする立場であると同時に消費者でもあります。オンラインショッピングサイトで欲しい商品のバナーの内容を見ていたらすぐに切り替わってしまい、欲しい商品のバナーが再度表示されるまで数十秒待つことにストレスを感じたり、何のWEBサイトかよくわからないままバナーだけが切り替わっていたりという経験も少なくなく、積極的に使用するべきではないという意見も理解できます。ではなぜそう言われるのか、カルーセルパネルのデメリットを整理してみましょう。

[デメリット1]ユーザーの視線は目は動くものに反応してしまう
ユーザーの視点は動くバナー部分を追ってしまいがちです。
バナー部分以外の重要な情報を見落とさせる可能性は、できるだけ排除したほうが良いでしょう。

[デメリット2]複数枚に渡るスライドの情報量が多すぎて、ユーザーの記憶に残らない
バナーの内容を読もうとしても、すぐに切り替わってしまい内容を理解することができません。
WEBサイトで伝えたい事が明確な場合、一番伝えたい1つだけに絞ったほうが効果的です。

[デメリット3]バナー広告を無視するユーザーが存在する
動くバナー部分を目で追ってしまうユーザーとは別に、動く部分を広告と認識して無視するユーザーも存在します。
本来WEBサイトで一番伝えたいことを表現するスペースが、「ただの広告」と捉えられてしまう危険性があります。

どこのWEBサイトでも採用しているから、ただたくさんの情報をユーザーに見せたいから、動くだけで格好いいから、といった単純な理由だけで採用してしまうと、本来ユーザーに伝えるべき内容が伝わらない危険性があります。

外部リンクとは?│Web用語集

外部リンクとは?│Web用語集

外部リンクとはウェブサイトが他のサイトからリンクされている数のことです。
別名で「被リンク」とも言います。

外部リンクされている数はSEOに大きく影響すると言われています。
その仕組みについては本ページ内で説明していきます。

また、同じウェブサイト内の別のページに移動するリンクは「内部リンク」と言います。

目次

外部リンクとSEOについて
他のサイトでの説明
復習クイズ

 

●外部リンクとSEOについて

外部リンクされている数が多いと、ウェブサイトのアクセス数増加に繋がります。

まずは単純に、リンク元のサイトからの流入が増加します。
外部リンクされるということは、他のサイトから紹介をしてもらうと言うこと。
リンク元のサイトが大きければ大きいほど、流入数も大きくなる可能性が高いです。

Yahoo!ニュースで取り上げられたらアクセス数が急増したと言う例は良くありますが、
それはYahoo!ニュースのサイトの閲覧者がものすごく多いからと言うことになります。

逆にリンク元が閲覧者の少ないサイトだった場合は、そこまでの流入は期待できないでしょう。

また、リンク元のサイトと内容的に関連性が薄い場合も効果が低くなります。
例えば、日本最大規模のグルメ情報サイトにサッカーチームの外部リンクが設置されていても、
サッカーチームのサイトに移動する人が少なくなるのは当然ですよね。

このように、アクセス数の高いサイトから外部リンクされていたり、
関連性が高いサイトから外部リンクされている数が多いと、
Googleからの評価も高くなり、検索順位が上がりやすくなります。

以前は外部リンクされている数だけが評価されていたことがありましたが、
現在は数よりも質が重視されています。

内容の薄いサイトからの外部リンクばかり集めているサイトは、
外部リンクを増やして検索順位の操作をしようとしているサイトだと判断されてしまい、
ペナルティで検索順位が大幅に落ちてしまうこともあるので注意が必要です。

 

●他のサイトでの説明

「被リンク」についての説明ですが、外部リンクと同義です。
https://www.seohacks.net/basic/terms/backlink/

「外部リンク=インターネット上の人気投票」と言う表現が良いなと思いました。
https://ferret-plus.com/4810

外部リンクと内部リンクの違いについて書かれています。
https://ecpack.jp/web-analytics/internallink-externallink-seo/

 

●復習クイズ

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

 

はじめて7ヶ月経った時点の状況について

はじめて7ヶ月経った時点の状況について

前回はブログの更新の仕組み決めについてでした。

今回ははじめて7ヶ月の現状についてご説明します。

●アクセスについて
順調とは言えませんが、徐々にアクセスは伸びています。
8月以降、技術系のブログからのリンクを何度か貼ってもらえたこともあり、突発的にアクセスが多い日もちらほらでてきたという状況です。
もう少し力を入れていこうと社内で決まったのは8月末のことです。

●問い合わせについて
発注に関する問い合わせは残念ながらまだほとんどありません。
ふと思ったのですが、なんか面倒臭そうなフォームですね。
お名前がセイメイ分かれていたり、フリガナをつけたり。これって、こちらの都合ですね。削除します。

●ハガキの開始

直接会うお客様向けにハガキをつくりました。

夏号

秋号

過去3ヶ月分の記事内容が記載されているので、興味がある方にはウェブを見てもらえたらと思っています。
また、QRコードにはハガキからアクセスしたことがわかるコードを入れています。
今携帯をお持ちの方は下記QRコードを読み込んでみてください。
URLの末尾に「=autumn」と書かれていませんか?
QRコードからアクセスした人は=autumnという文字列が加わるため、
アクセス解析時にハガキのQRコードからの流入人数がわかるようにしています。

●用語集カテゴリの開始
お客様とのやり取りの中で、用語の説明をする機会も多いため、コンテンツ化することになりました。
用語集のページを一気に作ってしまうか、週に何回か回数を決めて配信していくかということで悩みましたが後者を選びました。
お客様に説明した用語をページとして作成して、後ほど連絡したり、社内でこの単語の意味がよくわからないという意見を集めてコミュニケーションをはかるためです。
このカテゴリのページが溜まっていけば、用語テストといったコンテンツを作ることもできます。
また、内部リンクを強める・外部リンクの獲得という目的もありますが、あくまで付随目的です。

用語集カテゴリ

以上です。その他進行中の新連載についてはこのカテゴリで随時報告していきます。

ドメインとは?│Web用語集

ドメインとは?│Web用語集

ドメイン(domain)とはインターネット上の住所によく例えられます。
domainという英単語の意味は「領土」を示します。
実際の住所と同じく世界に1つだけのものです。
他の人がこのドメインを使うことはできません。

このサイト「ランガレWEB」で使用しているドメインは「landgarage.co.jp」です。
また、URLとドメインとメールアドレスの違いがわからないという質問をよく受けますので、下記のように赤字で示します。

URL(ホームページアドレス)の場合

サイトURL
http://web.landgarage.co.jp/

会社ページURL
http://web.landgarage.co.jp/company/

URLは位置を示すものですので、ドメインとは違います。

 

メールアドレスの場合

info@landgarage.co.jp

@より前はドメインを所持していたら、自由に変えられます。

また、取得したオリジナルのドメインを「独自ドメイン」と言います。
ドメインについてもっと知りたい方は下記をごらんください。

 

目次

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

 

●他のサイトでの説明

お名前.com ー  ドメインを取るサービスを提供している「お名前.com」では「ドメインとは、インターネット上の住所です」と明記されています。
https://www.onamae.com/clever/about/domain.html

JPRS ー JPドメイン名を管理している「JPRS」でも、「インターネット上の住所表示」と説明されています。
https://jprs.jp/related-info/about/address/

Yahoo!ドメイン ー ドメインの種類や取得メリットについて説明しています。
https://domains.yahoo.co.jp/promotion/whatis.html

 

●使い方や場面

ドメインという言葉がよく使われる場面・会話
「独自ドメインは取得しますか?」
「サイトリニューアルに伴いドメインの移管が必要です。」
「メールは独自ドメインを使った方が信頼されますよ」

 

●復習クイズ

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

 

メールの添付ファイルは何MBまで大丈夫?

メールの添付ファイルは何MBまで大丈夫?

ビジネスでもプライベートでも、メールにファイルを添付して送信する機会は多いですよね。でもファイルの容量が大きすぎるととエラーが起きてしまい、ファイルの送信に失敗してしまいます。

送ったつもりのファイルが届いていなかったりすると、思わぬトラブルに繋がりかねません。メールの添付ファイルとしてデータを送信するときは、その容量に気を配らなければならないのです。

では、添付ファイルの容量はどのくらいまでに留めておくべきなのでしょうか。

もし送信できるファイルの容量があらかじめわかっていれば、上限さけ超えなければ届かないということはありません。たとえば、フリーメール大手のGmaiなら50MB、Yahoo!Mailは25MBが上限となっています。

ただし、同じ感覚で他の宛先にファイルを添付して送信してしまうと、エラーが起きてしまう確率は非常に高いです。企業で使用されているメールは、ほとんどの場合もっと上限が低く設定されています。最近では3MB程度を上限としている企業が多く、2MBを超えないのがビジネスにおける基準だとされているようです。

では、2MBを超えるファイルを送信したい時にはどうすれば良いかと言うと、ファイル転送サービスを使うのが無難でしょう。
ファイル転送サービスにもいろいろありますが、利用者が多い有名なサービスを利用すると良いと思います。受信する側も知っているサービスのほうが安心して受信できるはずです。

僕は、送るファイルの容量がそこまで大きくなければfirestorageまたは宅ふぁいる便 を、容量が大きいときにはGigaFile便を利用するようにしています。

firestorageは操作がシンプルで、最近になって1ファイルあたり2GBまで送信可能となり、ますます便利になりました。
宅ふぁいる便は300MBまでしか送信できませんが、かなり古くからあるサービスなので、認知度はトップクラスに高いです。
GigaFile便は何と言っても最大100GBのファイルまで送信できるという点がメリット。動画ファイルの送信などで役に立つと思います。

また、これらの3つのサービスではダウンロード時に必要なパスワードを設定することができる点もポイント。重要なファイルを間違えた人に送ってしまったら大変なことになってしまいますが、パスワードを設定しておけば最悪の事態は回避できるかもしれないからです。

これらのサービスを上手に使いこなし、トラブルなくデータのやり取りをしたいものですね。

WEBサイトの色

WEBサイトの色

WEBサイトに限った話ではありませんが、色は製品やサービスの印象を決定づける重要な要素です。
私が色に関して面白いと思うのは、個々人の感覚に多少の違いはありますが、大筋ではそれぞれの色に抱く印象や感情が決まっている、ということです。
それぞれの色が持つ意味合いは、直感的にはわかっていても文字にしていると整理がつきやすいと思います。

そう思い、私の印象と複数の方が言っている、代表的な色のイメージを独断でシートにまとめてみたのが下の画像です。

いかがでしょうか。こういった色のイメージや意味合いは、濃度や彩度によって、その印象を加減したり、組み合わせによって別の印象を与えたりすることができます。
それぞれの色はポジティブな意味合いだけではなく、ネガティブな意味合いも内包しているので、そういった点も考慮し色の選択ができると良いですね。

これらの色のウェブサイトにおける実際の使用方法は「ベースカラー」「メインカラー」「アクセントカラー」で構成されています。

こういった割合で、どこにどの色を使用するか適切に配分することで、全体の印象を表現したい方向に調整していきます。
必ずしもこうでなくてはいけないということではありませんが、一般的なWEBサイトの場合、まずはこの考え方をベースに色の選定を行うと良いでしょう。

色の選択や配分や組み合わせは非常に奥の深い話でこの記事だけでは説明しきれないのですが、少しでも色の重要性と面白さが、お伝えできていれば嬉しく思います。

セッションとは?│Web用語集

セッションとは?│Web用語集

セッションと聞くと音楽が好きな人はバンドの“音合わせ”を想像してしまうかもしれませんが、
Webにおいてはまったく違う意味を持つ言葉になります。

セッションとは、アクセス解析でよく使われる単位のひとつ。
ざっくり言うと、「セッション数=サイトを閲覧された回数」と言うことになります。

ただし、似たような意味を持つ言葉に「ページビュー」「ユーザー数」があり、
これらの違いもしっかり把握しておかなければなりません。

今回は、ページビュー、ユーザー数との違いについても交えながら、
セッションについて説明します。

目次

セッション、ページビュー、ユーザー数とは?
他のサイトでの説明
復習クイズ

 

●セッション、ページビュー、ユーザー数とは?

セッション、ページビュー、ユーザー数はいずれもサイトのアクセス数を示す単位ですが、
少しずつ意味が異なります。

例えば、ユーザーAさんがあるウェブサイトを以下のように閲覧したとしましょう。

トップページ → メニュー → 料金表 → アクセス → (サイト離脱)

Aさんは1回の訪問で4ページを閲覧していますよね。
この場合、セッション数が1、ページビュー数が4と言うことになります。

セッションは「サイト訪問1回」を指すので、1回の訪問で何ページ閲覧してもセッション数は1となります。
一方、ページビュー数は閲覧したページ数がそのままカウントされるため、この場合は4となるのです。

もうひとつ例をあげます。

【朝】
トップページ → メニュー → 料金表 → アクセス → (サイト離脱)

【夜】
トップページ → 問い合わせ → (サイト離脱)

Aさんは今度は朝と夜2回に分けてサイトを訪問しました。
この場合のセッション数は2となります。

そして朝と夜の合計で6ページを閲覧しているため、ページビュー数は6です。

また、朝も夜も同じユーザーAさんがサイトを訪れているので、ユーザー数は1となります。
おわかりいただけましたでしょうか。

 

●他のサイトでの説明

イラスト付きで説明されているので、わかりやすいです。
http://wa3.i-3-i.info/word1791.html

セッションの数え方について詳しく説明されています。
https://webtan.impress.co.jp/g/セッション

セッション、ページビュー、ユーザー数の違いについて書かれています。
https://wacul-ai.com/blog/access-analysis/google-analytics-method/session-user-pv/

 

●復習クイズ

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

 

ランガレWEBのブログ更新の体制などについて

ランガレWEBのブログ更新の体制などについて

前回
・サイト公開に至るまでに決めたこと・考えたこと
を書きました。

今回は、ブログの更新の体勢やルール決めについて説明します。

ブログがこのサイトの肝であることは社内の共通認識でした。
ただ、他の仕事もしつつ毎日記事を書くというのは大変なことです。
また、内容・文章ともに一定クオリティを保つために、
ライター以外に「編集デスク」「アイデア出し」の役割を作りました。

全体の役割分担は
・編集デスク【1人】
ライターが書いた記事をチェックし。修正が必要な場合は指示を出す。ブログ見出し画像の選定と、WordPressでのアップロード。Facebookでの投稿を担当。投稿後に社内メーリングリストにて報告。社内から出た意見を参考にメディアとしての方針を調整しています。。

・ライター【3人】
ウェブ制作の現場に立つスタッフを選出。
デザイナー、ディレクター、ライター、解析士。立場の違いも含めて記事を書いていけるようにしています。
各ライターは毎週決まった日に投稿。各ライターのアップ日を事前に決めて、
編集デスクのチェックの後にブログが公開されます。

・アイデア出し【3人】
ライターが記事を書くネタになるような題材をピックアップして毎週記載。
お客様との会話で気になったこと。ニュースでよく聞く言葉の意味をもっと理解したい、
など読者視点での意見や感想を集めてライターのヒントになる情報をアップします。

上記のように書くと大変そうですが、ポイントは
・ひとりに負荷がかたよりすぎない
・各スタッフ他の仕事をしながら、日常的にブログを投稿し続ける
という仕組みづくりです。

最初は少し大変でしたが、現在は習慣化できています。
次回は、始めて7ヶ月の状況。今後の動きについて紹介します。

タイトルタグとは?│Web用語集

タイトルタグとは?│Web用語集

タイトルタグはHTMLのタグのひとつでページのタイトルを示します。
ブラウザでのタブに表示されている文字もタイトルタグです。
また、Bookmark(お気に入り)に登録するときも、タイトルが表示されます。

検索結果に出てくる見出し文言もタイトルタグで設定した文字列が表示されます。

タイトルタグ-ランガレウェブ

このページのタイトルは「タイトルタグとは?│Web用語集」で、
HTMLでは、下記のように表記します。

<tilte>タイトルタグとは?│Web用語集</title>

SEO対策、というものをする際にまずチェックするのがこのタイトルタグですし、
Googleも公式ページで、適切なページタイトル記述を付けよう。と明記しています。

Google検索エンジン最適化スターターガイド【PDF】
あまり知られていませんが、上記PDFはSEO対策をするならまずはここからという超がつくほどのよくできたガイドです。

 

タイトルタグについてもっと知りたい方は下記をごらんください。

目次

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

 

●他のサイトでの説明

HTMLクイックリファレンス ー  <TITLE>は省略できない要素と説明されています。使用例がソースコードと共に掲載されています。
http://www.htmq.com/html/title.shtml

できるネット(Impress社) ー 意味、使い方、好ましくない使い方が説明されています。
https://dekiru.net/article/12829/

海外SEO情報ブログ ー PDFファイルのタイトルタグの設定方法と、SEOの評価について書かれています。
https://www.suzukikenichi.com/blog/seo-for-pdf/

 

●使い方や場面

タイトルタグという言葉がよく使われる場面・会話
「内部SEO対策はまずタイトルタグから見直しましょう。」
「適切なページタイトルをつけた方が良いですよ。」
「あちゃー。ページタイトルが全ページ一緒です。」
「スマートフォンの検索結果画面に合わせてタイトルの文字数を減らしましょう」

●復習クイズ

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

 

わかりやすい原稿の書き方 その1「漢字の使い方」

わかりやすい原稿の書き方 その1「漢字の使い方」

僕はライターとしても仕事をさせていただいているので、WEB上の原稿を書くときに心がけているポイントを紹介させていただきたいと思います。

ウェブサイトを作る際、見やすいデザインやわかりやすいサイト構成にするのはもちろん大切ですが、原稿もとても大切です。

どんなにかっこいいウェブサイトでも、書いてある内容がわかりにくければ読者に何も伝わりません。

今回は「漢字の使い方」について。

僕は、WEBの原稿を書く時には難しい漢字をあまり使わないようにしています。
もちろん、堅い雰囲気を出したい小説や論文など、漢字を多用した方が良いケースもあります。ですが、いろいろな人が閲覧するウェブページなら、適度にひらがなを交えながら読みやすい文章にするのがよいと思います。

ちょっと例文を作ってみたので、ご覧ください。

■漢字が多い例
今の所良い天気ですが、恐らく何時間か後に雨が降り始めるとの事。私達は予め電車で向かう事にします。何卒、宜しくお願い致します。

■適度にひらがなを交えた例
今のところ良い天気ですが、おそらく何時間かあとに雨が降り始めるとのこと。私たちはあらかじめ電車で向かうことにします。なにとぞ、よろしくお願いいたします。

 

いかがでしょうか。適度にひらがなを交えたほうが読みやすくないですか?

どのくらい漢字を使えば良いかと言うことに答えはないですし、個人の好みも入ってくるかと思います。あまりにも難しい漢字が多いと、読むこと自体を諦めてページを閉じてしまう人がいてもおかしくないでしょう。

だからと言って、すべての漢字をひらがなにすると稚拙な文章に見えてしまいますし、区切られている箇所がわかりにくく読み違いを起こしやすくなってしまいます。難しい漢字をひらがなにしたら文章のほとんどがひらがなになってしまった、と言うときは、難しくても適度に漢字を使ったほうが読みやすくなるでしょう。

個人的には、小学生でも読めるレベルの文章が読みやすいのかなと考えながら、稚拙に見えないレベルでひらがなを多用するように心がけています。

変化を続けるインターネットの閲覧環境

変化を続けるインターネットの閲覧環境

インターネットを閲覧する環境の主流がパソコンからスマートフォンへ移行してまだ間もないような気がしていましたが、10月30日のSankeiBizに下記のような記事が紹介されていました。

ドコモ、3画面スマホ開発へ 折り畳み式 広げればタブレット並み

スマートフォンの画面サイズおよび端末のサイズは、2007年のiPhone登場時から今日に至るまでずっと拡大を続けてきましたが、そろそろポケットからはみ出しそうなサイズにまで拡大し、端末の大きさとしては限界のようにも思えます。そうなると上記の記事のように、複数画面にして折りたたみ時の端末サイズは今のまま、開いてさらに表示領域を広げる、という発想が出てくるわけですね。ガラケーが辿った道と同じです。
今後さらに変化を遂げていくのでしょう。

もちろん、現在のスマートフォン画面でエクセルやパワーポイントの書類を編集するような操作は不向きです。3画面スマホがどこまで普及するかはわかりませんが、複数画面のスマートフォンならノートパソコンと変わらない操作ができそうなので、ビジネス用途に加え写真・デザインの編集や動画の視聴なども便利になるでしょう。

一方で、ウェブ制作の現場では、現在のスマートフォンがメインのレスポンシブデザインから、パソコンとスマートフォンが共通のデザインになるかもしれません。複数画面をより活かしたデザインも登場するでしょう。
表現の幅が広がるのは、制作をする人間として非常に楽しみですが、複数画面のスマートフォンと、旧来のスマートフォンが混在する状況では、現在よりさらに多くの画面サイズにウェブサイトを対応させなければならないという問題も出てきます。

いずれにしても、数年後でさえ、スマートフォンは今とは別の形をしているかもしれません。
そのとき私はどのようなウェブサイトやサービスを作っているのか、とてもに楽しみです。