Novaia Labs

Webサイトの企画・デザイン・実装をするスタジオ。触れたときの動きまで設計します。架空ブランドの自主制作Conceptを公開中。ご相談はDMへ。 / Web studio in Japan.

[Novaia Labs @novaialabs_jp]

岐阜の一人スタジオ、Novaia Labsです。
実在しないお店のホームページを、触れる形で作っています。
すべて架空の見本です。これは公式サイトの冒頭。触れる見本はプロフィールのリンクから。

[Novaia Labs @novaialabs_jp]

Tap a coat and 5 pieces remain. Add camel and 1 piece remains. A fictional fashion-shop filter that narrows as you choose.

[Novaia Labs @novaialabs_jp]

@glasses_japan 予約ボタンの行き先がトップのままだと、押した人は「押したのに戻された」と感じやすいですね。スマホで自分の店のボタンを一度押して、予約画面まで何タップかかるか数えてみるだけでも、直す場所が見えてきそうです。

[Novaia Labs @novaialabs_jp]

包む紙の色を選ぶと、花束の背景がふわっと染まる花屋のサイトの見本です。(架空)

[Novaia Labs @novaialabs_jp]

Most customers just want to know two things: are you open today, and how much? A fictional shop site that answers both on the first screen.

[Novaia Labs @novaialabs_jp]

ホームページを開いて最初の10秒。
何のお店か分かるのは、写真ですか、一言ですか?

[Novaia Labs @novaialabs_jp]

ハンバーガーをかじるたびに、残りの口数が減っていくサイト。(架空のバーガー店)

[Novaia Labs @novaialabs_jp]

Take a bite of the burger, and the bites-left counter drops. A fictional burger-shop site.

[Novaia Labs @novaialabs_jp]

予約ボタンを押すと、予約欄までゆっくり滑っていく美容院サイトの見本です。
スマホもPCも同じ速さ。(架空)

[Novaia Labs @novaialabs_jp]

@posilakky ホームページで猫ちゃんの名前が紹介されていると、オープン前から会いたくなりますね。スコちゃんの「会える日」が分かると、お客さんも来る日を選べそうです。

[Novaia Labs @novaialabs_jp]

Would you use a booking form that scrolls you straight to the open slots? Made a fictional salon site to test the idea. Thoughts?

[Novaia Labs @novaialabs_jp]

食べログやGoogleマップはあるのに、ホームページがない店。
お客さんが知りたいのは「今日やってる?」「いくら?」だけ、ということも多いと思います。
その2つを最初の画面に置く見本を作っています。(見本は架空の店です)

[Novaia Labs @novaialabs_jp]

コートを押すと5着、キャメルを足すと1着。
選ぶほど探しやすくなる服屋のサイトの見本です。(架空)

[Novaia Labs @novaialabs_jp]

Fill a box of nine Japanese sweets with one tap on Surprise Me, and the total price moves with it. A fictional confectionery site you can try.

[Novaia Labs @novaialabs_jp]

和菓子の9個入り。「おまかせ」で詰めると、合計金額も一緒に動きます。(架空の和菓子店)

[Novaia Labs @novaialabs_jp]

@HolyTech_Inc 笑顔の写真より「園の1日」の方が見られたというのは、保護者が知りたいのが「雰囲気」より「流れ」だからでしょうか。小さな店のサイトでも、今日の流れを先に置くと迷わない気がします。

[Novaia Labs @novaialabs_jp]

お店のホームページで、電話しなくても料金の目安が分かるのは、ありですか?なしですか?
見本を作りながら考えています。

[Novaia Labs @novaialabs_jp]

自転車の調子が悪い症状を押すと、直す目安の金額と時間が出ます。
電話で聞く前に分かる修理店サイトの見本です。(架空の店)

[Novaia Labs @novaialabs_jp]

@alexdev261 Building a little every day adds up faster than it feels. What are you working on right now?

[Novaia Labs @novaialabs_jp]

@container MDN Container queries https://t.co/8knMx3CpY2

[Novaia Labs @novaialabs_jp]

画面の幅じゃなくて、「入れ物の幅」で見た目を変えられる。
コンテナクエリは container-type: inline-size と @container の2つだけ。カードの部品が使い回しやすくなるよ。