TransAIJEmDash 制作見本

5人の依頼者と、15の案

依頼者ごとのこだわりを先に決め、それに応える形で作りました。1つのサイトに、同じ中身で見た目の違う案が3つあり、サイトの下の切り替えで見比べられます。どれも EmDash 1.3 で動いていて、中身は管理画面と AI から直せます。

  1. 御菓子司 汐見のスマホの最初の画面01和菓子店御菓子司 汐見
  2. 由良精工株式会社のスマホの最初の画面02精密加工の町工場由良精工株式会社
  3. デイサービス 北郷のいえのスマホの最初の画面03介護のデイサービスデイサービス 北郷のいえ
  4. 北窓建築設計室のスマホの最初の画面04建築設計事務所北窓建築設計室
  5. 青柳醸造所のスマホの最初の画面05クラフトビールの醸造所青柳醸造所

01

御菓子司 汐見

和菓子店 北海道小樽市(架空)

3つの案

  1. 案A 静けさのパソコンの最初の画面

    A静けさ

    3代目の店主と女将のこだわり

    • 「店の空気のままにしたい。のれんをくぐった時の静けさ」
    • 「季節ごとに店の顔を変えたい」
    • 「縦書きで和菓子屋らしく。でもスマホで読みにくいのは困る」
    この案で開く
  2. 案B お品書きのパソコンの最初の画面

    Bお品書き

    お茶会や法事の注文を受ける店主のこだわり

    • 「店に掛けている品書きと同じに。何があるかと値段が、まず分かるように」
    • 「お茶会や法事でまとめて頼む方が多い。注文の決まりを先に」
    • 「写真は小さくていい。字で選んでもらう店です」
    この案で開く
  3. 案C 季節の色のパソコンの最初の画面

    C季節の色

    4代目の娘さんのこだわり

    • 「Instagram から来た若いお客様にも、季節の菓子を知ってほしい」
    • 「季節ごとに店の色をがらっと替えたい」
    • 「写真は大きく、字は少なく」
    この案で開く

案A の画面と、こだわりへの応え方

御菓子司 汐見のパソコンの画面
御菓子司 汐見のスマホの画面

依頼者

頼んだ人
3代目の店主と女将
更新する人
女将。Instagram 4,200人。菓子の写真はいつも女将がスマホで撮る
今のサイト
2015年の WordPress。スマホで崩れ、新着は2023年で止まった。直しは1回5,500円で外に頼んでいた
お客様の来方
地元の常連(贈答・お茶会の注文は電話)と、運河から歩いて来る観光の方
毎月の更新
季節の生菓子3〜5品・お知らせ・店主の短い文

案A のこだわりと、応え方

  1. 1

    「店の空気のままにしたい。のれんをくぐった時の静けさ」

    生成りの地と墨の字、明朝の1書体。写真がゆっくり現れる以外は動かさない

  2. 2

    「季節ごとに店の顔を変えたい」

    今月の菓子が主役になり、線とラベルの色が季節で替わる(秋は柿、冬は藍)

  3. 3

    「写真は私がスマホで撮った物を使う」

    正方形に切りそろえ、台紙のような枠で受け止める。写真は加工しない

  4. 4

    「縦書きで和菓子屋らしく。でもスマホで読みにくいのは困る」

    縦書きは見出しと菓子の名前だけ。説明と値段は横書き

  5. 5

    「観光の方に、英語で営業時間と場所くらいは」

    English の1ページ(営業時間・地図・おすすめ3品)

  6. 6

    「通販は BASE のまま」

    サイトでは売らず、お取り寄せのリンクを1つ

  7. 7

    「お茶会や法事の注文は電話で」

    ご注文の欄に電話番号を大きく。何日前までかも

12月に開いた時。主役が雪餅に替わり、季節のラベルと線が冬の色になります
12月に開いた時。主役が雪餅に替わり、季節のラベルと線が冬の色になります
English のページ。営業時間・場所・おすすめの菓子だけを英語で載せています
English のページ。営業時間・場所・おすすめの菓子だけを英語で載せています

AI に頼む更新

「11月の生菓子を3つ足して。亥の子餅 380円、初霜 400円、柚子 380円」

11月の顔の主役が亥の子餅になり、初霜と柚子が並びます

変わる前

御菓子司 汐見の変わる前

変わった後

御菓子司 汐見の変わった後

投稿の種類

  • 季節の生菓子名前・読み・季節・出す月・値段・素材・ひとこと・写真
  • 菓子帖題・写真・本文
  • お知らせ題・休業の日・本文

02

由良精工株式会社

精密加工の町工場 大阪府東大阪市(架空)

3つの案

  1. 案A 精度のパソコンの最初の画面

    A精度

    2代目の社長のこだわり

    • 「精度を数字で見せたい。±0.005mm まで出せる」
    • 「取引先は最初に設備一覧を見る。メーカーと型番まで」
    • 「かっこよく。でも派手にはしない」
    この案で開く
  2. 案B 採用のパソコンの最初の画面

    B採用

    採用を任された総務の担当のこだわり

    • 「若い人に来てほしい。工場の中と、働いている人の顔を見てから応募してほしい」
    • 「給料と休みは隠さず数字で載せたい」
    • 「求人票では伝わらない、入社2年目の1日の流れを見せたい」
    この案で開く
  3. 案C 図面のパソコンの最初の画面

    C図面

    海外の取引を広げたい営業の課長のこだわり

    • 「台湾とドイツの装置メーカーの購買担当が最初に見る。英語で、仕様が一目で」
    • 「図面をメールで送ってもらえば、最短3日。送り方をはっきり」
    • 「飾りより、測定と品質の証拠を見せたい」
    この案で開く

案A の画面と、こだわりへの応え方

由良精工株式会社のパソコンの画面
由良精工株式会社のスマホの画面

依頼者

頼んだ人
2代目の社長(54)
更新する人
総務と採用の担当(32)。パソコンは事務の作業だけ
今のサイト
2009年の手作りの HTML。スマホで見られず、設備の一覧は2015年のまま。採用のページは無い
お客様の来方
紹介と展示会の名刺から社名を検索し、設備と精度を確かめる。海外の装置メーカーの購買も見る
毎月の更新
加工事例2件・採用の話・展示会のお知らせ

案A のこだわりと、応え方

  1. 1

    「精度を数字で見せたい。±0.005mm、図面から最短3日」

    最初の画面に4つの数字を等幅の字で

  2. 2

    「取引先は最初に設備一覧を見る。型番まで載せたい」

    設備の投稿の種類(メーカー・型番・台数・仕様)と、種類ごとの表

  3. 3

    「加工事例は図面も取引先名も出せない」

    材質・公差・数量・期間の4つで語るカード。取引先名の欄は作らない

  4. 4

    「若い人に来てほしい」

    職人の手と若手の写真、入社2年目の1日

  5. 5

    「海外の取引先向けに英語のページ」

    /en。設備の表は同じデータを英語の名前で

  6. 6

    「かっこよく。でも派手にはしない」

    鉄の黒と白の2つの面、差し色は安全の黄色1つ。動きは写真がわずかに寄るだけ

設備の一覧。種類ごとに、メーカー・型番・台数・仕様・導入年を並べています
設備の一覧。種類ごとに、メーカー・型番・台数・仕様・導入年を並べています
英語のページ。設備の表は、日本語のページと同じデータを英語の名前で出しています
英語のページ。設備の表は、日本語のページと同じデータを英語の名前で出しています
採用の区画。職人の手と若手の写真、入社2年目の1日の流れを載せています
採用の区画。職人の手と若手の写真、入社2年目の1日の流れを載せています

AI に頼む更新

「この写真で加工事例を1件。半導体装置のバルブ部品、SUS304、公差 ±0.01、100個、10日」

加工事例が1件増え、トップの並びの先頭に入ります

変わる前

由良精工株式会社の変わる前

変わった後

由良精工株式会社の変わった後

投稿の種類

  • 加工事例業界・材質・公差・数量・期間・加工・写真・本文
  • 設備種類・メーカー・型番・台数・仕様・導入年・英語の名前
  • 採用の話話した人・入社年・写真・本文

03

デイサービス 北郷のいえ

介護のデイサービス 札幌市白石区(架空)

3つの案

  1. 案A 大きい字のパソコンの最初の画面

    A大きい字

    管理者のこだわり

    • 「字を大きく。ご家族は50〜60代で、老眼の方も多い」
    • 「電話をすぐ押せるように」
    • 「空き状況をケアマネさんがすぐ見られるように」
    この案で開く
  2. 案B 便りのパソコンの最初の画面

    B便り

    毎日の様子を書いている相談員のこだわり

    • 「遠くに住むご家族が、毎日の様子を楽しみに見てくれるように」
    • 「お顔が写らなくても、手元や作った物や食事の写真で伝わるように」
    • 「字は大きく、読みやすく」
    この案で開く
  3. 案C ケアマネのパソコンの最初の画面

    Cケアマネ

    運営会社の営業の担当のこだわり

    • 「居宅のケアマネさんが、空きと受け入れの条件を一目で確かめられるように」
    • 「毎週の FAX の代わりに、印刷してそのまま使える形で」
    • 「送迎の範囲と、できること・できないことをはっきり」
    この案で開く

案A の画面と、こだわりへの応え方

デイサービス 北郷のいえのパソコンの画面
デイサービス 北郷のいえのスマホの画面

依頼者

頼んだ人
管理者(58)
更新する人
生活相談員(35)。送迎もするので、パソコンの前にいる時間は短い
今のサイト
2019年の Jimdo の4ページ。日々の様子はアメブロ。空き状況は毎週ケアマネさん約30人に FAX
見る人
50〜60代のご家族、空きを確かめるケアマネさん、近所でパートを探す人
毎月の更新
今日の様子 週3・空き状況 週1・お知らせ・求人

案A のこだわりと、応え方

  1. 1

    「字を大きく。ご家族は50〜60代で、老眼の方も多い」

    本文18〜19px、UD書体の1つ、行の高さ1.9

  2. 2

    「電話をすぐ押せるように」

    上の帯に大きな電話番号。スマホは画面の下にいつも電話の帯

  3. 3

    「空き状況をケアマネさんがすぐ見られるように」

    最初の画面に曜日ごとの空きの表。記号と字の両方で、更新日つき

  4. 4

    「毎日の様子を写真で届けたい。お顔を出せない方もいる」

    今日の様子の投稿の種類(写真3枚まで)。写真は手元と後ろ姿だけ

  5. 5

    「やさしい雰囲気。でも子どもっぽくしないで」

    若竹の1色と温かい白。丸い字・パステル・イラストは使わない

  6. 6

    「動きはいらない。見やすさが一番」

    現れる演出は付けない

今日の様子の一覧。写真は手元と後ろ姿だけで、日付の新しい順に並びます
今日の様子の一覧。写真は手元と後ろ姿だけで、日付の新しい順に並びます

AI に頼む更新

「来週の空き:火曜を空きなしに、金曜を空きありに」

空き状況の表と更新日が替わります

変わる前

デイサービス 北郷のいえの変わる前

変わった後

デイサービス 北郷のいえの変わった後

投稿の種類

  • 今日の様子一言・日付・写真3枚まで・本文
  • 空き状況曜日・状況・メモ
  • 求人職種・時間・時給・本文

04

北窓建築設計室

建築設計事務所 札幌市中央区(架空)

3つの案

  1. 案A 写真だけのパソコンの最初の画面

    A写真だけ

    主宰の建築家のこだわり

    • 「写真がすべて。文字は要らない」
    • 「白と黒だけ。写真の色だけが見えるように」
    • 「全部の作品を一覧で見渡せるように」
    この案で開く
  2. 案B 読み物のパソコンの最初の画面

    B読み物

    考え方を読んでほしい建築家のこだわり

    • 「施主さんに、考え方と、家ができるまでを読んでほしい」
    • 「写真だけでは伝わらない、敷地と光の話を書きたい」
    • 「雑誌の記事のように、ゆっくり読める形で」
    この案で開く
  3. 案C 展示室のパソコンの最初の画面

    C展示室

    展覧会をよく開く建築家のこだわり

    • 「夜の展示会のように、暗い中で写真だけを見せたい」
    • 「作品を横にめくって、次々に見たい」
    • 「名前と年だけで、ほかは聞かれたら答える」
    この案で開く

案A の画面と、こだわりへの応え方

北窓建築設計室のパソコンの画面
北窓建築設計室のスマホの画面

依頼者

頼んだ人
主宰の建築家(41)。写真の選び方と並べ方にこだわりがある
更新する人
所員(29)
今のサイト
2019年の Wix。写真を1枚ずつ上げるのが手間で、2年前から止まっている
お客様の来方
Instagram・雑誌・紹介。施主さんは3〜5つの事務所の作品を見比べてから連絡してくる
毎月の更新
作品(年4〜6件・1件10〜20枚)・現場の記録

案A のこだわりと、応え方

  1. 1

    「写真がすべて。文字は要らない」

    最新作の写真を画面の幅いっぱいに。文字は作品名と年だけ

  2. 2

    「白と黒だけ。ロゴにも色を使わない」

    白・黒・灰と細い線だけ。色は写真にしか無い

  3. 3

    「作品に書くのは、名前・年・場所・用途・構造・面積だけ」

    入力欄そのものがその7つと短い本文だけ

  4. 4

    「全部の作品を一覧で見渡せるように」

    番号と名前の行の一覧。行に乗せると、その作品の写真が出る

  5. 5

    「動きは静かに」

    写真がゆっくり現れるだけ。一覧の写真から作品の写真へつながる

  6. 6

    「写真をたくさん入れても、更新が面倒にならないように」

    写真は並びの欄にまとめて入れ、上下で並べ替える

作品の一覧。04の行に乗せると、右にその作品の写真が出ます
作品の一覧。04の行に乗せると、右にその作品の写真が出ます
作品のページ。写真が縦に続き、名前と仕様の表が横に付いてきます
作品のページ。写真が縦に続き、名前と仕様の表が横に付いてきます

AI に頼む更新

「この2枚で作品を1件。当別の木工所の増築、2026年、当別町、工房、木造平屋、48.0㎡」

作品の一覧に1行増えます

変わる前

北窓建築設計室の変わる前

変わった後

北窓建築設計室の変わった後

投稿の種類

  • 作品名前・英語の名前・年・場所・用途・構造・面積・写真の並び・本文
  • 現場の記録題・日付・写真・本文
  • お知らせ題・本文

05

青柳醸造所

クラフトビールの醸造所 北海道函館市(架空)

3つの案

  1. 案A ラベルのパソコンの最初の画面

    Aラベル

    ラベルの絵を描く共同代表のこだわり

    • 「ラベルの絵の世界をそのままサイトにしたい」
    • 「今日なにが飲めるか(タップリスト)がいちばん大事」
    • 「遊び心と動きがほしい。でも、度数が読みにくいのはダメ」
    この案で開く
  2. 案B 酒場のパソコンの最初の画面

    B酒場

    タップルームの店長のこだわり

    • 「タップルームに来てほしい。夜の店の雰囲気を」
    • 「今日のタップリストを、店のカウンターの上の板と同じように大きく」
    • 「イラストより、ビールと人の写真で」
    この案で開く
  3. 案C 仕入れのパソコンの最初の画面

    C仕入れ

    卸を担当する代表のこだわり

    • 「飲食店と酒屋の仕入れの担当が、毎週の在庫と値段を見に来る」
    • 「樽の大きさと値段、配達の曜日と締め切りを表で」
    • 「取扱いの相談と注文を、フォームで受けたい」
    この案で開く

案A の画面と、こだわりへの応え方

青柳醸造所のパソコンの画面
青柳醸造所のスマホの画面

依頼者

頼んだ人
代表で醸造長(36)
更新する人
共同代表で、ラベルの絵とデザインの担当(34)
今のサイト
STUDIO の3ページ。新作とイベントは Instagram だけ。飲食店から毎週「今どの樽がある?」と DM が来る
お客様の来方
ビール好きと観光の方、取扱いを考える飲食店と酒屋
毎月の更新
新しいビール2本・タップリスト 週1・イベント

案A のこだわりと、応え方

  1. 1

    「ラベルの絵の世界をそのままサイトに」

    ビールごとのラベルの色が、カードとページの地になる

  2. 2

    「今日なにが飲めるかがいちばん大事」

    最初の画面に6つの注ぎ口の板と、今日の営業

  3. 3

    「遊び心と動きがほしい。でも読みにくいのはダメ」

    名前が流れる帯と、乗せると傾くカード。スタイル・度数・値段は動かさない

  4. 4

    「新作を出すたびに1ページ。終売も残したい」

    ビールの投稿の種類。定番・季節・終売に分けて全部残す

  5. 5

    「飲食店が取扱いを相談しやすく」

    樽と缶の卸の値段の表と、相談のフォーム

  6. 6

    「20歳未満の飲酒防止の表示はきちんと」

    すべてのページの下と、ビールのページに表示

ビールのページ。地がそのビールのラベルの色になり、20歳未満の表示も入ります
ビールのページ。地がそのビールのラベルの色になり、20歳未満の表示も入ります
取扱いのご相談。樽と缶の卸の値段の表と、相談のフォームを1ページに置いています
取扱いのご相談。樽と缶の卸の値段の表と、相談のフォームを1ページに置いています

AI に頼む更新

「今週のタップ:4番を函館山ヘイジーの新しい樽に、6番を漁火ラガーに」

ON TAP の板と更新日が替わります

変わる前

青柳醸造所の変わる前

変わった後

青柳醸造所の変わった後

投稿の種類

  • ビール名前・英語の名前・スタイル・度数・IBU・ホップ・ラベルの色・ラベルの絵・状態
  • タップ番号・ビール・S と M の値段・状態
  • イベント題・日・時間・場所・写真
  • 取扱店店の名前・地域・業態

よくある形が合う依頼者