作例 · コンセプトサイト53件+実例1件
実際に操作できる、制作事例。
6つの業種のサイトをご覧ください。店主の掲載許可をいただいた「おむすび茶屋 おはな」以外は、架空の店舗・企業のデザイン例です。コンセプトサイトの写真はライセンス取得済みです。
日本語の制作事例
(23)業種を問わず、日本語のサイトから。
札幌・北5条東3丁目、ライオンズ札幌クロスタウン1階のおはぎとおむすびのお店。写真はすべてお店のもの(お店のウェブサイトと Google マップのオーナー写真)で、お品書きの価格はお店のウェブサイトに載っているとおりです。日本語・한국어・English の3か国語で開け、お品書きの行を選ぶとおはぎの写真が切り替わります。
- 3か国語(日本語・한국어・English)
- おはぎ14種・おにぎり15種のお品書きと価格
- 行を選ぶと写真が切り替わるお品書き



函館駅前・若松町で朝7時に開ける海鮮丼といくら丼の店を、架空の店舗として組んだコンセプトサイトです。丼12種のお品書きと折箱の持ち帰り、よくある質問を日本語と英語で読めます。
- 区分ごとに写真が替わるお品書き
- 曜日ごとの営業時間の表
- 折箱での持ち帰りの案内



金沢・東山の和菓子店という設定で組んだ、架空の店舗のコンセプトサイトです。毎朝つくるぶんだけの上生菓子、四季のお品書き、店の奥の茶房、地方発送までをまとめています。
- 春夏秋冬を切り替えるお品書き
- 月ごとの旬のたより
- 日持ちまで答えるよくある質問



小樽・堺町通りにある架空の喫茶店のコンセプトサイトです。サイフォンの珈琲、自家製の焼きプリン、ナポリタンの三つを、作り方と値段とともに日本語と英語で紹介しています。
- 珈琲・プリン・ナポリタンの紹介
- 値段と支払い方法をまとめた欄
- カウンター6席とテーブル14席



札幌・すすきのにある炉ばたという設定で組んだ、架空の店舗のコンセプトサイトです。カウンターだけの店で、道産の魚と野菜を白炭の遠火で焼き、道内の蔵の地酒とともに出します。
- 一画面ずつ止まる品と席の紹介
- 一品600円からの値段の目安
- 席をまるごと使う貸切の相談



函館・大門の塩ラーメン店という設定でつくった、架空の店舗のコンセプトサイトです。昼は塩そば、夜は同じだしの酒肴も出します。本文は日本語と英語を並べています。
- 昼と夜で分けたお品書き
- だしの素材を紹介するカード
- 日本語と英語を並べた本文



函館朝市から歩いて2分の鮨屋、という設定でつくった架空の店舗のコンセプトサイトです。予約なしの朝の丼と、前日までに予約する夜のおまかせ握りを分けて案内します。
- 曜日ごとの営業時間の表
- 税込み価格のお品書き
- 駅と朝市からの徒歩分数



函館・本町にある架空の大衆酒場のコンセプトサイトです。見出しは「刺身と、焼き魚と、地酒」。価格入りの品書きと座敷の貸切、よくある質問を載せました。
- 価格入りの品書き
- 座敷と小上がりの貸切案内
- 席の種類ごとの席数



函館・元町の坂の途中にある、架空のホテルのコンセプトサイトです。大正12年の洋館を使った全9室の宿という設定で、客室・朝食・料金・行き方を日本語と英語で載せています。
- 部屋ごとに名前のある全9室
- 泊まり方で分けた3つの料金
- 港と函館山を描いた略図



ニセコの林に3棟だけある、架空の貸別荘のコンセプトサイトです。棟を選んで空きを聞く欄のほか、雪の季節と川の季節、それぞれの過ごし方を書いています。
- 棟・日付・人数で空きを聞く欄
- 雪と川の季節ごとの過ごし方
- 棟ごとの料金・定員・寝室数



定山渓の谷あいに建つ12室だけの宿、という設定でつくった架空の温泉旅館のコンセプトサイトです。源泉かけ流しの大浴場と貸切風呂、夕朝食つきの滞在を日本語と英語で伝えます。
- 料金と時間をまとめた利用案内
- 12室まるごとの一棟貸し
- つくりの違う3種類の客室



大阪・靱公園のそばにある、架空のパーソナルジムのコンセプトサイトです。完全予約制のマンツーマン50分で、初回に姿勢と動作を測ります。料金と初回の流れも日本語と英語で載せています。
- 読み進めると一字ずつ濃くなる文章
- スクロールで奥へ倒れるメニュー
- 時間つきで示す初回の流れ



横浜・本牧にある架空の歯科医院のコンセプトサイトです。一般歯科・小児歯科・予防クリーニングの診療内容から費用の目安、休診日までを日本語と英語で載せています。
- 開いて読む診療内容とよくある質問
- 3割負担での費用の目安
- 対象別に並ぶ診療メニュー



仙台市青葉区にある架空の鍼灸整骨院のコンセプトサイトです。骨盤と腰、肩と首、鍼灸の施術を料金つきで並べ、初診の40分は問診と姿勢の確認から始まると伝えます。
- 施術ごとの時間と税込料金
- 初診40分の内訳を説明
- 保険・服装・鍼の痛みに回答



福岡・大名にある架空の美容室のコンセプトサイトです。カット、カラー、ヘッドスパの料金と、来店までの流れを一枚にまとめました。日本語と英語で読めます。
- 髪の長さで変わるカラー料金
- 予約・当日・帰ってからの流れ
- 遅れるとき・キャンセル・支払いに回答



札幌・円山にある架空のピラティススタジオのコンセプトサイトです。定員4名のグループ、60分の体験レッスン、月謝制の料金を紹介します。
- 満席の表示つきクラス一覧
- 日付と定員つきの半日クラス
- グループ・プライベート・体験の料金



知床ウトロで自然ガイドを営む、架空の企業のコンセプトサイトです。流氷の上と冬の原生林を1回8名までで歩く設定で、5つのコースの料金と時期を日本語と英語で載せています。
- 選ぶと開く5つのコース
- 集合場所から氷の上へ向かう経路図
- 中止と振り替えの決まり



長野・松本で年に8棟だけ家を建てる、架空の工務店のコンセプトサイトです。信州の木でつくる注文住宅と断熱・耐震の改修、施工事例、家づくりの流れを日本語と英語で載せています。
- スクロールで写真が替わる施工事例
- 横へ流れる「できること」の一覧
- 費用と工期に答えるよくある質問



京都・上京区の町家に事務所を置く、架空の建築設計事務所のコンセプトサイトです。住まいの新築、町家の改修、小さな店舗を、一級建築士2名が設計から工事監理まで担当します。
- 地名と種類を添えた実績一覧
- 設計料は工事費の10%と明記
- 相談から引き渡しまでの流れ



旭川の土木会社という設定でつくった、架空の企業のコンセプトサイトです。道路改良・橋梁補修・除雪・造成の仕事を現場の写真と短い文で紹介し、施工の記録と採用の案内も載せています。
- 舗装の層を描いた道路の断面図
- 場所と発注の形を添えた施工の記録
- 未経験から応募できる採用案内



奈良・広陵町にある架空の靴下工房のコンセプトサイトです。ローゲージの編み機で編む綿・ウール・シルクの靴下のほか、繕い直しと贈りもののセットも紹介しています。
- 繕い直しの料金と受付
- 足の実寸で選ぶ2つのサイズ
- 入荷とお直しのお知らせ登録



東京・高円寺にある架空のコインランドリーのコンセプトサイトです。洗濯機12台と乾燥機8台のほかに、珈琲を淹れる台と12の席があります。料金と営業時間は文章の中に書いています。
- 機械の台数と時間を数で示す欄
- 使い方ごとの料金カード
- 駅南口からの道順の略図



十勝の牧場が飲むヨーグルトとチーズを通販で届ける、という設定でつくった架空の店舗のコンセプトサイトです。商品と定期便の案内、買う前の疑問への答えを載せています。
- 容量と値段つきの商品一覧
- 月ごとの牧場のこよみ
- 買う前の疑問に答える欄



(01) 飲食店・カフェ
(10)レストラン・バー・ベーカリー・カフェが対象です。メニューはページで読めるようにし、営業時間は掲載情報と食い違わないようにします。最初の一枚は店内の写真です。飲食店のウェブサイト ↗
球場から2ブロックの Walnut Street にあるスモークハウス。薪は割ったオークだけを使い、スモーカー(ピット)は自分たちで溶接しました。肉はハーフポンド単位で販売し、金曜にはバーントエンドも出します。メニューは行ごとに料理の写真が現れ、ピットマスターは自家製ラブ(スパイス)のレシピまで公開しています。
- 行ごとに写真が切り替わるメニュー
- 曜日ごとの週替わりメニュー
- 電話・テイクアウト・デリバリーを一か所に



3軒の農家から火曜に届く食材で、メニューは変わり続けます。フードトレーラーから始まった創業の物語と、ご近所の名簿のように読める生産者リストも載せています。
- 時間枠を選べる団体予約リクエスト
- 食事制限への対応をメニューに明記
- 仕入れ先の農家を名前入りで掲載



West Hubbard にある、革と真鍮の内装に低いランプが灯る店。ベアルネーズソースのフィレステーキ、生牡蠣などのローバー、マティーニがそろいます。予約なし(ウォークイン)でもバーで全メニューを注文できます。個室は7名から150名の貸切まで3部屋あり、スクロールに合わせてワイプで現れます。
- 個室ごとの収容人数
- 予約受付は21日先までと明記
- バレーパーキングの住所を営業時間の横に



Clarksville の角に建つ小さな青い家。朝はベーカリーとして営業し、月曜にはステーキフリットを出します。ベーカリー・ブランチ・ハッピーアワー・ディナーとメニューを読み進めると写真が切り替わり、各メニューは提供時間と価格を添えてページに文字で載せています。メニューのPDFリンクはデモ用の仮リンクです。
- 提供時間と価格を文字で載せたメニュー
- 時間帯ごとの営業時間をフッターに
- 月曜のセットメニューを詳しく掲載



昼はカウンター注文、夜はテーブルサービスに変わる Ballard のカフェ。ブランチは午後2時30分まで、ハッピーアワーは午後5時までで、黒板メニューには鴨料理も並びます。予約なし(ウォークイン)のみですが、ページ冒頭に登場するキャンドルの灯る大テーブルだけは例外で、6〜8名で予約できます。
- 予約なし(ウォークイン)の案内を上部バーに
- 3つの時間帯とそれぞれの営業時間
- 大テーブルはメールで予約



毎朝6時にマサを石臼で挽く、North Park のタコス店。メインビジュアルでは薪火のコマル(鉄板)の上でトルティーヤがふくらみ、全画面の写真はスクロールに合わせて額縁の中へ縮まります。バーではアガベのスピリッツを42種類そろえています。
- 来店前に知りたいことを1つの表に
- 月曜定休の説明を添えた営業時間
- 行ごとにそれぞれの写真が現れる



Nashville の Division Street にある64席のカクテルラウンジ。12種のシグネチャーカクテルには1杯ずつ価格を載せ、木曜から土曜はライブジャズ、奥には20席の個室があります。リストを読み進めるとメニューの写真が切り替わります。
- 予約なし(ウォークイン)の案内を最初の画面に
- ジャズの夜がわかる営業時間
- 8〜20名の個室



Calle Ocho に面した注文窓口で、朝6時30分からコラーダ(キューバ式コーヒー)を提供しています。グアバのパステリートは1日4回焼き上がり、オフィス向けケータリングは48時間前までの予約制です。カウンターとテラスには40席あります。スクロールすると、各章が前の章の上へせり上がって重なります。
- オフィス向けケータリングは48時間前までに注文
- アレルゲン・駐車場・お支払いの質問に回答
- 営業時間・席数・ミルクの種類をラベルで表示



元金物店を改装した、Northeast Minneapolis のベーカリー。最初のパンは朝6時40分に焼き上がり、ランチは午後2時30分までです。土曜にはファームボックス(農家の詰め合わせ)があり、午後3時以降はパンが半額になります。クロワッサンや食パンの線画と、道案内のイラストマップも添えています。
- 午後3時以降の半額リスト
- ファームボックスの注文締切を明記
- 駐車場と駐輪ラックの案内



Portland, Maine の Danforth Street にある、オークの薪火で焼くビストロ。2時に火を入れるレッドオークの炉がひとつあり、メニューは毎週火曜に書き換えます。席数は42、ワインは60種です。炉の場面を過ぎると6枚の写真カードが重なり、スクロールに合わせて番号が01から06へ進みます。
- 予約なしで座れるバー席を毎晩確保
- 予約受付期間と団体利用のルール
- 駐車場・席・お支払いの質問に回答



(02) ホテル・宿泊施設
(7)旅館・ロッジ・リゾート・貸別荘が対象です。客室ごとに独立したページを設け、チェックイン情報は最初の画面に載せます。予約リンクは、フロントが案内する予約先につなぎます。ホテル・宿泊施設のウェブサイト ↗
1927年築の印刷所を改装した、客室90室のホテル。チェックイン時刻は最初の画面に置き、客室とバーはゆっくり流れる横長の帯で見せます。メインビジュアルは、ランプの灯るひと部屋の写真です。
- チェックイン時刻を最初の画面に
- バー・朝食・夕食の営業時間
- バレーパーキングとEV充電器を明記



週単位・月単位で借りられる、キッチン付きスイート40室。左側には色とりどりのカードが並び、「料金に含まれるもの」の列はスクロールに合わせて横へ進みます。チェックインの質問はピクセルアイコンで描きました。
- 週・月単位の料金を最初に表示
- 料金に含まれるものを項目ごとに
- ペットと駐車場のルールに回答



Key Largo の湾側に建つ40棟のヴィラリゾート。うち22棟は杭の上に建ち、ダイビングボートは8:00出航、夕暮れにはカタマランも出ます。空撮映像でページが始まり、スクロールに合わせて一文が塗られるように現れます。3つの章は1/3から3/3へと進みます。
- Miami・Key West から車で来た場合の所要時間
- 料金に含まれるもの・別料金のもの
- 日付まで明記した夏の特別プラン



Chicago から80マイル、Geneva Lake のほとりに建つ客室120室のリゾート。メインビジュアルの下には湖の桟橋を置きました。湖の朝もやから焚き火の輪まで、夏の1日を5つの動画チャプターで描きます。宿泊パッケージは平日の滞在から Frozen Lake Weekend までそろえています。
- 4つの出発地から車で来た場合の所要時間
- 料金と内容を明記した宿泊パッケージ
- 会議室の収容人数を掲載



Kill Devil Hills の砂丘に建つ客室18室の宿。メインビジュアルでは建物・ボードウォーク・朝食がスライドし、客室カルーセルは広さ(平方フィート)を最初に示します。無料のサーフボードもあり、通常なら口コミを置く場所にはフロントのFAQを載せています。
- 客室の広さとベッドを最初に表示
- どの宿泊にも含まれるもの
- 犬の同伴ルールと料金



Estes Park、Fall River Entrance のすぐ近くに建つ客室36室の木造ロッジ。全室に薪ストーブがあり、11のシダー材の湯船には4時に火を入れます。ガイド付きハイキングはポーチから出発します。稜線がひとりでに描かれたあと、雪をかぶった山々の映像でページが始まります。
- チェックイン・チェックアウトをメインビジュアルに
- Denver 空港からの道順
- 日付を明記した冬の特別プラン



Georgia 州の潮が満ち引きするクリークに面した、客室80室のリゾート。メインビジュアルには湿地の空撮映像を使い、敷地内の歩いて回れる6つのスポットを紹介します。口コミの代わりに季節ごとのカードが流れる帯を置き、満潮・干潮の時刻は毎朝掲示します。
- 各スポットまでの徒歩分数
- チェックイン・犬連れ・空港アクセスをひと目で
- 予約とペットに関するフロントのFAQ



(03) クリニック・ウェルネス
(3)歯科医院、カウンセラー・カウンセリングルーム、スタジオが対象です。医師と診療時間は最初に示し、初診の方が実際に必要とする書類を載せます。ありきたりなパンフレットのような文章は使いません。クリニック・ウェルネスのウェブサイト ↗
受付の横にジュースバーがある、Boulder のヨガ・ピラティススタジオ。クラスは週に40あります。スムージーメニューはカーソルを合わせると写真が切り替わり、土曜の朝にはトレイル・セッションも開きます。線画はひとりでに描かれていきます。
- クラス料金とパスを1枚の料金表に
- 最初の1週間無料を上部バーで告知
- マット数に上限のあるワークショップ日程



Williamson Street に、6人のカウンセラーと4つの静かな部屋があります。Wisconsin 州内ならどこからでもビデオでセッションを受けられます。最初の画面は切手を貼った手紙に見立て、小さなメモに電話番号を書くと、初回20分の無料電話相談を申し込めます。
- 初回の無料電話相談をメインビジュアルから申し込み
- 始めるまでを番号つきの3ステップで
- フッターに緊急相談窓口



Spa Creek に近い Eastport、Severn Avenue にある歯科医師2名の医院。画面に固定されたホイールが回り、1回で仕上がるクラウンから60分のクリーニングまで、受診の6つの場面を順に見せます。続いて、保険・土曜診療・駐車場についてわかりやすく答えます。
- 保険とお支払いをタブで整理
- 土曜の診療時間を明記
- 治療別に分けたFAQ



(04) 地域のサービス業
(2)工務店・水道業者・造園業・理容店・修理業が対象です。仕事ぶりは写真で見せ、電話ボタンはどの画面にも置き、対応エリアは具体的に書きます。地域のサービス業のウェブサイト ↗
Fairmount Avenue にある6席の店です。料金表は理容師のランク別に3列で並べ、予約なしのお客様には順番の10分前にショートメッセージでお知らせします。ホバーで店内写真が切り替わるリストと、8つのカット名がゆっくり流れる帯も置きました。
- 理容師のランク別の料金
- 予約なしの受付時間と順番のメッセージ通知
- アプリで予約、または電話で



Spokane 周辺の契約フリート60社を支える、24時間対応の出張トラック修理チーム。メインビジュアルにはトラック修理の動画を流し、走行距離カウンターは回転して止まります。サービスカードはスクロールで扇状に開き、150マイル圏の地図は手描きです。
- 出動受付の電話をヘッダーとメインビジュアルに
- 対応エリアを幹線道路ごとに示した地図
- 法人車両の請求に関する質問に回答



(05) B2B・ソフトウェア
(5)デザイン事務所、専門企業、SaaS・ソフトウェア会社が対象です。製品はありのままに見せ、実績は数字と実名の事例で示します。デモは電話なしで予約できるようにします。B2B・ソフトウェアのウェブサイト ↗
既存の建物の中に、オフィス・店舗・飲食店をつくる会社です。酸化鉄色の特大ロゴ、何もないスケルトンから完成したフロアへと写真が育っていくステージ、そして受賞歴の代わりに引き渡しの記録を置きました。
- ヘッダーに見積もり依頼ボタン
- 週ごとの現場スケジュール
- 面積と工期つきの引き渡し記録



従業員50〜500人の会社向けに、給与計算・入社手続き・休暇・人事評価を、従業員ごとに1つの記録で管理するソフトウェアです。メインビジュアルでは3つの製品画面が切り替わり、本来お客様の声を置く場所には、乗り換えに関する8つの質問をカルーセルで並べています。
- 料金とトライアルの条件を明記
- 乗り換えの疑問に数字で回答
- サポート時間と電話番号を掲載



自社サーバーで動く、Boston 発の文書データ抽出ソフトウェアです。メインビジュアルでは、エージェントが請求書の問い合わせを入力します。オレンジ色の空を背景に、確認待ちの一覧画面を HTML で組みました。4種類の文書ごとに、それぞれの項目を見せています。
- 6週間の試験導入を週ごとに説明
- 導入を検討する方の質問に、立場別に回答
- API リクエストの例をページに掲載



パートナー3人で営む Chicago の建築設計事務所で、2戸の集合住宅、路面店、小規模な職場を手がけます。メインビジュアルではファサードの映像がループし、サービス項目にホバーすると写真のステッカーが開きます。メディア掲載の代わりに、毎週の現場記録を載せています。
- 3つの工程と、それぞれの期間
- 毎週の現場確認と写真の記録
- お問い合わせには2日以内に返信



Russell Street に自前の試作工房をもつ、Detroit の工業デザイン事務所です。溶けた銅のようなロゴと、自動で流れる工房写真の帯を載せました。お客様の声を載せる場所には、機械の仕様カードを置いています。
- 工房の機械を仕様つきで一覧表示
- 2つの契約形態を並べて比較
- 工房見学の曜日と時間



(06) 消費者向けブランド
(4)靴・オーディオ・アパレル・ハードウェアのブランド向けに、商品そのものを最初に見せるサイトを作ります。ラベルの細かな情報まで載せ、スマートフォンからも今お使いのネットショップへ迷わず進めるようにします。消費者向けブランドのウェブサイト ↗
成分の配合率をすべてラベルに表示し、6ドルのサンプルキットと郵送での詰め替えを用意したブランドです。ページは水滴の映像で始まります。5つのスターターセットは価格と「カートに入れる」ボタンつきで、スワイプできる列に並べました。
- 最初の一歩は6ドルのサンプルキット
- 4つの質問でわかるスキンケア診断
- サンプルルームの土曜営業時間



Santa Cruz 発、オンライン専売の靴ブランドです。モデルは4種類で、30日間の返品は無料です。Tideline のアッパーは、再生ペットボトル11本分から編んでいます。すりガラス風に浮かぶナビゲーションの下に波打ち際の写真を敷き、8つのカラーバリエーションをスワイプで見られる列に並べました。
- 最上部のバーに返品無料を明記
- メンズ・ウィメンズをカードから選べる
- クイックリンクつきのスライド式カート



San Francisco 発、チタン製の睡眠計測リングです。1回の充電で7日間使え、無料のサイズ確認キットと30日間の返品に対応しています。メインビジュアルでは朝の光がゆっくりループします。6つの計測値を並べた列と、スクリーンショットではなく HTML で組んだアプリ画面も載せています。
- 購入前に使える無料のサイズ確認キット
- サイズ・バッテリー・返品のFAQ
- 平易な言葉で書いた健康上の免責事項



3種類の木製キャビネットと作業台ひとつでつくる、Portland のスピーカーメーカーです。スクロールに合わせて動く分解図は、私たちが制作したレンダリングで組みました。ラインナップはウォールナットで描き、お客様の声を載せる場所には、実測のリスニングルームテストを置いています。
- 60日間の自宅試聴
- 試聴室の席を予約できる
- 全モデルにペア価格を表示



ホームページのデザインを、無料で確かめる。
会社名・屋号・ブランド名を教えてください。まず無料のトップページ案を、続いて完成版をメールでお送りします。公開するかどうかは、見てからお決めください。