【第9回 テキストのみで作成できる見出しデザイン編】

 

たけやん：こんにちは、アプリデザインチームです！今回は、テキストのみで簡単に作成できる見出しデザインをご紹介します！

 

もっさん：画像の作成が必要ないので、どなたでもチャレンジしやすいですね！

 

たけやん：そうですね！今からお見せするものは、テキスト「NEW ARRIVAL」を打ち込んだだけの見出しです。このままでも見出しとして成り立ちますが、こちらにさらに様々なデザインを設定してみましょう！

 

 

 

テキストのみで作成できる見出しデザイン３選

 

① アンダーラインを引いた見出しデザイン

 

もっさん：アンダーラインを引いた見出しデザインでは、罫線の太さや長さを調整することで簡単に見出しの印象を変えることができますね。

 

たけやん：設定方法もとてもシンプルです！『罫線カラー』でお好きな色を選択して100%にし、『罫線の太さ』でブロック下部の罫線のみ1以上の数値にするとアンダーラインを引くことができます。
※数値は左から順に、上右下左の罫線の太さを表しています。『罫線の太さ』は数値が大きいほど線が太くなります。

 

もっさん：簡単なので、すぐに実践できそうですね！さらにフォントの『配置』を中央揃えにして、『マージン』の左右をテキストの長さに合わせて調整すると、より参考画像のデザインに近づきます♪

 

 

②背景を敷いた見出しデザイン

 

もっさん：見出しの背景に色をつけることで、一気に大胆な見出しデザインにすることが出来ます！

 

たけやん：こちらの設定方法もとても簡単！『背景カラー』でお好きな色を選択して100%にし、『タイトルカラー』も背景に合わせて必要であれば変更します。基本的な設定はこれだけです！

 

もっさん：併せて、『マージン』『パディング』を調整して余白をお好みに合わせたり、参考画像のように一箇所に罫線を設定してデザイン性を高めたりなど、自分好みにカスタマイズしてください！

 

 

③英語と日本語を組み合わせた見出しデザイン

 

もっさん：英語と日本語を組み合わせた見出しデザインも素敵ですよね！

 

たけやん：こちらも簡単に設定することができますよ！『タイトル』に英語見出し、『本文』に日本語見出しを入れ、それぞれの『カラー』『文字サイズ』『配置』を調整するだけです♪参考画像では、装飾としてテキストの左右に罫線を設定しています！

 

 

 

 

もっさん：簡単な操作で様々な見出しデザインが表現できましたね！

 

たけやん：見出し一つにしてもデザインの幅は無限に広がるので、まずは管理画面の詳細設定を触ってみて色々なパターンを試してみてください！ 

 

 

フリーレイアウト機能の詳細設定についてはこちら >

※ご不明点は担当のカスタマーサクセスにお問い合わせください。

 

次回の更新をお楽しみに！