Our Story's Diary

こころを動かされたものと、動いたこころのこと

ブログのデザイン変更についての長々とした説明

 本日、ブログのデザインをアップデートしました。

 見た目の印象としては過去最大規模だし、特にスマホ版は一目見ただけで思いっきり変わっています。

 とはいえ、こういうデザインとかのことを語っても喜ぶ人は少ないし、スマホアプリに慣れていればこの記事を読むまでもなくだいたいの使い方もわかるはずだと思うのですが、まあ私が説明したがりなのでいろいろ説明させてください。

 多少なりとも技術的に参考になることを書ければと思っていますが……、ほとんどの方にとって基本的にはどうでもいいことばかりなので読み飛ばしてください。


 ちなみに今までのデザインは、URLの最後に?theme=osd1608と付けると見られます(https://oswdiary.net/?theme=osd1608)。

 いつまで残しておくかはわかりませんし、今後新しいカテゴリーとか追加した時には崩れると思いますが。


新デザインコンセプト

 今回のリニューアルの目的は、

①スマホ版をアプリっぽくする
②デザインを美しく、文章の邪魔にならないようにする
③記事切り替え時の動作や読み込みを軽くする
④その他、いろいろと使いやすくする

 という4点です。

screenshot


①スマホ版をアプリっぽくする

 先月、PWA対応を行って、「ホーム画面に追加」できるようになったので、自分で時々使ってみてはいるのですが、どうしてもアプリっぽくはならない。

 後述の、barba.js(pjax)導入でシームレスな画面切り替えが行われるようにしたというのもその解決の1つですが、

 デザイン面も思い切ってTwitterやFacebookのデザインに寄せたものを作りました。

 今回のアップデートに関しては、基本的にスマホ版の再構築が主目的であり、PC版は後追いで整合性をとっただけです。タブ切り替えといった機能はそもそもありませんでしたし。

Screenshot_2018-02-10-14-56-10 Screenshot_2018-02-10-14-54-33

 参考までに。比較すると広告の邪魔さが際立ちます。


最上部にメニューバーを固定

 アプリっぽさを演出する最大のものが、最上部に固定されるメニューバーです。

 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ヶ月くらい様子見して、あんまりクリックされてなかったら消す感じで……。邪魔にはならないと思うので、許してください。


デザインを美しく、文章の邪魔にならないようにする

 自分のブログを特にスマホで見ていてふと気になったのが、「他のブログと比べて色がうるさい」ということでした。

 理由は明白。赤です。文章の周りが赤いのは明らかに鬱陶しい。

 コーポレートサイトであればあのような色使いもアリでしょうが、文章を読ませるだけのブログであそこまで色がうるさいサイトはあまりない。

 メイン領域では本文の周りをグレーにしよう、というところから今回のデザインを進めていきました。

Screenshot_2018-02-10-14-57-04 Screenshot_2018-02-10-14-57-56

 ヘッダーも含めて、グレーとパステルな水色を基調にしたことで、だいぶ落ち着いて見えます。特に記事を読んでいる最中、非常に目に優しいブログになったのではないかと思っています。


ベースカラーを水色系に変更

 JUGEM時代からここ何年も、緑色をメインに押してきましたが、そろそろ飽きてきたこともあって、思い切って水色に変更。

 記事ページの下部にある「関連する記事」とかもヘッダーと同じ系統の水色になっています。

 赤・青・緑・水色といったタブ領域ごとの色は残していますが、特にスマホ版ではほとんど目立たない感じに。


マテリアルデザイン

 今回のデザインについて参考にしまくったのがこの記事です。

 Webサイトを使いやすく!UIデザインのCSS小技テクニック21個まとめ(実例サンプルコード付)

 特にドロップシャドウの付け方やアイコンの色などを参考に。

 リニューアル前はブログタイトルの影ももっとはっきりしていたのですが、薄めにしました。

 他にも、カード状のレイアウトも以前より立体的になっています。


その他のデザイン調整

 「NEW POSTS」などのヘッダーは、ちょっと恐ろしいほどスタイリッシュになった気がします。お気に入りです。

 太字ってあんまり積極的に使うものじゃないなと思いました。PC版もアイコンが付いてちょっと見やすくなった気がします。

 あと、これは言わなくて良いことだと思うんですけど、レイアウトでは高さを揃えることを意識しています。

 PC版で言えば「NEW POSTS」「FAVORITE ITEM LIST」といったヘッダーが完全に横並びになるように調整していますし、スマホ版でタブを切り替えた際の「STORIES」「NEW POSTS」などの文字も、ズレないように細かく調整しました。フェードで切り替わる時に文字が動かないというのは、結構大事だと思ってます。


 細かいところで言うと「ARCHIVE」の「月を選択」のフォントが馴染んでいたり、


とにかく使いやすくする

 その他、この際だから変えてしまおう、みたいなところは盛り込みまくりました。主に自分用です。

記事ページの上部にもナビゲーションバーを設置し、文字サイズを小さく、日付を追加

 他のブログだとあったりなかったりですが、やっぱり「次の次の記事を見たい」的な欲求はたまにあるので、連打で進めたら便利だなと。厳密にはタップする都度消えるのですが。

 あと、よく思うんですけど、「前の記事」「次の記事」って古いのか新しいのかどっちだよ!!ってなりません?

 OLD/NEWの方が絶対わかりやすいのに、と思いつつ、微妙にダサかったので、日付を入れてみました。わかりやすい。

 記事上部のナビゲーションバーに記事タイトルを入れていないのは、長いタイトルでデザインが崩れるのが嫌だったからです。さっさと本文に行ってほしいですし。


STORIES周り

 従来のNOWタブはTwitterの代用のイメージでしたが、Instagramのストーリーズを意識して、従来の直近5件ではなく、投稿から1週間で消えるようにしました。詳しいことは昨日の記事に書いたので割愛。


その他の内部処理

 皆さんにあんまり関係ないところで言うと、ページ内で使われていたマテリアルアイコンをsvg埋め込みから全てアイコンフォントに変更したとか、昔作って継ぎ接ぎだらけだったjavascriptの処理をわかりやすくしたとか、修正日の日付が表示される記事のレイアウト調整とか、まあいろいろあります。最初に作ったのはもう1年半前にもなるわけで、適宜現代化していかないと辛い。

 あと、記事アクセス数のカウントがうまくいってない疑惑があるので、ちょっと調整中です。

——————–

 今回のデザインは、ある意味で一つの完成形ではないかと思っていて、自分がこのサイトで元々やりたかった、記事以外のコンテンツも楽しんでもらいたい、という理想にかなり近づけるのではないかと思っています。もちろん、ストーリーズをこまめに更新する前提ですけどw

 同時に、「他にはない、タブ切り替えのあるブログ」というアイデアが、2016年にWordPressでこのサイトをイチから設計する際の大きなポイントだったのですが、それも中途半端な状態から、アプリ的なレイアウトとアニメーションを加えたことでうまく形にできたのではないでしょうか。

 今のところは非常に気に入っています。いいUXというのは手触りが良いものだと考えていて、例えばWindows10のアクションセンターとか、意味もなく出し入れしたくなるし、YouTubeで動画再生中に別の記事を検索したら動画が縮小してワイプになる動きとかも素晴らしいし、

 そういう点での気持ちよさを追求したかったので、例えばタブを切り替えた時に「FAVORITE ITEM LIST」「STORIES」「SEARCH」が動かないようにしたことも含めて、意味もなく開いて動かしたくなるサイトになったと思ってます。私だけかもしれませんけどw

 とにかく愛着のあるデザインですので、気に入ってもらえたらとても嬉しいですし、もっと記事を読んでくれる方が増えたら最高です。


 このアップデートを踏まえて今後ブログで書いていきたいこととかそういうコンテンツ面の話は明日します。それでは。

同じタグの記事

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です

CAPTCHA


このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください

    Favorite Item List

  • Apple AirPods

    Apple AirPods 完全ワイヤレスイヤホン Bluetooth対応 マイク付き MMEF2J/A

    Appleの左右分離型ワイヤレスイヤホン。コードから自由になる解放感、バッテリーの持ちも良好、完全ワイヤレスイヤホンの決定版。Android・Windows・iOSを問わず、一度ペアリングすればどのデバイスともスムーズに切り替えできる、Appleらしからぬ懐の広さも魅力。レビュー記事

  • Surface Pro

    マイクロソフト Surface Pro [サーフェス プロ ノートパソコン] Office H&B搭載 12.3型 Core i5/256GB/8GB FJX-00014

    タブレットにもノートPCにもなる最強ガジェットの最新モデルにして完成形。「これさえあれば何もいらない」のコピー通り。値段も高いですが満足感も非常に高い。
    レビュー記事

  • 青春ブタ野郎はバニーガール先輩の夢を見ない

    青春ブタ野郎はバニーガール先輩の夢を見ない (電撃文庫)

    『さくら荘のペットな彼女』『Just Because!』の鴨志田一さんの傑作ラノベ。学校社会の独特な空気感と、そこに縛られた人々の心理を驚くほど見事に描いています。
    ヒロインたちも全員可愛く、毎巻あっという間に読み終えさせられます。アニメ化も決定し、作品も新展開に突入して今後がますます楽しみなシリーズ。

  • Nintendo Switch (Splatoon2セット)

    Nintendo Switch スプラトゥーン2セット 【Amazon.co.jp限定】オリジナルスマホ壁紙 配信 ・Nintendo Switch Online 「個人プラン3か月(90日間)」利用券付き

    カタチを変えて、どこへでも。軽快に立ち上がって、自宅でも旅行先でもファミレスでもSplatoonが遊べる嬉しさ。

  • image (Maison book girl)

    image 【初回限定盤】

    ニューエイジ・ポップ・ユニットMaison book girlのメジャーフルアルバム。変拍子詰め合わせでありながら全く違和感を挟ませない心地良さ。アイドルソングの枠を超えて、現代音楽の最先端を突き進む1枚。

  • Xbox One S 500GB (Minecraft 同梱版)

    Xbox One S 500GB Minecraft 同梱版 (ZQ9-00068)

    Microsoftのスタイリッシュな次世代機。小型軽量化して4K/HDR映像とUHD BD(4k Blu-ray)に対応。BDプレーヤーとして1台持っておいても損はない。より高性能なゲーム機が欲しいならXbox One Xも。
    レビュー記事

  • ドンキーコング トロピカルフリーズ

    ドンキーコング トロピカルフリーズ - Switch

    ディクシーコングと『スーパードンキーコング2』の作曲者・David Wiseが復活し、ビジュアル・サウンドの両面でレア社時代の空気感を更に強く受け継いだ、2Dアクションとゲーム音楽の最高峰。テンポの良い高難度2DアクションはNintendo Switchとの相性も抜群。

  • Kindle Paperwhite

    Kindle Paperwhite Wi-Fi、ブラック

    何冊も持ち運べて、いつでも読み返せる。片手で読書ができる。使うまではピンと来ないけれど、一度使い始めると手放せない。

  • Splatoon 2 (スプラトゥーン2)

    Splatoon 2 (スプラトゥーン2)

    ゲームの新たな可能性を提示した、2010年代最高傑作の続編。面白いに決まっているし、Switchごと買わない理由もない。

  • BOOTLEG

    【早期購入特典あり】BOOTLEG(ブート盤 初回限定)(CD+12inchアナログ盤ジャケット、アートイラスト、ポスター、ダミーレコード)(フィルムシート付)

    米津玄師さん待望の4thアルバム。『LOSER』『ピースサイン』などのシングル曲から『砂の惑星』カバーまで。

  • 溺れるナイフ (Blu-ray & DVD)

    溺れるナイフ スタンダード・エディション [DVD]

    めまぐるしく変わるシーンとBGMの妙によって、一瞬たりとも目を離させない密度を持った映画。揺れ動く思春期の少女の感情を見事に描く、山戸結希監督の圧倒的な才能に驚かされます。