shoutem旧バージョン サポートセンター

ステップ3:デザインしましょう

目立つアプリを作成しましょう

アプリのルック&フィール作成は、作成プロセスの中でも楽しみなパートと言えそうです。ShoutEmは、オリジナルデザインの為に様々なツールを用意しています。まず、デザインタブアイコンを左メニューから選んでください。

デザインタブは3エリアに分かれています:
ホーム - あなたのアプリを示すイメージファイル
カラーとグラフィック - アイコンのレイアウト、カラー、カスタムメイド等
グラフィック - アプリカラーの調整

ホーム画面

アプリのホーム画面に表示される様々なアイコンを調整します。単数・複数列のレイアウトからアイコンの色調を選ぶか、または、独自のアイコンを追加します。

レイアウト  ― ホームスクリーン上のアイコンはお好みのパターンを選択して下さい。アイコン数は3つだとかなり大きくなりますが、4つや5つだと他のデザインを載せる余裕が出来ます。ここでは、以下のレイアウトを選んでいます。

・碁盤状
・スワイプ動作
・スライド動作

グラフィック

背景や公開時のアイコンなどデザインを行います。アップロードされた画像は、PNGファイル形式が最適ではありますが、他の画像形式でも解像度を調整してサイズを変更させるので大丈夫です。

以下の要素も追加できます:
・アプリアイコン - iPhoneとAndroidの端末ホーム画面で表示されるアイコン

・ナビゲーションバー背景 - アプリの各項目におけるコンテンツの上部に表示される

・完成イメージ - AndroidとiPhone用アプリを実際に起動させた際の初期画面を表示します。現在は、iPhone4とiPhone5の実際イメージをアップロードできます。Android端末はこのiPhone4のサイズを使って表示していますが、近日専用のイメージが提供出来ます。

・ホーム画像 - 主だった背景画像にアイコンをセットします。

カラーとフォント

カラースキン機能を使用してコンテンツセクションによって色を選択すると、アプリ全体の印象を自由に変化させる事が出来ます。この機能は、テキストやボタン、コメント欄のカラーをテンプレートから選択します。

下記のレイアウトで実際に設定を確認してみてください:

・アイコンカラー – ホーム画面のアイコンの色を選択します。黒白や単色アイコンに利用します。
・アイコン設定 - 黒白、単色、カラー使いアイコンの3種類のセットあります。これらセットの中から選択、またはアプリビルダーへご自分のアイコンをアップロードしてください。

・アイコンのアップロード - ご自分のアイコンをアップロードする時に使用します。「アイコンのアップロードボタン」をクリックして下さい。

ご自分のアイコンをアップロードさせたら、メインメニューのデザインを設定する際に使用して下さい。もし無料使用できるアイコンをお探しでしたら、IconmonstrIconfinder もお勧めです。

・テキスト色 - この機能はホーム画面/メニューのテキストカラーを選択するものです。他画面でのカラー変更は出来ません。
・フォント - この機能はホーム画面/メニューで使用するフォントを選択するものです。他画面でのフォント変更は出来ません。
カラーテーマのセットから選択する事も出来ます。

多くのアプリに最適な色調となっていますが、カラーピッカーで細かくカラーを変更していく事も出来ます。