カテゴリー
ユーザの皆様へ

画像配信方法変更による 高速化と画質向上

etto.workは、この度、画像配信方法を変更し、サイト閲覧速度の向上と画像品質の改善を行いました。

変更内容

従来、画像配信にはコンテンツプロバイダ(CDN)を利用していました。しかし、近年主流となっているHTTP/2やHTTP/3技術では、同一ストリームでHTMLと画像を連続送信することができるようになりました。etto.workの転送プロトコルを更に最適化していくうち、画像だけCDNを経由するよりも、単一ストリームを利用する方が、特に小さなページでは転送が早く終わるようになりました。

そこで、etto.workでは、以下の変更を行いました。

  • 画像配信方法をCDNから同一ストリーム配信に変更
  • 画像圧縮方法をWebP形式に変更

変更による効果

  • サイト閲覧速度の向上
  • 画像品質の向上
  • データ転送量の削減

WebP形式による画質向上とデータ転送量削減

WebP形式は、従来のJPEGやPNG形式に比べ、ファイルサイズを大幅に削減しながらも、同等の画質を維持できる画像フォーマットです。

etto.workでは、画像アップロード時にWebP形式への変換と最適化を行うことで、画質を維持しながらデータ転送量を削減し、ページ読込完了までの時間短縮を目指しました。

CDNに頼らないコンテンツ配信の制御

CDNを使わないことで、以下のメリットも享受できます。

  • コンテンツ配信の完全な制御: CDNを使わない場合は、コンテンツ配信を、より完全に制御することができます。
  • キャッシュによる問題の回避: CDNによるコンテンツのキャッシュ期間の問題が発生しなくなります。
  • セキュリティの向上: CDNを経由しないため、セキュリティリスクを軽減できます。

ユーザーへの影響

今回の変更により、etto.workユーザーは以下のメリットを享受できます。

  • より快適なサイト閲覧体験
  • 高画質な画像の閲覧
  • ページ読込時間の短縮
  • 通信量の削減
  • コンテンツ制御の向上

今回の配信方法変更は、日本国内からのアクセスに最適化されています。海外からのアクセスは、コンテンツプロバイダを利用していたときよりも遅くなることがあります。

今後もetto.workは、ユーザーにとってより快適なサービス提供を目指して、最適な環境整備に取り組んでまいります。

カテゴリー
設定メモ

GA4 で 電話リンクタップをコンバージョンに設定する

Google AnalyticsがGA4になって1年以上経ちました。スマホサイトからの「電話リンクタップ」をコンバージョンに設定するには、Google Tag Manager (GTM) を利用する方法が公式マニュアルにも紹介されていますが、これだけのためにGTMを読み込ませると、ページの読み込み時間が無駄に長くなってしまいます。しかも、モバイルベンチマークでは 600ms 前後と、かなり重量級の外部スクリプトがロードされます。

最初のページが開くまでの時間は0.1秒でも早くしたいものですし、GA4とGTMの連携設定も面倒だと思っていました。今回GA4だけで完結する設定が出来たので、簡単に紹介します。

Google Analytics (GA4) で、カスタム定義を作成し、クリック先の URL を取得出来るようにする

link_url が取得出来るようになったので、link_url に tel: を含む click をイベントに設定する

端末でページを開き、念のため再起動したあと、リンクをタップして電話をかけるフリをする(通話アプリを起動すればOK)

リアルタイムレポートを開いて、phone_call イベントが発生したことを確認

24時間ぐらいすると、GA4 のイベント一覧に「phone_call」が出てくるので「コンバージョンに設定する」をONにします。

これで、GTMを使わなくても、Webサイトからの電話をコンバージョンとして設定できるようになるはずです。分かる方はお試し下さい。

カテゴリー
ユーザの皆様へ

アプリ化に対応しました

「えっとワーク」で作ったサイトを、簡易的にスマホアプリとしてホーム画面に置けるようになりました。情報を届けたいお客様にインストールして貰えば、新しい投稿を行ったときなどに通知を送ることができます。

また、アプリの起動画面もカスタマイズできるので「アプリ会員証」の画面を起動画面にしておけば(例えばこんな感じ)、アプリをインストールして下さっているお客様にちょっとしたサービス(ポイント付与など)を行う運用もできるかと思います。

アプリ化にはお申し込みが必要です。お問い合わせ下さい!

この簡易アプリはPWAという仕組みを利用しているので、ストアからのインストールとは少し操作が異なります。


Android をお使いの場合

サイトにアクセスしてしばらくすると、画面下からインストールを促すパネルが出てきます。「インストール」をタップすると、ホーム画面にアイコンが追加されます。

iOS をお使いの場合

ブラウザ最下部中央のメニュー をタップしてメニューを開き、そこから「ホーム画面に追加」をタップすると、ホーム画面にアイコンが追加されます。


このページ(サイト)もアプリ化に対応していますので、ホーム画面に追加して使い心地を確認してみてください!

カテゴリー
ユーザの皆様へ

WordPress 6.0

ベースとなっている WordPress を 6.0 にメジャーアップデートしました。記事を書くエディタにも更新が入りましたので、使い勝手が少し変わったと思います。改良点の詳細はこちらをご覧下さい。

5.9と合わせて、6.0近傍で見た目に纏わる大きな改良が成されました。来年の2023年版標準スタイルでこれへの対応が強化されますので、来年は新しい見た目テーマの追加を予定します。見た目を切り替えてもこれまでのコンテンツは失われませんし、現在のテーマも引き続きお使い頂けます。

不都合な点があればお知らせ下さい。

カテゴリー
雑記

長いタイトルには 半角スペース

ページのタイトルは短いほどいいと言われますが、一方で、タイトルで何が書いてあるか分かるというのも、情報発信サイトとしては良い事だと思います。

どうしても長くなってしまう場合には、意味の切れ目に半角スペースを1つ入れることで、折り返すときもそこで改行してくれるようになります。また、改行の必要のない環境で見ている人にも、意味の切れ目に少し間が開くことは読みやすくさせます。

改行についてはもっと色々な制御の方法がありますし、逆に完全に制御することも難しいですが、これがシンプルかつ色々な環境に対応できる手法だと思います。


「読ませるためのブログ」では、わざと情報不足のタイトルを設定し、本文を読ませる手法もありますが、アフィリエイトサイトならともかく、本業のための情報発信サイトであれば、タイトルは内容を反映している方が、私は良いと思います。

カテゴリー
ユーザの皆様へ

WordPress 5.5

もうすぐ、WordPress の大きめのアップデート(バージョン 5.5)が予定されています。

細かいことはさておき、最近のスマホ事情に合わせて、画像の読み込みなどが最適化されます。私は、この更新はかなり前から予測していたので、導入が遅いぐらいです。とても良い拡張です。

ただ、毎度の事ながら、大きな変更の際は、このシステム全体の一部または全部が今まで通り機能しないことが起こりえます。もちろん、不具合は最小限に留めるよう最善を尽くしますが「誰も悪くないのに動かなくなる」のはコンピュータの宿命です。

皆さんも、何もしてないのに動かなくなった経験があると思います。Webの世界はマグロと同じで、立ち止まったら死んでしまいます。目的がマクロの刺身ならそれでもいいのかもしれませんが、私たちは泳ぎ続けます。

ご理解とご協力の程、よろしくお願いします。

画像をたくさん用いているページにはメリットの大きな変更になりますが、一部のUIがこれまで通り動作しなくなる可能性のある更新が予定されています。ご自身のページで不具合を発見されたらご相談下さい。

その他、Webからの投稿作成画面のUIも変わります。

カテゴリー
雑記

立ち止まらない 安定

高いコストをかけて作ったWebサイトは長く運営したいと思います。

私たちも、手がけたWebサイトには少しでも長く生きていて欲しいと思っていますし、少しでも多くの効果を期待しています。

この「少しでも長く」の捉え方がかみ合ってないと、お互い不幸になります。

お客様の中には「一度作ったサイトをそのまま永遠に提供し続けたい」とお考えの方も居ます。

そのお気持ちはわかるのですが、残念ながらインターネットの世界はそうなっていないのです。

インターネットを支える通信技術も、Webサーバーも、フレームワークも、閲覧者の端末も、ライフスタイルも、5年10年と経過すると驚くほど変わります。

全く想定していなかったデバイスが、登場から5年もしないうちに閲覧者の8割を占めるようになったりします。

えっとワークは、その流れに立ち向かわず、立ち止まらないことで長く生きる戦略をとっています。

えっとワークでは、常にその時代に多く支持されている技術を組み合わせることで、環境の変化に自然に追従し、変化し続けます。


これまでに、変化を拒んだサービスは沢山ありました。そのサービスを使ったことのある方もいらっしゃると思います。そうした「変化しない」サービスは、いずれ更新されなくなり、陳腐化し、ひっそりとサービスを終了していきます。

ほんの数年前まで動いていたのに、突然終了したサービスもあったと思います。ですが、実は「突然」終了したのではありません。変化を拒んだときから、終了が決まっていたのです。

新幹線の車両ですら、皆さんの記憶に残っているだけでもどれだけ変化したでしょうか。一見変化する必要を感じない変化かもしれませんが、ニーズやコストなどの問題、ライフスタイルの変化などでどうしても変化していきます。

新幹線が速くなると、食堂車が消えて、その分座席が増えました。

食堂車が消えると、新幹線で飲食すること自体が減り、車内販売もなくなっていきました。

この時代の流れに逆らおうとしても、食堂車を前提としたシステムはもう動きません。


食堂車全盛の時代には食堂車に乗り、食堂車が消えた今では Free Wi-Fi に乗る。そんなフレキシブルなシステムであれば、どんな時代でも、その時のテクノロジーを最大限使って、お客様にアプローチできます。

今までのコンテンツの蓄積を活かしたまま、シームレスに次の時代に繋いで、息の長い情報発信をサポートしていきます。


セキュリティーの面からも、基盤技術で問題が見つかればすぐに対処しています。この副作用として、ある瞬間に、システムが一時的に思ったように動かなくなることもあり得ます。これはある程度ご了承ください。常に変化していくシステムの宿命として、変化の途中で一時的な「組み合わせの不具合」はどうしても発生します。

この「システムの陳腐化と更新」への対策は3つしかありません。

  • 変化せずに死んでしまったら、もう一度作り直す
  • 変化を受け入れて生き続ける
  • お金で延命し続ける

もちろん、どれが正解という事はありません。

えっとワークは、私も、皆さんも変化を受け入れていくことで、結果として現実的なコストで長くサービスとコンテンツを活かし続ける事を目標としています。

現在採用しているフレームワークは「WordPress」です。2018年段階で、Webサイトフレームワークシェアの4割以上を占めていると言われています。

WordPressも変化の早いフレームワークです。そのため、変化を拒む人達からは良い評価を得られていません。数年に一度大きな変化が起こり、そのたびに「使い方がわからなくなった」という声が上がります。

私たちも、常に情報を追いかけ、時には開発者グループの中で予習をし続けなければ、大きな変化に追従するのが難しい事もあります。細かい変化は、気付かないうちに進んでいることもあります。

しかし、だからこそ、WordPressは多くのサイトで採用し続けられています。

この10年で、閲覧者の環境は、ブラウン管のディスプレイから、大画面の液晶モニターに、そして小さなスマホの画面にと、めまぐるしく変化してきました。

WordPressは(そしてえっとワークも)その変化を受け入れ、時には身を切る改革を行って、時代に追従しています。そのおかげで、10年前のコンテンツが、10年後のデバイスでも快適に閲覧できるのです。


インフラや基幹技術の見えない変化は、私たちが吸収して表に見えないようにメンテナンスします。

サービス開始時にはオンプレミスの社内サーバでしたが、時代の変化に合わせてクラウドサービスを使うようになりましたし、電電も太陽光発電を組み合わせています。

こういった見えない変化は私たちが吸収します。

一方で、見える部分の変化は、皆さんが吸収して、次の10年の情報発信に繋げていってください。私たちは全力でそのお手伝いを致します。

カテゴリー
雑記

Hタグは 見出し

Hタグは、「見出し」です。

うっかり「文字を大きくするため」に使ってしまっているサイトも見かけますが、ヘッダをうまく使うと、検索(SEO)に対しても非常に有利に働きます。

最近、条件を満たすと、Google 検索で、見出し(Hタグ)が検索結果に列ぶことがあります。

広島県の歴史を検索すると、Wikipediaの「広島県」のページの「歴史」の見出しがヒットする。

検索結果は常に改良が続いているので、今同じ結果が得られるかどうかはわかりませんが、「広島県 歴史」を検索すると、Wikipediaの「広島県」のページの「歴史」の見出しの箇所が抜粋され、「歴史 に移動」をクリックすると、その見出しの場所に直接飛ぶことができます。

一般論では、見出しを使いこなさないといけないほど詰め込みすぎたページでは、「広島県の歴史」という別のページを作った方が良いのですが、ともあれ、見出しをうまく使うことで、たくさん詰め込んだページでも、閲覧者を適切な場所に誘導できます。

Wikipedia 以外ではあまり見ない気がするので、見出しが検索結果に採用される条件はわりと厳しいのかもしれませんが、素直な構造にしておくと、将来的なデザインの変更にも強いし、検索エンジンからも高評価されます。

カテゴリー
雑記

カテゴリーと タグの使い分け

私も、WordPressを覚えるときに、入門書を何冊も読みましたし、Webサイトも沢山見ました。

公式ページが充実しているのもWordPressの良い所ですが、入門用として読むには少し根気が必要かもしれません。

それよりも「習うより慣れろ」で使えてしまうのが、WordPressの良い所です。


そんなWordPressですが、投稿の属性として「カテゴリー」と「タグ」を設定することができます。この2つは、幾つかの違いはありますが、記事を分類するという用途では同じ側面を多く持っています。

いろいろな本やサイトで、この「カテゴリー」と「タグ」をどのように使い分けるか、色々な解説がされていますが、どうにもしっくりくる説明がありませんでした。

ですから、私は「とりあえず、タグを設定して」とお願いしています。

タグは自由度が高く、また、幾つでも設定できるので、とりあえず設定しておけば、後から分類することも可能です。

タグをつける際は、適度に細かく分けてやると良いと思います。例えば「4K OLEDテレビ」というタグをつけるよりも「4K」「OLED」「テレビ」と3つのタグをつけた方が、後で便利だと思います。

ある程度記事が溜まってくると、よく使っているタグからトップページを自動生成できます。記事が増えるとトップページも変わってきます。逆に、自分がどこに力を入れて記事を書いているかが客観的にわかるので、力を入れたい記事を増やす目安にも使って下さい。

トップページの自動生成は、記事が5つ以上できてから、担当者にご相談下さい。

person holding turkish style tea bag tie

一方で「カテゴリー」のほうは、なかなか難しいです。

技術的に色々な解説があるのですが、技術的な理由はコンテンツを縛る理由にはなりません。

今、なんとなくこれかな、と思っている使い分けは、

  • タグは、何が書いてあるか
  • カテゴリーは、誰に書いているか

ではないか、と思っています。

飲食店であれば「メニュー」や「お知らせ(店休日や割引きなど)」は、カテゴリーで分類して良いように思います。これは「加盟店の皆様へ」といった記事とは根本的に読者が違うからです。

ただ、お知らせの中でも「店休日のお知らせ」と「割引キャンペーンのお知らせ」は、カテゴリーを分けなくても良い気がします。どちらもお客様へのお知らせだからです。もちろん、タグには「店休日」や「割引き」「キャンペーン」のような分類をしっかり入れてください。


「カテゴリー」と「タグ」の使い分けは、考えれば考えるほど難しいです。ですから、まずはカテゴリーは忘れて「タグ」をきちんと設定することを心がけてください。

そして、もっと良い使い分けを知っている人は教えてください!

カテゴリー
雑記

目的から 装飾を考えよう

文章の中で大きな文字を使ったり、文字の色を変えたりしたくなることもあります。「メタデザイン」では、特に気をつけて頂きたいのが「文字を大きくしたい」のは目的ではなく結果である事です。文字を大きくしたいと思うとき、その目的は「文章を目立たせたい」事じゃないでしょうか。

特にワードプレスでやってしまいがちな間違いが、文字を大きくするために「見出し」を使ってしまうことです。

文字を大きくするためだけに H2 を指定するのは間違った使い方です。

この「H」は「Header」のHで、メニューにも書いてありますが「見出し」の意味です。目次を作る時の「見出し」に使う文字です。もちろん見出しのつもりで書いている場合は適切なのですが、ただ「文字を目立たせたい」だけであれば…

テキストの設定から文字を大きくして下さい。

ブロックのテキスト設定から「特大」を選んで下さい。

この時「カスタム」はあまりお薦めできません。将来、スマホのトレンドが変わったり、新しいデバイスが出てきたときに、標準の文字サイズが変わるかもしれません。ここで「小」や「特大」を選んでおけば、将来の環境でも「特大」が維持されます。


しかしながら、この「目的」を意識した文章作りを邪魔しているのが、他でもないWordPressのメニューなんです(2020年7月現在)。

テキスト修飾メニューでも「太字」「斜体」といった「結果」で選択するメニューが出ます。

WordPressのメニューでも、目的ではなく結果で選ぶようになっている。

メタデザインを突き詰めるなら、ここでは「強調」という目的を指定するようになっていて、結果として太字になるようになると良いのですが、まだWordPressもそこまで来ていませんが、HTML5 という技術的な標準規格では、数年前からこのような「目的と手段(構造と見た目)の切り離し」が行われているので、そのうちWordPressも追従してくるのではないかと考えています。


ちょっと角度の違う文字強調として「ハイライト」や「文字色」があります。

ハイライトや文字色の変化も使えます。

文字色も、できるだけカスタムカラーを使わず「キーカラー」などから選んで下さい。

この色は「外観」メニューの「カラー」から選択でき、以前書いたページも含めて、一度に色を調整できます。

「外観」の「カラー」から、背景色やメインカラーを調整できる。

色だけデザイナーに相談することも可能です。
(5,000円ぐらいから相談できますが、5万円ほどで、キーカラーとロゴを一緒に考えて貰うと割安かもしれません。)

えっとワークからのお知らせを受け取りますか? 受け取る 要らない