[Labyrinthe Noir]>[Top]>[HTMLタグ講座]>

店舗ページの作成例

和菓子屋の店舗をイメージして作成してみます。
通販はなく、実店舗での販売のみを想定します。

基本構成

まずは大まかにHP全体の構成を考えてみましょう。

トップページは、来訪者を迎えるページとなります。店舗や主力商品の紹介、各ページへの案内をします。

店舗の紹介ページとして、その歴史や地域を紹介します。案内地図は印刷しやすいように別にしましょう。

商品のページ。少品種であれば、トップページに収めることもできますが、あまり情報量を増やさないように別にページを作った方が良いでしょう。また、商品の一覧や個別の紹介ページも必要になります。
データベースを利用する場合、商品紹介のページは一律同じデザインで構成することになります。

店舗の案内ページには、写真や地図を載せます。

経営者の紹介、従業員の紹介、地域の名所やイベントを紹介するのも良いでしょう。

解説ページ 実例ページ
トップページ   (2) (3) index.html    
店舗紹介     p1.html    
案内地図     p2.html    
商品紹介 個別商品 p3.html w001.html
  w002.html
  w003.html
特集ページ s001.html
├人物紹介 社長の部屋 p4.html    
職人の工房 p5.html    
地域案内     p6.html    
素材ページ     img/index.html

素材集め

店舗のHPを作成する場合、文字だけではなく写真を多く使ったページ作りになります。
特に店舗の外観や内部の様子、商品1つ1つの画像に説明文が必要です。また、より詳しく店舗の紹介をするために営業の歴史、商品にまつわる知識、地元に関する情報、経営者や職人に関する情報などを盛り込みます。

写真などの素材は、全て独自に撮影し揃える必要があります。イラストなど挿絵を少し使う場合なら素材集を利用しても良いでしょう。

今回は和菓子用の素材を「イラスト素材の素材ダス」さんから、背景素材は「風と木と空とフリー素材」さんからいただきました。

店舗の素材

店舗の外観写真はトップページで訪問者を迎えたり、場所の案内として現地の目印として表示させたりします。
商店街にある場合は、近隣の様子もわかるように撮影するのも良いでしょう。
また、最寄り駅からの経路が複雑な場合、経路順に写真で道案内をするのも面白いですよ。

店内の写真は入口付近、商品が並んでいる様子、お迎えする担当者など撮影します。客から見えない厨房や商品を作っている様子もあると訪問者の興味が高まります。

写真と併せて、それらの説明文も用意します。店舗、人、地域の情報があると良いでしょう。また、それらの中から自慢したいポイントを決めて、しっかりとアピールしましょう。
人物写真は恥ずかしいと思うかも知れませんが、親しみを持ってもらうには重要な素材だと思います。

店舗の紹介なので、場所の案内図も必要です。これはグーグルマップを利用しても良いでしょう。
地図を利用する場合、他人が作ったものは著作物なので無断使用はできません。パンフレットやHPからコピーしてはいけません。グーグルのようにHPに張り込めるような機能を提供している場合でも、その条件に沿って利用することになります。

商品の素材

広告宣伝のHPですから、商品の紹介は非常に重要です。
商品カタログと同じですから、写真、説明文、材料や賞味期限など必要な項目も多くなるでしょう。法律上必要な表示も検討します。
ページの構成と併せて考えると、一覧表示用の小さな画像と、詳細説明用の大きな画像を用意すると良いでしょう。また、トップページを飾ったり、特集のページを組むために様々な角度で撮影することもあります。

商品をただ並べて紹介するだけでなく、1つの商品について詳しく掘り下げたページを作るのも面白いです。商品の成り立ちや歴史、作り方、原材料や具材、それらの生産者や畑などを紹介すると話が広がります。
また、そのようなコンテンツを徐々に増やして行くことで、HP全体の情報量を増やすだけでなく、更新の頻度を上げたり、新鮮な記事を期待するリピータの獲得にも繋がります。

地域の素材

地域の情報としては、歴史建造物や史跡、美術館、博物館のような観光資源だけでなく、交通、自然、地域のイベントなどもあります。
またそれらを紹介するHPもありますし、業務に関連するHPなどもリンクを使って紹介するのも良いでしょう。
建造物の写真を使う場合も、自分たちで撮影した物を用意します。

動画の素材

動画を使った素材を用意する場合、Youtubeを利用すると簡単に見てもらうことができます。
こちらも、アップロードすると、HPに貼り付けるためのリンクやタグを取得することができます。

素材ページの作成

素材を見やすくするために素材を並べたページを作成しました。
使用する素材のインデックス代わりにしたり、メモを付けて置くと良いでしょう。写真であれば、撮影日や画像サイズも明記しておくと分かりやすくなります。背景の透過した画像が判るように、テーブルの背景に色を付けています。
もちろん、このページはアップロードする必要はありません。

素材の一覧ページ

次のページへ

戻る