• Facebook
  • Twitter
  • RSS
月別
コツコツあつめるWeb作りのためのたね たねっぱ!Web系情報ブログ Webのお役立ちネタ配信中!

コーディングしやすいデザインデータの作り方 ★Part2(テキスト編)

投稿者アイコン
2020/10/19
書いた人:
futappa_staff
カテゴリ:
デザイン   ネタ
132 views

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

コーディングしやすいデザインデータの作り方 ★Part2(テキスト編)

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

目次

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

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

make_good_design02_img01

文字サイズは整数にする

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

デバイステキストで改行(brタグ)がいらないところでは、任意改行しない

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

make_good_design02_img02

文字の体裁を統一する

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

文字サイズは最低でも10px以上にする(2倍デザインなら20px以上)

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

最後に

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


この記事を読んだ人はこんな記事も読んでいます