こねどす9!

何回デザイン変えれば気が済むんだっ……!!!!

今回もそれなりの願望があったんだよ。本当だよ……

レイアウト

枠線や背景色や下線といった加算的なスタイルでの区画づけをやめて、スペースを空けまくることで区画づけをするようにした

前のはとにかく線を引いたり背景色をつけることで視覚的に枠組みがわかるようにしていたが、今回は空白を広めにとって文字の整列などからホンノリと枠組みがわかるような間取りになった。 こねどす7が”レシート”、8を”新聞”と言っていたが、今回は………石板?

テキパキした感じの機能美みたいなものは減ってしまったけど、これによって「ここはXXの文章で、あっちはYYの説明で…」というような説明を視覚効果から受けなくなる→口やかましいやつがいなくなる→フリーダム! みたいなメカニズムによって開放感が出るんだと思う。

前デザインでも3枠レイアウトはやっていたが、Indexページ以外はほぼ2枠レイアウトみたいだった(3枠目を情報量の少ないフッタにしていた)ので、左上になんかファンクションな感じの枠として置いてみた。
Index以外のページでクソデカ戻るボタンになったことで謎のアプリケーション感が出ている気がしなくもない。
なんだこれは?

あとなるべく横線になりそうなものを作らせない(見出しにBorderやBackgroundをつけるなど)ようにもした。

配色

grayに黒文字は暗すぎるので白文字+text-shadowにした

こねどす8の時からgrayにしたくても見づらすぎてlightgrayに変えたという敗歴があった。今度は勝った。

いわば『読ませたいもの』には白を使い、黒はオプショナル(特殊効果があったり追記的な役割だったり)な要素か、通常の文字に少し特別さをもたせるために使う。
キーカラーであるbluevioletをリンク色にしたかったけど、grayの上だと致命的なほど見づらいので部分的なアクセントだけになった。

完全中間色になったことで白と黒の両方が『読ませるための文字』として存在できる、というのはいい発見だったかも。

特殊な文節の扱い

黒という色に「ここはちょっと特殊かも」と暗示する役にしたはいいものの、リンク文字に彩度のアクセントをつけられなくなったのはアクセシビリチー的にもよくないので、リンク文字にだけsolidの下線をつけ、ただの強調のために引く下線には破線を使うようにした。
線が破れている→リンク文字として壊れている→押しても効果がない→ただの飾り という認識順になるかなと思ったけど地味すぎて分からんかもしれん。

あと薄まった色の文字は優先度が低くなる……と思っていたのだが、文字がデカくて間が開いていれば字が薄くても見出しとして機能する(色以外の要素のおかげで”色が違う”という特徴がアクセントになる)ことが試行中に判明したのでH2がそうなっている。

「色が薄いのににデカい文字」と「色が濃いくせに小さい文字」はほとんど同等っぽいけど、文字の大きさがそのまま区切りの広さとして機能するからデカい文字のほうが見出し文としての威力が高い…みたいな。

ページングと間取り

個人サイトを見ているときにメニューの置き場や特定ページへの辿り方などから、こんなふうに頭の中で謎の空間生成をしている。
image
思ったけどこれ赤のところIndexページじゃなくてアクセスする行為そのもの(いうなれば入口ページ)だったかもしれん。

こねどす8の時も「常設メニューを撤去してIndexから部屋をたどるようなページングにした」と言ったけれど、あれは図でいうところの下のほうで、今回は上のほうになった。
ひと部屋(Index)にほとんどまとめて置いているので、家というよりガレージとかスタジオみたいなものに近い。

一次創作限定だったり特定のファンアートだったりと限定してやっているサイトならしっかり区分けしたほうが宮殿みたいにかしこまった感じがして作品に重みをつけられると思うけど、雑多なことを載せている身としてはこれぐらいゴッチャなほうがそれっぽい。
ちなみにブログエンジンではお馴染みの常設メニュー方式は末端の部屋からも入口に戻れるので、経路のある美術展や探検型アトラクション(非常口という名の出口がある施設)みたいなイメージがある。

絵や日記類の個別ページは存続するとして、それらもIndexにまとめてしまうと表示が重くなって大変なので、さすがにリストアップ用のページは設ける。
そういう”かろうじて”のリストアップページって部屋に投げてある本みたいなもので、空間の中ではちんまりしてるけど、開くと何枚もの絵や文章が出てくる(体積と情報量が比例していない)、みたいなイメージ。