フリーレイアウト – Yappli

機能一覧メニューはこちら

フリーレイアウト/ FREE LAYOUT

フリーレイアウト機能の使い方

フリーレイアウト機能はその名の通り、画像とテキストを組み合わせて、オリジナルのページを作成できます。アイデア次第で多彩なページを作ることができます。

文字の入力・画像の設定について

基本的な使い方

①画像をアップロードすることができます

②タイトル・本文を入力することができます

タイトル・本文を入力するとアップロードした画像は自動的に背景画として表示されます。画像はテキストの高さ分しか表示されません。テキストを画像の隣に設定したい時はブロックの下部にある「詳細設定」から「画像の幅」を指定することで調整ができます。

③タイマーを設定することができます

「配信開始日時」「配信終了日時」をクリックするとカレンダーが表示されます。日付と時間を指定してください。※終了日のみの登録はできません。

④アクションを設定することができます

「リンク」を指定した上で、「未設定」をクリックするとアプリ内のコンテンツ一覧がポップアップ表示されます。該当するコンテンツを選択してください。

★リンク先をWEBにしたい場合

WEBビューコンテンツを選択し「直接URLを入力」の欄にURLを入力するとリンクができます。

★一度設定したリンクを削除したい場合

設定したリンクの右側に表示されている「×」ボタンをクリックすると「未設定」状態にが戻ります。

ブロックの操作

フリーレイアウトの１項目を「ブロック」と呼びます。ブロックの下部にブロック操作用のアイコンが並んでいます。

左から、①「ロック」②「表示/非表示」③「他のブロックにコピー」④「他のブロックに詳細設定をコピー」⑤「複製」⑥「追加」となります。

①ロック

ブロックを編集不可の状態へロックすることができます。再度クリックすると編集可能になります。

②表示/非表示

ブロックを非表示にできます。再度クリックすると表示されます。

③他のブロックにコピー

作成したブロックをコピーし、他のフリーレイアウトにペーストすることができます。フリーレイアウト画面を別のブラウザで立ち上げてください。ブラウザを横に２つ並べ、コピー元ブロックの「③他のブロックにコピー」アイコンをクリックし表示が変わった事を確認した後、コピー先のブロックをクリックしてください。

④他のブロックに詳細設定をコピー

「③」内で挙げたものと同じ手順で、ブロックの「詳細設定」をコピーし、他のフリーレイアウトにペーストすることができます。

⑤複製

ブロックを複製することができます。

⑥追加

新規のブロックを追加することができます。

新CMSで追加された新機能(ロック、表示/非表示)については、新CMSで設定後、旧CMSへ切り替えた上で同コンテンツを保存された場合は解除がされます。ご注意ください。

ブロックの削除

ブロックを削除する場合は、右上の「×」ボタンをクリックすると削除ができます。

ブロックのデザイン設定

詳細設定について

ブロックの下部にある「詳細設定」で、デザイン面の設定ができます。

詳細設定の使い方

①カラムの幅

ブロック横幅を設定できます。

②マージン

画像・文字・背景の外側の余白を設定できます。

③パディング

ブロック内の余白を設定できます。

④角丸、シャドウ

ブロックに、丸みや影をつけることができます。詳しくは、角丸シャドウ機能の使い方をご参照ください。

⑤背景カラー

ブロックの背景色を設定できます。色はパレット・カラーコード・RGBから指定できます。％は不透明度です。

⑥罫線の太さ、罫線カラー

ブロックの上下左右に罫線を表示できます。

⑦画像の幅

画面の横幅に対する、画像の比率を調整できます。「0(背景)」を設定すると背景画像になります。

⑧画像の繰り返し

アップロードしている画像を、ブロック内で繰り返し表示できます。画像の幅が「0(背景)」でないと設定できません。

⑨画像の角丸

画像に丸みをつけることができます。

⑩タイトルカラー、本文カラー

タイトル・本文の、色・透明度・文字サイズ・配置を設定できます。

⑪その他のアクセサリ

プロックの右端に任意のアイコンやテキストを表示させることができます。※リンクを設定する必要があります

※機能のご利用には、最新版のプレビュー及びアプリへのアップデートが必要になります。
最新版でない場合、一部機能が使用できない場合がございますので、ご注意ください。
よくある質問-フリーレイアウト機能

設定済みのリンクはどうやって削除できますか？

設定済みのリンクの右側にある✗ボタンををクリックしますと、「未設定」になります。

未設定のままにしたい場合は「保存」を、他のコンテンツにリンク設定をしたい場合は、改めてリンク設定を行ってください。

文字のフォントを変えたい、太くしたいです。

アプリのフォントの変更は行なえません。画像をご用意いただき、ご利用ください。

文字の色を変えたいです。

フリーレイアウト機能の使い方　←こちらのページをご参考ください

推奨している画像サイズはありますか？

アプリを制作する際の画像サイズに指定はありますか　←こちらのページをご参考ください

画像をアップしたのに画面に表示されません。

アップロードされた画像サイズをご確認ください。
・縦幅は高くなっていませんか？
アプリをご利用になるユーザー様での表示も重くなりますので、何枚かに切り出し、分割してご設定ください。
概ね1000px以内に抑えることを推奨しています。
・横幅は広くなっていませんか？
弊社で推奨していないサイズの画像をアップロードされますと、動作・表示が重くなることが想定されます。
推奨しているサイズである横幅640px、もしくは最大1000px以内にリサイズした上でアップロードをお試しください。
アプリを制作する際の画像サイズに指定はありますか　あわせて、弊社サポートページもご参考ください。

画像がアップできません。

対応している画像形式はJPEG・PNGとなります。
GIF・PSDなど、上記以外の形式は対応しておりませんのでご了承ください。

セルに設定した画像の高さが想定したとおりになりません。

同一セルにテキストが入力されていないかをご確認ください。

設定した画像の背景が透けません。

設定している画像を透過PNGで作成してください。
透過PNGで作成されている場合、背景色設定のカラー指定および透過指定が1%以上になっているかをご確認ください。
↓透過PNGの画像をアップロード、背景カラーを黒、透過指定を100％とした際の設定例です

設定した画像がループ(繰り返し)表示されています

画像の繰り返し設定が無効になっているかをご確認ください。

設定した画像/文字/セルがプレビューヤプリに表示されません。

配信開始日時が未来や過去に設定されていないかをご確認ください。
※弊社推奨ブラウザ以外での操作や、配信可能日時に不適切な文字が入力したまま保存された場合に過去の日付でタイマー設定がされる場合がございます。

電話をかけるアクションをつけられますか？

フリーレイアウトのリンク先を以下にすることで、電話をかけるアクションを設定することが可能になります。

フリーレイアウト機能で、電話をかけるアクション元のセルを用意する

そのセルの「リンクなし」をShiftを押しながら左クリックする

直接入力できるようになるので、「tel:xxxx-xx-xx」をコピー＆ペーストし、保存する

PreviewYappliで動作をご確認ください

アプリ上でメールフォームを送受信する、もしくはメーラーを立ち上げる機能はありますか？

フリーレイアウトのリンク先を以下にすることで、端末のメーラーを立ち上げることが可能になります。

フリーレイアウト機能で、メールを立ち上げるアクション元のセルを用意する

そのセルの「未設定」をShiftを押しながら左クリックする

mailto:メールアドレス　をコピー＆ペーストし、保存

PreviewYappliで動作をご確認ください

作成済みのフリーレイアウト機能をコピーして、別のコンテンツとして作成できますか？

フリーレイアウト機能で簡単にブロックを製する方法　←こちらのページをご参考ください

2カラム設定をしていると、デザインが崩れます。

アピアランスのパディング・マージンの設定をご確認ください。
フリーレイアウト機能の使い方　←こちらのページをご参考ください

1つのセル内で画像と文字を組み合わせたいです。

アピアランス設定の「パディング」のトップ設定を、画像の縦サイズに合わせて調整ください。
ポップアップ機能の使い方
『ポップアップ機能』とは、アプリ内でポップアップを表示し、簡易的なお知らせや案内ができる機能です。

前提事項
- ポップアップはフリーレイアウト機能で作成します。
- ポップアップとして設定するフリーレイアウト機能の画面に、多くの情報が設定されている場合、ポップアップの立ち上がりが遅くなることがあります。
  表示領域が長い場合ポップアップ内はスクロールしますが、スクロールしない範囲での設定を推奨します。
必要なアプリのバージョン

本機能をご利用いただくには、アプリが以下のバージョンとなっている必要がございます。
設定を行う前に、必ずアプリのバージョンをご確認ください。
対応しているバージョン未満の場合、管理画面より『再申請』をいただくと弊社にてバージョンアップの対応をさせていただきます。

★対応バージョン★
・iPhone…7.4以降
・Android…4.6以降

また、「アプリ上でポップアップが表示された際、外側をタップすることで閉じられるように改善したバージョン」は以下になります。

★対応バージョン★
・iPhone…9.42以降
・Android…7.6.6以降

『ポップアップ』を設置できる機能
- フリーレイアウト機能
『ポップアップ』に設定できる機能
- フリーレイアウト機能
『ポップアップ』内からリンクできる機能
- フリーレイアウト機能
- 電子書籍機能
- クーポン機能
- ウェブビュー機能
- アニメーションレイアウト機能
- フォト機能
- ニュース機能
- カタログ機能
- ショップ機能
- ビデオ機能
- 通知履歴
- 会員カード機能
- スクロールメニュー
- お気に入り一覧
- ログイン機能
- フォーム機能
- スタンプ機能
- リダイレクト
※あくまでリンク先として指定ができ、機能としてタブバー内に配置できるのみとなり、フリーレイアウト内のオプション機能（テキストコピー等）は含まれません。

設定方法

機能を設定するための全体の流れとしては
1. 「ポップアップ機能」内で表示させる「フリーレイアウト機能(表示元)」を作成する
2. 「ポップアップ機能」を表示させたい「フリーレイアウト機能(表示先)」で設定をする
となります。

「ポップアップ機能」内で表示させる「フリーレイアウト機能(表示元)」を作成する
1. リンク先に設定できる機能は、『ポップアップ』内からリンクできる機能に記載のものに限ります。
2. 設定が完了したら、ページの下にある「保存」ボタンを押します。
「ポップアップ機能」を表示させたい「フリーレイアウト機能(表示先)」で設定をする
1. コンテンツ管理から、ポップアップ機能を設置したいフリーレイアウト機能を開きます
2. リンク元であるセルのアクションから、「ポップアップ」を選択します
3. 「ポップアップで表示するフリーレイアウト機能」に、上記で作成したフリーレイアウト機能(表示元)を選択し決定します
4. 保存後、Preview Yappliにて動作をご確認ください
角丸シャドウ機能の使い方
新入稿画面のフリーレイアウト機能にて、セルや画像に角丸やシャドウを適用することができます。

必要なアプリのバージョン

本機能をご利用いただくには、アプリが以下のバージョンとなっている必要がございます。

設定を行う前に、必ずアプリのバージョンをご確認ください。

対応しているバージョン未満の場合、管理画面の「アプリ登録」より『再申請』をいただくと、弊社にてバージョンアップの対応をさせていただきます。

★対応バージョン★
・iPhone…9.43以降
・Android…7.6.7以降

注意事項

本設定は、旧入稿画面では行えません。

新入稿画面のフリーレイアウト機能のみで行なえます。

角丸シャドウ機能の使い方

1.角丸シャドウを適用したいセルの「詳細設定」をクリックします

2.詳細設定画面にて以下3点を入力し、角丸を適用します

・サンプルイメージ①

・サンプルイメージ②
1. プレビューヤプリにて見え方を確認し、問題がなければ再構築を行ってください。

カルーセル機能の使い方

エンベッド動画機能の使い方〜Vimeoアカウントの設定方法〜

エンベッド動画機能は、アプリ上に動画埋め込み、自動再生することができる機能です。

フリーレイアウト機能内で、画像を差し替える感覚で簡単に動画を使ったデザインを作成することができます。

エンベッド動画機能を使用するためには、Vimeo PROアカウント（有償）の登録が必要になります。

まずは以下の手順に従って、Vimeoアカウントを作成しましょう。

Vimeo公式ホームページ＞＞

Vimeoアカウントを作成する方法

①こちらのプラン一覧より、Vimeo PROを選択します。

※Vimeoの規約により、法人や個人が Vimeo で商用コンテンツを配信する場合は、Vimeo Proまたは Vimeo Business アカウントが必要です。無料プランではご利用いただけませんので、ご注意下さい。

※2018年5月時点の金額となります。最新の料金表は、Vimeo公式サイトをご確認ください。

②クレジットカードの情報を入力して、購入します。

③アカウント設定に移動し、Vimeoでの動画の設定を行います。

④左のメニューから「プリセットを埋め込む」より「＋新規プリセットを追加」を選択します。

⑤プリセットの名前は自由に記載可能ですが、ここでは「非表示プレイヤー」（仮称）と名前をつけます。

⑥赤枠内の「全画面ボタンを表示」「再生バーを表示」「音量調節」の3つにチェックをつけます。End Screensは「Enpty」に設定しておきましょう。

⑦続いて左のメニューから、「アップロードのデフォルト」を選択します。

上から順に、「非表示プレイヤー」のプリセットを選択し、プライバシー設定を赤枠内同様に設定します。

「vimeo.comで非表示にする」、コメントを「誰もできない」、動画の埋め込みを「いっさい許可しない」を選択しておくことで、アプリ以外で動画が表示されたり、コメントされるのを防ぎます。

また、「他人が自分の動画にできることは？」というカテゴリー内の「ダウンロード」「アルバム・チャンネル・グループなどのコレクションに追加」のチェックを外しておきましょう。

以上でVimeoの設定が完了しました。

動画をアップロードする方法はこちら＞
エンベッド動画機能の使い方〜動画をアップロードする方法〜

エンベッド動画機能は、アプリ上に動画埋め込み、自動再生することができる機能です。

フリーレイアウト機能内で、画像を差し替える感覚で簡単に動画を使ったデザインを作成することができます。

エンベッド動画機能を使用するためには、Vimeo PROアカウント（有償）の登録が必要になります。

Vimeoアカウントの設定方法はこちら＞

Vimeoに動画をアップロードする方法

※Vimeoの初期設定を行った上でアップロードをしてください。

①Vimeoにログイン後、右上のアップロードをクリックし、動画をアップします。
②動画のアップロードが完了したら、動画サムネイル左上の設定をクリックします。

動画のアップロードが完了後、下記のような画面に遷移する場合があります。
その場合は、動画左下の設定をクリックします。

③左メニューより動画ファイルリンクを選択し、下記赤枠内の「HTTPストリーミング」のリンクをコピーをします。
※このURLがインフィードエンベッド動画のURLになります。

フリーレイアウト機能に動画を埋め込む方法

①フリーレイアウト機能で動画をアップしたい枠を作成し、動画のサムネイル画像をアップロードします。

(動画が起動するまでの間に表示される画像です。)

※注意※

サムネイル用として設定した画像のアスペクト比に合わせて動画が再生されます。
サムネイル画像と動画のアスペクト比が異なる場合、動画が正しいサイズで表示されない場合がございます。
そのため、流したい動画とアスペクト比が同じ画像を設定しましょう。

②赤枠に先ほどの「インフィードエンベッド動画のURL」を入力します。

③「保存」をクリックします。

④最後に、プレビューで動画が動いていることを確認し、本番反映をします。

※確認できない場合は、プレビューが最新バージョンになっているかご確認ください。