※Save押さないでください※

 ↑「All Devices▼」をクリックで、
「Mobile」編集画面に切り替わる

プレビューはSaveの横の目のマーク

赤枠部分が、モバイル画面の編集時に調整が必要な点です。

メインビジュアル(トップバナー)

●画像を設定する

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

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

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

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

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

●背景で設定する

韓国民俗村

2023年04月07日(金) ~ 11月12日(日)の土曜日・日曜日・祝日に限り、夜間イベントが開催されます。
特別公演をはじめ、ライトアップされた各スポットでは記念写真が撮れるなど、
夜ならではの「韓国民俗村」が満喫できる工夫が随所に見られます。

「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未設定

伊江島ってどんなとこ?

伊江島は白砂のビーチや紺碧の海が広がる人口4,500人ほどの島です。
さとうきび、島らっきょうなどの農業、伊江牛などの畜産、そしてソデイカ漁などの水産業が盛んです。
戦争での悲しい歴史もありますが、今は瞬きさえゆっくりになるような島の時間が流れています。

●Padding設定後

伊江島ってどんなとこ?

伊江島は白砂のビーチや紺碧の海が広がる人口4,500人ほどの島です。
さとうきび、島らっきょうなどの農業、伊江牛などの畜産、そしてソデイカ漁などの水産業が盛んです。
戦争での悲しい歴史もありますが、今は瞬きさえゆっくりになるような島の時間が流れています。

●Padding/Margin未設定

●Padding/Margin設定後

ノンコルダム壁画村

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

ノンコルダム壁画村

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

●Padding/Margin未設定

●Padding/Margin設定後

ノンコルダム壁画村

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

ノンコルダム壁画村

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

All Devicesでレイアウトを利用して設定した配置が、モバイルだと上のように異なって見える

パソコンと同じように二列で表示したい場合
<方法1>
「VISIBILITY」で隠す機能を使ってモバイル用の表示を別途作成する
<方法2>
レイアウトをRowごと選択し、General>Columns per lineで列数を調整する

★下は、方法2を実施後、Columns spacingやテキストサイズ、画像の幅なども調整した場合

↓編集画面だと2行になっていますが、スマートフォンで確認するときれいに収まっています

●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月初旬にかけて、真っ白で伊江村の村花テッポウユリをはじめ、様々なユリが咲き誇ります。

All Devicesでレイアウトを利用して設定した配置が、モバイルだと上のように異なって見える

パソコンと同じように横並びで表示したい場合
 <方法1> 「VISIBILITY」で隠す機能を使ってモバイル用の表示を別途作成する

<方法2> レイアウトをRowごと選択し、General>Columns per lineで列数を調整する

ライン

●デザイン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日ソウルツアー

タブ

ツアー料金

大人(中学生以上):53,800円~126,800円
小学生:43,400円~116,500円

※空席や空室状況によって料金は変動します。
※未就学児の方の費用はお問い合わせください。

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

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

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

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

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