本日,2017年5月14日で本Weblog"The Strange Storage"は6周年になりました！ 様々な情報を私の脳内から救い出してくれた本Weblog. 毎月1つ以上の記録を書くことを目標に続け,自分でも驚くこと早6年. 総記録数は本記録を含め167. デイリーアクティブユーザー数(DAU)はブラウザからのアクセスだけでも日平均150前後,ページビューは200を超えています.
本日,2017年5月14日で本Weblog"The Strange Storage"は6周年になりました！ 様々な情報を私の脳内から救い出してくれた本Weblog. 毎月1つ以上の記録を書くことを目標に続け,自分でも驚くこと早6年. 総記録数は本記録を含め167. デイリーアクティブユーザー数(DAU)はブラウザからのアクセスだけでも日平均150前後,ページビューは200を超えています.
2011 - 2012年
2012 - 2014年
2014 - 2016年
2016年 - 現在
トップページはこれまでに,大きく3回のデザイン変更がありました. 今回はこれまでのデザインと,その時の思い出を踏まえて記録して行こうと思います. それでは懐かしきあの日,本Weblogを開設した頃のトップページデザインを見てみましょう.
本WeblogはGoogleのブログサービス"Blogger"を利用しているため,初期のデザインはBloggerテンプレートそのままでした. HTMLを編集することも出来るのですが,Blogger独自のタグが大半を占めていたため,当時は理解出来ず. ウィジェットの配置,色やフォントの変更など,簡単に行えるカスタマイズのみを施していました. ちなみに,キーカラーがオレンジ色の理由は映画"Live Free or Die Hard"の登場人物Matthew Farrellが使っていたカスタムOS(おそらくLinux)のUIにインスパイアされたためです. このOSのUIは今後のトップページデザインにも大きく影響しています. 1年ほどこのデザインのままでしたが,気に入らない点が多かったため1回目のデザイン変更を試みます.
こちらが変更後のデザイン. 初期のデザインでは右側に配置していたガジェット(プロフィールやアーカイブなど)をフッター(ページ下部)へ移動し,記事をメインに打ち出しました. 以前はトップページに各記録の端書きのみを列挙していたのですが,このデザインから全文表示へと変更しました. これ実はBloggerのスマホアプリの不具合で端書き以降の部分が勝手に削除されてしまったことがあったための止む終えない措置でした... (消えた部分はバックアップから復元しました). 全体的なデザインはMatthew FarrellのOSに近づいています. この頃になるとBloggerのHTML編集に関する知識を吸収し始め,色々と手を加えて行くようになります. 本Weblogを複製したテスト環境用のブログを新規に立ち上げ,そちらで色々とHTMLをいじって自分の好みのデザインに近づくよう試行錯誤を始めていました.
テスト環境で納得の行く出来にまとまり,リリースしたデザインです. この頃からドメインを現在のものへと変更しています(以前はhttp://strange-storage-5084.blogpost.jpと長いものでした). カラーパレットを意識し始め,キーカラーであるオレンジ色の補色となる青色(実際には紫色寄りの青色)をベースに色を選択してみたり,背景には奥行きのある宇宙画像(星雲写真)を使用し,脳外ストレージというコンセプトを強調してみたり(脳細胞と銀河分布の類似性など,ヒトの脳と宇宙の関連性を意識しています). また,文字にも凝りだし,フォントの選択や行間の調整など,見やすさ/読みやすさの追求を自分なりに行っていました. 1行に何文字あるかを数えて,適切な文字数になるよう幅を調整したり,行間やフォントのA/Bテストを行ってみたり,変にこだわった時期でした. Googleがモバイル表示に対応していないサイトを検索結果上位から外す措置を始めたことをキッカケに,モバイル表示にも対応し始めます.
モバイル版対応にあたっての目標は2つありました. 1つはデスクトップ版とモバイル版のデザインを限り無く同じようにすることです. 似たデザインにすることで閲覧する方も迷うこと無く利用出来,かつ私もデザイン/管理が楽になるなどメリットがあります. もう1つはモバイル回線でも高速な表示を実現することでした. しかし,背景には星雲の画像(JPEGですが周波数が若干高め),記事一覧には各々サムネイルがあるなど,比較的画像を多く使っていたため,なかなか克服出来ずにいました. そこで3回目のデザインチェンジに踏み切ります. 次回こそはBloggerのテンプレートを一切使わず,頭に描いたデザイン通りになるようにHTMLとCSSをひたすら書いて行こうと決め,デザインの一新を図りました.
試行錯誤の末,完成したのが現在のデザインです. 以前のデザインの雰囲気(操作性)をほんのりと残しつつも,デスクトップ版とモバイル版で全く同じような見た目/操作感に仕上がりました. また,トップページには画像を一切使わないようにし,Bloggerの外部リソースも読み込まないようにしたことで,ページの読み込みも極めて高速になっています. Pjaxの使用などページ遷移などの体感速度も大幅に向上しています. 各記録内のコメント(Disqus)を別途読み込むようにして,極力余計なリソースを読み込まないようにも工夫しています(コメントを最初から表示しないようにしたのはこのためです).
以上のような変貌を経て現在のデザインに落ち着きました. もちろん,各デザインの中でも細かな変更を幾度も行っていましたが,ここでは代表的と思えるデザインのみを厳選して紹介しました. このように比較してみると,現在のデザインが極めてシンプルかつモダンになったように思います. [喜びの表情]. もちろん,シンプルなったからといって利便性は損なわないよう,Archivesページから1クリック(最大でも3クリック程度)で望みの記録を見つけることが出来るように設計しています. また,連絡手段もコメント,フィードバック,メールなど多数の経路を用意し,風通しも良くなっていますので,何かご意見/ご感想でも頂けると私大変喜びます(にやにや).
さて,開設当初は趣味色の強い記録が多く,段々と学術的な内容が混じって来て,現在ではソフトウェアやDIYの話題が多くなって来ています. 開設当初の記録をいくつか読み返してみて"この雰囲気良いな！"と,我ながら思えるものもいくつかあり,忘れてしまっていた独特の個性を思い起こすキッカケにもなりました. これから先,色々とくだらない話題から極めてニッチな話題まで,良いなと思ったことをサラッと,あるいはガッツリと書いて行ければ良いなと思っています. これからもどうぞよろしくお願いします. そして自分に,6年間よくやった！
200
200
72
72