Settings_20230126- の改良点

Settings_20230126-を作るにあたって、何を意識したか、どこを良くしたか、などのまとめ

まだ作成途中ではあるため、これよりも更に変更されることはある

比較画像

どう変わったか、画像がないとわかりにくいと思うので貼っておく

※クリックでズームできます

変更前

https://gyazo.com/7e902b9bae61eab7a322f8581b5170b5

変更後

https://gyazo.com/5f2ad3013ff3c1e4c1e3fa2160b3e58f

主な改良点

基本的には、以下のことを意識して改良しました

（以前と比べて）よりシンプルに洗練する

それでもって、必要な項目は画面内に収める

文字を読まずとも、項目の位置が一目でわかるようにする

「横目でもわかるレイアウト」と言ったほうがわかりやすいかも

後述のタイトル行の改良が主な例

Scrapbox慣れしていない人や、Google検索などから1つのページを読むためだけに開いた人などでも、即座にページの構造を理解できるようなデザインを目指しました

タイトル行と本文をより視覚的に区別できるように

https://gyazo.com/a5e57a29bfa93060b82f27b913717d88

タイトル行の左端を本文よりも少し左にずらした

タイトル行のフォントを変えた

今まで3カラムレイアウトだったのを2カラムレイアウトに抑えた

ページメニューと関連ページリストを1列にまとめた

ページメニューを1カラム（1列）として数えて良いのかは微妙だけど

理由としては

ページの構成要素の中で最も重要なのはページ本文なので、それ以外を目立たせたくなかった

その「目立たせたくないもの」をすべて右端に追いやった形になる

ただ、その弊害として、ページ本文が存在しないページ（リンクを辿った時などの状態）では、空白が目立つようになってしまった

https://gyazo.com/aa73302b0d373cdb243fa0f54c8484ec

本来は関連ページリストへ目線を移して欲しいのに、存在しないはずの本文領域に目を取られてしまう

この問題は後々に対処する

ページ本文の左側に要素が常駐しているブログをあまり見かけないので、消し飛ばしたかった

ページの作成日時と更新日時を常時表示

元々あったページ情報ボタンを削除し、右上に常時表示するようにした

そして、その下にページメニューをグリッド状に配置

特に技術系のページにおいてはページの最終更新日時が重要なため、よりわかりやすい位置に配置したかった

ボタンを押すまで見れないというのは、裏を返せばそのボタンを見つけるまで見れないということ

テロメアで十分代用可能ではあるが、Scrapboxに慣れていない人にとってはわかりにくい

ただ、この配置によって、関連ページリストの表示領域が狭くなってしまったという欠点もある

更新日時などは日本語で書かれておらず読みにくいが、Scrapbox側が対応してくれないことにはどうしようもない

関連ページリストのデザインの改良

元々の関連ページリスト（関連ページ一覧をページの横に表示するUserCSS(最小版)）は、/ed/_CSS_Pageから流用したものを色だけ変えてそのまま使っていただけだったので、Scrapboxで普段使いするのには最適化されてはいなかった

/ed/_CSS_PageはElite Dangerous: OdysseyのUIデザインを真似たもの

「関連ページリストを横に置いたらアクセスしやすくなって使いやすかった」という体験は、完全に意図していない副産物だった

元々の関連ページリストの問題点としては以下のようなものが挙げられる

リンクの横幅が不必要に狭い

ページのサムネイル画像が小さすぎて読めない

これらの問題点は、リンクの幅を大きくし、その背景にサムネイル画像を表示することで解消された

https://gyazo.com/09f4e797a8a471ca3904f1f5036e3cab