こんにちは。現在カクヨムのデザインを担当しておりますデザイナーの 
id:murata_s です。
先日、カクヨムでは縦組み機能をベータリリースしました。これは文字通りウェブブラウザ上で小説を縦組みで表示することができる機能です。リリース後書き手ユーザーの皆さまを中心に多くの反響がありました。
この機能開発では、基本的な組方向に関する変更に加え、画面のデザイン的にも新しい試みを行っています。そこで、今回はウェブにおける縦組みのデザイン事例としてこれを紹介します。
小説を縦組みで読みたい
ウェブ小説を縦組みで読みたいという、シンプルなモチベーションで始まった縦組み機能の開発ですが、アイデア自体はサービスの立ち上げ当初からチーム内で挙がっていました。日本語で紡がれた物語を縦組みで読みたいという欲求は、小説文化に親しみのある者なら誰もが思うことだと思います。実際にご利用いただいているユーザーさんと対話する中でも幾度となく寄せられていた要望でした。開発のロードマップやブラウザの実装状況などの条件が整い、開発がはじまりました。
縦組みのビューワーについて考えたこと
当然のことながら、カクヨムの小説ビューワーは本文の組版だけでなく、前後のエピソードへ移動するときの心地良さや様々な設定用のコントロール、目次の見せ方、関連情報の提供方法など、本文だけではなく画面全体の要素がお互いにどう影響し合うかを考えながらデザインをしています。
縦組みを実現しましょうとなったときに、本文のみを単純に縦にすれば良いのかというと、そうではないと思いました。ある意味ここにはない別のデザインルールが持ち込まれるということですから、画面全体の調和を乱してしまうことを想像しました。縦組みの本文を読み終わるたびに、横組みの情報が出てきたらどうでしょうか。その変化にがっかりしてしまったり、余計に気を取られてしまったり、視線の移動にも一苦労かかるようになりそうです。
そこで、UIを含めた本文以外の要素もすべて縦にするのはどうか、というのがカクヨムの小説ビューワーにおける提案でした。小説の読み始めから読み終わりまで、すべてが縦になっていれば、ノイズが少なくなり、本文の領域も大きく使え、物語に集中できるのではないか。ウェブでUIが縦になっている事例は多くはありませんが、挑戦してみる価値があると考えました。このアイデアを基に完成したデザインがこちらです。
さて、このデザインで言及しておきたいトピックが3つありますので順に紹介します。
本文の組方向に合わせたUI
先にも触れましたが、デザインが読書の妨げにならないようにするために、本文はもちろんのこと、UIごと、できる限りすべてを縦にするということをしています。このような場面では、中途半端な判断をするよりは振り切ったほうがルールが明確になって良いでしょう。芯の通ったデザインは理解を促し、結果的に使いやすさや安定感を生むと思います。
横組みのデザインを機械的に縦組みに変換するとデザインは簡単に破綻してしまいます。横組みには横組みに、縦組みには縦組みにふさわしい間のとり方がありますよね。ボタンやリンクをそのまま横に倒すだけでは、機能性や意味的な関係性が崩れてしまいます。例えば、グローバルヘッダーの要素の並び順や見出しの揃え方、応援・応援コメント等のコントロールではその違いをケアしている様子が見れると思います。
ウェブ上ではありそうでなかったこうしたレイアウトは、一歩間違えると思いもよらぬ体験の悪さを招きかねません。今回は、開発に着手する前に簡単なプロトタイプを作成して、実際に触って試してみるということをしています。そうして見えてきた課題をひとつずつ達成していくことで、初見でもユーザーさんに受け入れていただけるデザインを実現することができました。
インタラクションと縦組みの関係
当然ですが、ウェブサービスは基本的に使うものですので、ユーザーが特定のアクションをストレスなく行えるように画面を設計する必要があります。例として、応援・応援コメントの部分を見てみましょう。横組みのときのデザインルールをそのまま持ち込むならば縦に積まれているところですが、使いやすさを考慮して横に並べる配置にしています。
この小説ビューワーは圧倒的にスマートフォンでの利用が多いのですが、もしも縦に積んだレイアウトにした場合、画面上部にあるボタンは指から遠く押しにくいという体験になってしまいます。気軽に使ってほしいボタンであるにもかかわらず気軽に使ってもらえないという状況を招いてしまうのです。そこでこれらを横に並べることによって自然な動作の延長で使えるようにしました。
このように縦組み用にリデザインした箇所はたくさんあります。考え方としては通常のUIのデザインをするときと何も変わりはしませんが、仕事を進める中で感じたことは、横組みが支配的な画面をデザインするとき以上に、利用状況やユーザーさんの状態を意識することが求められるということでした。情報が入れ替わるインタラクションは特にそうです。ユーザーさんが情報を見失わないような配慮が必要でした。
組版の品質
文字にこだわるコンテンツを扱うので、組版の品質にも目を向ける必要があります。ウェブにおける組版はどちらかというとエンジニアリングの側面が強いのですが（特殊対応をする文字種やルールを定め、動的なマークアップをするという点で）それをより良く見せる調整をデザイナーが担当しています。
その主たるものとして、欧文文字が一文字づつ積まれた場合の見栄え調整、縦中横の見栄え調整、ダッシュ記号や三点リーダーの見栄え調整がありました。そのどれもが細かなものですが、これらの有無によって小説本文の読み心地は大きく変わってきます。ルールとして定義しにくい文字列は理想的な文字組みにならないことがありますが、多様な種類の文章を受け入れるウェブ上の自動組版システムとしては十分及第点に達する品質だと考えています。
まとめ
今回はカクヨムにおける縦組み機能のデザイン事例を紹介しました。リリースからひと月ほど経ち、新しい読書体験として認められたという実感がじわじわと湧いてきています。ウェブで縦組みの文字を使うことは面白いことですが、ただそれだけに満足せず、最終的には画面全体の雰囲気と調和しているかどうか、さらには利便性や可読性が担保できているかどうかという、基礎的なデザインの話に忘れず立ち返ったことが功を奏したのだと思います。
ウェブにおける縦組みは、数年前は技術的にもまだ利用は早いという印象で、ほとんど目にすることはありませんでした。しかしここ最近では縦組みの文字をデザインの一部として利用しているウェブサイトを見かける機会も多くなってきています。縦組みの表現は扱うテーマにふさわしければ、テクストの魅力を引き立て、印象的な読み心地を与えられる面白いツールです。機会があればぜひ取り入れてみてください。
この事例がすこしでもデザイナーの皆さまの参考になれば幸いです。
