ユニット

以下のような 画像と文字を組み合わせたユニット であれば、画像と文字をバラバラにして見せるよりも効果的に情報を伝えることができます。




以下のタイプのユニットは、文章の長さに応じてユニット（画像）の縦幅が自動で変化します。そのため、文章が長くても短くても対応可能です。また、スマホ表示時には割合的に文字サイズが大きくなるぶん文章が縦長になりがちですが、その変動にも対応可能です。

















以下のような 縦横幅比を固定したユニット であれば、メディアの画面幅が変わっても縦横幅比が維持されるため、スマホ表示でもデザインが崩れません。なので、アーティスティックなユニットを構成するのに適しています。

なお、バナーの代わりとしても使えます。

バナーは文字の入った画像なため、頻繁に文字を変更する場合は、文字を変更する度に画像自体を作り直さなければならず 費用や時間 がかかってしまいます。

しかし、以下のようなユニットであれば、画像に文字を重ねているので コード上の文字を変更するだけ で内容を変更できます。













各画像がパーツになっているため、上記のように各画像の大きさ、配置、向きまでもが自分で変更可能です。



リストは複数のユニットを規則正しく並べたものです。多数ある案件とその紹介文を並べる際にオススメです。

なお、バラバラなサイズの画像を自動でサイズ調整する機能とメディアの画面幅に合わせて列数を調整する機能も付いています。

また、 商品リスト や 記事リスト のような プログラムで自動生成されるリストにすることも可能です。




スマホ表示でも文字の大きさが保たれるため、レスポンシブ対応に適しています。

また、長過ぎるタイトルや文章を一定の行数で切って各ユニットの縦幅を揃えます。（縦幅を揃えずにタイトルや文章を全部表示することも可能）

ただし、文字サイズを一定にしつつ各ユニットの縦幅を揃えるためには文字エリアの縦幅を一定にする必要があるため、メディアの画面幅によってユニットの縦横幅の比率が変動します。


「画像と文字が別段タイプ、全メディア表示で２列構成」


「画像と文字が別段タイプ、ＰＣ・タブレット表示２列 → スマホ表示１列」


「画像と文字が別段タイプ、ＰＣ表示３列 → タブレット表示２列 → スマホ表示１列」




メディアの画面幅が変わってもユニットの縦横幅比が維持される特殊なタイプです。デザインが崩れないため、アーティスティックなデザインにしたい場合に最適です。

ただし、文字サイズの比率も一定なためスマホ表示だと字が小さくなり過ぎる場合があります。


「画像と文字が別段タイプ、全メディア表示で２列構成」


「画像と文字が別段タイプ、ＰＣ・タブレット表示２列 → スマホ表示１列」


「画像と文字が別段タイプ、ＰＣ表示３列 → タブレット表示２列 → スマホ表示１列」


「画像と文字が重なったタイプ、全メディア表示で２列構成」


※上記の物は高級感がある雰囲気のデザイン例です。全く違う雰囲気にもデザインできます。