モバデビのデスクトップ版/スマホ版デザインをマイナーアップデートしました
いつもモバデビにアクセスいただき、ありがとうございます。
日頃ご愛顧いただいている方には、すでにおわかりのことだと思いますが、当ブログのデスクトップ版とスマートフォン版のデザインを、マイナーアップデートしました。
デザインの変更ポイントなどをちょろっと解説しておきたいと思います。
スマートフォン版のデザインを共通化
今回のマイナーアップデートは、珍しくデスクトップ版とスマートフォン版を同時に行いました。
実を言えば、スマートフォン版は公開当初からほとんど基本形は変えず、細々した変更をちょいちょい重ねてるだけだったんですよね。
逆にデスクトップ版は、何度か大きくデザインを変えており、スマートフォン版公開当初は共通化されていたデザインブランディングが、異なるものになってしまいました。
個人的にちょっとコレはよろしくないなーということで、スマートフォン版のデザインをデスクトップ版に寄せるかたちで、デザインブランディングの共通化を再度図り直した次第です。
コンテンツヘッダーのデザインを共通化
各記事のヘッダーデザインをデスクトップ版と共通化させました。ちょっと細かいところは違いますが、受ける印象は同じ方向にしたつもりです。
以前はサムネイルにタイトルが並ぶというオーソドックスなものでしたが、デスクトップ版と共通化させたことで、タイトルのフォントサイズが大きくなり、同時にリンクのタップエリアも広くなっています。
また、以前のスマートフォン版では、ソーシャルへのシェア機能をコンテンツ一覧に実装していなかったんですが、デスクトップ版と同じレイアウトの独自ボタンを配置し、わざわざ記事ページに入らなくても、各ソーシャルメディアや「あとで読む」に投げることができるようになりました。
注目記事をタイトル下に配置
デスクトップ版ではコンテンツヘッダーの上に置いている注目記事を、記事ヘッダーの下にレイアウトしました。
以前はメインコンテンツの下にサムネイル入りで置いていたんですが、シェア合計数を新たに入れて、テキストリンクのみを3件並べています。
公式ボタンを撤廃し独自ボタンに
デスクトップ版では、だいぶ以前に各ソーシャルメディアの公式ボタンを外し、「SNS Count Cache」を利用した独自ボタンへ変更していましたが、スマートフォン版は今回のマイナーアップデートで漸く変更となりました。
ヘッダーとは違い、Facebook、Twitter、はてなブックマークに絞り、シェア数付きで設置。またスマートフォン版のみLINEへ送るボタンを設置しました。
「LINEに送る」ボタンをタップすると、LINEアプリが起動します。
プロフィールエリアのリデザイン
デスクトップ版とスマートフォン版で共通して変更したのがプロフィールエリアです。デスクトップ版ではサイドバー、スマートフォン版だとページ最下部にレイアウトされているところですね。
画像左がデスクトップ版のサイドバーのもの、右がスマートフォン版の最下部のものです。
最近、ちょこちょこ見かけるソーシャルメディアのユーザーページっぽいデザインにしてみました。カバーがあって、ユーザーアイコンがあって･･･みたいなやつですね。
で、このカバー画像にちょっとした仕掛けをしてあります。
このカバー画像、一定のタイミングで自動変更されるんですよ。
どういうことかと言いますと、実はこれ、Instagramに投稿したものなのです。InstagramのAPIを使って、僕のアカウントに投稿した最新画像URLを取得、プロフィールエリアのヘッダーに背景画像として入るようにしています。
最近、愛息子を毎日撮っているので、必ず1日に1度は変更されるというわけ。
LIGさんの以下の記事を参考にしつつ、組み立ててみました。
と言っても、この方法だと常にアクセス時にInstagramとの通信が発生し、処理に時間がかかってサイト表示に大きく影響が出るため、WordPressのTransients APIを使って4時間に1度取得し、DBに一時保存されるようにした上で実装しています。
なので、上の記事のコードとはまるっきり違うものになってるわけですが、このあたりについてはそのうち記事化するかもしれないししれないかもしれません。
DBにキャッシュ化してるとは言っても、やっぱり多少表示速度に影響は出ているので、あまり遅く感じるなら取っ払う可能性がなきにしもあらずなので。
この他にもこまごまと変更しています
ということで、見える範囲で大きく変わったかなというポイントを解説してみましたが、実際にはもっと細かい部分で手を入れているところもあります。
また、実際のところスマートフォン版はまだ未アップデートのところもあったりするので、そのへんも引き続き変えていく予定です。
その前にやらにゃならんこともあるので、追々。
今回、こうしたマイナーアップデートをかけたのは、今後うちのコンテンツが、外向きに配信される可能性が出てきたので、その辺を考慮してのものです。
特にスマートフォン版はそれによる影響が考えられるので、表示の高速化も含めて手入れをしました。
ここのところアクセスの半数以上がスマートフォンということもあったので、手を入れたのはいいタイミングだったかなとも思います。
閲覧時に気になるところがあったら、ぜひお知らせください。鋭意改善の検討をしていきますので。
ということで、今後もモバデビをよろしくお願いいたします。