1. ①デザイン設定→②テーマを選択することで、あらかじめ準備された34種類のテーマを選べます。
2. イメージにあうテーマを選択しましょう。
3. ③「保存する」ボタンを押すと、プレビューアプリに反映されデザインを確認できます。
4. 直近で保存された、５つのテーマは④「最近カスタマイズしたテーマ」に保存されます。前のテーマに戻したい時は、選択して保存しましょう。

アプリ内で表示されるテキスト（タイトル・本文・文字の間隔など）は、デザインに質感をあたえる重要なパーツです。

ここでは、デザインの中の、テキストの編集方法についてご紹介します。

テキストは、3ヶ所設定することができます。色の強弱をタイトル ＞ 本文 ＞ アクセサリの順で設定することで、情報が伝わりやすくなります。

• タイトル：①タイトルの文字色を設定します。
• アクセサリ：②部分の文字色を設定します。
• 本文：③本文の文字色を設定します。　

 

背景：背景の色、透明度を設定します。透明度スライダは、ドラッグ＆ドラップで調整することができます。右が透明度なしのベタ塗り状態です。左にドラッグすることで、透明になります。コンテンツに設定した背景を活かすために、積極的に透明度を使用しましょう。そうすることで、奥行きのあるデザインに仕上がります。

罫線：罫線、タブの色を設定します。

リストの間隔：リストの間隔を設定します。リストの間隔：リストの間隔を設定します。

 

コンテンツ（背景）は、テキストを読みやすいように配慮しながら、アプリ全体の印象を決める重要なパーツです。

■背景の設定の仕方

背景色を設定します。背景画像をアップすることで、背景画像を設定することも可能です。

背景色（塗りつぶし）は、アプリ全体の背景やカタログの商品詳細の説明文の背景に使用されます。
背景画像を設定すると、アプリ全体の背景は、背景色（塗りつぶし）から背景画像に変更されます。

背景画像は、640×1136ピクセルで作成します。保存形式は、jpg、png形式で保存します。

 

タブのカスタマイズは、特に設定を行わなくても、iPhoneのデフォルトのスタイルが設定されているので問題ない見た目になりますが、色をアレンジすることでより良いデザインに仕上がります。

デザインする際は、選択中のアイコンの設定をはじめにしてみましょう。
ナビゲーションバーと同系色の色を設定すると、良い結果が出るでしょう。背景色なども、合わせて設定し、タブバーのデザインを仕上げてください。

1. 背景：背景色を設定します。
2. アイコン：アイコンの色を設定します。
3. 選択中のアイコン：選択されている時のアイコンの色を設定します。

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

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

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

 

 

設定方法

①ステータスバー

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

 

---

  ②ナビゲーションバー

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

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

 

---

  カラー設定

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

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

 

---

  背景画像・ロゴ画像

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

ロゴ画像は、透明な部分を背景になじませるために、PNG24形式で保存してください。
ロゴ画像の大きさは、480×72ピクセル以内でアップしてください。
アップされた画像は、iPhoneでは縦横中央に配置されます。
Androidでは、左寄せで表示されます。

 

---

 ③ボディ

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

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

---

 ④リスト

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

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

---

 ⑤タブバー

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

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

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