●Snapshot001付録―のら研史

2021/05/20までにのらてつ研究所に加えた変更などの時系列まとめ。

Chronology

このプロジェクトの活用開始（2021/02/24）

最初のThemeは確かGameのGreen

note、ブログ、ツイートまとめ、Scrapbox関連の視覚化

まだ書いている途中ですよ、タイトルすら変わる可能性がありますよ、ということを訪問者に明示するため

加えて、自分が今途中にしているページを忘れないため

しかし、その後別の方法（「、」で終わるページを目立たなくする）で前者を解消したのでやめるかもしれない

→2021/05/22やめた！

ツイートまとめに自分のアイコンを使う際、文字との間に空間が全く無いのが気になったのを改善

水平線をタップしたときにアイコンのページに飛んでしまうのを防ぐため

後日、ツイートまとめに使う自分のアイコンにも適用

色数を減らしてモノトーンに

カードのデザインも極力シンプルにして文字に集中できるように

カードの影を濃淡2種類に

重要っぽいページが浮かび上がるように

当時の目的としては、タイトルだけでは中身がわかりにくいということを前提に、本文を少しでもわかりよいものにしようという意図があった

が、結局は「ツイートまとめをアウトラインにする」という考え方自体をやめた

中途半端な書き込みを自分に許すため

「目立たないが、そこにある」という状態を作る

まず「、」と打ってから本文を書き出し、書きたいだけ書いてからタイトルを付けるという手順が形成された

pinを示す折り目のマークを非表示にしている代わりに

ふと思いついて実装してみた

あまり目立たせたくないページが一段引っ込んで見えるように

「目立たないが、そこにある」のため

まずINDEXのページを見てもらいたいのだが、多分そこをクリックしたいと思わないので、「ここを見るといいかもしれませんよ～」というのを伝えたかった

ついでに属性セレクタの話を書いておいた

Scrapboxは表がはみ出っぱなしなんですよね

完璧な解決策ではないが、とりあえずやらないよりはマシだろう

その他参考にしている知見

https://gyazo.com/2507754e7805a6f3f62fc666dcef6a20

2021/05/20 18:37時点のサイトデザイン

https://gyazo.com/e2ad1a30462e72c1644d80de3376af4f

見える特徴を改めて列挙していくと、

カードのサイズが小さく（heightが小さい）、上部の薄いヘッダーやpinの折り目もない

本文冒頭部を非表示にし、タイトルのみにしている

「のらてつ」「●INDEX」に案内の文字列を表示している

「Lab｜～」のページの影が濃い（実際には「note｜～」と「▼～」も同様）

「～、」のページが薄く、サイズも少し小さい

「●～」の背景にはScrapboxのロゴが、「▽～」の背景にはTwitterのロゴが表示されている

プロジェクト名（のらてつ研究所）をナビゲーションバー（一番上のバー）に移動している

左上のScrapboxのマークをちょっと小さくしている

といったところ。

基本的にはブラウザのデベロッパーツールでCSSをチェックして手探りで試行錯誤を繰り返してどうにかするというスタンス。

他にも細かいところをいろいろちょこちょこやっています。