CosenseのデフォルトのCSS(スタイル)を改善する
CSS → settings
#cosense
改善ポイント
Cosenseは最高のツールだが、スタイリングを調整したい。もう少しカジュアルにというか、親しみやすい見た目にしたい。はてなダイアリー的なとっつきづらさから、はてなブログになったくらいのポップさを提供したい。そもそもCSS調整できるのが神
文字大きく
文字の大きさが何かデザインの古さを助長している気もする。昔のホームページのサイズな気がする。notion, noteなどのサービスと比べても小さいので修正。けど実はソーシャルメディアの文字サイズはそのくらいかも?
トップページ
カードを大きく
pinterest、google keepなどに比べて小さい。十分に取られていない余白も少し古さを感じる。余白がない
カードのタイトルの高さがそろわない(1行、2行、3行が混ざる)
→高さを固定化する
カードの謎の上のあしらいは削除し、シンプル化
PCで左右が空いているので、全画面化。pinterestを参考。
各ボタンにプルダウンを示す「▽」マークはいらないので消す
プルダウンが存在するかどうかを知らしめる意味はない、ウェブサイトでも使ってないことが多い。https://cosen.se/product のヘッダーメニューもそうなってる
ヘッダー
背景を消す
上部に固定されてるし色分けせずともゲシュタルトとして十分なのでは。ゲシュタルトは少ない方がすっきりする
個別ページ
個別ページの見出しはセンタリングしたい(これは好みによる)
ページ左端の更新履歴バーを透明に(機能としては失われるので、これも好みだが、シンプルを優先)
箇条書きの点をでっかく
これは完全に好みだがでかいほうが、可愛いかと思い。
残すもの
トップのdrop-shadow
ブツっぽさを強化するもので消した方がスッキリするのだが、あってもいいと思った。親しみやすいかなと
テーマ次第でshadowがなくなる
個別ページの横幅
ほぼ日の、1行の文字数は27文字らしい。そこまで短くとはいはないが、長すぎるよりmax-widthを指定するのは良い
参考
デザインの原則法則
https://gyazo.com/ca37976e3c3f0f7288ed1bb090e6d0b8
https://gyazo.com/f9cf4b5b4015cf00062f8925afd2820b