今、世界が大きく変化する一方で、IoT、ロボット、人工知能（AI)、ビッグデータといった社会の在り方に影響を及ぼす新たな技術の進展が進んできています。日本は、課題先進国として、これら先端技術をあらゆる産業や社会生活に取り入れ、経済発展と社会的課題の解決を両立していく新たな社会であるSociety 5.0の実現を目指しています。なまら北海道だべさも、この流れで後れを取るわけにはいきません。
Society 5.0で求められるサイトとは
では、簡潔にどのようなホームページを目指せばよいのでしょうか。それは、そんなに難しいことではないと思います。私が思うに…
① 安心・安全のセキュリティ
② 有益な情報を分かりやすく提供するサイト
③ 何よりも使いやすい
情報化がますます進みますので、安心・安全のセキュリティは必須です。その上で、人間がアクセスしても、AIがアクセスしても迷わないようなホームページを目指せばいいと思うのです。子どもからお年寄りを意識したら、ホームページのデザインは分かりやすく、字は大きめにして、難しい感じは使わない方がいいでしょう。AIがアクセスして読み上げる時代もそう遠くはないでしょうから、サイトの構造もシンプルに。新しい技術に対応したホームページを作っていけばよいと思うのです。
常時SSL化でセキュリティ向上
常時SSL化の必要性
常時SSLとは、サイトの全てのページを「https」化（常時暗号化）することです。今までも、IDやパスワードを入力するログインページやお問合せフォームなどはSSLによる暗号化を限定的に使用するのが一般的でした。カード番号を入れる時には必ず、アドレスのhttps://の「s」を確認するのが当たり前でした。
それをサイト全体に広げて、すべての情報のやり取りを暗号化通信で行うことを「常時SSL」といいます。
安心、安全なのは分かるけど、個人のサイトでも必要かなぁ。
では、なぜこれからは常時SSLなのでしょうか。まず、情報を利用する立場として考えてみましょう。第三者によって傍受されたり改ざんされたりする可能性のあるサイトより、安全性、信頼性の高いサイトにアクセスしたいと思いませんか。それに、大手ウェブサービスや政府機関を中心に「常時SSL」は広まっており、世の中の動きとして「常時SSL」の導入が進んでいます。
私も、難しいことは分からないけど安心・安全なサイトがいいと思うわよ。
個人のサイトでもホームページの改ざんは起こる可能性があります。なまら北海道だべさの歴史の中でも、トロイの木馬事件があります。このホームページは安全だということを証明してもらうためにも、常時SSL化は必須の時代です。
鍵マークが表示される安心サイト
ホームページのアドレスバーをご覧ください。鍵マークがついていますよね。今はこれがデフォルトですが、常時SSL化をしていないと、（ｉ）マークが出て、その横には「保護されていない通信」と表示されます。さらにそこをクリックすると、「このサイトでは機密情報（パスワード・クレジットカード）を入力しないでください。悪意あるユーザーに情報が盗まれる恐れがあります。」と書いてあります。
インターネットに詳しくない人ほど、この文言は不安になりますよね。閲覧するだけの通常のサイトであればさほど問題はないはずなのですが、「情報が盗まれる」と書かれていれば心配になります。さらに、「保護されていない」であればまだよいのですが、今後は「危険」と表示される可能性があります。安全ではないの反対は確かに「危険」ですが、改めて文字にされるとビビりますね。一生懸命作った自分のサイトが、検索結果一覧で「危険」とかれていたらがっかりしますよね。
逆に、鍵マークがついていたら「デキるサイト」だと思いませんか。こういうところまで丁寧に対応してホームページを公開したいものです。
結果的にSEO効果も期待！
実は、常時ＳＳＬ化が進んでいるサイトは、Googleなどの検索エンジンから「ユーザーが安心して利用できる優良なコンテンツである」と評価されます。つまり、検索結果が上位になりやすくなるのです。
ただし、コンテンツの内容が重要であることは言うまでもありません。受験と一緒ですね。合否を分ける結果は入試の点数ですが、同点なら内申書の所見や部活の成績などで決着がつきます。あれに似ています。検索結果の順位を決める時に、コンテンツにさほど差のないように捉えられたとしたら、常時ＳＳＬ化していた方が有利ということになります。
さらなる高速化も実現
実は、常時SSL化をすると、通信速度が向上する場合があるそうです。以前は、HTTPS（暗号化通信）をするとホームページの表示速度が遅くなるのではないかという話でした。しかし、「SPDY」や「HTTP/2」「HTTP/3」 といった新しい通信技術が生まれ、これに対応したサーバーでWebサイトを運営すると、HTTPよりも高速な表示が可能になるようです。Chrome、Firefox、IE、Safariなど、主要ブラウザの最新バージョンは全てこの通信技術に対応しているので、これからはHTTPS（暗号化通信）にしていないWebサイトの方が、相対的に表示が遅いと感じられるようになるかもしれません。今後は、常時SSL化したサイトが主流になると思います。
常時SSL化の注意点
新たにホームページを立ち上げる場合は大きな問題はありませんが、既存のサイトを常時SSL化すると、ホームページアドレスにhttps://とｓがひとつつきます。たったこれだけなのですが、インターネットの世界ではこれが大きな違いで、アドレスが今までのものと全く違うものとしてとらえられます。つまり、住所変更のお知らせが必要になります。リダイレクトするように手を打てば問題ありませんが、正しい知識をもって慎重にやらないと思わぬエラーが起こることもあります。
ColorfulBoxで常時SSL化したサイトを作成する方法
ColorfulBoxはドメイン認証型のSSLなので特別何かをする必要はありません。ホームページは自動的にSSL化していますので、強いて言えばしっかりリダイレクトの措置をとれば大丈夫です。
新規に立ち上げる場合
ドメイン（またはサブドメイン）を事前に作成し、アプリケーションからWordPressをインストールします。
インストール直後はプライバシーエラーと表示されます。ドメインの登録から行った場合は特に時間がかかり、6時間くらいかかりました。
最初だけ時間はかかりますが、寝る前や出かける前に済ませておけば、後は自動的に終わりますので作業としては「超簡単」です。この場合も、一応、プラグインやコントロールパネルの設定を使ってリダイレクト設定しておいたほうが、http://でアクセスされなくて済みます。
既存のサイトの場合
ColorfulBoxの場合、こちらのマニュアルが一番分かりやすいです。さらに仕上げとして、WordPressプラグインのReally Simple SSLのご利用をしておくと安心です。常時SSL化する前のアドレスでリンクしてくれているサイトもありますし、アドレスを直接入力してくれる友人もいます。何もしなければhttp://でも表示できますが、「保護されていない通信」と表示されますし、アクセス解析にも反映されません。このプラグインを使えばリダイレクトするようにしてくれますし、画像など内部リンクの設定漏れも防ぐことができます。ぜひ試してみてください。
最新技術を駆使したレンタルサーバーがおすすめ
以上、常時SSL化についてまとめました。いろいろ難しいなぁと思ったときは各種レンタルサーバーの無料サービスのマニュアルを確認してください。今は多くのサイトでドメイン認証型の無料SSLを提供しています。プラグインを使わずとも内部リンクを変換してくれるサービスもあります。当サイトでは費用対効果抜群のColorfulBoxを3年契約で使っています。
あらゆるメディアに対応するレスポンシブデザイン
次に、レスポンシブデザインについて紹介します。ホームページを作り始めた2004年は、パソコンで見ることしか考えていませんでしたが、そのうちガラケーに対応することを考えて、テキスト中心の携帯用サイトを作りました。2010年代にはいると、モバイルPC、そしてその後半にはiPhoneやスマートフォンが普及し、パソコンからのアクセスを凌ぐほどになりました。さらにさらに！パソコンからのアクセスもモニタがワイドになり解像度がアップしている人もいれば、今まで通りの4：3ディスプレイの人もいます。
中にはこんな人まで…こうなってくると、それぞれに合わせたページをいくつも作るわけにはいかず、何らかの方法でどのキャリアからアクセスされても美しくみえるようなサイトを作ることが必須となってきます。
レスポンシブウェブデザインの基本はCSSで
さて、どうやってレスポンシブ化をするのかというと、CSSで画面がこの幅だったら表示しないとか、余白や文字サイズをどうするとか、「横並び」を「縦並び」に変えるとか、そういうことを書いてあげるのです。難しそうですね・・・。
@media (min-width: 737px) and (max-width: 1000px){
.r,.l{
float: none; margin: 0 auto; width: 100%;
}
}これはCSSの一部です。例えば、画面のサイズが737pxから1000pxの時は、rやｌで指定した部分は、横並びを解除して縦並びに…余白は無くなって幅は100％にする。こんな感じです。
こんなことをいちいちやらなきゃダメなのかぁ？きっついなー。
初めて見る人にはた難しい話だと思うのですが、分かってしまえばそんなに大変なことではありません。サイトを美しく見せるためにはCSSは必須ですし、ウェブデザイナーを目指すなら基本中の基本です。
たけさんってウェブデザイナーですか？素敵～。
今でこそ、無料で優れたテーマが多数ありますが2004年から続けていると自力でテーマを作ってきた時代があるわけです。今はほとんど自分でやる必要がなくなりましたが、つい数年前までは自分でテーマをアレンジしていたんですよ。もちろん、全てネット検索で調べて身に付けた技術です。
レスポンシブ対応のテーマが基本の時代に
以上のように、アクセスする人の画面に合わせてどのように表示するかをCSSで指定することが基本の時代になりました。自分で作成しなくとも、多くのテーマがレスポンシブ対応していますので、自分のスマホなどでも確認してみることをおすすめします。
今となっては使うことがなくなった情報です。このような試行錯誤があったからこそ、今のような便利なテーマが公開されているわけですし、技術も進歩してきたわけです。
モバイル端末に対応しようと時代の先端を進んでいた数々のプラグイン
WPtouch…スマートフォンに対応するためのプラグイン
Multi Device Switcher…アクセスする端末に合わせてテーマを変えるプラグイン
ktai_style…携帯用の軽量サイトを作成するプラグイン
2007年～2011年にかけて作成・更新されてきたものです。携帯電話で閲覧すると軽量化したサイト表示を行います。(フロントページのみならず、アーカイブページ、個別エントリーの URI も対象)しかも、ただ表示が変わるだけではなく、ページ容量が大きい場合、端末に応じてページ分割を行います (5KB〜50KB ごと)。画像を縮小・圧縮したり、カスタマイズしやすい携帯用のテーマがあったりと使いやすいものでした。広告も入れられたのでしばらく愛用させてもらっていました。
SNSでの拡散を視野に入れる
ホームページは情報をしっかり盛り込んで作りますが、アクセスを増やすためには単に検索にヒットするだけでは限界があります。いわゆる「シェア」を獲得することが大事で、このシェアを獲得するほど検索順位も上がっていくという好循環になります。多くの人に「いいね！」や「シェア」をしてもらう仕掛けはとても大切です。
シェアボタンの軽量＆高速化
ところが、これらのシェアボタン設置には課題があって、数を取得する際に読み込みに時間がかかることがあるのです。非同期にするような方法もありますが、ボタンがなかなか表示されず、いかにも「重たい」という感じです。そこで有効なのがSNS Count Cacheというプラグインです。
「SNS Count Cache」は、Twitter、Facebook、はてなブックマークなどのSNSでシェアされた数をSNS経由ではなく、定期的にシェア数をカウントたキャッシュを表示するプラグインです。その場で読み込まないのでかなりの高速化が期待できます。
このプラグインを使えば、全ての記事のシェア数などが一覧表示でわかるので、よく拡散されている記事がどれなのかもわかります。
ボタンのデザインはさっきおしえてくれたCSSでカスタマイズできるのね。だんだん分かってきたわよ。
シェアボタンのデザインをカスタマイズする
テーマによっては細かいカスタマイズが可能です。気に入らなければ検索するとCSSがたくさん出てきますので、それをテーマのstyle.cssに入れて反映させます。ホームページのアレンジは自分好みに何でもできます。可能性は無限大ですよ。