【第28回 出し分け機能を使ったアプリ活用例】

ぴーやま ： こんにちは、アプリデザインチームで す！今回は出し分け機能を使ったアプリの活用例をお伝えさせていただきます。

あかちゃん：出し分け機能とはフォーム機能の登録情報を元にコンテンツを出し分けする機能ですね！

ぴーやま ： そうです！過去の記事で設定方法について紹介しているので、ぜひこちらも参考にしてくださいね。

【vol.27 ショップ機能編】

よっしー：みなさんこんにちは！アプリデザインチームのよっしーです。今回はショップ機能の設定方法について紹介します。

ザッキー：店舗や会場のアクセス情報など様々なアプリで活用いただいている機能ですよね？

よっしー：そうです！ショップ機能の設定方法はとても簡単で、アプリに合わせて項目やラベルなどをお手軽にカスタマイズすることができますよ。

まずは項目設定の方法から紹介していきます！

①ショップの項目設定

よっしー：最初にショップ機能に設定したいラベルの変更や項目の追加などを行います。

「設定項目」では登録している各ショップにお気に入りボタンを設定する事ができます。

「項目の追加と並び順」では項目のラベルやボタンラベルを編集できます。

並べ替えは、項目をドラッグしたまま上下に動かすことで移動します。

また不要な項目は、項目にカーソルを合わせて右上に表示される✖️ボタンで削除できます。

追加ボタンを押すことで項目を追加する事ができます。 

よっしー：これでショップ機能に登録するための項目設定が終わりました！次は実際にショップ登録をしていきましょう！

②新しいショップを登録する

よっしー：まず「ショップ登録」ページから新しい枠を作成します。すると空の新規店舗が作成されるので項目に合わせて入力して行きます。

住所を入力すると自動で地図にピンが設定されます。ピンが正しい位置に設定されない場合は、手動でピンを動かし正しい位置にピンを再設定することもできます。

ザッキー：最後に「項目設定」ページで登録した項目に沿って情報を入力するとショップ登録完了ですね！

よっしー：ショップ機能はCSVファイルで編集する事もできるので、「CSVファイル編集」についての記事も是非チェックしてみてくださいね！

【第25回 ランダム機能～応用編～】

ぴーやま ： こんにちは、アプリデザインチームで す！今回はランダム機能と他の機能を組み合わせた、お楽しみコンテンツの作成方法についてお伝えさせていただきます。

ザッキー：Yappli Summit 2021でも登場した機能ですよね！
「アプリ独自のお楽しみコンテンツを作成したい」という要望も多いので、ぜひこの記事を参考にしてみてくださいね。

ランダム機能とは?

ザッキー：ランダム出し分け機能、通称『ランダム機能』とは複数用意したコンテンツの出現確率を設定し、ランダムで出し分けが出来る機能です。この機能を使うことで、おみくじなどのゲームのような機能が作成できるので、お楽しみコンテンツで使われることが多い機能です。

【第24回 2〜3カラムのマージン設定テクニック編】

たけやん ： こんにちは、アプリデザインチームです！ 今回は、フリーレイアウト機能での2〜3カラムのマージン設定テクニックについてご紹介します。

【第23回 イントロデザイン編】

【第22回 クーポン機能編】

ぴーやま：みなさんこんにちは！アプリデザインチームのぴーやまです。

今回はクーポン機能の使用方法についてお伝えします。

あかちゃん ：ファッションや雑貨などショッピング系のアプリで設定されることが多い機能ですよね。アプリのダウンロード施策としてもよく使用されます！

ぴーやま：ヤプリの管理画面のクーポンは設定も簡単で、解析ツール（Googleアナリティクス）と連携することで利用回数の計測も出来るのでどれぐらい使用されたかが分かりとても便利ですよ！

初めにクーポン機能の基本設定からご説明します。

【基本設定】

ぴーやま ：利用形態は使用できる回数、有効期間はクーポンを使える期間が指定出来ます。

残り時間を指定ではクーポンを開いてから使用できる期間の設定ができますよ。

それでは店舗・オンライン用のクーポンの設定方法を詳しくご説明していきます。

【店頭用クーポンの設定方法】

ぴーやま ：有効期間内で一度限り使用出来る店舗用クーポンを設定していきます。

使うボタンを押すと利用済みに画面が切り替わります！

●利用形態/期間/画像/タイトルを設定

クーポン画像は割引率、どこで使用出来るかが分かりやすいものがおすすめです。

●追加情報/説明文を設定

クーポンの提示方法や金額、注意事項などはこちらに入力してください。

●カラーを設定

説明文や使うボタンのカラーはここで設定してください。

全て設定が完了したので、あとは保存ボタンを押して完成です。

あかちゃん：ここでポイント！

「コピーして保存」ボタンを使えばクーポンが複製でき、次回から簡単にクーポンが作成出来ます。

項目の入れ忘れがふせげる便利な機能なので、ぜひ活用してみてくださいね！

続いてオンライン用のクーポンの設定方法についてです。

【オンライン用クーポンの設定方法】

あかちゃん：オンライン用クーポンとはクーポンコードがコピー出来る設定方法です。

オンラインショップの購入画面にクーポンコードの入力項目がある場合は、この設定方法がおすすめです！

通常のクーポン機能と違う部分は、有効期間の指定方法を「開始/終了日時と「使う」後の利用可能時間を指定」に設定して、クーポンコードを設定する所ですね！

ぴーやま ：購入時にコードを手入力しなくて良いのは使いやすいですね！

あかちゃん：今回は2種類のクーポン機能の設定方法をご紹介しました。

こちらの内容はサポートページの「動画de学習」でも掲載しておりますので、ぜひチェックしてみてくださいね！

【第21回 スタンプカード機能編】

おがちゃん：こんにちは、アプリデザインチームです。今回はスタンプカード機能の活用例をご紹介します。

あいさん ：スタンプカード機能はアプリ施策としておすすめな機能です！

①ログインスタンプ

おがちゃん：まずご紹介するのは、アプリにログインしてスタンプカード機能を開くことでスタンプが付与される、ログインスタンプです。

あいさん ：例えば、1日1回アプリにログインして１ヶ月分のスタンプを貯めるとノベルティや限定クーポンをプレゼントするといったような施策にご活用いただけます。

おがちゃん：ユーザーのアクティブ率の向上や、アプリのアンインストール防止策としてオススメです！

②チェックインスタンプ

おがちゃん：次にご紹介するチェックインスタンプは、特定の場所に行くとスタンプが付与される仕組みで、ショップ機能で設定した住所と連携することで設定が可能です。

あいさん ：店舗来店時にスタンプ付与などの施策にご活用いただけ、来店促進の効果が期待できます！

③QRコード読み取り型スタンプ

おがちゃん：QRコード読み取り型は、アプリ内のカメラ機能でQRコードを読み取るとスタンプが獲得できる仕組みになっています。汎用的な使い方ができるのが魅力です。

あいさん ：来店時にQRを読み取ってスタンプを付与するチェックインスタンプに近い活用方法や、イベント開催時に複数のブースでQRを設置するといったスタンプラリー的な使い方も可能です！

【第20回 フォトフレーム機能編】

たけやん ： こんにちは、アプリデザインチームです！今回はアプリ独自のお楽しみコンテンツ、フォトフレーム機能についてご紹介します。

あかちゃん： こちらがフォトフレーム機能を利用して撮影した写真ですね。

たけやん ： そうです、オリジナルのフレームで写真撮影をすることができます！管理画面の設定方法もとても簡単なので、さっそく実際に設定してみましょう。

フォトフレーム機能の設定方法

【STEP１】フレーム画像の準備

背景を透過させたフレーム画像を準備します。

【STEP2】管理画面の設定

新規作成したフォトフレーム機能のコンテンツ管理ページを開きます。

これで設定は完了です！登録したフォトフレームは、アプリ上で以下の手順で操作できます。

あかちゃん： 撮影ができるだけでなく、簡単なステップで写真のシェアもできて素敵ですね！

たけやん：そうですね。以下のようなフォトフレーム機能とSNSシェアを連動させた企画を実施することで、効果的にアプリを盛り上げることもできます。是非フォトフレーム機能をアプリに取り入れてみてください♪

■フォトフレーム機能について、詳しくはこちらをご参照ください。

【第19回 便利な小技紹介】

おがちゃん ：こんにちは、アプリデザインチームです。今回は管理画面操作の便利な小技をご紹介します。

もっさん ：ショートカットキーなど今すぐ役立つものばかりなので必見です！

①【ショートカットキー】Ctrl+S（Command+S）で保存

 おがちゃん ：Windowsでは「Ctrl+S」、Macでは「Command+S」を押すことで各機能の保存が行えます。

もっさん：もちろん各機能の「保存」ボタンでも保存が可能ですが、慣れたらこちらの方が早いかもしれません！私もよく使います。

②【ショートカットキー】Ctrl+F（Command+F）でキーワード検索

 おがちゃん ：Windowsでは「Ctrl+F」、Macでは「Command+F」を押すことで、管理画面内でのキーワード検索が行えます。

もっさん：これ便利ですよね！例えば店舗情報の更新を行う場合、店舗名を検索することで素早く目的の情報を見つけることができます。その他、カタログやニュース記事など、複数入稿が多い機能で役立ちます。

 おがちゃん ：また検索バーを選択（クリック）した状態で、Windowsでは「Ctrl+A」、Macでは「Command+A」を押すと検索バー内のキーワードを全選択することができ、長い文字列でも削除やキーワードの置き換えがすぐに行えるので、こちらの活用もオススメです。

③簡易プレビュー画面のブロックをクリックして自動スクロール

おがちゃん ：フリーレイアウト機能やニュース機能等では、簡易プレビュー画面で目的の要素をクリックすると該当のブロックまで自動スクロールすることができます。

※一部未対応の機能もあります

もっさん：「目的のブロックがどこにあるか分かりづらい」「自分でスクロールして探すのが面倒」と感じたことのある方にぜひお試しいただきたいです！

④機能をまたいだブロック操作（他のブロックにコピー / 他のブロックに詳細設定をコピー）

 おがちゃん ：別機能のブロックの設定を使い回したい！と思ったことはありませんか？実はカンタンに実現できてしまうんです！

もっさん ：タブを2つ用意し、コピー元とコピー先の機能をそれぞれ開いて、以下の手順を行ってください。

(1)コピー元のブロック操作（他のブロックにコピーor他のブロックに詳細設定をコピー）アイコンをクリック

(2)コピー先の設定を上書きたいブロックをコピー

【第18回 ニュース機能編】

ぴーやま ：みなさんこんにちは！アプリデザインチームのぴーやまです。

今ひとつ悩みがあって、、アプリで簡単なニュース記事を作成したいのですが、いい機能はないでしょうか？

もっさん：それならニュース機能を使った更新が最適ですよ！ニュース機能はテンプレートの設定で、簡単な記事の作成ができる機能です。

ぴーやま：そんな機能があったんですね、けどテンプレートの設定って難しそう！

もっさん：基本的な使い方はフリーレイアウト機能と同じなので、やり方を覚えたら簡単ですよ！

下の画像が完成のイメージです。では設定していきましょう♪

①記事一覧用のテンプレート設定

最初にマスタテンプレートの記事一覧用からブロックの設定をしていきます。

詳細設定のパディング・罫線カラーと太さ・画像の幅・フォントのカラーを設定しました。

②記事詳細用のテンプレート設定

次にマスタテンプレートの記事詳細用からブロックの設定をしていきます。

今回は画像・タイトル・テキスト・赤字テキスト・ボタンのブロックを設定します。

テンプレート名を設定した後は、記事詳細用からブロックの詳細設定をして保存します。

③記事編集から記事を登録

テンプレートが設定できたら最後に記事を登録していきます。

記事編集画面に移動して記事詳細にテンプレート名が入ったブロックが表示されるので、テキストや画像を追加していけば①②のテンプレートが反映された記事の作成が出来ます。

ぴーやま ：一度テンプレートを設定しておくと、新しい記事を追加する時にテンプレートが使い続けられるのは嬉しいですね♪

もっさん：そうなんです、テンプレートを使用しない場合は「テンプレートの適用」を無効に設定すると、詳細設定のボタンが押せるようになるので個別の詳細設定も出来ますよ！

ぴーやま ：テンプレートが適用されたブロックは、マスタテンプレートを変更すれば全てのブロックの見え方が変更されるのも嬉しいですね♪

もっさん：一度テンプレートを作成すれば更新が簡単な「ニュース機能」ぜひ使ってみてくださいね！

【第17回 フリーレイアウト機能 〜ブロック操作編〜】

おがちゃん ：こんにちは、アプリデザインチームです。突然ですが最近入社したよっしーはフリーレイアウト機能を使いこなせてますか？

よっしー ：実は自信がなくて…設定できる項目が多く自由度が高いので、実装に時間がかかってしまうことが悩みです。

おがちゃん ：よっしーの気持ちよく分かります…！それでは作業効率アップに役立つ、フリーレイアウト機能の「ロック」「表示 / 非表示」「他のブロックにコピー」「他のブロックに詳細設定をコピー」「複製」「追加」の6つのブロック操作についてご紹介しますね！

   ※ニュース機能でも「表示 / 非表示」以外のブロック操作を行うことができます

①ロック

 おがちゃん ：まずは「ロック」のご紹介です。アイコンをクリックするとブロックがグレーアウトされ、編集を行うことができなくなります。

よっしー ：具体的にどんな場面で活用するのでしょうか？

 おがちゃん ：例えば1つのアプリに対し編集権限を持つ人が複数存在する場合、間違ってブロックの消去や、設定の上書きが行われないようミスを防ぐのに役立ちます！

元に戻したいときはもう一度「ロック」アイコンをクリックしてくださいね。

②表示 / 非表示

 おがちゃん ：「表示 / 非表示」もアイコンをクリック後、ブロックがグレーアウトされ編集を行うことができなくなります。「ロック」と異なるのは、アプリ画面上で該当のブロックの内容が非表示になる点です。

よっしー ：管理画面の簡易プレビューでも非表示が確認できて分かりやすいですね。

 おがちゃん ：こちらは今後表示予定のブロックを残しておきたいといった際に便利です。表示状態に戻すときは再度「表示 / 非表示」をクリックください。

③他のブロックにコピー

おがちゃん ：ブロックの設定を全て上書きしたい場合は、「他のブロックにコピー」が便利です。

よっしー ：「他のブロックにコピー」アイコンを押した後、上書き先のブロックをクリックするだけでコピーできるんですよね！とてもカンタンです。

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

よっしー ：先ほどの「他のブロックにコピー」と似ていますが、どう違うんでしょうか？

 おがちゃん ：「他のブロックに詳細設定をコピー」はマージンやパディング、テキストのサイズやカラーなどの詳細設定（デザイン設定）のみを上書きできます。

よっしー ：なるほど。画像やテキスト、リンク先等はそのままにデザインだけコピーしたい場合に便利そうです！

⑤複製

 おがちゃん ：「複製」では複製元のブロックと同じ設定のブロックを追加することができます。

よっしー ：複製元のブロックの設定をベースに編集すれば、ゼロから設定を行わずに済みますね！作業の時短になりそうです。

⑥追加

よっしー ：「追加」は、デフォルト状態のブロックを追加できるんですよね？

 おがちゃん ：そうです！ゼロから設定を行いたい際は「追加」がおすすめです。ただ注意点があり、画像またはテキストを設定しないまま保存をすると追加したブロックが消えてしまいます。

そのため「画像・テキストの設定→詳細設定」の流れで作業を行うのが良いですよ。

よっしー ：画像・テキストの設定を忘れたまま保存して、詳細設定を行なったブロックが消えたことありました…。気をつけます！

 おがちゃん ：今回ご紹介した6つのブロック操作を使いこなせると、更新作業がとても楽になりますので是非お試しくださいね！

■フリーレイアウトについて、詳しくはこちらをご参照ください。

【第16回 インフィードエンベッド動画編】

たけやん ： こんにちは、アプリデザインチームです！今回は、フリーレイアウト機能内に動画を埋め込み、自動再生するインフィードエンベッド動画についてご紹介します。

ますこ ： こちらがエンベッド動画を設定したアプリですね。アプリを開くと自動で再生されるのでインパクトがありますし、ブランディングにも活用できそうです。

たけやん ： すでに動画素材をお持ちの場合、Vimeoアカウントの開設をしてすぐに設定できます！

インフィードエンベッド動画の設定方法

【STEP１】Vimeoから動画ファイルリンクを取得する

1. 下記手順を参考に、Vimeo PROアカウント（有償）の開設と初期設定を行います。

【第15回 ポップアップ機能の設定方法と実装例のご紹介】

あかちゃん：こんにちは、アプリデザインチームです！今回は【vol.4】リンク設定小ワザ集でも登場したポップアップ機能の設定方法と実装例をご紹介していきたいと思います〜！

ますこ：そもそもポップアップってどんな時に使用するものなんですか？

あかちゃん：簡易的なお知らせや案内ができる機能なのですが、アプリ内の各ボタンの表示や、コンテンツについての説明をしたい時などによく使います。

では、設定方法をおさらいしてから、どんな場面で使用されているのか見ていきましょ〜！

【おさらい】ポップアップ機能の設定方法

※一番上のブロックに設定した背景色が、ポップアップ全体の背景色として設定されます。

※第４回記事より引用

【第14回 スクリーンショット編】

ぴーやま ：みなさんこんにちは！アプリデザインチームです。

今回は特別ゲスト、ASO（アプリストア最適化）の先生をお招きして、スクリーンショットについて教えていただきます。

ASO先生：普段はASOや広告運用を担当しています。

スクリーンショットは内容を少し見直すだけで、アプリのダウンロード数を向上させることが出来ます。今回はレイアウトのパターンとポイントをお伝えさせていただきます！

ぴーやま：よろしくお願いします！

まずはじめにスクリーンショットのパターンをご紹介いただきます。

①縦向きのレイアウト

ASO先生：こちらはよく作成されているレイアウトですね。画像1枚ずつに、アプリのメリットを伝える事が出来ます。

アプリストア内検索で表示される時に、縦向きの場合3枚目まで画像が表示されるのでアプリのアピールしたい機能や、ユーザーがアプリをDLするメリットがいくつかある場合に有効なレイアウトです。

ぴーやま：1枚に内容がまとまっているので、見やすくわかりやすいですね！

3枚目まで情報を伝えられるのも嬉しいです！

②横向きのレイアウト

ASO先生：横画像はアプリを検索した時に1枚が大きく表示されるので、文字を大きく使うことができ、検索表示の時にユーザーの目に止まりやすいというメリットがあります。

アピールしたい機能が絞られている場合、有効なレイアウトです。

特にGoogle Play Storeでは、ストア詳細ページ（アプリをDLするページ）でApp Storeに比べるとスクリーンショットが小さく表示されるので、Androidのスクリーンショットに適したレイアウトとも言えます。

デメリットとしては検索画面で表示される画像の枚数が少なくなるので、伝えられる情報がしぼられてきます。

ぴーやま：横向きで作成する場合は、App Store用に縦向きのスクリーンショットも用意してあげると、どちらにも適したスクリーンショットが設定出来ますね・・！

③両方良いとこどり！縦向き画像をつなぐパターン

ASO先生：情報を大きく見せたいけれど、沢山伝えたい！そんな時におすすめパターンです。上の参考画像の場合1枚目と2枚目をつなげたレイアウトにする事で、テキストと画像を大きく表示させる事ができ、3枚目で更にメリットを伝える事が出来ます。

また何枚も画像をつなげたレイアウトにした場合は、ブランドの世界観なども大きく表現する事が出来ます。

ぴーやま：最後にスクリーンショットを作る上でのポイントです！

〜スクリーンショットを作成する時のポイント〜

・情報

テキストはユーザーの頭にすっと入ってくるような、簡潔な文章を心がけましょう。

・文字サイズ

実際にストアで表示された時に読みづらい大きさになっていないか確認しましょう。

・縦向きレイアウトは3枚目までが重要！

検索の時に表示される3枚目までの画像が重要です。

4枚目以降はユーザーに見られる頻度が激減するので、この部分に伝えたい情報がまとまっているかどうか確認しましょう。

ASO先生：何をユーザーにアピールしたいか、目的に合わせたスクリーンショットを作成してくださいね！

ぴーやま：ありがとうございます！

では次に管理画面からスクリーンショットの登録、申請までの流れをお伝えします。

スクリーンショットの登録・申請までの流れ

❶管理画面のアプリ登録に移動します。

❷スクリーンショットを設定します。画像は2パターン登録してください。

1：iPhone Xs Max以降用のスクリーンショットを登録します。(1242×2688pxサイズ・PNG形式)

2：iPhone 5以降用＆Android用のスクリーンショットを登録します。(640×1136pxサイズ・PNG形式)※

　※iPhone 5以降とAndroidは同じスクリーンショットを併用しています。

　　モックアップもiPhone5以降とAndroidどちらでも使える画像を推奨しております。

Android用を個別で設定したい場合はこちらから設定してください。

【第13回 アプリ背景画像編】

たけやん ： こんにちは、アプリデザインチームです。みなさん、アプリの背景はどうなさっていますか？背景色をブランドイメージに合わせて設定されている場合が多いかと思いますが、実は背景には画像も設定できます！
今回は、アプリをより素敵にする背景画像の設定方法とデザイン例をご紹介します。

あかちゃん：こちらが背景画像を設定したアプリですね。スクロールによって背景とコンテンツに動きが生まれて、よりアプリらしい表現になっています！

たけやん：そうですよね。また単色の背景色設定と違い、お好きな画像を設定できるのでブランドの世界観もアプリ全体で表現することができます。

背景画像の設定方法

【STEP１】画像を用意する

たけやん：それでは実際に背景画像を設定してみましょう。用意する画像の推奨サイズは、縦2688px × 横1242pxです。今回はこちらの画像を用意しました。

あかちゃん：背景に画像を入れてもテキストが読みやすいように、画像に白色を重ねて加工していますね。

たけやん：はい。背景画像を設定しても読みやすいかどうか、実際に設定して確認してみることがポイントです。

【STEP2】「デザイン設定」で画像を入稿する

たけやん：では実際に画像を入稿してみましょう。

① 管理画面の「デザイン設定」画面に入ります。

② 「背景」の「背景画像」の箇所をクリックしてSTEP1で用意した画像を入稿します。

③ 「保存」をクリックで設定完了です。

あかちゃん：とても簡単ですね、すぐに実践できそうです。

たけやん：是非、色々な画像で試してみてくださいね。ここからは、背景画像の例をご紹介します。

アプリ背景画像のデザイン例

① 写真背景画像

たけやん： 先ほどご紹介した、写真を使った背景画像です。

あかちゃん： ブランドイメージに合わせた画像にすることで、世界観を表現することができますね。

② グラデーション背景画像

たけやん： こちらはグラデーションを使った背景画像です。

あかちゃん： 写真素材がない場合でも、グラデーション画像を使用するだけでアプリに奥行きが出ますね。

③ パターン背景画像

たけやん： 続いては、パターンを使った背景画像です。ストライプの他にも水玉やタイルなど、様々なバリエーションがあります。

あかちゃん： パターンの柄や配色によって、アプリの雰囲気を大きく変えることができますね。

④ ロゴ背景画像

たけやん： 最後は、ブランドロゴを中央に配置した背景画像です。

あかちゃん： 背景にロゴが表示されることで、認知度をあげたりアプリ全体のイメージを統一することが出来ますね。

たけやん： いかがでしたでしょうか？アプリ背景画像は、簡単な設定方法でアプリの印象を大きく変えることができます。

あかちゃん： 時季ごとに背景画像を更新して、季節感を演出するのもいいですね♪

ぜひ色々な背景を試してみてください！

【第12回 スクロールメニュー編】

おがちゃん：こんにちは、アプリデザインチームです！今回はスクロールメニュー機能のデザイン例を3つご紹介します。

ますこ：デザイン範囲としては狭い部分ですが、ここがアプリの印象と合っていないと違和感を感じますよね。

おがちゃん：デザイン調整前と後を比べると、見栄えが違うのがお分かりいただけると思います。

ますこ：調整後の方がアプリのスタイリッシュな雰囲気に合っています。少しの手間で印象がグッと良くなりますね！

【第11回 アダプティブアイコン編】

ぴーやま：こんにちは、アプリデザインチームです！今回はアダプティブアイコンの作成方法についてご紹介します！

もっさん：普通のアイコンと何が違うのでしょうか？

ぴーやま：アダプティブアイコンとはAndroidのみで設定が出来るアイコンの表示形式です。デバイスごとに異なるアイコンが表示できるようになりました。
※Android 8.0以上からの機能となります。

【STEP1】CSVをダウンロード

おがちゃん：まずは、各機能のCSVダウンロード方法を見ていきましょう。

あいさん：基本的にはボタンをクリックするだけでダウンロードできるので、本当に便利です！

※CSVはUTF-8形式での書き出しとなります。

■フォーム機能

【設定済みの項目を編集したい場合】

①カスタムフィールドに入り、CSVをダウンロードしたい設定済みの項目を選択します。

②「選択肢をダウンロード」ボタンを押します。

【新規作成の場合】

①カスタムフィールドに入り、新規作成ボタンを押します。

②「タイプ」「設定方法」の項目を設定し、「選択肢をダウンロード」ボタンを押します。

■出し分け機能

「出し分け条件をダウンロード」ボタンを押します。

■ショップ機能

「CSV書き出し」ボタンを押します。

【STEP2】データ編集

おがちゃん：ヤプリではGoogleのスプレッドシートを用いて編集作業をしているので、今回はその手順をご紹介します！

①新規シートを作成後「ファイル＞インポート」を押します。

②表示されたポップアップの「Upload」タブを選択した後、CSVを開きます。

③CSVのデータ編集を行います。

④「ファイル＞ダウンロード＞カンマ区切りの値（csv,現在のシート）」を選択し、編集したCSVをダウンロードします。

あいさん：スプレッドシート以外での編集も行えますが、文字化けする可能性があるのでご注意ください！

ぴーやま：みなさんこんにちは！ヤプリ道場もついに第４回目です！

ほっさん：色々なテクニックをご紹介しましたが、お試しいただけたでしょうか〜？
そしてそして！第４回目の今回はリンク設定の小ワザ集をお伝えさせていただきます！

【嬉しき第4回 リンク設定小ワザ編】

ほっさん：リンク設定の小ワザとは？？

ぴーやま：実はですね・・リンク設定にはウェブビューを使った設定以外にも方法があります！

ほっさん：そんな色々なパターンがあったんですね！

ぴーやま：小ワザといっても使えるととても便利です！まずウェブサイトのリンク設定からお伝えしましょう〜！

ぴーやま：１番よく使われているリンク設定の方法です！ ウェブビュー機能を使った設定方法で、アプリ上でウェブページの表示が出来ます〜！

【第3回 カルーセル機能編】

たけやん：こんにちは、ヤプリデザイナーチームです！第三回目では、カルーセル機能についてお伝えします！カルーセルとは、画像などのコンテンツを横にスライドして複数表示する方法です。

ぴーやま：限られたスペースでより多くの情報を見せることができるので、たくさんのアプリが導入していますね！

たけやん：そうなんです。ちなみにこちらは３つともカルーセル機能を使って表現しています！

ぴーやま：カルーセルと一括りにしても、さまざまなデザインがありますね！

たけやん：しかもヤプリならどれも、コツを掴めば簡単に実装できちゃいます。さっそく試してみましょう！

設定方法は4STEP！

①機能設定でフリーレイアウト機能を新規作成します。

②カルーセルで表示させたい画像やテキストを設定します。

１ブロック目にまず画像やテキストを設定し、必要に応じて詳細設定（マージンやカラム数など）を調整します。作成したブロックを複製して詳細設定を引き継ぎ、２ブロック目以降の画像やテキストを設定します。

③カルーセルの中身を設定したフリーレイアウト機能のコードを取得します。

コンテンツ管理画面右上にある「リンク生成」をクリックし、カルーセル用フリーレイアウト機能を選択します。上部に表示される文字列の「/tab/bio/xxxxxx」の部分をコピーして取得します。

④カルーセルを設置したいフリーレイアウト機能を開き、新規ブロックのタイトル欄に下記の文字列を入力します。

horizontal_scroll(③で取得したコード,カルーセル機能で指定できる要素A,B,C,D,E)

ぴーやま：カルーセル機能設定完了♪カルーセルの中身を設定したフリーレイアウト機能を変更するとカルーセルも変更されるので、アプリの更新も楽々ですね！

たけやん：画像をテキストと組み合わせたり、詳細設定でマージンなどを調整することでさまざまなデザインのカルーセルができちゃいます！ここからは、はじめにご紹介した３種類のカルーセルの設定方法を説明します！

3種類のカルーセルの設定方法をご紹介

①左右矢印付きの大きな画像のカルーセル

②ハッシュタグ風カルーセル

③画像とテキストの組み合わせカルーセル

たけやん：画像やテキストの組み合わせや詳細設定に手を加えれば、カルーセルの表現方法は無限大！ 管理画面をたくさん触って、オリジナルの素敵なカルーセルを作ってくださいね！

【第2回 角丸・シャドウ効果編】

パイセン：前回のカスタムアイコン編、ご好評いただきありがとうございました！

あいさん：ありがとうございます！さて・・今回は角丸・シャドウ効果についてお伝えします！

ザッキー：えっと、角丸・シャドウ効果って聞いたことがないのですが、どんなものなのでしょうか？

あいさん：言葉の通り、画像や要素の角が丸くなっていて、影がついてフワッと浮いているように見えるデザインのことを角丸・シャドウ効果と呼んでいます！

パイセン：さくっと簡単に今時なお洒落なアプリができます！まずはこの2つのアプリ画面を見比べてみてください。

ザッキー：同じ内容ですが、全然見え方が違いますね！なるほど、角丸・シャドウ効果ってこういうことですね！

 あいさん：「フリーレイアウト機能」・「ニュース機能」において、セルおよび画像にこのように角丸やシャドウを適用することができます。1分で出来る設定で見え方も大きく変えることが可能です！早速設定方法をご紹介しますね！

設定方法は簡単2STEP！

①詳細設定画面の右上の「角丸」部分に数字を入れます

②詳細設定画面の右上の「シャドウ」部分に数字を入れます

設定完了です！

パイセン：管理画面から簡単に角丸・シャドウ効果の設定が出来ました！

角丸の画像を入稿せずとも画像をそのまま角丸にし、リッチな表現を実現することもできます。もちろん、角丸効果のみ、シャドウ効果のみ設定することも可能で、様々なデザインに使用できます。

ザッキー：本当に1分で簡単に設定が出来るし、アプリっぽいデザインになりますね！

あいさん：そうなんです！角丸の数値を大きくすると角の丸みの比率が大きくなり、 シャドウの数値を大きくすると影のぼかしの範囲が広くなります！アプリのデザインがぐっとよくなりますよね！

パイセン：まだまだ他にも簡単に設定が出来る機能や知られざる機能がたくさんあります！ みなさまも気になった機能はご利用のアプリで試してみてくださいね！

おがちゃん：みなさんこんにちは！ついに！ヤプリ道場がスタートしました！！

ほっさん：ヤプリ道場とは、

ヤプリにはたくさんの機能があるけど、あまり知られていないのでは？

もっと色々な機能を知って使っていただきたい！

というデザイナーの想いからスタートしました。

新しく出た新機能やおすすめの機能、デザインテクニックなどを、デザイナーから皆さまにお伝えできればと思っています。

ぴーやま：ようやく形になって良かったですね・・・！(涙) 

【記念すべき第1回 カスタムアイコン編】

ほっさん：記念すべき初回はカスタムアイコンについてお伝えします！ カスタムアイコンとは管理画面で設定が出来るデフォルトのアイコン以外に、オリジナルで制作したアイコンの設定が出来ます！

(※アイコン画像の制作にはPhotoshopなどのデザインソフトをご使用ください。)

おがちゃん：私この機能絶対使っています〜！

ぴーやま：アイコンまでアプリのイメージに合わせられて、統一感も出ますよね〜！何よりかわいい！

ほっさん：こんなカラーのアイコンも設定が出来るんです、しかも設定方法がとっても簡単！！

設定方法は簡単3STEP！

①カスタムアイコン管理をクリック

②PNG画像を登録

(ドラック&ドロップで画像は追加できます。)

※画像はpng形式、サイズは60×60pxで作成してください

③機能設定から変更したいアイコン右上メニューの「アイコン変更」押す

設定完了です！

ほっさん：このように簡単にアイコンが作成出来ました！

今日はおがちゃんとぴーやまにカスタムアイコンをつくってもらいました！

おがちゃん：簡単に設定が出来るし、オリジナリティが出て嬉しいですね...！

ぴーやま：カラーになると分かりやすくて、目立つのも嬉しい！！

ほっさん：初回はカスタムアイコンについてお伝えしましたが、ヤプリでは他にもたくさん機能があります！今後もおすすめの機能をたくさん更新していきます！

私たちもヤプリ道場の一員として機能について日々学んでいきますので、気になった機能はぜひ試してみてくださいね〜！