長々と書いてきたリニューアル告知も今回でおしまい。明日からは完全に通常エントリに戻ります。てなわけで、残り全部書いてかなきゃいけないんで長くなるけど勘弁してね。
まずは全体のデザインコンセプトから書いていきます。
ま、デザインコンセプトっつーかキーとなるカラーを決めるとあとあとやりやすくなるのですが、今回、Yabunira全体のイメージを司るカラーに「暗い水色」を採用しました。
実はこの色、アタシが大好きなロンドンにあるカフェの「カフェネロ」からインスパイアを受けたもので、シックなんだけど地味まではいかない、ということで決めた。
ちなみにこの色です。
続いてYabuniraのロゴですが、これは相当悩みました。
いやね、ロゴこそシックにしようと思えばいくらでもシックに出来るんだけど、やっぱね、グラフィックデザイナーの端くれとして＜フック＞もないとな、とかなり試行錯誤しました。
アタシはね、Yabuniraに限らずロゴっつーかマーク作りのコンセプトとして「単色でも成立するデザイン」を絶対的指標にしています。
それこそ昔のAppleのマークみたいなね、あそこまでパキッとしたレインボーカラーならそれはそれでアリなんだけど、やっぱり使いづらい。つか単色のがどんな場面、それこそモノクロページであろうが写真の上に乗せる形だろうが、んでどんな色にしようがサマになるので使いやすいのです。
単色で、それなりにシックで、しかもフックがあるってのはやっぱ難しい。
正直言えば、Yabunira、んで同コンセプトのDistrict、あと「DRIF BEATS」はメチャクチャ凝ったけど、あとはわりと「妥当なライン」くらいの感じの労力で済ませました。
とくに「CRAZY BEATS」は一度、ラルフローレンふうの凝りに凝りまくったロゴを作ったんだけどね。ちな↓こんな感じ。
でも直前でボツにして、あのシンプルきわまるロゴに変えた。決定稿は凝ってないどころかあまりにもざっくりしたものなんだけど、どう考えても決定稿のがクレージーキャッツっぽかったからね。
次。
UIで一番変わったのは「すべてのエントリにタグ付けをした」ってことでしょうか。
今まで、わざわざ序文みたいなのを用意して、それをエントリリスト及び本文の前、んでツイートに表示させてたのですが、それを一切止めた。わざわざ序文を書かなきゃいけないっつー手間なわりは、序文だけ見ても内容が推測出来ないし、だったら山ほどタグが付いてる方が「何について書いてるか」の全貌が掴みやすいだろう、と。
言うまでもなく、過去のエントリまで＜すべて＞タグ付けをする、という労力はハンパじゃなかった。暇を見つけては読み返してタグを付ける。これをかれこれ2ヶ月くらいやってた気がします。
それはともかく、タグは全部で3種類っつーか3タイプあります。
すべて色分けしてるのですが、バックがコンセプトカラーである暗い水色のタグは文字通り、同じタグが付いたエントリをまとめたページに飛べます。
赤色バックのは、各サイトのトップページだったり、はたまたデータベースページに飛ぶためのタグです。
灰色のは、いわばダミーです。つまりどこにも飛ばない（厳密には表示されてるページの先頭に飛ぶ）。しかしこの灰色にあたるタグは当該エントリの内容が如実にわかるような、ある意味実際的なタグなので、これはこれで必要です。
こういう、タグを使うことで各ページを有機的に絡めるっていう＜仕組み＞は昔からあるし、んでそのほとんどはウェブアプリケーションで自動生成されている。
しかしアタシの場合っつーかYabuniraの場合、自動生成なのは自動生成だけど、すべてローカルで生成した後サーバーにアップしています。
これはアタシがウェブプログラミングに疎いこと、んで何かあった時に対処しやいすいのです。
かなり面倒な仕組みっちゃ仕組みなんだけど、現今アタシの能力で可能なベストのやり方なので。
他、何かあったっけ、ああそうそう。
Yabuniraでは初めてハンバーガーアイコン＆スライドサイドメニューを採用しました。これは昨今の潮流にしたがって、です。
って、意味わかります？
ためしに左上端にある、ハンバーガーアイコン、つまり「≡」をタップしてください。すると左端からスライドでメニューが表示されるはずです。閉じる時はメニューでない、グレーアウトされてる箇所をタップ（クリック）すれば消えます。
もうひとつ、これもヘッダーのことなんですが、今回各エントリの最上部にカバー画像、タイトル、First UPDATEを常時表示するようにしました。
これね、アタシがこれまでウェブサイトを構築してきてずっと疑問に思っていたことで、リニューアル前のYabuniraを含めてほとんどのサイトではヘッダー部にサイトのロゴとSNSアイコンなんかが並んでる。もちろんサイトのロゴをクリックしたら容易にトップページに行けるって利点はあるんだけど、それはハンバーガーアイコン＆スライドメニューで代用出来るし、あんまり意味がないなぁと。
しかも当該エントリのタイトルとか「いつ書かれたものなのか」は読み進めると上部に流れてしまうので、あれ？これ何のエントリだったっけ？となったら最上部までスクロールさせてやらなきゃいけない。
だったらヘッダー固定で、常時、カバー画像とかタイトルなんかを表示させてやる方がはるかにわかりやすいんじゃないかと。
もちろん弊害としてヘッダー以下、つまり本文の表示領域が狭くなってしまうんだけど、昨今のスマホはかなり縦長なので可読性を損なうほどはいかないなと。
逆に言えばスクリーンがランドスケープっつーか横長固定なPCで閲覧したらちょっと読みづらいのですが、この際、時代を考えて「あくまでスマホでの閲覧がメイン、PCでの閲覧はオマケ」くらいで行こうと決めた。
ヘッダー画像のサイズも散々検討して、比率を4.219：1にした。ピクセルで言えば1080x256。かなり度を越した横長画像になるけど、可読性他諸々を考えてこの比率にしました。
あ、ちなみに、フレキシブルというかレスポンシブというか、スクロールさせることで固定ヘッダーの高さが変化する＜仕組み＞はあるのですが（ヤフーニュースとかPC Watchなどのインプレスのサイトなんかがそうですね）、あれ、個人的に嫌いなので採用しませんでした。
アタシは面倒くさがりなので、とくにScribbleにおいてはよほど必要だと思わない限り、極力画像を使わない。その結果、エントリ中に一枚も画像がない、というのが普通です。
それはそれでいいのかもしれないけど、やっぱ、寂しいっちゃ寂しいのも事実で、しかしこうやってカバー画像が（たとえ使いまわしだとしても）常時表示されているおかげで、ちょっとだけ華やかな感じになったかな、と思います。
え？問題点？
既知の問題は山ほどあります。
データベースが未完成も未完成なのはどうしようもないっつーか数年スパンで考えてることなので置いとくとして、まだ一部、表示がおかしかったり、何故かタグが反映されない、などの不具合はあります。
実際、5月18日にリニューアルオープンさせてからも、ほぼ毎日のように細かい修正は行なっているのですが、エントリページ、データベースページ、リストページなど全部合わせたら2600ページくらいあるので、ミスを発見するのも大変なのです。
ま、バグ潰しは「気づいたら」都度やっていきます。もちろん気づかなければ永遠に放置されるってことなんだけどさ。
