Hanjōdō / 繁盛堂

線を、橋に。

A LINE, INTO A BRIDGE

はじめは、ただの一本の線でした。杭を打ち、柱を立て、桁を渡す。灯が入ると、線はいつのまにか橋になっている。Webサイトを作るというのは、そういう仕事です。

SCROLL

I

線を、引く。

何もない闇に、まず一本だけ引く。どこからどこへ渡すのかを決める——この一本で、橋の位置が決まってしまいます。最初に決めるのは、デザインではなく行き先です。

II

柱を、立てる。

線の上に杭を打ち、柱を立てる。水の下に沈む部分がいちばん重く、いちばん時間がかかります。表からは見えないところが、橋の寿命を決めます。

III

桁を、渡す。

両岸の柱に、桁を掛ける。ここで初めて向こう岸と繋がります。繋がった瞬間は、たいてい地味です。地味なまま、確かに繋がっていることが大事です。

IV

灯を、入れる。

橋板を張り、高欄を組み、灯を入れる。人は「渡っていい」と分かって初めて足をかけます。案内も、値段も、問い合わせ先も、その灯にあたります。

V

橋に、なる。

一本の線は、いつのまにか橋になっている。けれど橋は、渡られてはじめて橋と呼ばれます。作って終わりにしない理由が、そこにあります。

この仕事を、橋の言葉で話すことにしています。

見えないところに、
いちばん時間をかける。

お店のホームページは、橋に似ています。こちら岸にはあなたの仕事があり、向こう岸にはまだ会ったことのないお客さんがいる。その間に何も無ければ、どれだけ良い仕事をしていても届きません。だから架けます。渡れる幅で、崩れない造りで。

派手な装飾は、橋でいえば高欄の彫りです。彫りは最後でいい。先に決めるのは、どこへ渡すか(誰に来てほしいか)、柱を何本立てるか(何を載せるか)、そして灯をどこに置くか(どうやって連絡してもらうか)。この三つが決まっていれば、見た目は後からいくらでも磨けます。

私はひとりで作っています。打ち合わせから設計、実装、公開後の手直しまで通しで担当するので、話が途中で消えません。「ここだけ直したい」も、そのまま私に届きます。

渡す先を決める
誰に来てほしいのか。予約なのか、来店なのか、問い合わせなのか。行き先が一つに決まると、ページは驚くほど短くなります。
柱を立てる
載せる情報と構造。スマートフォンでの読みやすさ、表示速度、検索されたときの見え方。表に出ない部分ほど作り込みます。
灯を入れる
連絡先・地図・営業時間・料金。迷わせない導線。渡っていいと分かる明かりを、要所に置きます。

線は、渡られて橋になる。

公開した日がゴールではありません。渡る人が増えるほど、手すりの高さも灯の数も変わっていきます。だから、公開してからの手直しまでを仕事の範囲だと思っています。

架け方は、三通り。

できること

どれを架けるかは、行き先で決まります。決まっていなければ、そこから一緒に決めます。

ホームページ

店 ・ 事務所の顔

何をしている店で、どこにあって、どう連絡すればいいのか。検索から来た人も、名刺から来た人も、まずここで足を止めます。写真と文章の順番を組み直して、初めて来た人が迷わず最後まで読み切れる形にします。

含むもの構成の設計・文章の下書き・スマートフォン表示・地図と営業時間・問い合わせ先・公開の手続き・公開後の手直し。

LP(一枚もの)

行き先が、一つのとき

予約を取りたい。申し込みを増やしたい。灯を一つだけ点けるなら、ページも一枚でいい。上から順に読ませて、最後の一押しまで一息で運びます。

含むもの訴求の順番・一枚ぶんの文章・予約やフォームへの接続・広告や SNS から来た人の受け皿。

Webアプリ

渡ったあとの、毎日

予約の管理、会員や生徒の名簿、在庫や売上の集計。紙と表計算で回している作業を、そのまま一画面に移します。橋を架けたあとの、毎日を支える造りです。

含むもの画面の設計・データの持ち方・ログイン・使い方の引き継ぎ・公開後の手直し。

架け方の見本を、十三。

制作例

業種に合わせて作り分けた、実際に動くページです。掲載の13本はすべて架空の事業者(店舗・事務所・会社・事業所)を想定した制作見本で、実在の受注案件ではありません。クリックすると別タブで開きます。

Work I
飲食店 ・ ホームページ

喫茶 とまり木

一杯に時間をかける珈琲店。写真と余白で「その店の空気」を先に渡す一枚もの。営業時間と地図までを一息で読み切れる構成にしています。渡す先は「今日の午後、寄ってみるか」という気分。

実物を見る →
Work II
美容室 ・ 予約LP

ヘアサロン 凪

完全予約制のサロン。灯は一つだけ——ご予約。そこへ最短で着くための導線に絞ったLPです。

実物を見る →
Work III
習い事 ・ Webアプリ

はねおと音楽教室

予約・生徒・月謝を一画面で。渡ったあとの毎日を支える、運用まで含めた造りです。

実物を見る →
Work IV
士業 ・ コーポレート

柊 税理士事務所

写真をほとんど使わず、罫と余白と料金表の明確さだけで信頼を組み上げた一本。数字を扱う仕事の顔をしています。

実物を見る →
Work V
工務店 ・ リフォーム

みなも工務店

施工事例が主役。ビフォーとアフターを実際に切り替えられて、費用と工期まで書いてあります。事例で売る商いの造りです。

実物を見る →
Work VI
物販 ・ ネットショップ

暮らしの道具 灯

作り手のわかる生活道具の店。絞り込みも、かごの合計金額も、本当に動きます。売り買いの伴う造りまで引き受けられる、という一本。

実物を見る →
Work VII
整骨院 ・ ホームページ

けやき整骨院

保険が使えるかどうかを、来る前に三問で。痛む場所は等高線の図が受け取ります。制度の線引きを、そのまま画面の設計に落とした一本。

実物を見る →
Work VIII
学習塾 ・ ホームページ

みちのり塾

合格実績を分母つきで出し、偏差値が下がった生徒も同じ太さの線で描く。月謝は選ぶそばから積み上がります。数字で信用を作る商いの造り。

実物を見る →
Work IX
介護 ・ 採用ページ

ひなた 職員募集

「ここは、楽ではありません。」から始まる求人。一日の人の居場所を、動かして見せます。人が採れない、に効くのは待遇より正直さだ、という一本。

実物を見る →
Work X
不動産 ・ 賃貸仲介

あわい不動産

灰色の部屋を、なぞると光が差す。初期費用は最後の一円まで先に出ます。写真と数字の見せ方そのものが差別化になる商いの造り。

実物を見る →
Work XI
かき氷 ・ 遊びのある一枚

かき氷 ばりん

シロップを選ぶと、見出しも、数字も、ページ全体の色も変わります。氷は選ぶたびに削り直され、上から色が染みて下りてくる。堅い仕事の顔だけでなく、こちら側も作れます。

実物を見る →
Work XII
演奏会 ・ 音の鳴るページ

ゆうすげ管弦楽団

スクロールすると、下の低い弦から順に弓が入り、音も重なっていきます。音源ファイルは持たず、その場で合成しています。音を扱うページも引き受けられる、という一本。

実物を見る →
Work XIII
商品 ・ 3Dを使ったジャーニー

ひとくべ(くべる製作所)

スクロールを一つ送るごとに、鋼の板が一枚ずつ立ち上がって箱になります。噛む瞬間に「カチッ」と鳴り、見出しの字が震える。商品はBlenderで組んで48コマ回し、フリップブックに詰めてあります。物のあるお客さまへ。

実物を見る →

もっと大きくも、作れます。

規模を上げると

下の2本は、Hanjōdō が自分のために作ったものです。受注案件ではありませんが、「ここまでやれます」の実物として置いています。どちらもスクロールがそのまま時間の進行になっていて、朝から翌朝までの一昼夜を通します。

Scale I
体験型 ・ WebGL+SVG

一昼夜の橋普請〔定点版〕

定点のカメラで、朝靄の杭打ちから翌朝の渡り初めまで。空と水面は毎フレーム計算していて、動画を再生しているのではありません。夜には塵と蛍が出ます。

開いてみる →
Scale II
体験型 ・ 無声映画

一昼夜の橋普請〔活動写真〕

同じ物語を6つのショットで。2.39:1のレターボックスと間字幕、フィルムの粒子。奥行きは加工ではなく、Blenderで実際に絞りを開けて撮った被写界深度です。

開いてみる →

橋普請の順に、六段。

進め方

  1. I

    相談

    岸を、見に行く

    困っていることと、いま使っているものを見せてもらいます。SNSでも、チラシでも、前に作ったサイトでも構いません。この段では、まだ何も決めなくて大丈夫です。

    お願いすること「今こう困っている」の一行。長さも、まとまりも要りません。

  2. II

    行き先を決める

    渡し先を、決める

    誰に来てほしいのか、来た人に何をしてほしいのか。予約か、来店か、問い合わせか。ここを一つに絞ると、作る量が決まります。作る量が決まると、金額も決まります。

    お願いすること絞る決断を、一度だけ。迷うところは材料を並べて一緒に決めます。

  3. III

    設計

    柱を、立てる

    載せるものと並び順、ページの数、スマートフォンでの見え方を先に決めます。文章の下書きもここで作ります。見た目の彫りは、まだ後です。

    お願いすること写真・料金・営業時間など、手元にある材料を渡してください。足りないものは一緒に集めます。

  4. IV

    制作

    桁を渡し、橋板を張る

    実際に組み上げます。途中の画面はURLで見られるようにするので、出来上がるまで中が見えない、にはなりません。

    お願いすること途中で一度、見てください。気になったところは、早いほど直しやすいです。

  5. V

    公開

    灯を、入れる

    ドメインとサーバの手続き、検索エンジンへの登録、表示の速さとスマートフォン表示を確かめてから公開します。アカウントは、あなたの名前で作ります。橋の持ち主は、あなたです。

    お願いすることドメイン名の最終確認と、公開してよい日の一言。

  6. VI

    手直し

    渡ってから、直す

    公開した日は終わりではありません。見られ方を見ながら、文言や写真を直します。営業時間の変更も、お知らせの追加も、そのまま受けます。

    お願いすること「ここだけ直したい」を、そのまま。窓口は、私ひとりです。

お金のこと

先に、お金の話を。金額は、載せるものと作る量で変わるので、一律の値段を出していません。そのかわり、何が値段を動かすのかを先に開いておきます。ここを読んでから相談していただくと、話が早く済みます。

ホームページ

値段を動かすもの

ページの数/写真を撮るか、あるものを使うか/文章をこちらで書くか、いただくか/予約やフォームをつなぐか/ご自身で更新できるようにするか/ページをどこまで動かすか。この6つで大きく変わります。

LP(一枚もの)

値段を動かすもの

構成と文章を、どこまでこちらで作るかが最も効きます。次に、予約・フォーム・決済のつなぎ先と、どこまで動かすか。一枚ぶんなので、ページ数では動きません。

Webアプリ

値段を動かすもの

機能の数で決まります。まず本当に要る一つだけを小さく架けて、使いながら足していく形をおすすめしています。そのほうが、結局は安く済みます。

含むもの
打ち合わせ・構成の設計・文章の下書き・制作・スマートフォン対応・公開の手続き。ページの基本的な動き(文字や写真の現れ方、切り替わり方)も、ここに含みます。ここまでを一式でお受けします。
別途かかるもの
ドメインとサーバの実費(毎年かかります)・写真の撮影・有料の写真や書体・印刷物・外部サービスの利用料。実費は、かかる前に必ずお伝えします。
このほか、その場で絵が動くもの(湯気や波形のように、写真ではなく、その都度描いているもの)と、立体で見せるもの(3Dで組んだ商品が、回ったり組み上がったりするもの)は、別のお見積りになります。制作例の中にどちらもありますので、見てから決めていただけます。
お見積り
作業に入る前に、内訳を一枚でお出しします。見積りは無料です。金額を見てからお断りいただいて構いません。何にいくらかかるのかが分からないまま進むことは、ありません。
お支払い
着手時と公開時の二回に分けています。全額を先にお預かりすることはありません。

予算が決まっている場合は、先に金額をおっしゃってください。その中で何ができるかを組み立てます。予算に対して作る量が多すぎるときは、そう申し上げます。

わたしについて

繁盛堂は、ひとりでやっています。

相談を受けるのも、設計するのも、コードを書くのも、公開してから直すのも、同じ人間です。だから伝言が要りません。営業と制作で話が食い違うことも、担当が替わって最初から説明し直すことも起きません。最初に話したことが、そのまま最後まで残ります。

できないことは、先に言います。予算に対して作る量が多すぎるとき、その仕組みが本当に要るのか怪しいとき、すでにある道具を借りたほうが早いとき。橋を架けないほうがいい場所も、たまにあります。

専門用語は使いません。どうしても要るときは、その場で言い換えます。分からないまま話が進むのは、あとで必ず高くつきます。

ひとりなので、一度に受けられる数は多くありません。順番をお待たせすることがあります。それでも、受けた分は最後まで通しで見ます。

橋を、架けましょう。

ホームページ・LP・Webアプリ。「今こう困っている」の一行だけでも構いません。見積りは無料です。まず行き先の話をしましょう。

ご相談はこちら X DM @hanjodo_web
DMに、これだけ書いていただけると早いです
I どんな商いか(お店・事務所の種類)
II いま困っていること、ひとつ
III ご予算の帯 — 〜10万円 / 10〜20万円 / 20〜40万円 / 40万円以上 / まだ分からない
IV いつ頃までに、があれば

「まだ分からない」で構いません。予算をうかがうのは、値段を吊り上げるためではなく、その額でできることを組み立てるためです。合わないときは、合わないと申し上げます。

まずは見るだけ、で構いません。定点版『一昼夜の橋普請』もあります。

繁盛堂という名は、自分も相手も、共に繁盛する——という考えから取りました。橋は、片側の岸だけでは立ちません。