ブログのテーマをリニューアル！これまでよりマテリアルデザインっぽくなりました

お久しぶりです。しばらく更新が止まってしまいました。いつの間にか8月も終わり、夏休み終わってやる気が出ない時期ではないでしょうか。私は社会人として働いていたので全く関係のない話ですが…。ってそんな話はどうでもよくて、お知らせです。

このページを見て分かる通り、Creator Clipをリニューアルいたしました！

目次で流し読みする･*･:≡(　ε:)

コンセプトは「よりマテリアルデザインっぽく、アニメーションやエフェクトに意味を持たせる」

前回のリニューアルでも「マテリアルデザインにしたぜ！」と言っていましたが、見た目だけのナビゲーションに余白や要素の大きさなどがバラバラで正直見づらいテーマでした。

マテリアルデザインと言えば、要素の重なりや影、アニメーションなどを重要視しており、ユーザーの行動に合わせて気持ちのいいアニメーションをしてくれます。今回はそれを再現するためにリニューアルに取り組みました。

ripple

マテリアルデザインで分かりやすいのは、Ripple(波紋)エフェクトではないでしょうか。例えばトップページなどから記事を選択すると、クリックした場所を起点として波紋が広がるようになっています。ユーザーの操作に対して反応を返してあげると操作性が向上します。

今回のリニューアルではあらゆるリンクやボタンに対して設定しています。

画面右下のページトップへ戻るボタンや、アイキャッチ画像上に丸いボタンがあります。これはコンテンツよりも上に来ている要素で、スクロールやクリックに合わせて形が変化するようになっています。

マテリアルデザインで重要なのは境目の無いシームレスなアニメーションだと思います。アニメーションが途切れること無く動くことで、ユーザーがこれから起こる行動を予想しやすくします。

ページのリンクをクリックするとコンテンツ部分のみがフェードで切り替わるようにしました。1番この実装が難しく、最初は「ぴーじゃっくすってなんじゃっくす」ってところから始めて、どうにか形になりました。

Ajaxではコンテンツ部分のみを読み込むため、読み込むファイルの軽減と高速化、サーバーの負担が減るなどのメリットが有りましたが、代わりに非同期通信をするにあたってURLが更新されないというデメリットがありました。

それを解消するために、html5で実装された戻る・進むなどhistroyを操作するAPI「pushState」という機能と組み合わせて出来た技術がpjax（pushState + Ajax）です。

両方のいいところを組み合わせて、非同期でコンテンツを読み込みつつ、ブラウザの戻る・進むにも対応した新しい技術(といっても既に何年か前にメジャーになっているが)です。

まだ不具合などが残っているため、引き続き修正を進めていく予定です。

1カラムのレイアウトが流行ってきているのにも関わらず、あえて3カラム～1カラムのレスポンシブデザインで作成しました。ブレイクポイントを5段階で切り替えることで、どのデバイスで見ても快適に記事を読めるように工夫しています。

ウィンドウ幅が1,300px以上で3カラム表示になります。これまでずっと2カラムだったので何だか新鮮です。

ウィンドウ幅が縮むにつれて2カラムになり、左にあったアーカイブ・カテゴリ・タグの一覧がドロワーに隠れます。ヘッダー左にあるハンバーガーアイコンをクリックすると表示されます。

タブレットとスマホではサイドバーが下に落ちて1カラムになるレイアウトにしました。以前はPCとタブレットの中間ぐらいの微妙なサイズも可変させていたのですが、あまり需要が無さそうだったので止めました。

2カラムの幅よりも小さくなると横スクロールバーが発生し、タブレットの幅になると再び可変するようになっています。

スマートフォンでは更に2段階に分けて余白などを微調整しています。基本的にはタブレットのレイアウトがそのまま小さくなった状態ですが、トップのサムネイルとタイトルが縦並びになっています。

このブログを運営してから4回目のリニューアルとなりますが、リニューアルばっかりして記事をまともに書いてないことに気が付きました。ブログに書くネタも溜まってきているので、これからはもう少し更新頻度上げていきます…。

ユーザーはレイアウトの変化を嫌うと言われているので、本当はコロコロレイアウトを変えるのは良くないんでしょうけど、ブログを書くよりも外観を整えるのが楽しくてつい何度も模様替えしちゃうのよね。

今回はお知らせだけということで、技術的なお話は後ほど別記事で書こうと思ってます。

何はともあれ、新しくなったCreator Clipをよろしくお願いいたします！