![見出し画像](https://assets.st-note.com/production/uploads/images/34065804/rectangle_large_type_2_85830faa92e994c79bb4f83b4f0e41ae.png?width=1200)
今日のデザイン#02 整列
今日は「整列」がテーマのフォームの作成をしました
インターン先で一度作ったことがあったのですが
改めて難しい。。。
(今回は要件は決まっていましたが要件定義もむずい)
◉今日学んだこと
同じように見えて欲しくない(違うように見えて欲しい)情報は
行揃えを変える(左揃え、中央揃えなど)
同じように見えて欲しい系統が同じ情報の組み方を揃える
という意識はしていました(中途半端に左揃えと中央揃えを混ぜない)
が、逆に
違って見えて欲しいものは組み方を変える!
というのが案外新鮮な発見でした!
たしかにこのフォームでも
一番下の「アカウントを作成」のみ中央揃えになってる!
当たり前といえば当たり前ですが
しっかり言語化できてよかったなと思います
あとは、
薄いグレー(フォームの縁)は#DEDEDE
(角丸は3pt)
これは別に暗記項目ではないのですが
主張しすぎない薄いグレーって案外使うので
#DEDEDEがちょうどいいなと実感できなので頭の片隅に 。
◉メモ
グレースケールのフォームはよくあるので、もうちょいメモ
フォーム内の文字は#8E8E8E(12pt)
#DEDEDEだと薄すぎたので (指定の色は個人的には濃かった)
これで試して割としっくり。
(もうちょい薄くてもいけるかも(薄い濃いの表現は正しいのか?))
注意書き(半角英字云々)は#333333
これは「アカウントの作成」と同じ色で
ベースの文のカラーとして使用
◉改善点
パスワードの部分の長方形の幅と注意書きの幅
パスワードの箱と
その下の注意書きの幅が揃ってないです
パスワードの箱は右のアイコンの分短くしましたが
アイコンのスペースに程よく合わせて短くすると
注意書きの幅とは合いませんでした
(見本はあっていますが、私はフォントサイズをいじったため)
これを揃えるべきなのか否か。
注意書きの改行を箱の幅に合わせようとすると
「してください」のみが二行目に
注意書きだけを見ると
改行の位置としては今のがちょうどいいですよね
という
どっちに合わせようという迷いがあります
よろしければサポートお願いします!いただいたサポートは書籍代に使わせていただきます!