先月号で縦書きスタイルシートフレームワーク「Amatsuchi」を宣言した。現在、バージョン0.0.10をnpmに公開している。
縦書き・横スクロールWebというあまり前例のない形式のレイアウトを考えるのは、普段自分が仕事で同様のデザインや実装を行うときよりはるかに自由で楽しい作業だ。しかし、自由ゆえに想像していたよりも考えることが多く大変な作業でもある。
といっても多くの方には、このただの白黒プリントみたいなページ作るのにそんなに考えることある？笑と思われることだろう。自分の名誉のためにも、現在の偏向のレイアウトを作成するまでに考えたことをいくつかアピールさせていただきたい。
モノトーンのデザイン
現在の
文章ページが横スクロール、一段組の縦書きであることがデザインのアイデンティティとなっている。文庫本のようにすっきりとした見た目で非常に気に入っているが大きな弱点がある。
一段組の縦書きは余白が多く、画面の面積あたりに表示できるコンテンツ量がかなり低いのだ。
その理由は一行の長さが長くなることにある。文章終了後のデッドスペースがかなり長くなるのだ。スマートフォンでこのページを読んでくださっている方がいれば、是非このページを横向きにしてみてほしい。（運が良ければ）画面あたりに表示される文字量が増えることが分かるだろう。本来、横書きであればそのくらいの情報が表示できるのだ。
横書きWebに対して情報量の面ではかなりビハインドで始まるのだ。情報量で横書きサイトと対等に渡り合うには、文章コンテンツの面積を上げる必要がある。ヘッダー、フッターは削ろう。幸い構造は非常にシンプルなサイトなので、そこまでヘッダー、フッターの必要性はない。削れる。
ヘッダー、フッターがないとなると色を入れる余地があまりないのだ。もういっそモノクロを生かしてしまえ、となった。そう、モノトーンのデザインは文章ページに色を入れる余地がない事実から逆算的に（そして必然的に）定まったのだ。
通常、配色デザインをする際はベース/アソートという目に優しい２色をまず選び、全体を引き締めるために少し目を引くアクセント色をいれる。白と黒しか使わないとなるとユーザの注意を引くことが難しかったり、全体としてデザインがまとめづらい可能性が出てくる。
色を使えないページでアクセントを出すにはどうすれば良いか。
ちゃんとした答えは出せていないのだが、手がかりはある。色ではなく、偏向のタイトルにも使用されている「斜め」を使ってとアクセントをつけられないか。要するに単調でどこ見たらいいかわからない色の中に、目立つ色があると視点が定まり、結果として全体が引き締まるわけだ。斜め、という角度で目立たせても同じ効果が得られるのではないか。この辺りは試行錯誤して今後も探っていきたい。
こんな訳で偏向はとりあえず、モノトーンでやると決めた。なんだか学校のプリントを思い出すような、文化祭前にばら撒かれる白黒のビラを思い出すような感じで気に入っている。
目次の上の二重線について
横スクロールのWebサイトは基本的にタブーである。そもそもWindowsのマウスは上下にしかスクロールできないし、もともとHTMLもデバイスも純粋にそういう作りになっていないからだ。
このサイトを初めて開くユーザは、このサイトどうなってんだ、と縦スクロールしようとしてみるだろう。できない、となり横スクロールをしてみる。そしてこのサイトは横スクロールだと初めて気づく。ブラウザの横スワイプは「戻る」挙動だったりするから、運が悪いと前のWebページに戻されてしまい、なんだこのサイト、となり最悪の場合せっかくこのサイトを開いてもらったのに読んでもらえないかもしれない。文章ページは文章が見切れる確率が高いから良いのだが、目次のページは隙間が多いのでスマホの画面サイズによっては見切れが発生せず、特にこの懸念が大きい……
そういう問題を解決するのがUIデザインの仕事である。ひと目みて「このサイトは珍しい横スクロールのサイトだ」と少しでも早く、少しでも多くの人に、理解してもらえるデザインにすべきだ。
一般的なデザイン方針としては、横方向にインナーシャドウ（内向きかげ）をつけて、「下にシートがあるよ」感を出す方法が挙げられるだろう。Material DesignというGoogleが出しているデザインガイドラインがある。そこでは、Web上のコンテンツも物理的な動きや影を再現することで直感的にユーザがUIを理解できるとされていて、それに従えばそうやってやるのが正攻法だろう。
だけど、そんなことをしたらこの特徴的なプリント感あふれたデザインが失われてしまう。どうしようかね、と考えていた時期にサンオウで一冊の白石火乃絵の蔵書が目に止まった。萩原恭次郎という人の書いた「死刑宣告」という詩集だった。その詩集のあるページには意匠としてダダイズム感のある力強い横棒が意匠として版画で刷ってあった。こんな感じの横棒を挿入すればまずかっこいいし、横に見切れを発生させられるからインナーシャドウを使わなくても良い！機能と美を兼ね備えた、まさにモダニズム的な表現。個人的には今のところ偏向のデザインで一番の発明だ。
Webページで黒くて大きい物体を配置すると目立ちすぎるという問題があった。なんか不気味で縁起が悪い。この不気味さも発見だったからいずれ活用したいが、いったんUIデザインの使命を真っ当したいので引き出しにしまおう。色々なパターンを試してみて、もっともコンテンツを邪魔せず、収まりがよかったのが二重線だった。これで決まった。たかが一本の二重線だが、これだけの過程を含んで誕生したのだ。
フローティングアクションボタンの配置について
フローティングアクションボタン(FABと略す)ってなんや、という話だが、Twitterを開いた時に右下に浮かんでいる投稿ボタンを想像してもらえると話が早い。上に出てきたヘッダー、フッターを使いたくない話もあり、偏向ではFABをページ遷移に使うことにした。
いろんなサイトやアプリをみてみて欲しいが、FABは右下と相場が決まっている。実はその相場を狂わせてしまうのが、縦書きWebであった……
市村はそもそもFABがなぜ右下に配置されるか、に立ち返った。ユーザの多くは右利きだからだろうか？答えはNOだ。以下のサイトが分かりやすいがFABの場所は右利きのスマホユーザにとって、けっして押しやすい場所ではない。親指を小さく折り曲げなければいけないからだ。
答えはこの参考サイトを読んでもらうのが良い。
簡単に言うと、横書きコンテンツでは左上、右上、左下、右下の順に配置されることが多く、右下が一番コンテンツの邪魔をしない確率が高いからだ。つまり縦書きでは左下に置けばよい、というわけだ。
あっさり解決してしまったなと思われるかもしれないが、「なんでFABを右下に置くのか」まで立ち返る〝必要性〟があるUIデザインなんて、他にはなかなかないのではないかと思う。例えると、もし重力が横向きだったら建築物はどう設計すべき？みたいなことをやっている感覚だ。これぞ縦書きWebデザインの醍醐味だろう。
まとめ
３つほど取り上げて市村がやったことをアピールさせてもらった。他にも癖とか定番のパターンでやった部分含め、考えに基づいてデザインされている部分はぼちぼちある。探して欲しいとまでは言わないが、市村も色々考えているのだなあと尊敬してもらえれば幸いだ。で、これからも考え続けていくのでよろしく！
もう少し続ける。
実作業としては大したことはしていない。線を一本引いたり、ボタンを動かしただけだ。だけど、UIデザインの仕事で一番大事な点（=金をもらえるか）はいいデザインを作ることではなく、自分がどんな問題を見つけて、どんなアプローチで解決したかを他人に納得できるように説明することだと思う。実は、先の偏向会議で「市村がなにやってるかよく分かんないから知りたい」といわれたことがこれを書こうと思ったモチベーションだ。言われて気づいたが、一番大事な作業はこの文章を書くことだったのだろう。これからも発見があるたびに定期的に書こうと思う。
ついでに。自分はUIUXデザインがメインの仕事ではなくおままごとレベルなので、偉そうなことをいって大変恐縮だ。だけど、こういうことを考えて金もらってる人もいるだな、ふーん、と思ってもらえれば嬉しい。もしすごく面白いなと思った人がいればいろいろ語り合いたいので、是非話しかけてもらえればなお嬉しい。