ブログについて 4年前

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

本日、ブログのデザインをアップデートしました。  見た目の印象としては過去最大規模だし、特にスマホ版は一目見ただけで思いっきり変わっています。  とはいえ、こういうデザインとかのことを語っても喜ぶ人は少ないし、スマホアプリに慣れていればこの記事を読むまでもなくだいたいの使い方もわかるはずだと思うのですが、まあ私が説明したがりなのでいろいろ説明させてください。  多少なりとも技術的に参考になることを書ければと思っていますが……、ほとんどの方にとって基本的にはどうでもいいことばかりなので読み飛ばしてください。  ちなみに今までのデザインは、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」の「月を選択」のフォントが馴染んでいたり、 ...

comment  0
favorite  0
ひとりごと 4年前

再発見

まず昨日の記事の話。  アンナチュラルもanoneも4話が殊更評価が高いので、あの記事どうなんだろう……と思いつつ、どうしても我慢できないので書きました。  言いたいことが上手くまとまらなかった感じはあります。というより自分でも結論が出せていないし、  「不快感を与えることそのもの」と「不快感の与え方、表現の仕方」という2つの問題を切り分けずに書いてるので。  自分の嗜好として何も起きない作品が好きなわけではないんですが、解決できない社会問題を引っ張ってきてフィクションの中だけで通る都合の良い理論を持ち出してハッピーエンド、みたいな作品はどうも納得いかないんですよね。『シン・ゴジラ』とかまさに自分の大嫌いなやつ。  ただシンゴジラもそうだし『半沢直樹』とかも人気なので、そういうものがエンタメとして求められているんでしょうけど。  だから社会派じゃなくてもっと個人の問題になってる方が好きであって、例えば『Just Because!』みたいな恋愛と進路の話はまさに。リアルであることとリアリティの差というか、ジャスビコは全然現実にあり得る話じゃないですか。  その流れで言えば『禁書目録』とか『涼宮ハルヒ』とか……要するにセカイ系か。あんまり話に出てくる人間の規模が大きくなっちゃうと、そんなに主人公に都合よく世界が回らないだろう、実際そうなったらもっと容易く主人公は潰されちゃうだろうと、シンゴジラ観てて思いました。  あとは『ろこどる』『宇宙より遠い場所』みたいな成長物語も。ろこどるというアニメは凄くて、12話通して悪いやつが一切出てこないし嫌な展開も一切起きていないのに、ちゃんと12話終わった頃には主人公たちが成長している。  ただそれをなんか悪い大人たちの権力で潰される、そこに抵抗する主人公たち、みたいな展開にされると純粋に胸糞悪くなっちゃうんですよね。『花咲くいろは』みたいな。  それは主人公の個人的な問題じゃなくて、悪い大人が悪いんだからそいつらが罰せられないと納得できないでしょう、と。たとえ現実世界がそうなっていないとしても。それは「いじめはいじめられる側が悪い」論理と何も変わらないでしょう。 --------------------  私の記憶が正しければ、今使っているisai V30+で、ガラケー含めて6台目の機種になるのですが、  防水ガラケーを買った中3の頃から、一貫してお風呂にスマホを持ち込んでいます。  保障対象外の使い方ではあるのですが、防水なこともあって一応壊れたことはない……はず。もしかしたら実は浸水のせいでじわじわ壊れたのに気づかなかったパターンはあるかもしれませんが。  で、KYOCERAさんはそのあたりの信頼感が高くて、特に去年まで使っていた「DIGNO rafre」は「石鹸で洗える」「温水で洗える」をウリにしている、もうお風呂で使えと言わんばかりの設計。  しっかりキャップで覆われているので、浴槽に浸かってスマホを弄りながら居眠りして浴槽の中に落としてしまっても平気でしたし、水滴で誤タッチが起きることもありませんでした。  それに対して、今回買い換えたLG「isai V30+」はお風呂という観点ではちょっと怪しくて、  もちろんグローバルモデルなのでお風呂大好きジャップに合わせて設計されていないのは当たり前なのですが、  濡れた手での操作ができるようにある程度調整されていたrafreと違って、例えば水滴が画面の一部についていると常時タッチ判定されるし、濡れた手では全然操作できない。  キャップレス防水なのも便利ではあるのですが、水が溜まると乾くまで充電ができなくなる(もちろん故障の原因なので当たり前)という致命的な欠点もあり。  そうやって1ヶ月使ってみた結論として、ちょっとV30+をお風呂に持ち込むのは危険だなあと。  今まで使っていたスマホより遥かに高額なので、あまりリスクのある使い方をしたくないというのもありますし。  ただお風呂でこれから一生スマホを見ないというのもちょっと寂しい……と考えたところで、ふと、DIGNO rafreも手元に残っていることを思い出しました。  家のお風呂ならもちろんWi-Fiも繋がる。ブラウザもTwitterもYouTubeもAmazonプライムビデオも見れるし、OneNoteに考えたことをメモるのも可能。  isaiに買い換えた主な理由は処理の重さでしたが、別にお風呂の中で重い処理のゲームをするわけでもない。  あと、外出を考えないならLINEとかGear Manegerとかをアンインストールして常駐アプリを減らせる。  というわけでrafreはお風呂専用スマートフォンとして活用することにしました。  意外としっくりきます。何だかんだisaiより一回り小さいので手に馴染む。画面が広い方が便利ではあるけど、やっぱり持つ分にはこのサイズの方が好きです。色も正直ホワイトの方が好き。  ただisaiに慣れすぎて、isaiであればホームボタンがある部分をタップしようとしてauロゴの付いたただのベゼルに指が当たることがよくあります。 --------------------  引っ越してから3ヶ月ほど経ちましたが、新しい家の近くには、徒歩5分ほどのところに、サイゼリヤとマクドナルドとドトールがあります。  このうち、ドトールは19時に閉店するという欠陥があるのでほとんど使えず、必然的にSurfaceを持ち込んで作業するならマックかサイゼの二択になります。どちらもコンセントはありません。  で、マクドナルドはとにかく単価が安い。チキンクリスプ+コーヒーで¥200、といいつつお手頃バーガーにまんまと釣られるのでだいたい¥300くらい。ただ、コーヒーSなのでそんなに長くはいられない。  一方、サイゼリヤはドリンクバーがある代わりに、毎日利用するにはちょっと単価が高い(辛味チキン+ドリンクバーで¥500)。  という差があったのですが、昨日とある発見をしまして、  それは食事ではなくカフェ的に使うなら、フォッカチオで十分じゃないかということ。  ということで普段あんまり頼まないフォッカチオを頼んだんですが、これがもう普通に美味しい。しかも店内に置いてあるオリーブオイルをかければ単体で満足できる。  そして119円という単価。ドリンクバーと合わせて¥302。ドリンク飲み放題だし、どうしても肉を食べたい場合以外はほぼマクドナルドの上位互換!  もう今後はサイゼにお世話になりまくる気がします。……元々お世話になりまくってたんですけど。 --------------------  サイトのPWA対応自体はもうこれ以上やれることがなさそうなので満足したんですが、サイトを高速化する試みはいろいろ続けていて、  とりあえず今やろうとしているのは「Pjax対応」です。  このブログを例にして簡単に言えば、「次のページに移動する時に、NowやRecommendやMenuは共通なんだから、Entryタブの内容だけ書き換えれば速いよね?」という技術。Google Mapとかに使われていたりします。  まぁ技術自体は知ってるというかむしろ古いくらいなんですけど、新しいReactとかはWordPressとそんなに相性が良くないし。  で、今Pjaxを調べてみたらbarba.jsというライブラリが登場していたようで、これを使うと驚くほど簡単に導入できるようです。技術は進化していくなあ。  ただGoogle Adsense(広告)の読み込みやPocketボタンなどが上手くいかない問題があって、このあたりの解決の目途が立ったら導入するかもしれません。  あ、ちなみに先んじて『a3 lazy load』というプラグインを導入しました。  画像やYouTube、Amazonなどの読み込みを遅らせる(画面内に入ってから表示する)というやつで、  特にAmazonリンクの多いSurface記事や、動画の多いベストソング記事あたりは、これで相当表示が軽くなったんじゃないかと思います。  これであとはbarba対応ができれば爆速で動くようになるので、あとはスマホ版の右上にメニューボタン復活させれば、アプリっぽく使えそうな気がします。  でもいっそYouTubeやTwitterみたいに下に並べるのも良さそう?「HOME」「RECOMMEND」「NOW」「MENU」みたいな。ページトップへ戻るボタンも常時あったら便利な気がするし。  ……そもそもNOWタブが絶対要らないんですけどね。Twitterは懲りたのでinstagramでも始めて埋め込もうかなあ……。 --------------------  気づけば2月毎日更新してます。  2月に入ってからバイトがなかったというだけなので、たぶん今週は普通に更新しない日も出てくると思いますが。そもそもそんなにネタもないですしね。 ...

comment  0
favorite  0