2020年1月 Archives

サイトで使用する画像のalt属性には何と書けばよいのでしょうか？

alt属性はいわゆる代替テキストと呼ばれていますが、アクセシビリティの側面から重要な要素となるため、実際にスクリーンリーダーを利用しつつ、ユーザー側の視点にたって設定することをおすすめします。

nvdaなどの無料スクリーンリーダーを立ち上げつつ、サイトを閲覧していますと、画像をポイントしてもalt属性を設定していな場合には音声が読み上げられないため、モヤモヤしてくる場合が多いと感じています。

また、画像をポイントした際、「001.jpg」などのテキストが読み上げられても意味はないため、その画像の内容を的確に表現するalt属性を指定することが重要になります。

この点でいえば、例えば、「昼寝をするネコの画像」や「猫が昼寝をする様子」のような形がよいのではと考えていましたが、ポイントする時点で画像であることは認識していますので、単に「昼寝をするネコ」のようなalt属性を指定すればよいと思います。

ただ、弱視の方向けの無料スクリーンリーダーしか使用したことがないため、有料のスクリーンリーダーがどのようになっているのかは不明です。

いずれにしましても、alt属性を指定していないのはモヤモヤ感が出てきてしまうということです。

装飾の為に設定している画像などにはalt属性を指定する必要はありませんが、ある程度の大きさの画像には適切な代替テキストを指定しておくことをおすすめします。

最近の流行りなのかは知りませんが、アクセスログを閲覧すると意味不明なクローラーからのアクセスが頻繁にやってきています。

いわゆるWEBスクレイピングと言われるものらしいのですが、簡単にいえば、サイトを丸ごと、もしくは１部分のみをクローリングでコピペされるというものです。

サイト運営者は訪問者に読まれることを目的に公開しているわけですので、サイトを勝手にコピーされ、リライトされてネット上に無断で公開されるのは不快に感じております。

これが検索エンジン関連のクローラーならアクセスを運んできてくれるメリットがありますが、誰かもわからない個人がサーバーに大量にアクセスしてコンテンツを勝手にダウンロードし、サーバーの負荷をかけた上にネガティブSEOとして活用されるのは迷惑でしかありません。

そのため、アクセスログを確認して、それらしきアクセスは一括で拒否することにしました。

「urlib」や「python」などのユーザーエージェントならほぼ間違いないと思います。これらは一括で拒否するとよいでしょう。

ただ、ユーザーエージェントが偽装されているケースもあり、これを見抜くのは非常に面倒くさいです。「わたしはGoogleボットですよ」といいつつ訪問してくるわけですが、「よく見るとお前はpythonじゃん！」ということがあり、ユーザーエージェントで拒否しても効果がありません。

その場合、IPアドレスでチェックして、同じIPアドレスで多くのページにアクセスしている場合は怪しいです。IPアドレスで調べてみて、一般的なホスト出ない場合には拒否しておくことをおすすめします。

毎日のログをチェックせずとも、月単位でまとめてチェックしてIPアドレスが隔たっていたら拒否してしまうのがよいかもしれません。

先日、約３年ぶりにMovableTypeにログインしようと思ったのですが、ユーザーIDとパスワードは合ってはいるものの、プログラムのエラーが発生して管理画面にログインできませんでした。

エラー情報を検索しても詳細が分からず、そこから先へと進めなくなってしまいました。

管理画面にログインさえできれば、バックアップファイルをダウンロードしたのち、MovableTypeを再インストールしなおして対応することもできますが、ログイン自体ができなくなると手の打ちようがありません。

そこで、エラーコードを眺めてみたところ、「plugins」や「addons」のフォルダ内に入っているファイルでエラーが発生していたようなので、この「plugins」や「addonss」のフォルダ名を一時的に変更してアクセスできないようにしてみました。

すると普通にログインできるようになったため、管理画面からバックアップしたのち、再度、MovableTypeをインストールすると普通に使えるようになりました。もし旧バージョンを使用していた場合、最新バージョンにアップグレードするのでもよいかと思います。

最新バージョンにアップグレードする場合には、ログインする必要はないと思いますので、どちらかというとそちらの方が簡単かもしれません。管理画面にログインできなくなってお困りの場合には、試してみることをおすすめします。

歯の定期メンテナンスで歯科クリニックに通っているのですが、そこの先生がホームページで集患をしたいとのことで最近は相談を受けています。

その先生はご年配というわけではないのですが、高齢といえば高齢のため、パソコンやネット関連には疎いらしく、ネットでの集患方法についていろいろと説明することになりました。

まずご提案したのは、「地名　歯科」で検索された際に１位に表示されるようになれば、患者さんがたくさんやってきますよというものです。いわゆるローカルSEOというものになりますが、Googleマイビジネスなどで地図も設置して地域での露出度を増やせばよいとお伝えしました。

ただ、言うは易く行うは難しで、現状のホームページの作りを見る限り、短期間でのSEO上位表示はちょっと難しいのではないかと感じています。そのクリニックは無料の某CMSサービスでサイトを作成していたのですが、そのCMSで作っているサイトが検索結果でヒットしていることは見たことがありません。

そのため、SEOでの上位表示は難しいだろうと感じました。

そこで、次にご提案したのは「リスティング広告」で広告を出せば、SEO関係なく、今すぐ患者さんを集客できますよというものです。医療施設の場合は医療法による広告規制もあり、ホームページ自体も広告と見なされるため、リーガルチェックのようなプロセスも必要にはなりますが、ガイドラインに沿った形なら看板的な形で広告を出稿することができます。

ただ、高額な費用をかけて広告を出しても、ホームページの作りが悪ければ、やはり訪問者の反応は悪いものです。広告費用ばかりがかさんで成果がないという結果になってしまうため、最終的にはホームページにメスを入れるしかありません。

ホームページについては、私が作れば簡単ではあるのですが、レンタルサーバーに移転してしまうと、それ以降に先生の方で更新することができなくなってしまう懸念があります。

そのため、ホームページの作り方自体を先生の方でも習得してもらい、ご自分でも更新できるようにしてもらうのが一番いいと思います。正直、医師の頭脳であれば、HTMLやCSSなどの習得は余裕でしょうし、数か月程度でマスターできるものと思います。もしくは、WordPressのようなCMSを利用して更新する方法を取るのがベストかもしれません。

ただ、実際にホームページからクリニックに訪問されてからのCVRなどもありますし、そのあたりを総合的に高めていかないと、ホームページのみでは成果には結びつかないのではないかなと感じています。

現在のレンタルサーバーは「Let's Encrypt」に対応していないため、MovableTypeを新しいサーバーに移転することにしました。

格安でもMovableTypeに対応している会社はありますが、格安サーバーの場合は4千以上あるCMSファイルをFTPでアップロードする際に頻繁にエラーが出て中断してしまうため、ある程度のスペックのサーバーでないと難しいかと思います。最近はWordPressに特化したレンタルサーバーも多いですが、SSD対応というよりも、CPUやメモリがプアだと何度もアップロードをやり直すはめになるかもしれません。

手順については、まずは移転をする前にMovableTypeを最新バージョンにアップグレードしておきます。このバージョンが合っていないとインポートする際に何かと面倒です。

最新バージョンにしたら旧サイト側で「サイトをエクスポート」をしておき、「テンプレート」もエクスポートしておきます。また、「プラグイン」などもエクスポートしておくとよいでしょう。

次に、とりあえずはHTMLやCSSファイルなどを新サーバーにアップロードして、ネームサーバーを切り替えてもサイトはそのままの状態で表示されるようにします。

サイトが新サーバーに切り替わった後、MovableTypeも移転することになりますが、システムについては移転というよりも新しくアップロードする形になるかと思います。

あとはエクスポートしたサイトのファイルを「import」ディレクトリにアップロードして、システムの箇所からインポートボタンを押せば移転が完了します。この際にバージョンが一致してないとインポートすることができないため、最初の段階で最新バージョンにアップロードしておくことが必要になります。

このインポートをする際、旧サーバーと移転先のサーバーではファイルのパスが異なるため、新サーバーにて適当に新規のサイトを作成してパスを確認しておくとよいでしょう。このファイルのパスは作成途中の段階で分かるため、実際に作成する必要はないかと思います。

h1やh2の見出しタグの場合、marginを何も指定していないとブラウザが自動で間隔を取ってしまうため、少し間の抜けた印象が出てきてしまいます。

デフォルトCSSではh1で2emなので、仮に1emを16pxとすると32px程度かと思いますが、この場合ですとmarginの値が0.67emとなるため、上下に約21.44pxになるのかもしれません。

一方、h2の場合は1.5emなので、24px程度かと思います。

ただ、不思議なことに、h2の場合のmarginは0.67emではなく、0.83emとなるため、約19.22pxになるかと思いますが、h1の場合と割合が一致しないようです。

h1 → 2em、marginは0.67em
h2 → 1.5em、marginは0.83em

仮に、1emを16pxとしますと以下のようになります。

h1 → 32px、marginは約21.44px
h2 → 24px、marginは約19.22px

h1の場合は文字の大きさに対して「67％」であるのに対し、h2の場合は「83％」となるため、小さい文字の方が間隔を取る割合が増えることになってしまいます。

おそらく、h1で83％もmarginをとってしまうと間の抜けた印象が出てくるためと思いますが、感覚的にはマージンの割合を同じにするよりもサイト全体のバランスがよいのかもしれません。

概ね、h1もh2もmarginは上下に「20px」程度が最適かと思いますが、h1については気持ち広めで21.5px程度、h2については19px程度にすれば、違和感がなくなるものと思います。