見出し画像

今日のデザイン#02 整列

今日は「整列」がテーマのフォームの作成をしました

インターン先で一度作ったことがあったのですが
改めて難しい。。。
(今回は要件は決まっていましたが要件定義もむずい)

◉今日学んだこと
同じように見えて欲しくない(違うように見えて欲しい)情報は
行揃えを変える(左揃え、中央揃えなど)

同じように見えて欲しい系統が同じ情報の組み方を揃える
という意識はしていました(中途半端に左揃えと中央揃えを混ぜない)
が、逆に
違って見えて欲しいものは組み方を変える!
というのが案外新鮮な発見でした!

たしかにこのフォームでも
一番下の「アカウントを作成」のみ中央揃えになってる!

当たり前といえば当たり前ですが
しっかり言語化できてよかったなと思います

あとは、

薄いグレー(フォームの縁)は#DEDEDE
(角丸は3pt)

これは別に暗記項目ではないのですが
主張しすぎない薄いグレーって案外使うので
#DEDEDEがちょうどいいなと実感できなので頭の片隅に

◉メモ
グレースケールのフォームはよくあるので、もうちょいメモ

フォーム内の文字は#8E8E8E(12pt)
#DEDEDEだと薄すぎたので (指定の色は個人的には濃かった)
これで試して割としっくり。
(もうちょい薄くてもいけるかも(薄い濃いの表現は正しいのか?))

注意書き(半角英字云々)は#333333
これは「アカウントの作成」と同じ色で
ベースの文のカラーとして使用

◉改善点
パスワードの部分の長方形の幅と注意書きの幅

パスワードの箱と
その下の注意書きの幅が揃ってないです

パスワードの箱は右のアイコンの分短くしましたが
アイコンのスペースに程よく合わせて短くすると
注意書きの幅とは合いませんでした
(見本はあっていますが、私はフォントサイズをいじったため)

これを揃えるべきなのか否か。

注意書きの改行を箱の幅に合わせようとすると
「してください」のみが二行目に
注意書きだけを見ると
改行の位置としては今のがちょうどいいですよね

という
どっちに合わせようという迷いがあります

よろしければサポートお願いします!いただいたサポートは書籍代に使わせていただきます!