サイトのデザインを少しだけ変更したので、やった事まとめ

ロゴの変更

なぜ変えたか

以前のロゴは、天秤をイメージしたシンボルに0llo.comとサイト名を入れいていたが、今回のものは"BIG OR SMALL"と英字をいれて天秤シンボルを廃した。

このサイトのドメインで、管理人である私の名前にもなっている「0llo」は、正しく表記すると「0||o」で、「ビッグ・オア・スモール」と読む。「||」はプログラム言語のバイナリ論理演算子で「論理和(OR)」を表す。

0とoは丸のサイズの違いでbigとsmallと当て字にして読む。

つまり元々このサイトは「ビッグオアスモールドットコム」と呼ぶのであったが、サイトのどこにもあえてその呼び方を入れていなかった。自分の備忘録として存在しているサイトなので、自分さえ分かってればいいという思いもあったし、サイトの呼び方や名前なんて誰も興味無いだろうし説明する必要もないだろうと思っていた。

けれど運営から2年半以上がたって、少し心持ちが変わってきた。なんとなくサイトをもうすこし説明的にした方が良いと思った。

要はただの気分。

ベースフォント

新ロゴは、「BIG OR SMALL」の部分と「0||o」の部分で2種類別のフォントを使用した。

「BIG OR SMALL」の部分は"Roboto"フォントの"Black"を採用した。見出しロゴなので幅が太めでシンプルに力強く見える英字フォントを探していた。元々このブログを始めた時は、自分の備忘録、メモ書き感をだすために、あえて明朝フォントをサイトのベースフォントに設定していたが、やはり小さめのディスプレイだと見にくいというのがあってゴシック体にもどしたという経緯がある。そのメモ書き感を再びここでだしてもよいいかなと、handwritingやserifの類からもフォントを検証していたが、結局シンプルに見やすいことを重視してsan-serifの書体にした。そもそも少しサイト名を説明的に読ませたかったわけだし、ここは遊ばせないで真面目にやっとこうという気持ちになったわけである。

それに対して「0||o」の部分は、読ませようなんてかけらもおもわずにフォントを決めた。そもそもこの字ズラがパッとみ意味不明感あるし、その意味不明感こそある意味このサイトらしさというか、ドメイン名にもなっている核の部分だと私はおもっている。選んだフォントは"Anonymous Pro"の"Regular"。冒頭でも述べたが、"0||o"とはプログラム表記である。なので書体はMonospaceの中から選ぶ事は決まっていた。コードの一部に見えるような表記にしたかったのだと思う。最終的な決めてはフォントの名前、「Anonymous」。

フォントタイプについての補足

上記ででてくる4つのフォントタイプ、Serif, San-Serif, Handwriting, Monospaceについて雑に解説する。

Serif

欧文体において、和文体においての明朝的存在。文字端に「マチ」部分だったりが存在し、横ストロークは細く、縦ストロークは太く表現されている。

San-serif

"san"とはフランス語で"none"的な意味らしい。つまり上記のserifに存在する特徴をなくしたものをいう。線の太さは一定で、トメハメも存在しないゴシック体的存在。

Handwriting

手書き風文字。

Monospace

通常デザインされているフォントは、文字並びと文字それぞれの持つバランスを考慮してあるため、各1文字が占有する空間幅が一様でない。文字の形によっては、同じフォントサイズで文の中に解けた時に幅が小さいほうが収まりが良かったりする。"i"みたいな文字を"m"とおなじ横幅で表示すると並んだ時にバランスおかしいという事(なので"i"は幅が小さくないといけない）。Monospaceとは、あえて1文字1文字が文の中で占有する空幅を一定に保っているフォントである。プログラミングにおいてよくつかわれる、というのは、ようは文全体として見た時に、方眼紙の中に文字を埋めていくような見た目になる為、何行目の何文字目にどの文字があるのかの確認が非常にしやすいからである。

レイアウトの変更

細かい微調整をした。このサイトのレイアウトは、元々私がフルスクラッチでSASSで記述しているが、引き続き同じファイルの追記と修正でレイアウトを修正した。

h2とh3タグの見た目修正

以前はh2タグはtext-align:centerで中央揃えにし、太めの角丸黒線ボーダーで囲っていたがそれをやめた。h2は記事の中での1番大きな見出しなので取り分けsectionごとの区切りを明確にするべくとの意図でやっていたのだが、「やりすぎかもな〜」と以前からすこしおもっていたので、主張を控えめにした。中央揃えをやめて、他の文章とおなじ左揃えにしたことで少し落ち着きを取り戻したかもしれない。最近あらゆる著名人がnoteに寄稿しているのもあり、note的なシンプルさも少し意識している。

h3はh2をおとなしくした事により相対的にいじる必要がでてきたエレメントである。以前のままのh3だと、下手したら現在のh2より目立っていたかもしれない。なのでボトムのボーダーラインを3pxから1pxと細めに設定し、文字サイズも少し小さくした。

ヘッダーのソーシャルアイコン

色を黒→薄めのグレーにし、サイズを小さくした。2年半運営してみてわかったが、おそらく想像以上にここのボタンは押されない。ていうか誰も押してない。押してない割に、常時表示される場所で結構濃い目の黒で主張している気がしているので落ち着かせた。

別に削除しても良いかなと考えたが、とりあえずもう少し残して様子を見てみようと思った。

記事上部のソーシャルアイコン

記事を各プラットフォームにシェアしやすいように、プラットフォーム毎のアイコン（LINEやfacebookやTwitter）などを設置していたが、全て削除した。

おそらく誰もこのボタンをおさない。「シェアしてくれよ〜」というあざとさが全開だったきがする。誰も押していないならメインの記事にたどり着くまでのスクロール量をユーザーに余計に課すだけなので排除することにした。

もともとどこかのサイトのABテストで、「share系のボタンは記事の初めと終わり両方においた方がshareされやすい」という統計データを公表していたので自分もそれにならってみたが、自分のサイトに当てはまらなかったようだ。

モバイル版の記事の左右の余白

気持ち余白を多めに取った。左右のpaddingの量を増やした。noteの影響をすこしうけている。

実はサイト公開当時は今よりも余白が多かった。が、どこかしらのタイミングで「他のブログの見た目にもう少し寄せた方がユーザーもよみやすいんじゃないか？余白の大きさも独自規格より世間の標準にあわせたほうがよいかもしれない」という心理が働いて調整をはかったのだった。が、それをまた元に戻して独自規格に走っているわけである。

個人的には余白は多い方が文字は読みやすいと思う。が、左右の余白を多くとればその分記事は縦に伸びる、つまり読み手のスクロール量を増加させる事になる。

いろいろトレードオフやな。うちの記事は俺がめんどくさがって画像を挿入しないので、文字ばっかになりやすいし、余白の調整は読み手使い勝手にダイレクトに影響がある。

sassの記述的には、単位はvwを採用し、desktopとtabletは一緒の値、mobileは別の計算式で余白を算出している。通常この手のサイズはpx単位で細かく指定したほうがいいのだろうが、実験的に閲覧者のデバイスの横幅に対して相対的な値で余白を算出してみている。pxで指定しているほかの要素もあるのでちょっとチグハグである。

PHPを5.xから7.2に

WordPressの管理画面で警告がでていたので、更新。幸いウチで導入している全てのプラグインに互換性が認められた為、現状問題は特に何も起きてない。