このセクションの記事一覧はこちら

【新】アプリをもっと魅力的に!オリジナルのデザインを作る方法

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

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

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

__________2020-05-08_18.47.58.png

__________2020-05-08_18.50.27.png 

 

設定方法

①ステータスバー

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

__________2020-05-11_19.05.25.png 


  ②ナビゲーションバー

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

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

__________2020-05-12_18.01.15.png 


  カラー設定

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

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


__________2020-05-12_18.28.46.png 


  背景画像・ロゴ画像

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

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

__________2020-05-12_18.36.35.png 


 ③ボディ

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

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


__________2020-05-12_18.37.35.png


 ④リスト

記事などのコンテンツが一覧で表示されるエリアのデザインを設定できます。
__________2020-05-12_18.53.36.png

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


 ⑤タブバー

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

__________2020-05-12_18.58.33.png

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

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

不明点はございますか? お気軽にお問い合わせください >

不明点はございますか? お気軽にお問い合わせください >