朝比奈幸太郎のサイト制作 ウェブデザインパーツ

伝え方を、番号で選ぶ 28 のウェブデザインパーツ

地図、手順、仕組みの図、数字とグラフ、人と声、料金とメニュー、問いと案内。サイトの部品を、7 つの棚に分けました。強い地の色、ベタ塗りの絵、太い見出し、番号の丸と引き出し線。どれも、あなたのサイトにそのまま入る部品です。入れたい部品を押して、番号を送ってください。いくつでも選べます。

色の見本 → 書体の見本 → 世界観の見本 → 世界の文様 →

A 場所と道順、建物の中を伝える

地図と案内

教室までの道

ピアノ教室駅川沿いの公園

P-01手描きの版も作れます

絵の地図

町の形と目印を絵にし、行き先を札と引き出し線で指します。

向く場面 教室・店・会場の場所

ご依頼の路線図

1ご相談2カルテ3専用窓口4制作5校正6納品

P-02画面の上で動く

路線の模式図

手順や行程を、駅をたどる太い一本の線で見せます。

向く場面 依頼の流れ・旅程・工程

サービスの 3 つの階

3F納品と控え
2F制作と校正
1Fカルテと相談

P-03

階ごとの案内

建物を階で切り分け、大きな階数で「どこに何があるか」を先に読ませます。

向く場面 施設の案内・サービスの段

B 何を、どの順でするかを伝える

手順と使い方

依頼は 4 つの手順だけ

1曲名を送る

2番号で選ぶ

3校正で確かめる

4受け取る

P-04画面の上で動く

番号つきの手順

絵と番号と一言で、手順を順に並べます。

向く場面 申し込み・使い方

毎月まわす

公開
毎日の見回り
直す
月の報告

P-05

円を回る手順

太い輪の上に仕事を置き、くり返す流れを一つの形にします。

向く場面 月の管理・定期の手入れ

スマホで読める文字に

Make it readable on a phone

文字は 16 画素からUse 16px or larger
小さい文字は読まれないSmall text gets skipped

P-06

よい例とよくない例

○ と × の絵を並べ、二つの言葉で添えます。

向く場面 注意書き・マナー・選び方

舞台のお辞儀 4 つの動き

01まっすぐ立つ
02手を胸に
03深く礼
04客席を見る

P-07画面の上で動く

こま割りの動き

同じ人形を同じ大きさで並べ、姿勢の違いだけを見せます。

向く場面 体の使い方・楽器の構え

C 見えない中身や、関係を伝える

仕組みと図解

教室の中を開いて見る

123
  • 1レッスン室
  • 2小さな部屋
  • 3入口と階段

P-08

屋根を外して見せる図

建物の屋根を外し、中の部屋に番号を振って説明します。

向く場面 教室・店の中・サービスの中身

音楽の町の案内図

1ホール
2音楽教室
3大通り

P-09手描きの版も作れます

町の俯瞰と拡大窓

強い地の色に町の俯瞰を置き、丸い窓で大事な所を拡大します。

向く場面 施設の全体・地域の紹介

BEFORE

録音・編集・デザイン・サイトを 4 か所に

AFTER

一つの窓口で、最後まで

P-10

前と後

白い線の絵だけで、囲みの形の変化として違いを見せます。

向く場面 大掃除・リフォーム・改善

Google 検索AI の答えSNS地図専用窓口予約あなたのサイト

P-11画面の上で動く

蜂の巣の関係図

六角形を組み、中心とつながる先を二色で見せます。

向く場面 サービスの全体像・分野のつながり

世界の文様の図鑑

1【イスファハンのドームの天井】イラン・イスファハン
2【カシミールのペイズリー】カシミール
3【ガーナのケンテ】ガーナ
4【日本の藍の型染め】日本
5【イズニクのタイル】トルコ
6【パナマのモラ】パナマ(グナ)

P-12画面の上で動く

同じ枠の図鑑

同じ枠・同じ大きさに並べ、違いを中身だけにします。

向く場面 商品・作品・素材の一覧

D 数と比べた結果を伝える

数字とグラフ

Google 検索から来た人

19.5倍

朝比奈幸太郎メソッドを当てた、自分のサイトの実測

P-13画面の上で動く

大きな数字

伝えたい数を一つだけ、画面いっぱいに置きます。単位は小さく。

向く場面 実績・効果・件数

CD の盤で見る 世界の文様 45 の内訳

  • イスラムの建築装飾12
  • 古代の壁と壁画7
  • 中東・中央アジア8
  • 南アジア5
  • 東・東南アジア4
  • アフリカ4
  • アメリカ・オセアニア4
  • ヨーロッパ1

P-14画面の上で動く

物の形のグラフ

グラフを主題の物の形にはめます。凡例が少なくても伝わります。

向く場面 内訳・割合・構成

2008大阪音大ピアノ科を卒業
2012アルバム『noumenon』
2014ケルンで録音
2018タンゴの来日公演
いま空音開発で音の道具を作る

P-15画面の上で動く

道の年表

曲がる道を時間に見立て、年と出来事を並べます。

向く場面 経歴・沿革・歩み

どれを頼めばいい?

8万8,000円大掃除
おすすめ15万6,000円大掃除+AI 対策
23万6,900円新しく作る

P-16画面の上で動く

高さで比べる表

棒の高さで比べ、おすすめを一つだけ色で浮かせます。

向く場面 料金・プラン・商品の比較

E 作り手の人柄とお客様の声を伝える

人と声

ピアノ講師・調律師

森田 ひろみHiromi Morita

  • 30年 ピアノを教えて
  • 2台のグランドピアノを自分で調律

P-17

作り手の紹介

顔と手仕事の絵を並べ、年数と数字で人柄を伝えます。

向く場面 教室・工房・個人の店

この店の人たち

店長小川 さきラテアートが得意です
菓子担当山本 けんた焼き菓子は毎朝 6 時から
店主高橋 ふみこの店を 25 年続けています
接客中村 ゆう豆の話なら何でも

P-18画面の上で動く

スタッフの並び

同じ枠に顔と役割と一言を並べ、地の色で一人ずつ分けます。

向く場面 店・医院・事務所

「ピアノの前に座るのを、
娘が毎日待っています」

前練習は週に 1 回今毎日 20 分

小学 2 年生のお母さま 通って 1 年

P-19

お客様の声の札

本人の言葉を大きく、前と今の変化を小さく添えます。

向く場面 教室・サロン・サービス

ピアノ講師の一日

6:30起きる
9:00朝の練習
13:00お茶の時間
16:00子どものレッスン
21:00明日の準備

P-20画面の上で動く

一日の流れ

時刻と小さな絵で、仕事や暮らしの一日を見せます。

向く場面 講師・職人・施設の一日

F 値段と中身を、迷わせずに伝える

料金とメニュー

レッスンの料金

松月 4 回

14,800円税込・月

  • 45 分 × 4 回
  • 発表会に出られる
  • 録音つき
  • 振替いつでも
いちばん人気竹月 3 回

9,800円税込・月

  • 30 分 × 3 回
  • 発表会に出られる
  • 録音つき
梅体験

2,000円税込・月

  • 30 分 1 回
  • 楽譜は貸し出し

P-21

松竹梅の札

三つの札を並べ、真ん中だけを浮かせます。

向く場面 月謝・コース・プラン

○入っている

  • 30 ページまでの制作
  • スマホで読める組み
  • 公開から 1 か月の直し
  • URL はあなたの名義

×入っていない

  • 写真の撮影
  • 毎月の記事の執筆
  • 広告の運用
ご希望なら別にお見積り

P-22

含むもの・含まないもの

○ と × の二段で、料金の中身を先に見せます。

向く場面 制作・工事・サービスの料金

MENUお品書き

  • 自家焙煎のブレンド550
  • カフェラテ620
  • 苺のショートケーキ680
  • バタークロワッサン380
  • 季節の紅茶(ポット)700

価格は税込・円

P-23

品書き

黒の地に品名と値段を点線でつなぎ、品の絵を添えます。

向く場面 カフェ・飲食店・サロンのメニュー

合計(税込)236,900円

英語のページと予約の受付の額は見本です

P-24画面の上で動く

費用の計算

項目を押すと、その場で合計が変わります。

向く場面 見積り・オプションの多い料金

I 申し込む前の迷いを、先にほどく

問いと案内

Q大人から始めても、
弾けるように
なりますか?

A

なります。生徒さんの 4 割は大人から始めた方です。最初の 3 か月は、好きな曲を一曲弾けるところまでを一緒に目指します。

P-25

一問一答の札

一番多い問いを一つだけ、大きな問いと短い答えで。

向く場面 よくある質問・不安への答え

この教室に向いている方

  • 好きな曲を弾けるようになりたい
  • 家で少しずつ練習できる
  • 発表会に一度出てみたい

向いていない方

  • コンクールで入賞を目指したい
  • 練習の時間がまったく取れない

P-26

向いている人・向かない人

向かない人もはっきり書き、合う人に安心してもらいます。

向く場面 教室・サービス・商品の選び方

ホームページでよくある 3 つの失敗

作ったきり、更新が止まる

新着の更新は任せられる

SNS の通知に追われる

問い合わせは窓口に一本化

あとから費用が増える

最初の見積りの額のまま

P-27画面の上で動く

よくある失敗の図

失敗の型を絵で見せ、その避け方を一行で添えます。

向く場面 比較・注意・選び方の案内

お問い合わせから
制作まで、あと 4 段

1相談を送るいまここ
2返事が届く
3カルテに答える
4制作が始まる

ここまで、費用はかかりません

P-28画面の上で動く

お問い合わせまでの道

あと何段で終わるかを見せ、費用がかからない所まで示します。

向く場面 お問い合わせ・予約・申し込み

A〜D の見本の中身は、朝比奈幸太郎のサイト制作の実際の手順・料金・実績・経歴で組んでいます。E・F・I の見本は、ピアノ教室やカフェなど業種の見本で、人物・店・数字・声は架空のものです。あなたのサイトでは、あなたの中身と色に入れ替えて作ります。絵は画像を生成する仕組みで描いたもので、文字と数字はあとから正確に重ねています。