HTML

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

概要

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

ステップ

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

1.テーマを考えよう!

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

2.画面の見た目を考えよう!

参考にするデザインを見つける

https://www.behance.net/
スクリーンショット 2017-12-02 2.48.41.png

デザインをピックアップ

ピックアップする上で意識する狙い所

ガチャ回すところ&出てきたアイテムをみるところで参考になるデザインがあるといいなあ。

ピックアップして気づいたこと

・背景色は黒より白がいいな
・出てきたアイテムは中央にでっかく配置したいな

スクリーンショット 2017-12-02 2.53.57.png
https://www.behance.net/gallery/59263473/Screen-design-UIUX
・アイテムの詳細画面はこんな感じで欲しいな
スクリーンショット 2017-12-02 2.56.32.png
https://www.behance.net/gallery/59118111/Weather-App
・色と動物(カタチ)組み合わせて集めたら面白いんじゃないのかな
スクリーンショット 2017-12-02 2.58.26.png
https://www.behance.net/gallery/59189117/Flat-Animal-Icons
・アイテム一覧は枠なくてもいいかも
スクリーンショット 2017-12-02 3.00.18.png
https://www.behance.net/gallery/59265995/Aakash-iTutor-app-icons

ピックアップまとめ

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

モックを作る

Adobe XD
スクリーンショット 2017-12-02 3.40.51.png

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

デザインと合わせて動きなどもアイディアが出てくるので、XD上で形にしてイメージを膨らませる
スクリーンショット 2017-12-02 3.30.28.png

スクリーンショット 2017-12-02 3.36.20.png

CreativeCloudのAssetの素材を使う
仮素材として使用
スクリーンショット 2017-12-02 3.39.40.png

デザイン上の注意点を考える。
しろい動物の場合背景色は黒くないと見えない
スクリーンショット 2017-12-02 3.43.02.png

実装の粒度を考える
ボタン押す->動物でる->ボタン押す画面へ
まで作れるとイメージが形になってその後の実装が楽になるなあ
スクリーンショット 2017-12-02 3.46.51.png

3.機能を考えよう!

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

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

4.必要なデータを考えよう!

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が完成した状態
スクリーンショット 2017-12-03 9.22.36.png

スタイルをつける
スクリーンショット 2017-12-03 10.05.05.png

ボタンが押された時のスタイルをつける
スクリーンショット 2017-12-03 10.33.08.png

6.jQueryを書く!

ハッカソン中なのでちょっと待ってね。

7.動きをつける

ハッカソン中なのでちょっと待ってね。

まとめ

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