メインビジュアル（トップバナー）

●画像を設定する

画像横の余白部分を調節する
Sectionごと選択し、Max widthを調整する

画像で設定する場合、モバイルだと文字が見えにくくなることがある。

▶対処法
①「All devices」で設定した写真を以下の方法で隠す（モバイルからは見えなくする）

②モバイル用に新たにイメージを設定する

③②で設定したイメージがAll devicesで見えないよう以下の方法で隠す

●背景で設定する

「Heading」や「Paragragh」を追加した後、Column（オレンジの枠）を選択
Style>BORDER>Background image>Select image

・デフォルトの状態だと画像がかなりアップされている、全体を見せたい
Style>BORDER>Background image>More settings>Background sizeでCoverを選択

・画像の幅を広げたい場合
Columnを選択し、Paddingの上下に数値を入力

「All devices」で設定した文字サイズをモバイル用に調整する。
★モバイルの編集画面で変更しても、All devicesには反映されないようになっている

ボタン（スクロール）

●デザインについて①

containers>layoutからボタンの数に合わせてレイアウトを追加→ボタンを追加

①スタンダード
Enable full width→Yes

②アイコン付きボタン
アイコン変更可能
Icon positionで文字に対してどこに表示するかを指定
★あとからテキストだけにしたい、アイコン付きに変更したい場合
ボタンを選択し、General>Button typeから選択

③Styleの変更
Styling>Global style（最上部）から選択
これは「Style3」

④角を丸くする（手動）
Styling>Border style>more settingsで数値を入力

★その他④のデザインについて
・影を付ける（立体感が出る分機能しているボタンだという印象に）
Styling>EFFECTS>Enable shadowをオン
・BODERで囲む（影をつけることで白でも見えるようになる）

モバイルではボタンが縦に並んで表示される。

横に並べたい場合
①ボタンをRow（緑線）ごと選択
②General>Columns per lineで任意の列数を選択（下のボタンは「2」に設定した場合）
③さらにColumns spacingでボタン同士の幅を調節する

※実際にスマートフォンで見るのと文字数が異なる場合があるため、プレビュー画面をスマートフォン上で確認しながら編集する。

●デザインについて②

containers>layoutからボタンの数に合わせてレイアウトを追加→ボタンを追加

①ROWを選択し、General>Columns spacingを0に設定
②ROWごと背景色を設定（styling>background color）
③ボタン同士の境界線を作る
※以下の工程は一番左のボタンを除く
ボタンのBODERを設定
上・左・右のラインは①で設定した背景色にする
左のラインのみ別の色を設定する

★マウスオーバーした時にテキストの色が変わるようにする方法
①ボタンを選択
②Styling>Global styleの下にある「Normal state」と表示のあるタブをクリックして、「Mouse over state」を選択
③テキストカラーを変更

●スクロール機能について

↓プレビュー画面でボタンをクリックしてみてください↓
機能しています

ボタンを押すと該当する内容までスクロールされる機能

まず、各Sectionに任意の名前をつける
方法1.セクションを選択し、General>ATTRIBUTES>More settings>Name
方法2.Page outlineから該当するSectionにマウスオーバー>右に出てくる「…」>Rename

ボタンを選択し、General>ACTION>Click actionでScroll to sectionを選択>Scroll to sectionでスクロール先のセクションを選択
Top offsetを100～150に設定（プレビューを見ながら数値を調整）

PaddingとMargin

●Padding

枠内の余白を調整するときに使う。

●Margin

枠外の余白を調整するときに使う。

●Padding未設定

●Padding設定後

●Padding/Margin未設定

●Padding/Margin設定後

ノンコルダム壁画村

東海のランドマークのひとつ墨湖灯台の周辺の集落は、その一帯が壁画村となっています。 壁画には墨湖港周辺の歴史や文化が込められており、ただ「映える」だけではない ストーリー性のある壁画を楽しみながら墨湖灯台に向かいましょう♪

ノンコルダム壁画村

東海のランドマークのひとつ墨湖灯台の周辺の集落は、その一帯が壁画村となっています。 壁画には墨湖港周辺の歴史や文化が込められており、ただ「映える」だけではない ストーリー性のある壁画を楽しみながら墨湖灯台に向かいましょう♪

●Padding/Margin未設定

●Padding/Margin設定後

ノンコルダム壁画村

東海のランドマークのひとつ墨湖灯台の周辺の集落は、その一帯が壁画村となっています。 壁画には墨湖港周辺の歴史や文化が込められており、ただ「映える」だけではない ストーリー性のある壁画を楽しみながら墨湖灯台に向かいましょう♪

ノンコルダム壁画村

東海のランドマークのひとつ墨湖灯台の周辺の集落は、その一帯が壁画村となっています。 壁画には墨湖港周辺の歴史や文化が込められており、ただ「映える」だけではない ストーリー性のある壁画を楽しみながら墨湖灯台に向かいましょう♪

テキスト

・テキストのカラーの変更方法
基本、Styling>Content colorで設定
 General>Paragraph textの「A」は、まとまった文章の中で一部分のみ色を変えたい場合に使う

★Content colorでの設定をおススメする理由↓

この部分(Paragraph)を選択して、編集画面からGeneral>Paragraph textで確認してみてください。
このようにParagraph textで直接着色すると、特に白にした時に何が書いてあるか一目でわからないので編集がしづらいです。

こちらも同様に確認してみてください。
デザインとして見え方は一緒ですが、Content colorで設定すると、Paragraph textで文字が見えるため、編集がしやすいです。

・デフォルトカラーとブラック/グレーについて
テキストのデフォルトカラー（Content colorをいじらない状態）は、グレーに設定してあります。
一般的にも、背景の白に対してテキストが黒だとコントラストが激しく目が疲れるなどの理由から目に優しいグレーが使われています。
デザインによって適したグレー（場合によっては黒）に設定することで、バランスのいいページを作ることができます。

↓テキストカラーによるイメージの違い↓
※プレビューで確認してください(PCとモバイルでも印象が違います）※

●デフォルト

イベントの体験内容を説明しているため、目立たせたい。デフォルトのグレーだと印象が薄い。

●#393939

少し濃い目のグレーに変更。イメージの色味を考えると黒だと強すぎる。

流しそうめん

みんな大好き流しそうめん！2階から続く竹を交差させたピタゴラ式の流しそうめんをご体験いただけます。そうめんが「跳ねる」「穴をすり抜ける」…？！ちょっと変わった流しそうめんで特別な夏の思い出を♪

流しそうめん

みんな大好き流しそうめん！2階から続く竹を交差させたピタゴラ式の流しそうめんをご体験いただけます。そうめんが「跳ねる」「穴をすり抜ける」…？！ちょっと変わった流しそうめんで特別な夏の思い出を♪

●デフォルト

枠とラインの色に対して、文字が埋もれてしまっている印象。

●#292929

枠とラインとのバランスを考えてちょうどいいグレーを選択。

江原道ってどんな場所？

韓国の北東部に位置する江原道(カンウォンド)は、江陵(カンヌン)、束草(ソクチョ)をはじめ東海岸に面するエリアからは美しい海が、内陸部には山地が広がる大自然を誇る地域です。 大ヒットドラマ「トッケビ～君がくれた愛しい日々」「ボーイフレンド」をはじめ、韓国ドラマ・映画のロケ地としても有名で、 開放感のある雰囲気から韓国国内でも小旅行地として人気を集めています。

江原道ってどんな場所？

韓国の北東部に位置する江原道(カンウォンド)は、江陵(カンヌン)、束草(ソクチョ)をはじめ東海岸に面するエリアからは美しい海が、内陸部には山地が広がる大自然を誇る地域です。 大ヒットドラマ「トッケビ～君がくれた愛しい日々」「ボーイフレンド」をはじめ、韓国ドラマ・映画のロケ地としても有名で、 開放感のある雰囲気から韓国国内でも小旅行地として人気を集めています。

●デフォルト

バックカラー（ブルー）と写真がすべて淡い色味なので、デフォルトのグレーだと全体的にぼけた印象に。※モバイルだと一番自然かもしれません

●#363636

全体の色バランスを考えて濃い目のグレーに設定。

●#000000（黒）

全体の色味に対して文字だけ浮いている印象。

リリーフィールド公園

4月中旬から5月初旬にかけて、真っ白で伊江村の村花テッポウユリをはじめ、様々なユリが咲き誇ります。

リリーフィールド公園

4月中旬から5月初旬にかけて、真っ白で伊江村の村花テッポウユリをはじめ、様々なユリが咲き誇ります。

リリーフィールド公園

4月中旬から5月初旬にかけて、真っ白で伊江村の村花テッポウユリをはじめ、様々なユリが咲き誇ります。

ライン

●デザイン1

おすすめツアー

Styling>BORDERから設定
下のラインのみ色を付ける
ラインの太さはコンテンツにもよるが1～2がすっきりして見える
テキストよりもラインの色が濃いと不自然なので、基本テキストより薄い色を設定する

●デザイン2

航空券を選ぶコツ

BACKGROUND>Background colorで背景色を設定

Styling>BORDERで以下のように設定する
①Border widthで1に一括設定する
②左のラインのみ3に変更
③それぞれに色を設定（上・右のラインは白に設定）

Paddingの左を5、上を3に設定しスペースを作る

★このデザインは左寄せが自然に見えます

●デザイン3

おすすめ観光スポット

テキストとラインを別々で追加する

「Heading」や「Paragragh」でテキスト追加し、その下に「Divider」を追加
Dividerを選択した状態以下のように設定する
①General>Line weightでラインを太くする（この場合は7に設定）
②ラインの長さを確かめながらMarginの左右の数値を調整していく

テキストとラインの幅を狭める
テキストを選択し、Marginの下を0にする
バランスを見て必要であれば、DividerのPaddingを調整

●デザイン4

2泊3日ソウルツアー

HeadingやParagraghのBackgraound colorを設定
必要に応じてPadding（上下）の調整をする
↓Padding調整していない場合

2泊3日ソウルツアー

タブ

タブと本文のテキストサイズを調整

タブの幅が狭いため、タイトルが改行されてしまうことが多い
①フォントサイズを調整
②Tab headerを選択し、Paddingを調整

タブの色（Background color とContent color）をステータスごとに変える

タブヘッダー（タイトル部分）を選択し、Styling>Normal stateとあるタブを切り替えて色を設定する
※タブの色や文字サイズは連動しているのでどのタブヘッダーを選択してもOK

・Nomal state：デフォルト状態
・Mouse over state：マウスをタブヘッダーに重ねた状態
・Active/Selected state：選択された状態