ガジェットショットのデザインを大幅リニューアルしました。
最近レビュー記事があまり書けていませんでしたが、1ヶ月ほどテーマファイルのデザインのリニューアル作業に没頭していました。今回のテーマはレスポンシブデザインとなっており、ワンソースでスマートフォン・タブレット・PCに対応しています。レスポンシブ対応にした背景としてはiOS 9のSplit ViewやSlide Over機能の登場によってiPadに対してPC版を提供するだけでなく縦長のスマートフォン版を表示しなければならなくなったり、スマートフォンの画面サイズの多様化や27インチiMac Retina 5Kディスプレイモデルの登場などで多種多様な解像度の閲覧環境が出てきた事などが挙げられます。
先日iMac 5Kディスプレイモデルを購入して自分のブログを見た際にあまりにスカスカだったので、既存の記事構成は変えずに5Kディスプレイ（2560×1440の2倍表示）を持て余さないレイアウトを目指してみました。
歴代のガジェットショットのテーマ
最初のガジェットショットのテーマは2010年の11月末に公開しました。オーソドックスな2カラムレイアウトで、当時は「スマートフォンはPCサイトを見ることができるのが利点」という主義のもとスマートフォン対応はしていませんでした。この頃からの読者はどれくらい居るものなのか気になるところです。
2012年に発売された初のRetinaディスプレイ搭載Macである15インチMacBook Pro Retinaディスプレイモデルを購入したところ、自分のサイトの解像度が低い事に我慢ができずに行ったのが1回目のリニューアル。Retinaディスプレイ対応のほか、この頃から記事は1カラムになり、サイドバーが無くなりました。当時の記事としては「Xperia SX SO-05D購入、95gに濃縮された本命成熟スマートフォン。」がありますが、横幅をいっぱいに使った記事は1カラムブログの少なかった当時としては迫力があったのではないかと思います。また、スマートフォン対応も行いました。
そして2013年から使ってきたテーマ。記事ページの1カラムレイアウトはそのまま、2カラムだった記事一覧をタイル表示に切り替えたのが特徴。フッターから引き出しのように端末が出てくるギミックも中々好評でした。気に入って使っていたテーマなので2年以上改変せずに使い続けてきましたが、レスポンシブ非対応につきiPad ProのSplit Viewなどの新機能が有効活用できないのは勿体無いということで、2016年を目前にリニューアルを決行しました。
今回のテーマの特徴
4つ目のテーマとなる今作は当ブログとしては初の完全レスポンシブ対応テーマとして組みました。iPad Pro・iPad Air 2・iPad mini 4のSplit ViewやSlide Overにもしっかり対応。画面分割時に最適なサイズで表示されるようにしました。レスポンシブはスマートフォンの小さな画面だけでなく、5Kディスプレイの大きな画面にまでしっかり対応。5Kを持て余さないレイアウトを心がけました。また、旧バージョンのInternet Explorerのシェアの低下に伴いモダンブラウザの機能を駆使したアニメーションを多く取り入れてみました。記事下の購読ボタンはマウスオーバーでMaterial Designにインスパイアされたアニメーションを搭載したほか、PC版ではサイドバーのカテゴリ一覧にマウスオーバーすることで従来のヘッダーのように最新記事一覧をホバー表示させることができ、スマートフォン版ではメニューにAndroid 6.0にインスパイアされたアニメーションを取り入れています。
PC版に関してはキーボード操作も可能となっており、記事閲覧中に右下・左下に表示される前後の記事へのリンクはそれぞれマウスオーバーでプレビュー可能なほか、キーボードの左右のキーでも長押しでプレビュー・放して遷移可能。なお、キャンセルする場合は逆方向のキーを押して離すことで可能です。
前回のテーマでは作業時間不足で作っていなかった問い合わせページやライター別ページ、カテゴリページやタグページなども作り、より完成度を高めてみました。前回は夏休み中に作りましたが、今回は思いっきり11月中に熱中して作った上に時間もかけてしまったので、多少学業に支障が出てしまいましたが、良いものが出来たので満足しています。そろそろゆっくり寝たいです。
思い返せば2010年の11月末にガジェットショットを公開したので、今回のリニューアルはちょうど5周年のタイミングにあたります。意外と続くものだなと自分でも驚いていますが、今後も是非定期購読していただけるとありがたいと思います。今後ともガジェットショットをよろしくお願いします。
