Exercise1 デザインを元にモバイルで画面を作ってみよう

目次

1. はじめに
2. お題1
3. お題2

はじめに

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

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

お題1

早速、今回のお題です！

アプリを開発することになり、デザインチームから画面デザインが届きました。
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	-

お題2

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

制限時間：30分

完成イメージ

答え

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

▶︎Exercise1_答えと解説

次の記事

▶︎Exercise2 モバイルでクーポン一覧画面を作ってみよう

記事一覧：
https://qiita.com/Kony_Team/private/4c922fa016ce95c58406

最後に一言

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