Theme
↑Back to Home

-BeeHive-ホームページリニューアル

LEoREoです。

私が勝手に運営しているBeeHiveのホームページを勝手に作り直しました。

当初のホームページのソースコードは、Web系が本職じゃない私にも明らかなレベルの構造的欠陥が多く、制作中色々と妥協してしまった点も多かったので思い切って一から書き直すことにしました。
どうせだからと思い、少しやってみたかったpjaxを使ったページ遷移に手を出してみたり、アニメーションやスタイルにも少しだけこだわってます。

ここでは新しいHPについて説明的なことをしてみます。こいつ何言ってんだみたいな所があっても気にしないでください。

ブラウザ

もう業務とかではない完全な趣味なので、Internet Explorerのサポートは完全に切っています。
ダメ元でIE11で表示させてみましたが、完全に動いてません。

それ以外の主要ブラウザでは問題なく動作するはずですが、Firefoxだとほんの少しだけ見え方が異なります。
Webkit系のブラウザであるSafari(iOS/Mac)で見ると、記事一覧表示のタイトルの後ろにイイ感じのボカシが入るようになっています。
WindowsだとWebkitの仕様に追従しているMicrosoft Edgeがこのボカシに対応してました。

アニメーション

トップページに行くと、イントロ的な感じでBeeHiveのロゴがカッコよく動くアニメーションが始まるようになっています。
最初は一つの要素だけが動いているけど最後に一気にいろんなものがわちゃわちゃと動く、みたいなのをやってみたかったので満足です。
あとは右メニューのホバーエフェクトでしょうか。カーソルを重ねると小メニューが連続して表示されます。

作り込んだアニメーションの部分はこれだけで、他はCSSで割と適当にやってます。
サイト内のアニメーションにはJavascriptライブラリのanime.jsを使っています。
anime.jsの公式サイトにもお手本のようなとてもカッコいいイントロアニメーションがあるので是非見てみてください。ボタンのクリックエフェクトにも注目。

パフォーマンスもそこそこ良く、余程の低スペックPCでなければ若干のフレームドロップはありながらも、大体60FPSぐらいは出ると思います。

PJAX

サイトをpjaxに対応させると、サイト内のページ移動の際にページ全体を読み込むのではなく、2ページ間の差分だけを読み込んで差し替えることにより、シームレスなページ遷移ができるようになります。
ページ全体を毎回読み込むよりも通信量が抑えられ、それによってサーバーの負荷も軽減できます。
また、差し替え時にサイトを自由にアニメーションさせることも可能です。

ちなみにpjaxとは、ajaxとpushstateを組み合わせた言葉らしいです。

Ajaxはものすごく大雑把に言うと、非同期にサーバとの間の通信を”しながら”HTMLの構造をいじれる、的なもの。
Googleマップとかで、マップを縮小する度に足りないエリアの地図を補填したり、拡大した時により詳細な地図と置き換えたり、みたいなことをする時にも使われています。

Ajaxだけでも先述したようなページ遷移は可能だと思いますが、ブラウザのアドレスバー表示や閲覧履歴にそれは反映されません。
そこで、Javascriptからブラウザの閲覧履歴を直接いじれるpushStateAPI(正確にはHTML5 History API?)を使ってAjaxによるページ遷移を実際のブラウザの履歴にも書き込む、といったことをしているのがPJAXです。

今回はbarba.jsを使ってページ遷移を実装しました。
アニメーションはありませんがbarba.jsの公式サイトもpjaxでページ遷移をしています。左のメニューをクリックしていくとほぼ一瞬でページが移動できているのが分かると思います。
むしろアニメーションがない方が体感速度は圧倒的に速いので、こっちが本来の使い方なんだと思います。

pjaxに関連して、幾つか分かりづらいかもしれない仕組みを説明しておきます。
まず、このページの右下にある三本線のボタン、これはクリックすることで右メニューの表示・非表示を切り替えられます。
そして左上にBeeHiveのロゴ、これはクリックするとトップページに戻るようになっています。
どちらもトップページでは表示されないようになっています。

それとトップページの最新ブログ記事一覧の画面では、ロボクラニュース翻訳の投稿が表示されないようになっています。
ニュース記事の一覧は右メニューの「BLOG」->「RCNEWS」からどうぞ。

jQuery

新しいホームページでは先述したアニメーションやpjaxの実装のために旧HPと比べてJavascriptが多用されています。
JavascriptのライブラリといえばjQuery。もう至る所で使われています。
このBHHPを動かすのに使っているWordpressにすら標準で搭載されているのですが、今回はあえてjQueryを使わずにやってみました。

詳しい理由の説明は割愛しますが。若干時代遅れになりつつあるのと、パフォーマンス面の懸念があったためです。
もっとも、この程度のサイトならパフォーマンスの差はほとんどあってないようなものですが。

とは言えこのHPで使っている画像の拡大表示用のLightboxというものがjQueryを使っているので、100%ピュアJSで実装されている訳ではないのですが、アニメーションやページ遷移の処理は全部Javascriptを直接叩いています。

本文テキスト

当初のホームページのテキストはと て も 読みづらいものでした。知ってます。
一応リニューアル直前の時になってからは多少改善したんですが、特にホームページ公開直後はブラウザの標準スタイルがそのまま適用されていて、我ながら酷かったと思います。

見出しが小さい、行間がキッツキツ、数えればいくらでもあります。
それゆえに公開当初のブログ投稿では見出しが太字の代わりに多用されたりもしました。


(公開当初のデザイン/クリックで拡大)

旧デザインでは右下のボタンをクリックすることでダークモードに切り替えることができていたのですが、このダークモードが有効になっていた時のテキストの可読性も酷いものでした。
黒背景の上に半透明の白が重なってそこに黒の文字が・・・

(クリックで拡大)

リニューアルでは本文のスタイリングも最低限調整しました。
またフォントもWebフォントを使用し、欧文フォントはInter UI、和文フォントはM+ 1pを使用しています。

(クリックで拡大)

Inter UIは数ある欧文フォントの中でも個人的にとてもとても好きです。身の回りのもの全部Inter UIにしたい。

(クリックで拡大)

ちなみにリニューアル後のホームページではテーマの切り替えは出来なくなっています。
もともと完全黒ベースのサイトに挑戦してみたかったのもあるのですが、Infinityの青ベースのデザインにしないのか、と言われたのでそのうちやりたいと思います。
白、黒、白地青の3つ作れたらいいですね。

その他のデザインテーマとしてはあまり旧HPと変わっていません。
BeeHiveということで蜂の巣をイメージした六角形を多用しています。
一部箇所は旧HPからそのまま持ってきたものもあるのですが、それでも若干見た目が変わっていたりします。

メンバーページのデザインは今でも気に入っています。

おわり

ということで以上です。制作期間は6日間で、空き時間に細々と仕上げました。
まだ所々不安定なところはあると思いますが、何かあったらTwitterにリプかDMください。

ではまた。

404ページを開いてみると…?

Share on Twitter