PORTFOLIO

WEBサイトの制作例

架空の店舗・事務所を題材にしたデザイン・実装の見本です。
実在するお客様の制作実績ではありません。

7つの制作例

業種に合わせた情報の順序と、画面の使い方をご覧ください。

旅館の作例 / 設計の解説

宿の雰囲気を伝え、
滞在の判断を助ける。

「里居」は、森のそばで静かに過ごす小さな宿を想定した架空の作例です。写真は生成素材を使用しています。ここでは、画面を組み立てた理由を紹介します。

01 / 架空の課題設定

宿の雰囲気と宿泊条件

写真で宿に興味を持った人が、次に部屋や食事、宿泊の条件を確かめる場面を想定しました。「ここで過ごしたい」と感じた人が、具体的な確認事項へ進めることをこの作例の課題にしています。

02 / 情報の順序

景色・部屋・過ごし方の順序

最初に庭と山並みの写真で宿の雰囲気を伝え、客室、食と滞在、お知らせ、宿泊案内の順に案内します。詳しい説明は別ページに分け、トップでは滞在のイメージをつかめるようにしています。

  1. 宿の雰囲気
  2. 客室
  3. 食と滞在
  4. お知らせ
  5. 宿泊案内

03 / スマートフォンでの判断

一列で読み、目次から選べます

パソコンでは写真と文章を横に配置し、スマートフォンでは一列に並べています。長い説明を小さく縮めず、写真、見出し、本文の順に読めるようにしています。目的が決まっている人は、上部の「目次」から客室や宿泊案内へ直接進めます。

04 / 制作時の検証

表示と移動を2つの幅で確かめる

2026年10月、ブラウザーで画面幅1440px・390pxを再現して確認しました。横にはみ出す箇所や表示されない画像はなく、390pxの目次から客室と宿泊案内へ移動できました。

実機スマートフォンでの検証や、利用者による評価は未確認です。この作例では宿泊予約を受け付けておらず、予約数・売上の効果は測定していません。

03 / PROFESSIONALDESIGN STUDY

事務所・法人向け / 1ページ構成 / 業務案内・事務所概要

事務所のサンプルサイト

専門性を順序立てて伝える。

見てほしいところ

業務内容・相談の流れ・事務所概要を、整った構成にまとめています。紺と白の配色と明確な見出しで、内容を落ち着いて読み進められるサイトです。

サイトを開く
04 / HAIR SALONDESIGN STUDY

美容室 / トップページ / スタイル写真・メニュー・予約案内

美容室のサンプルサイト

髪型から選ぶ次の自分

見てほしいところ

ヘアモデルを大きく見せる誌面風の構成です。ボブとレイヤーのスタイル写真からメニューを見られます。スマートフォンでは予約案内を画面下に配置しています。

サイトを開く
05 / NAIL ATELIERDESIGN STUDY

ネイルサロン / トップページ /
デザイン絞り込み・施術詳細・予約案内

ネイルサロンのサンプルサイト

色と質感からお気に入りを見つける。

見てほしいところ

施術写真と税込価格・所要時間を並べたデザインカタログです。
マグネット・フレンチ・ニュアンスで絞り込み、好みのデザインから施術を選べる構成です。

サイトを開く
06 / TAX ACCOUNTINGDESIGN STUDY

税理士事務所 / トップページ / 業務案内・相談の流れ

士業のサンプルサイト

専門的な相談を始めやすくする。

見てほしいところ

法人・個人事業主・開業前の3つの案内から、必要な業務を探せる構成です。青と白を使って情報を分かりやすく整理し、対応範囲・料金の考え方・相談の流れを伝えます。

サイトを開く
07 / LIFESTYLE STOREDESIGN STUDY

生活雑貨店 / トップページ /
商品絞り込み・季節の特集・店舗案内

小売店のサンプルサイト

季節の特集から好きな道具を探す。

見てほしいところ

季節の特集とカテゴリ別の商品一覧から探せる構成です。器・布もの・生活道具の価格や素材を確認し、贈りものや来店の案内を見られます。

サイトを開く

操作の見本

機能のサンプル

予約日時の選択や地図の表示、写真の切り替えを
サイトの画面でお試しいただけます。

器に盛られた手打ち蕎麦
RESERVATION / 飲食店・サロン・体験教室

日時・人数の選択と
予約内容の確認

日時と人数を選び、内容を確認できます。
受付までの流れを試せます。

予約フォーム飲食店向けの見本

お好きな日時を選んでみてください。

実際の予約・個人情報の入力は行いません。

ACCESS / 店舗・施設・事務所

迷わず来店できる
地図と道案内

初めての方が安心して訪れられるよう、
地図や入口の場所、駐車場の案内を載せます。

地図
拡大・縮小して周辺を確認できます
道案内
目印や交通手段をまとめて掲載します
表示見本:那須烏山市役所(烏山庁舎)
自社・作例の所在地ではありません。

予約や地図、日々のお知らせなど、
必要な機能を事業に合わせて選びます。

お知らせ更新の見本も見る
ご自身で更新したい方文章と写真の更新を試す

TRY AN UPDATE

文章と写真を変えて
表示を確認できます。

文章と写真を変えて「見本に反映する」を押すと、掲載時の見え方が変わります。

この体験は画面内だけで動きます。入力は保存・公開・送信されず、再読み込みで元に戻ります。個人情報は入力せず、見本の文章でお試しください。

02 / 掲載時の見え方表示見本
里居 SATOI / お知らせ

季節のたより

朝の風に秋を感じる

庭を望む宿の窓辺

庭を抜ける風が
少しずつ涼しくなってきました。
縁側でゆっくりと
朝の時間をお過ごしください。

文章と写真を用意したら、
見本に反映してみてください。

実際のお知らせ機能では、ログインして下書き・公開・更新・非公開を操作します。制作済みの機能を分離した環境で動作確認しています。続いて、その実画面をご覧ください。

AFTER LAUNCH / お知らせの更新

ご自身でできる
お知らせの更新

季節のご案内や臨時休業、新しいメニューを、
公開後もご自身で伝えられます。

パソコンでもスマートフォンでも、文章と写真を更新できます。実際に制作したお知らせ機能で、その流れをご覧ください。

架空の宿を使った操作画面の見本です。
文章と写真を用意する。手元の端末で、いつものお知らせのタイトル・本文・写真を用意します。

「お知らせを書く」からタイトルと本文を入力し、写真を選びます。
途中の原稿は下書きとして保存します。
新しい記事は公開するまで、サイトの閲覧者には表示されません。

画面は、架空の宿「里居」の公開済み記事を開いた編集例です。新規作成でも同じ入力欄を使い、スマートフォンでは
本文の下に保存・公開の操作が並びます。

里居 / お知らせの更新見本PC画面スマートフォン画面
お知らせのタイトル、本文、写真と、保存・公開の操作が並ぶ顧客用の編集画面

操作部分を抜粋しています。画面内を上下にスクロールでき、拡大リンクでは画面全体をご覧いただけます。

編集画面の入力欄です。写真と文章を入れる場所が決まっています。PC画像を拡大する(別タブ)スマホ画像を拡大する(別タブ)
見え方を確かめて公開する。下書きをプレビューで開き、サイトに載る形を確認してから公開します。

プレビューで文章の改行や写真を確認します。準備ができたら編集画面の「公開」を選びます。お知らせ一覧と記事ページにサイトのデザインに合わせて反映されます。

写真の大きさや文字の配置はあらかじめ整えてあるので、毎回ページを組み立てる必要はありません。下の画像は、同じ文章と写真を
公開した表示例です。

里居 / お知らせの更新見本PC画面スマートフォン画面
編集画面で入力した「朝の風に秋を感じる」というお知らせが、宿のデザインで表示された記事ページ

操作部分を抜粋しています。画面内を上下にスクロールでき、拡大リンクでは画面全体をご覧いただけます。

公開後の表示例です。お知らせもサイト全体の雰囲気にそろいます。PC画像を拡大する(別タブ)スマホ画像を拡大する(別タブ)
公開前のプレビュー画面も見る(PC画像・別タブ)
文章を直す。掲載を終える。同じ場所で文章を修正し、期間が過ぎた案内を取り下げられます。

お知らせ一覧から対象の記事を開き、文章や写真を直して「更新」を選びます。
掲載を終えるときは、編集画面のステータスを「下書き」に戻して保存します。記事を消さずに、再編集できる状態で残せます。

下書きに戻した記事は、お知らせ一覧と記事ページから見えなくなります。
アップロードした写真自体を非公開で保管する機能ではないため、
写真には公開してよいものを使います。

里居 / お知らせの更新見本PC画面スマートフォン画面
公開済みと下書きを分けて探せる、お客様用のお知らせ一覧画面

操作部分を抜粋しています。画面内を上下にスクロールでき、拡大リンクでは画面全体をご覧いただけます。

お知らせ一覧の記事欄です。過去の記事を選び、編集を続けられます。PC画像を拡大する(別タブ)スマホ画像を拡大する(別タブ)

日々の投稿はご自身で行えます。
構成の変更はご相談ください。

お客様の更新画面は、お知らせの投稿に必要な操作を中心に用意します。営業時間や料金表などの固定情報、ページ構成やデザインの変更は、制作時に更新範囲を決めます。

納品時には操作をご説明し、技術的な保守には制作側の別の管理アカウントを使います。
お知らせを更新するたびに、サイト全体の設定を触る必要はありません。

サイトごとに決めること

必要なページ数や写真の準備、営業時間などの編集範囲は、事業の運営に合わせてご案内します。予約サービスへの案内と、独自の予約システムの開発は内容が異なります。そのため、必要な仕組みを確認して制作範囲を決めます。

制作について相談する