ブログのデザイン変更についての長々とした説明
本日、ブログのデザインをアップデートしました。 見た目の印象としては過去最大規模だし、特にスマホ版は一目見ただけで思いっきり変わっています。 とはいえ、こういうデザインとかのことを語っても喜ぶ人は少ないし、スマホアプリに慣れていればこの記事を読むまでもなくだいたいの使い方もわかるはずだと思うのですが、まあ私が説明したがりなのでいろいろ説明させてください。 多少なりとも技術的に参考になることを書ければと思っていますが……、ほとんどの方にとって基本的にはどうでもいいことばかりなので読み飛ばしてください。 ちなみに今までのデザインは、URLの最後に?theme=osd1608と付けると見られます(https://oswdiary.net/?theme=osd1608)。 いつまで残しておくかはわかりませんし、今後新しいカテゴリーとか追加した時には崩れると思いますが。
新デザインコンセプト
今回のリニューアルの目的は、 ①スマホ版をアプリっぽくする ②デザインを美しく、文章の邪魔にならないようにする ③記事切り替え時の動作や読み込みを軽くする ④その他、いろいろと使いやすくする という4点です。
①スマホ版をアプリっぽくする
先月、PWA対応を行って、「ホーム画面に追加」できるようになったので、自分で時々使ってみてはいるのですが、どうしてもアプリっぽくはならない。 後述の、barba.js(pjax)導入でシームレスな画面切り替えが行われるようにしたというのもその解決の1つですが、 デザイン面も思い切ってTwitterやFacebookのデザインに寄せたものを作りました。 今回のアップデートに関しては、基本的にスマホ版の再構築が主目的であり、PC版は後追いで整合性をとっただけです。タブ切り替えといった機能はそもそもありませんでしたし。

最上部にメニューバーを固定
アプリっぽさを演出する最大のものが、最上部に固定されるメニューバーです。 Androidでは最上部、iOSでは最下部固定がデフォルトなので、どちらにしようかと悩んだのですが、最上部固定の方がposition: stickyで簡単に扱えるというメリットもあったので上に。 ちなみにそれぞれのアイコンをタップするとタブが切り替わりますが、既に表示中のアイコンをもう一度タップすると一番上にスクロールします。これもTwitterっぽさ。メニューバーはアイコンのみに
ブログのメインコンテンツは本文ですから、できるだけ本文領域を広く取るために、文字ラベルはスマホ版では省略。 Twitterのようにわかりやすい機能があるわけではないのに、「記事」などを示すものがアイコンだけで良いのか? という疑問はあったのですが、記事は最初に表示されるからだいたいわかる、他のも開けばわかるだろうと。 「RECOMMEND」のアイコンは、よくあるカートにしてしまうとショッピングサイトっぽくなってしまうなと思ったので、買い物バッグに。 「NOW」に関しては良いアイコンがなかったので、もうタブの内容自体をプロフィールに変えるということで乗り切りました。 ちなみに一番右の「MENU」が、よくある三本線でないのは、一番左のアイコンと似ていたからです。記事以外のタブを独立
以前のデザインでは、せっかくタブで分けられているのに「メニューやおすすめ商品を開くためにはいちいちページのトップや一番下までスクロールするのが面倒臭い」という問題もありました。 これを解決するためのアイコンでしたが、タブといってもTwitterやFacebookやLINEのように並列のコンテンツというわけではなく、あくまで記事以外の3つはオマケですので、 記事の上に重なって出てくるようなポップアップエフェクトとデザインによって一時的なものであることを強調し、メニューから別のページに移動する際はいちいち閉じるようにしました。 あくまでメイン領域の内容を書き換えていた以前と違い、記事以外のタブは全てposition: fixedで上に重ねているので、記事自体は今読んでいる最中の箇所から動くこともありません。非常に便利です。 今のところあまり意味はないですが、例えばタブにオススメの音楽とかYouTube動画の埋め込みしたら良いかもしれませんね。音楽流しながらブログが読める。 今回のアップデートで、もう完全にモバイルファーストなブログになったというか、絶対スマホの方が読みやすくなっていると思います。 あとストーリーズはもうPC版捨ててます。4カラム構成にすべきじゃないかと思うほど。スマホで観てください。記事切り替え時の動作や読み込みを軽くする
これも単純に自分が使っていてストレスを減らすために。と同時に、読み込みが速い方がアプリっぽさも増すだろうという感じもあります。LazyLoadをAmazonプラグイン、YouTubeなどにも適用
これは厳密には先週からやっていたことですが。プラグインを新しくしました。 実は今回のアップデートで、初回のアクセスの読み込みは若干重くなっている可能性があります。ページ上部に広告が増えたので。それを軽減するための措置です。 特にSurfaceグッズ記事あたりで効果を発揮しているはず。barba.jsの導入
barba.js、pjaxについては前の記事で紹介しましたが、 サイト内で別のページに移動する際に、「Main(記事領域)」以外の部分を読み込み直さないようにしました。 RECOMMEND、PROFILE、MENUは同じです。以前のページ移動と同じくRECOMMENDの順番が毎回変わるのは、ページ遷移のたびにjQueryで順番をシャッフルしているからです。広告の増加
これに関しては弁明させてください。まず、記事ページだけを入れ替える都合上、記事最下部の広告を入れられない可能性があったので、これを削除する代わりに、よくあるレンタルブログのように、タイトル直下に広告を入れようと。 さらに言うと、「PC版のヘッダーの右側空いてんなあ」というのが気になってたので、PC版のレイアウトとしてもちょうどいいかなと。 ……ところが、なんか試行錯誤してたらbarba.jsで読み込みつつも記事下部の広告をその都度差し替えられたので、記事下部の広告も残りました。その代わり、PC版ではサイドバーに入っていた広告を、スマホ版ではそもそも読み込まないようにしました。 で、さらにおすすめ商品リストの中にも混ざっています。これは、他の方のブログでたまに見かける、「広告っぽくない広告」を試してみたかったというのが大きいです。 その割に広告だけ背景グレーにしているのは私が良心と葛藤した結果でした。 このあたりの広告はちょっと1ヶ月くらい様子見して、あんまりクリックされてなかったら消す感じで……。邪魔にはならないと思うので、許してください。デザインを美しく、文章の邪魔にならないようにする
自分のブログを特にスマホで見ていてふと気になったのが、「他のブログと比べて色がうるさい」ということでした。 理由は明白。赤です。文章の周りが赤いのは明らかに鬱陶しい。 コーポレートサイトであればあのような色使いもアリでしょうが、文章を読ませるだけのブログであそこまで色がうるさいサイトはあまりない。 メイン領域では本文の周りをグレーにしよう、というところから今回のデザインを進めていきました。
