PublickeyのWebページをレスポンシブ対応にしました

Publickeyでは本日からレスポンシブデザインを採用し、参照されるデバイスの画面幅に応じて、単一のURLを持つWebページがPC版もしくはモバイル版の画面を切り替えて表示するようにしました。

あわせてHTML/CSSの見直しもしましたので、特にPC版ではWebページの表示速度が大幅に改善され、以前よりさくさく見られるようになっているはずです（Google PageSpeed Insightsの分析ではパソコン用画面が100点満点中98点でした）。

これまでPublickeyではPCのWebブラウザ用のページとモバイル用のページを異なるURLで提供してきましたが、レスポンシブデザイン化によって読者のみなさまには以前よりも便利にPublickeyを見ていただけるのではないかなと思っています。

PC版のWebブラウザで見ていただく分には、これまでとほとんど変わりません。少しだけ本文の幅を広げました（530px->550px）。

これを画面の横幅が728px以下のデバイスで見ると、次のように縦長のレイアウトに切り替わります。

Webページの表示開始時にデバイスの画面幅をJavaScriptで取得しているので、表示後はWebブラウザの幅を変えてもレイアウトの変更は発生しません。

バナー込みのレスポンシブデザインで苦労したところ

今回のレスポンシブデザイン化でいちばん苦労したのは、バナー込みでレスポンシブデザインを設計するところでした。

Publickeyではバナーもビジネス上の大事な収入源なので、モバイル向けの画面でもバナー表示を省略するという選択肢はありません。

例えば上の画面例で、画面の上部に出ている横長のAWSのバナー。これは横幅728pxあります。しかし画面幅が728px以下に設定されているモバイルデバイスだと、そのままではバナーが一部しか表示されません。

そこで1つ目の課題は、さまざまな画面幅を持つ多様なモバイルデバイスでこのバナーを破綻なく表示することでした。

そのため、728px以下の画面幅を持つモバイルデバイスではviewportでの画面幅を728pxに設定しました（つまりどんなデバイスも論理的な横幅を728pxに設定したことになります）。これでどんな画面幅のモバイルデバイスでも横長のバナーは画面横幅一杯に表示されるようにしました。

2つ目の課題は、上の画面例で本文の右横、いわゆるサイドバーに表示されている四角いIBMのバナー。これは通称「レクタングル」と呼んでいます。

HTMLのソースコードで見ると、このレクタングルは本文の後ろに記述されているサイドバーのなかにあります。これを素直にレスポンシブデザイン化すると、モバイル画面で表示したときに本文をスクロールしていって読み終えた後にレクタングルが表示されることになります。

しかしこのレクタングルはPC版では画面を表示したときに本文の横にあって目に入る位置、いわゆるファーストビューにかかっていて、それがバナーの大事な価値になっています。モバイル版の表示でも同様の表示を実現すべきだと考えました。

HTMLのソースコードでずっと後方にあるバナーを縦に細長いモバイル画面のファーストビューに持ってくるためにはどうすればいいのか？ CSSのFlexboxやgrid layoutなどさまざまなテクニックを検討したのですが、どうにもCSSだけでは（少なくとも僕の能力では）実現できません。

結局、JavaScriptでHTMLのコードを直接操作し、画面幅が728px以下の場合にはバナーを表示する部分のHTMLを動的に記事タイトルの前に持ってきて右寄せで表示する、という方法で解決しました。

HTMLを操作するJavaScriptはそれ以外にもサイドバーのなかの表示をモバイルに合わせて順番を変えることにも使っていて、重宝しています。

ただ心配なのは、こうして動的にHTMLを操作してモバイル版でバナーの表示位置を変えることが、Googleから見てGooglebotをだますような手法とされないかどうかです。こればかりはGoogleがきちんと評価してくれることを祈るのみです。

レスポンシブ対応以外の今回の改善点として大きかったのは、CSSを全部HTMLのなかに書き込み、独立したCSSファイルをなくしたことです。これによりWebページの表示スピードが（少なくともPC版では）劇的に改善されました。

ほぼ1年前にPublickeyではHTTPS対応を実現し、今年はレスポンシブ対応を実現。ペースは遅いのですが、今後も少しずつPublickeyの改善を続けていきます。もしPublickeyの画面が崩れているとか、正しく表示されていないようだ、という現象がありましたら、お気軽にTwitterやFacebook、メールなどでお知らせください（画面キャプチャやデバイスの種類などもあわせて教えていただけると助かります）。