画像の中に文字を乗せることは視認性を低下させる、そのための工夫として画像の左右どちらかにテキストエリアを設けて視認性の向上と編集コストの削減

今まで画像の中に文字が入ることでPCでもスマートフォンでも同じ画像で表示されてきました。また編集の際も文字を修正するのに画像を再度修正がかかることを考慮して下記のように左右で画像エリアとテキストエリアに分けることで解消することができます。

• 画像のみをメインコンテンツ幅100％で表示できる（テキストなしの場合）

• 左右で画像エリアとテキストエリアを変更できる

• 画像＋タイトルのみも可

• 画像＋説明のみも可

• ブラウザ幅600px以下は画像エリアの下にテキストエリアの順で配置されます

PCの場合の表示

スマートフォンでの表示の場合