下書き｜LT: Mijinkoのデザイン変更にあたっての経緯
書きたいことをまとめます
LTの枠に収まらなさそうなので、早口で話すか、内容削るかするかも /icons/hr.icon
テーマ
何故このようなデザインにしたのか、等
主に書きたいこと
デザイン変更を行うまでの経緯
既存のUIで気になったこと
何を気をつけたのか
これを軸に、資料の肉付けを行う
ぱっと見で構成要素を把握できるようなデザイン
ごちゃごちゃしすぎないように、まとめられるところはまとめる
https://gyazo.com/c7dabed3f9bdb8a0f2f6aa434b131b2f
ページ本体が「主要素」で、それ以外が「副要素」となるように
ページ本体の枠線を取っ払って、ページ全体になじませる
逆に、ページ本体以外は、ページ本体の背景に乗っかっているような形にする
参考にしたもの
実はまだ改良すべき部分はある
まだあまり手をつけていない部分
ページ内部の文章部分
トップページ
時間がないのと、他にやることが多くて後回し気味
どんな風に制作を進めていったか
変更前イメージ
https://gyazo.com/9f496fd6412c894ce77f45e296fe3575
完成イメージ
https://gyazo.com/a866217574b956d5d9ff755a5f490b0a
このイメージ作成後も変更を重ねたので、実際のブツとは色々と異なる
友人と雑談通話しながら作ったので
発表資料を書く際に気をつけること
起承転結でも何でも良いけれど、一連の流れを存在させることは意識する
Why（何故）とBecause（何故なら）（問題と解決）を明確にする
「何を気をつけたか」の肉付け
0. 作ったデザインの紹介
結論を前に持ってくる
ちょっとしたクイズも用意して、デザインを良く見てもらうきっかけにする
このクイズの正解は後に工夫したこと（この発表で伝えたいこと）に繋げる
1. デフォルトのテーマは、パッと見で理解しにくいデザインだと思う
ここには、個人的な主張を後のデザイン変更の動機として書く
ワード
ページを開いた直後のユーザーの目線はどこに来る？
そこから次の要素へ目を動かすにはどうする？
一方で、シンプルなのは編集時に疲れなくて良い
うまいことシンプルさも保ちつつ、問題解決をする必要があった
ここで言う解決策は、
主に、2.5カラムから2カラムへ変更したこと
シンプルなのも良いけれど、（個人的に利用する上での）利便性も保ちたかった
なので、関連ページを元のアクセスしづらい場所に戻すという考えはなかった
とりあえずまとめるけれど、LTなのでここは削るかも
あくまで制作の過程にこのUserCSSの経験が含まれているというだけで、必ずしも重要ではない
書くこと
個人的に気に入らなかったデザインという観点も含める
良かったこと
悪かったこと
/edから流用したレイアウトをそのまま使用しているため、Scrapbox上の利便性としては最適化が甘い /edでのデザインは、あくまで「モチーフとしたゲームに似せる」ということを目的としている それによって生まれた利便性は、想定外の副産物だった
関連ページリストのデザインしか変えていなかったため、ページ内がごちゃついてしまう要因になってしまった
ページの右にも左にも要素がある（カラム数が多い）という状態はあまりよろしくない
もちろん、変更点が少ないというのは、導入時に既存のUserCSSと競合しにくいというメリットもある
3. それらを踏まえてどうしようとしたのか
新しいデザインの主な方向性
関連ページリストは、引き続き横に表示する
それでいて、2カラムに抑える
ページを開いた直後に一番最初に読んで欲しいタイトル部分は、強調する
フォント変更
本文の左端より少し外に出す
下線を引く
本文を目立たせる
ページ本文の枠線を撤廃し、背景と同化させる
そうすることで、見た目上のレイヤーが本文だけ奥の方に行くので、他のサブ要素との差別化ができる
4. 結果どうなったのか
これ3と混ぜても良さそう
「何をしたか」と「どうなったか」を同時に提示する
5. 今後の課題
未改造の部分をどうにかする
本文にあまり手を加えていないので、まずは方向性を考える
Mijikko.iconが思い出す時に使う資料