デザインの素人がNoodlで架空ケーキ屋さんのWebサイトUIを作ってみた

#概要
　Noodl Advent Calender 22日目！

　毎月22日はショートケーキの日というのはご存じでしょうか。
なぜなら、カレンダーで22日の上は15（イチゴ）日が来るからです。
15（イチゴ）が乗っているといえば「ショートケーキ」ですね。
ということで、22日はショートケーキの日だそうです。

　また、NoodlはUI/UXのプロトタイピングツールです。本来はデザイナーとエンジニアの橋渡しをして爆速でプロトタイピングを行う目的で使用されるようです。

　前述の「ショートケーキの日」とNoodl本来の用途を踏まえて、架空のケーキ屋さんのアプリ画面を作ってみました。

#デモ
　今回はアプリを起動した直後の画面と、トップページ画面を作ってみました。

デモ動画はこちら。
https://youtu.be/I5-M_Yf_zww

【起動直後画面】

　この画面のテキストはジワ～っと浮き上がるように表示されます。

チラッ！（パート３） pic.twitter.com/PHYPjgfEnN

— まえぷー@アウトプット復活！！ (@kmaepu) December 20, 2019

【トップページ画面】
ショップのトップページです。タイトル下の部分はスクロール式のバナーになっています。

#解説
###起動直後画面
　Noodlで文字を表示するには「Textノード」を使用します。文字をジワ～っと表示させる仕組みとしてTextノードのOpacityを動的に設定しています。Opacityとは”透明度”です。設定値が0に近づくにつれて透明になります。
　Opacityの初期値を0とし、ページが表示されたらカウントを開始して50msごとにOpacityを0.1インクリメントするようにしています。
　フローは次のようになっています。

　フローの中にTimer Counterというノードがありますが、これは自作コンポーネントです。中身は次のようなフローになっています。Noodlのテクニック「無限タイマー」を利用しています。

　javascriptノードでは無限タイマーの出力をトリガにしてカウントをしています。
コードは次のようになっています。

define({
    inputs: {
        trig: "boolean",
        inc:"number"
    },
    outputs: {
        stop:"boolean",
        count:"number"
    },
    destroy: function(inputs, outputs) {

    },
    setup: function(inputs, outputs) {
        outputs.count = 0;
    },
    run: function(inputs, outputs, changedInputs) {
        if(inputs.trig === true)
        {
            if(outputs.count > 1){
                outputs.stop = true;
            }
            else
            {
                outputs.count += inputs.inc;
            }
        }
    }
});

###トップページ画面
　この画面では次の5種類の要素で構成されています。

• お店の名前
• バナー
• SNS
• 別ページ遷移ボタン
• 背景

####お店の名前
　

　この部分は起動直後画面のフローをコピペして利用し、テキストの配置を変えました。フローは次のようになっています。
　「Stack Layoutノード」で縦並びから横並びに変えています。

　

####バナー
　Webサイトによくある横スクロール式のバナーです。今回は「クリスマスフェアー」と「12月のオススメ」コンテンツを要しました。


　フローは次のようになっています。「Scroll Viewノード」でスライドして表示するコンテンツを変えることができます。コンテンツは自作コンポーネントbannerの中に構築しました。今回は画像を表示させています。

####SNS
　お店のSNSへのリンクに画像アイコンを用意しました。　

　画像はインスタグラムとTwitterの公式サイトで配布しているものを利用しました。フローは次のようになっています。今回はリンクを実装していません。

####別ページ遷移ボタン
　メニューや予約ページに遷移するためのボタンを用意してみました。　

　フローは次のようになっています。今回はページ遷移を用意していませんが「Page Navigationノード」を使うとページ遷移ができます。

####背景
　背景には動画を利用しています。後ろで料理中の動画が流れています。

　フローは次のようになっています。動画表示は「Videoノード」で行っています。このVideoノードもOpacityを調整してあまり強調しないようにしています。
　

#おわりに
　それっぽい画面は作れても、自分以外のユーザに使ってもらうこと考えたら「見やすさ」「操作のしやすさ」「店側が伝えたいことがユーザへ的確に伝わるか」など考えることが沢山あると感じました。

　ショップ名の「Noodl」はオシャレにしたかったので様々な文字フォントを試しました。この文字フォントを探すだけで1時間くらいかかっています(笑)バナーのクリスマスフェアーに使っている文字フォントも特殊なものです。