コーディングしやすいデザインデータの作り方 ★Part２（テキスト編）

2020/10/19

コーディングしやすいデザインデータの作り方のポイントをまとめました。今回は、テキスト編です。

デザインとコーディングを両方するようになって気づいたことをまとめます。
今回は、テキスト周りの内容を中心にまとめました。

文字数が増減しても大丈夫なレイアウトにする

１行のときは大丈夫だけど、これが複数行になったらどうなるんだろう？と考えてしまうこともあります。どちらでも対応できるレイアウト、もしくは参考デザインが用意されているとよりスムーズです。

ブラウザごとに小数点の扱い方が違うので（切り捨て、切り上げなど）、表示が異なってしまいます。

画像内の左の例ですが、手動で改行したテキストをエディターに流し込むと、改行された状態で貼り付けられます。そのため、まずは改行を消す作業が必要になります。
また、本当に改行は必要かもしれないという部分もあるときに、混乱してしまう可能性があるため気をつけましょう。

フォント・サイズ・行間・ウェイトなど、同じレイアウトは体裁を揃えましょう。少し違うのがあると、あえてなのかミスなのかわからない場合があるため。

スマホのデザインデータでよくありましたが、2倍サイズのデザインのはずが文字サイズ10pxという…。これ実装できたとしても5pxになるので読めませんよ（；；）という悲しいことになるので、気をつけましょう。

いかがでしたか。会社によりやり方が違う場合もあるかと思いますので、不安なところはコーダーさんに確認されると良いと思います。細かい事ばかり書いていますが、参考になりましたら幸いです。