ホームページ
店 ・ 事務所の顔
何をしている店で、どこにあって、どう連絡すればいいのか。検索から来た人も、名刺から来た人も、まずここで足を止めます。写真と文章の順番を組み直して、初めて来た人が迷わず最後まで読み切れる形にします。
含むもの構成の設計・文章の下書き・スマートフォン表示・地図と営業時間・問い合わせ先・公開の手続き・公開後の手直し。
Hanjōdō / 繁盛堂
はじめは、ただの一本の線でした。杭を打ち、柱を立て、桁を渡す。灯が入ると、線はいつのまにか橋になっている。Webサイトを作るというのは、そういう仕事です。
SCROLL
何もない闇に、まず一本だけ引く。どこからどこへ渡すのかを決める——この一本で、橋の位置が決まってしまいます。最初に決めるのは、デザインではなく行き先です。
線の上に杭を打ち、柱を立てる。水の下に沈む部分がいちばん重く、いちばん時間がかかります。表からは見えないところが、橋の寿命を決めます。
両岸の柱に、桁を掛ける。ここで初めて向こう岸と繋がります。繋がった瞬間は、たいてい地味です。地味なまま、確かに繋がっていることが大事です。
橋板を張り、高欄を組み、灯を入れる。人は「渡っていい」と分かって初めて足をかけます。案内も、値段も、問い合わせ先も、その灯にあたります。
一本の線は、いつのまにか橋になっている。けれど橋は、渡られてはじめて橋と呼ばれます。作って終わりにしない理由が、そこにあります。
この仕事を、橋の言葉で話すことにしています。
お店のホームページは、橋に似ています。こちら岸にはあなたの仕事があり、向こう岸にはまだ会ったことのないお客さんがいる。その間に何も無ければ、どれだけ良い仕事をしていても届きません。だから架けます。渡れる幅で、崩れない造りで。
派手な装飾は、橋でいえば高欄の彫りです。彫りは最後でいい。先に決めるのは、どこへ渡すか(誰に来てほしいか)、柱を何本立てるか(何を載せるか)、そして灯をどこに置くか(どうやって連絡してもらうか)。この三つが決まっていれば、見た目は後からいくらでも磨けます。
私はひとりで作っています。打ち合わせから設計、実装、公開後の手直しまで通しで担当するので、話が途中で消えません。「ここだけ直したい」も、そのまま私に届きます。
線は、渡られて橋になる。
公開した日がゴールではありません。渡る人が増えるほど、手すりの高さも灯の数も変わっていきます。だから、公開してからの手直しまでを仕事の範囲だと思っています。架け方は、三通り。
どれを架けるかは、行き先で決まります。決まっていなければ、そこから一緒に決めます。
店 ・ 事務所の顔
何をしている店で、どこにあって、どう連絡すればいいのか。検索から来た人も、名刺から来た人も、まずここで足を止めます。写真と文章の順番を組み直して、初めて来た人が迷わず最後まで読み切れる形にします。
含むもの構成の設計・文章の下書き・スマートフォン表示・地図と営業時間・問い合わせ先・公開の手続き・公開後の手直し。
行き先が、一つのとき
予約を取りたい。申し込みを増やしたい。灯を一つだけ点けるなら、ページも一枚でいい。上から順に読ませて、最後の一押しまで一息で運びます。
含むもの訴求の順番・一枚ぶんの文章・予約やフォームへの接続・広告や SNS から来た人の受け皿。
渡ったあとの、毎日
予約の管理、会員や生徒の名簿、在庫や売上の集計。紙と表計算で回している作業を、そのまま一画面に移します。橋を架けたあとの、毎日を支える造りです。
含むもの画面の設計・データの持ち方・ログイン・使い方の引き継ぎ・公開後の手直し。
架け方の見本を、十三。
業種に合わせて作り分けた、実際に動くページです。掲載の13本はすべて架空の事業者(店舗・事務所・会社・事業所)を想定した制作見本で、実在の受注案件ではありません。クリックすると別タブで開きます。
一杯に時間をかける珈琲店。写真と余白で「その店の空気」を先に渡す一枚もの。営業時間と地図までを一息で読み切れる構成にしています。渡す先は「今日の午後、寄ってみるか」という気分。
実物を見る → Work II完全予約制のサロン。灯は一つだけ——ご予約。そこへ最短で着くための導線に絞ったLPです。
実物を見る → Work III予約・生徒・月謝を一画面で。渡ったあとの毎日を支える、運用まで含めた造りです。
実物を見る → Work IV写真をほとんど使わず、罫と余白と料金表の明確さだけで信頼を組み上げた一本。数字を扱う仕事の顔をしています。
実物を見る → Work V施工事例が主役。ビフォーとアフターを実際に切り替えられて、費用と工期まで書いてあります。事例で売る商いの造りです。
実物を見る → Work VI作り手のわかる生活道具の店。絞り込みも、かごの合計金額も、本当に動きます。売り買いの伴う造りまで引き受けられる、という一本。
実物を見る → Work VII保険が使えるかどうかを、来る前に三問で。痛む場所は等高線の図が受け取ります。制度の線引きを、そのまま画面の設計に落とした一本。
実物を見る → Work VIII合格実績を分母つきで出し、偏差値が下がった生徒も同じ太さの線で描く。月謝は選ぶそばから積み上がります。数字で信用を作る商いの造り。
実物を見る → Work IX「ここは、楽ではありません。」から始まる求人。一日の人の居場所を、動かして見せます。人が採れない、に効くのは待遇より正直さだ、という一本。
実物を見る → Work X灰色の部屋を、なぞると光が差す。初期費用は最後の一円まで先に出ます。写真と数字の見せ方そのものが差別化になる商いの造り。
実物を見る → Work XIシロップを選ぶと、見出しも、数字も、ページ全体の色も変わります。氷は選ぶたびに削り直され、上から色が染みて下りてくる。堅い仕事の顔だけでなく、こちら側も作れます。
実物を見る → Work XIIスクロールすると、下の低い弦から順に弓が入り、音も重なっていきます。音源ファイルは持たず、その場で合成しています。音を扱うページも引き受けられる、という一本。
実物を見る → Work XIIIスクロールを一つ送るごとに、鋼の板が一枚ずつ立ち上がって箱になります。噛む瞬間に「カチッ」と鳴り、見出しの字が震える。商品はBlenderで組んで48コマ回し、フリップブックに詰めてあります。物のあるお客さまへ。
実物を見る →もっと大きくも、作れます。
下の2本は、Hanjōdō が自分のために作ったものです。受注案件ではありませんが、「ここまでやれます」の実物として置いています。どちらもスクロールがそのまま時間の進行になっていて、朝から翌朝までの一昼夜を通します。
橋普請の順に、六段。
岸を、見に行く
困っていることと、いま使っているものを見せてもらいます。SNSでも、チラシでも、前に作ったサイトでも構いません。この段では、まだ何も決めなくて大丈夫です。
お願いすること「今こう困っている」の一行。長さも、まとまりも要りません。
渡し先を、決める
誰に来てほしいのか、来た人に何をしてほしいのか。予約か、来店か、問い合わせか。ここを一つに絞ると、作る量が決まります。作る量が決まると、金額も決まります。
お願いすること絞る決断を、一度だけ。迷うところは材料を並べて一緒に決めます。
柱を、立てる
載せるものと並び順、ページの数、スマートフォンでの見え方を先に決めます。文章の下書きもここで作ります。見た目の彫りは、まだ後です。
お願いすること写真・料金・営業時間など、手元にある材料を渡してください。足りないものは一緒に集めます。
桁を渡し、橋板を張る
実際に組み上げます。途中の画面はURLで見られるようにするので、出来上がるまで中が見えない、にはなりません。
お願いすること途中で一度、見てください。気になったところは、早いほど直しやすいです。
灯を、入れる
ドメインとサーバの手続き、検索エンジンへの登録、表示の速さとスマートフォン表示を確かめてから公開します。アカウントは、あなたの名前で作ります。橋の持ち主は、あなたです。
お願いすることドメイン名の最終確認と、公開してよい日の一言。
渡ってから、直す
公開した日は終わりではありません。見られ方を見ながら、文言や写真を直します。営業時間の変更も、お知らせの追加も、そのまま受けます。
お願いすること「ここだけ直したい」を、そのまま。窓口は、私ひとりです。
先に、お金の話を。金額は、載せるものと作る量で変わるので、一律の値段を出していません。そのかわり、何が値段を動かすのかを先に開いておきます。ここを読んでから相談していただくと、話が早く済みます。
値段を動かすもの
ページの数/写真を撮るか、あるものを使うか/文章をこちらで書くか、いただくか/予約やフォームをつなぐか/ご自身で更新できるようにするか/ページをどこまで動かすか。この6つで大きく変わります。
値段を動かすもの
構成と文章を、どこまでこちらで作るかが最も効きます。次に、予約・フォーム・決済のつなぎ先と、どこまで動かすか。一枚ぶんなので、ページ数では動きません。
値段を動かすもの
機能の数で決まります。まず本当に要る一つだけを小さく架けて、使いながら足していく形をおすすめしています。そのほうが、結局は安く済みます。
予算が決まっている場合は、先に金額をおっしゃってください。その中で何ができるかを組み立てます。予算に対して作る量が多すぎるときは、そう申し上げます。
繁盛堂は、ひとりでやっています。
相談を受けるのも、設計するのも、コードを書くのも、公開してから直すのも、同じ人間です。だから伝言が要りません。営業と制作で話が食い違うことも、担当が替わって最初から説明し直すことも起きません。最初に話したことが、そのまま最後まで残ります。
できないことは、先に言います。予算に対して作る量が多すぎるとき、その仕組みが本当に要るのか怪しいとき、すでにある道具を借りたほうが早いとき。橋を架けないほうがいい場所も、たまにあります。
専門用語は使いません。どうしても要るときは、その場で言い換えます。分からないまま話が進むのは、あとで必ず高くつきます。
ひとりなので、一度に受けられる数は多くありません。順番をお待たせすることがあります。それでも、受けた分は最後まで通しで見ます。
ホームページ・LP・Webアプリ。「今こう困っている」の一行だけでも構いません。見積りは無料です。まず行き先の話をしましょう。
ご相談はこちら X DM @hanjodo_web「まだ分からない」で構いません。予算をうかがうのは、値段を吊り上げるためではなく、その額でできることを組み立てるためです。合わないときは、合わないと申し上げます。
まずは見るだけ、で構いません。定点版『一昼夜の橋普請』もあります。
繁盛堂という名は、自分も相手も、共に繁盛する——という考えから取りました。橋は、片側の岸だけでは立ちません。