テーマを決めて作品に収束させる

# 概要
テーマを決め、アイディアを膨らましながら、作るものを決めていき、作品に収束させる、その流れ。
※ハッカソン中なので後半はちょっと待ってね。

## ステップ
1. テーマを考えよう！
2. 画面の見た目を考えよう！
3. 機能を考えよう！
4. 必要なデータを考えよう！
5. html,cssを書く！
6. jQueryを書く！
7. 動きをつける

## 1.テーマを考えよう！
テーマ：ガチャアプリ
デバイス：スマホ
出てくるもの：色
やってみたいこと：色を集める・cssアニメーションの演出・コレクション機能

## 2.画面の見た目を考えよう！
### 参考にするデザインを見つける
https://www.behance.net/
<img width="995" alt="スクリーンショット 2017-12-02 2.48.41.png" src="https://qiita-image-store.s3.amazonaws.com/0/93755/97857fe6-29d2-750c-b6f6-609af8e09b9a.png">

### デザインをピックアップ
#### ピックアップする上で意識する狙い所
ガチャ回すところ&出てきたアイテムをみるところで参考になるデザインがあるといいなあ。
#### ピックアップして気づいたこと
・背景色は黒より白がいいな
・出てきたアイテムは中央にでっかく配置したいな

<img width="400" alt="スクリーンショット 2017-12-02 2.53.57.png" src="https://qiita-image-store.s3.amazonaws.com/0/93755/d6f1ff1e-abd9-f1b5-ab57-7c079e21addd.png">
https://www.behance.net/gallery/59263473/Screen-design-UIUX
・アイテムの詳細画面はこんな感じで欲しいな
<img width="801" alt="スクリーンショット 2017-12-02 2.56.32.png" src="https://qiita-image-store.s3.amazonaws.com/0/93755/2628efc4-1721-ac24-bebc-1d4199ba03f5.png">
https://www.behance.net/gallery/59118111/Weather-App
・色と動物(カタチ)組み合わせて集めたら面白いんじゃないのかな
<img width="885" alt="スクリーンショット 2017-12-02 2.58.26.png" src="https://qiita-image-store.s3.amazonaws.com/0/93755/c20ce888-fff7-c1ae-ee29-b99949c8d8e6.png">
https://www.behance.net/gallery/59189117/Flat-Animal-Icons
・アイテム一覧は枠なくてもいいかも
<img width="858" alt="スクリーンショット 2017-12-02 3.00.18.png" src="https://qiita-image-store.s3.amazonaws.com/0/93755/278ad5c0-f1f4-c4e3-d566-22b3c5b83ad8.png">
https://www.behance.net/gallery/59265995/Aakash-iTutor-app-icons

#### ピックアップまとめ
- 背景色は白
- ガチャを回した後は中央にデカデカと出す
- アイテムの詳細画面は白を画面半分ほど使い色を活かす
- アイテムは色とカタチの掛け算をしたもの
- アイテム一覧は枠がなく、一つ一つのアイテムを小さめに、マージン広めに

### モックを作る
Adobe XD
<img width="1078" alt="スクリーンショット 2017-12-02 3.40.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/93755/1ab11bee-c58a-d97e-06fe-c7240f0f6a5c.png">

http://www.adobe.com/jp/products/xd.html

デザインと合わせて動きなどもアイディアが出てくるので、XD上で形にしてイメージを膨らませる
<img width="756" alt="スクリーンショット 2017-12-02 3.30.28.png" src="https://qiita-image-store.s3.amazonaws.com/0/93755/84752ed3-c272-087a-ee3c-d60eef437744.png">

<img width="647" alt="スクリーンショット 2017-12-02 3.36.20.png" src="https://qiita-image-store.s3.amazonaws.com/0/93755/942c8bce-25d0-d28c-4252-2e87dff67b95.png">

CreativeCloudのAssetの素材を使う
仮素材として使用
<img width="956" alt="スクリーンショット 2017-12-02 3.39.40.png" src="https://qiita-image-store.s3.amazonaws.com/0/93755/8df065b3-8f17-6942-746c-ec56db70945c.png">

デザイン上の注意点を考える。
しろい動物の場合背景色は黒くないと見えない
<img width="875" alt="スクリーンショット 2017-12-02 3.43.02.png" src="https://qiita-image-store.s3.amazonaws.com/0/93755/4aed109e-25ba-4d28-5628-0d25d7ad4997.png">

実装の粒度を考える
ボタン押す->動物でる->ボタン押す画面へ
まで作れるとイメージが形になってその後の実装が楽になるなあ
<img width="737" alt="スクリーンショット 2017-12-02 3.46.51.png" src="https://qiita-image-store.s3.amazonaws.com/0/93755/0d05334e-0786-d6c7-02a3-8a7e9aad2589.png">

## 3.機能を考えよう！
- ガチャボタンを押すと動物が出る
- 表示するのは動物画像&名前&レア度
- TRY AGAINボタンを押すと最初の画面に戻る
- ガチャボタンはcssアニメーションでゆったり動いている
- ガチャボタンを押すと円がシュパパと広がる

コレクション機能など他の機能は一旦ここまで実装して見てから考える。-> イメージが固まりきっていないから

## 4.必要なデータを考えよう！
- 色のデータ
http://www.htmq.com/color/colorname.shtml
- 動物データ
いい感じの色&素材を3つピックアップ 9匹のCOLORNIMALを実装する
<img width="665" alt="スクリーンショット 2017-12-02 4.08.15.png" src="https://qiita-image-store.s3.amazonaws.com/0/93755/3aa725a4-f745-6ed9-8c77-febce51f7d95.png">

## 5.html,cssを書く！
```
<!DOCTYPE html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>COLORANIMAL</title>
	<link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
	<link rel="stylesheet" href="./css/style.css">
</head>
<body>
	<div class="container">
		<div class="content">
			<div class="gacha-button-wrapper active">
				<div class="back-ring">
					<div class="outer-back-ring"></div>
					<div class="inner-back-ring"></div>
					
				</div>
				<div class="front-ring">
					<div class="outer-front-ring"></div>
					<div class="inner-front-ring"></div>
					
				</div>
				<div class="gacha-button">
					<div class="outer-gacha-button"></div>
					<div class="inner-gacha-button"></div>
				</div>
				<div class="animal-wrapper">
					<div class="animal-image-wrapper">
						<div class="image">
							<img src="./images/ROYALBLUE_CAMEL.png">
						</div>
					</div>
					<div class="animal-info">
						<p class="name">animal</p>
						<p class="rank">★</p>
					</div>
					<div class="try-again-button">TRY AGAIN</div>
				</div>
			</div>
			<div class="title-wrapper">
				<p class="title">COLORANIMAL</p>
			</div>
		</div>
	</div>
</body>
</html>
```
htmlが完成した状態
<img width="635" alt="スクリーンショット 2017-12-03 9.22.36.png" src="https://qiita-image-store.s3.amazonaws.com/0/93755/7866ff44-b12f-8713-1991-fe331894be89.png">

スタイルをつける
<img width="886" alt="スクリーンショット 2017-12-03 10.05.05.png" src="https://qiita-image-store.s3.amazonaws.com/0/93755/5f462e2a-e86a-5784-cfe7-62126383821c.png">

ボタンが押された時のスタイルをつける
<img width="872" alt="スクリーンショット 2017-12-03 10.33.08.png" src="https://qiita-image-store.s3.amazonaws.com/0/93755/aa5d0575-058e-f809-4332-6418bc8e6e56.png">

## 6.jQueryを書く！
ハッカソン中なのでちょっと待ってね。

## 7.動きをつける
ハッカソン中なのでちょっと待ってね。

## まとめ
明日は担当は歌姫ことちゃーはんです！主催していたハッカソンのレポートをするとか、しないとか！