1. デザイン設定→テーマを選択することで、あらかじめ準備された34種類のプリセットテーマをお選びいただけます。

2. イメージにあうテーマを選択しましょう。

3. 「保存する」ボタンを押すと、プレビューアプリに反映されデザインを確認できます。

4. 直近で保存されたテーマは「最近カスタマイズしたテーマ」に保存されます。
   前のテーマに戻したい時は、選択して保存しましょう。

Yappliでは、５つのエリアに分けデザインを行っていきます。

①ステータスバー
②ナビゲーションバー
③背景
④リスト
⑤タブバー

上下（ナビゲーションバー、タブバー）を濃く、コンテンツを薄く、などそれぞれに色味に強弱をつけることで、よりよいデザインに仕上がります。

設定方法

①ステータスバー

時刻などが表示される部分です。白か黒を選択できます。

  ②ナビゲーションバー

ナビゲーションバー項目では、ロゴや背景画像を設定することができます。

1. 背景：背景画像、背景色、透明度を選択することができます。透明度は0〜100%で設定します。
2. ロゴ画像：ヘッダーに表示されるロゴを設定します。
3. タイトルカラー：タイトルの文字色を設定します。
4. 戻るボタン：戻るボタンの文字色を設定します。アプリ内の階層が深くなった際に表示され、１つ前のページへ戻ることができます。

カラー設定

カラーの丸い領域をクリックすると、色を直感的にドラッグ＆ドロップで選択できるパレットが表示されます。イメージに合う色を選択してください。

右側のパーセンテージを変更することで、透明度を変更することができます。
※100%が不透明、0%が透明です

背景画像・ロゴ画像

背景画像をアップし設定することで、背景をカスタマイズできます。
背景画像は、jpg、png形式、どちらにも対応しています。
画像の大きさは、1242×176ピクセルで作成してください。
Androidでは、横幅が足りない場合、右端が透明になり、背景色が表示されます。

ロゴ画像は、透明な部分を背景になじませるために、PNG24形式で保存してください。
ロゴ画像の大きさは、480×72ピクセル以内でアップしてください。

 ③ボディ

背景に好きな画像を設定できます。
※推奨サイズ：1242×2668px

画像を設定しない場合は、「背景カラー」に設定した色が表示されます。

 ④リスト

記事などのコンテンツが一覧で表示されるエリアのデザインを設定できます。

①タイトルカラー：記事のタイトルの色を設定します。
②アクセサリーカラー：日付の色を設定します。
③本文カラー：本文の色を設定します。
④背景カラー：背景の色と透明度を設定します。
⑤罫線カラー：区切り線、囲み線などの罫線の色と透明度を設定します。

 ⑤タブバー

アプリアイコンが並んでいるエリアのデザインを設定できます。

①背景カラー：背景の色と透明度を設定します。
②アイコンの色を設定します。
③選択中のアイコンカラー：選択中（表示中コンテンツ）のアイコンの色を設定します。

これらのパーツを組み合わせて、オリジナルのデザインを作ることができます。
制作中のデザインはPreview Yappli を使用することで、実際の端末上でアプリを確認しながら作業することができます。