目次

はじめに

Visualizerの基礎的な知識を身につけたので、
早速実際にアプリを作ってみましょう！

2問用意していますので、
これまでの振り返りもしながら解いてみてくださいね！

早速、今回のお題です！

アプリを開発することになり、デザインチームから画面デザインが届きました。
Visualizerを使って、デザイン通りに画面を作成してください！

制限時間：90分

（"Freepik.com"このカバーはFreepik.comのリソースを使用してデザインされています。）

画像
画像とアイコンはこちらからダウンロードして使用してください。

画像	ロゴ	時計	戻る

フォント

デザインに使用されているNotoSansフォントはデフォルトに入っていないフォントです。
外部フォントのインポート方法は、こちらを参考にして作成してください。
▶︎Kony Visualizerに外部フォントを取り込む
それぞれのフォントサイズ・カラーを記載しています。
※以下はpxで表記していますが、モバイルの場合Visualizerでpx指定をすると、
想定より小さめに表示されるため、文字サイズは参考程度にご覧ください。

Visualizerでの実装時、フォントサイズは%指定とし、
デザインファイルと同様のフォントサイズになるよう調整をしてください。

No	フォント・サイズ	文字色	背景色
1,2,5	NotoSansJP Bold 14px	050C1E	-
7	NotoSansJP Bold 14px	FFFFFF	2B90FF
3	NotoSansJP Bold 24px	050C1E	-
4	NotoSansJP Medium 12px	858A9B	-
6	NotoSansJP Regular 14px	050C1E	-

「クーポンを使用」ボタンをタップ時に、
押したことがわかるよう、透明度80%に設定し薄い青色に変化させましょう。

制限時間：30分

お題1とお題2は完成しましたか？
答え合わせして確認してみましょう！

より読みやすい記事にしていきたいので、
「ここがわからなかった！」
「ここがもっと知りたい」
など、コメントいただけると嬉しいです！