Web Works
WEB 制作作例館
4本とも架空の依頼でつくった制作サンプルです。 実在の教室・催し・お店・料金ではありません。写真も生成したものです。

Web Works Gallery

予算の幅を、壁に並べました。

上手さだけを並べた作例集は、じつは選びにくいと思っています。静かなもの、少し動くもの、世界観で見せるもの。同じ作り手の4本を、掛けて見比べられるようにしました。

作例 4本

気になった1本を押すと、狙いと作りかたが開きます。そこから実物のページへ進めます。

夜marketのページを、スマホ幅で3か所ならべた制作例

いちばん見てほしい1本

あかり商店街 夜market

夜3時間だけのイベント告知ページ(写真あり)

制作意図この依頼の芯は、行ったことのない人に、当日の夜の流れを想像してもらうことでした。そこで1枚目を「日が暮れる」場面にし、屋台マップは気になった店を選ぶと提灯が点き、選んだ店は点いたまま残る作りにしています。見る人が自分の道順を作りながら、18軒の店と三時間の流れが頭に入ります。最後に「聞かれることを先に」並べて、問い合わせの手間も減らしました。写真は生成したもので、実在の店ではありません。

作る人について

どんな考えでページを作っているかを、先にお伝えします。

Maker
Webページ制作・AIを使った仕組みづくり
  • 得意説明が多いサービス、講座や催しの募集ページ
  • 進めかた先に聞く → 段階を選ぶ → 確認しながら制作
  • 約束読める・壊れない・置いていかない

ページは、きれいに見えるだけでは役目を果たしません。見た人が「自分に合いそう」と分かって、迷わず次の一歩に進めることが大事だと考えています。

そのため、最初にお客さまのやりたいことをうかがい、必要のない飾りは入れません。逆に、世界観で選ばれたい場合は、動きや明かりまでしっかり作ります。この4本は、その幅を見ていただくための作例です。

作例は、価格表の見本です

「うちはBくらいでいい」と決められる状態にしておくと、お金の話のやりとりが一往復ぶん減ります。

A|シンプル

説明が多いサービス、落ち着いた印象にしたいとき。動きはほとんど入れません。

B|中間

催しや講座の募集。スクロールで少しだけ動かして、記憶に残す作りです。

C|全部入り

世界観そのもので選ばれたいとき。動きと明かりで、場の空気をつくります。

4本すべてで守っていること

きれいに見えるかどうかは好みが分かれます。ですが「読める・壊れない・置いていかれない」は好みではないので、全部の案件で同じように確認します。

How to start

どのくらいの段階がいいか、
一緒に決めます。

やりたいことを先にうかがって、この4本のどのあたりが合うかをお伝えします。そのうえで、必要のない部分は削ります。

① やりたいことを聞く② 段階を選ぶ③ ご確認のうえ制作