コスメショップのサイトデモ｜使用フレーム・パーツをすべて公開

<< デモ一覧に戻る

コスメショップのデモ

このページでは、Frames CMS の製品版で実際に作ったコスメショップのサイトをご紹介します。植物由来のスキンケアを扱い、無料の肌診断もしているコスメショップを想定した、7ページ構成です。
使っているフレーム（デザインの枠）1種類とパーツ17種類を、すべて公開しており、「どのパーツを組み合わせれば、このページになるのか」がそのまま分かります。
このデモは、観光協会のデモと同じフレームを、青のメインカラーから落ち着いたローズブラウンに、アクセントをピンクに変えています。メイン画像は静止画1枚、「ヘッダー上の一行」はキャンペーンの告知に使っています。

このデモを見る（別ウィンドウ）

まずは全体像から
このデモの構成

7つのページで構成しています。「何を売っているか」「お店で何をしてもらえるか」「使った人の声」を、それぞれ1ページにしています。トップページでは、こだわり・人気の商品・肌診断・お店の様子を順に見せています。

商品

4つの商品の容量と価格、はじめての方へのご案内。

肌診断

無料の肌診断の3つの手順と、診断する部屋。

お客さまの声

星評価のお客さまの声と、アンケートの声。

お店

住所・営業時間・行き方と地図、スタッフの紹介。

ホーム

ごあいさつ・こだわり・人気の商品・肌診断・お客さまの声・お店の紹介。

お知らせ

SAMPLE COSME からのお知らせ一覧です。

お問い合わせ

入力項目を自由に作れるフォーム。

デザインの土台
使っているフレーム

このデモで使っているフレームは 「centertab1（真ん中に垂れたロゴ・左右に2つずつのメニュー）」 です。

フレームとは、サイト全体の「枠」のことです。ヘッダー・メインビジュアル・メニュー・フッター・全体の余白や配色を、まとめて決めているものだとお考えください。製品版では約50種類から選べます。

ヘッダーの上に一行の帯、真ん中に下が半円の箱に入ったロゴ、その左右にメニューが2つずつ並ぶフレームです。5つ目以降のメニューは、右上のボタンで開きます。

メインカラーをローズブラウンに、ピンクはアクセントだけ

「デザイン → テーマカラー」で、背景色を白、メインカラーを落ち着いたローズブラウン（標準は青）、アクセントカラーをピンク、薄い色（差し色）を淡いピンクに変えています。上の帯・ボタン・フッターはローズブラウン、ピンクはアイコンなどの小さな面にだけ出るので、かわいらしさを残しながら、大人っぽい印象になります。メイン画像は、「メイン画像のタイプ」で静止画（標準はスライドショー）にしました。

こだわりは「選ばれる理由」、人気の商品は「カタログ」を4列で

原料・香り・お試しサイズの3つは、左に見出し、右にアイコンのカードを並べるパーツです。2つ目のアイコンだけ、アクセントカラーにしています。人気の商品は、写真に価格のラベルが付くカタログを「列の並べ方」で「4列」に並べました。

肌診断は「横幅いっぱいレイアウト」、お店は「テキスト＋写真2枚」

無料の肌診断は、文章と大きな写真を画面の左右いっぱいに並べるパーツで、診断する部屋の写真を見せています。お店の紹介は、角を大きく丸めた店内の写真と、丸いスタッフの写真を重ねるパーツ。最後は、冬のギフトセットの告知を大きなアイコン付きの誘導にしました。

ロゴは「画像」で入れています

このデモのロゴは、マークとサイト名を組み合わせたロゴ画像です。管理画面の「サイト基本設定 → ロゴ画像」に画像を入れるだけで、ヘッダーに表示されます。ロゴは白い箱の中に入るので色つきのロゴ、フッターはローズブラウンなので、「フッター用ロゴ（任意）」に白いロゴを入れています。

ロゴ画像を入れない場合は、サイト名がそのまま文字で表示されます。それでもサイトは作れますが、文字だけのロゴは、どうしても印象が弱く、さみしい仕上がりになりがちです。デモの見本と同じ雰囲気に仕上げたい場合は、シンプルなもので構いませんので、ロゴ画像を1つご用意ください。小さなマーク＋サイト名、くらいで十分に引き締まります。

ロゴは背景が透明なPNGがおすすめです。ヘッダーの色が濃いフレームでは白いロゴを、明るいフレームでは濃い色のロゴを使うと読みやすくなります。大きさは「サイト基本設定 → ロゴの大きさ」で変えられます。

約50種類のフレームを見る

同じフレームで作った、ほかのデモ
設定を変えるだけで、ここまで変わります

Frames CMS のデモは、すべて同じ1つの CMS で作っています。下のデモは、このデモと同じフレーム「centertab1」を使ったものです。
テーマカラー・メイン画像・ロゴ・並べるパーツを変えるだけで、同じフレームでも、印象がここまで変わります。

観光協会
このデモの作り方

使用したパーツ

セクションごとに、使ったパーツです。
管理画面で同じパーツを選べば、同じ形が作れます。

ホーム

セクション	使ったパーツ	Free版
毎日つかうものだから、肌にやさしく。	基本セット（見出し＋本文＋画像）
サムネイル横スライド（写真の流れ）	サムネイル横スライド（写真の流れ）
こだわり	選ばれる理由（左に見出し＋アイコンのカード）
人気の商品	カタログ（写真＋価格ラベル）
無料の肌診断	横幅いっぱいレイアウト（テキスト＋写真）
お客さまの声	お客様の声（星評価）
お店の紹介	テキスト＋写真2枚（角丸と丸）
無料相談への誘導	パララックス背景（写真／動画）
ギフトセットのご案内	CTA（大きなアイコン＋テキスト＋ボタン）
お知らせ	お知らせ一覧（自動）

商品／肌診断

セクション	使ったパーツ	Free版
商品	カタログ（写真＋価格ラベル）
はじめての方へ	箇条書き（中黒・番号）
肌診断	ステップ（手順）
診断する部屋	コラージュ（写真2枚＋テキスト）

お客さまの声／お店

セクション	使ったパーツ	Free版
お客さまの声	お客様の声（星評価）
アンケートから	お客様の声（横スクロール・文字だけ）
お店	アクセス（案内＋地図）
画像（1枚）	画像（1枚）
スタッフ	スタッフ紹介

全17種類のパーツのうち、14種類は製品版でのみ使えるものです。カタログ（写真＋価格ラベル）や横幅いっぱいレイアウト、選ばれる理由（左に見出し＋アイコンのカード）は製品版のパーツです。製品版では70種類以上のパーツが使えます。

パーツの一覧を見る

ゼロから作らなくて大丈夫です
このデモを、そのままお使い頂くことも可能です

製品版をご購入いただいた方には、このデモと同じ中身が入った状態のデータをご利用頂く事も可能です。
デモデータをご希望の場合は、購入者マイページからDLして下さい。

このデモをベースに「ゼロ」から作るお客様向けです。すでにFrames CMSでページを作られている場合、デモのデータを入れると既存の内容は引き継がれません。作りかけのサイトがある方は、パーツを1つずつ置いていく通常の方法をおすすめします。

作るときの参考に
化粧品のお店のサイトで迷いやすいところ

このデモを作るときに考えたことを、いくつか書いておきます。

商品が多いとき、トップには何を載せればいいですか: 人気の4つだけをカタログで見せて、ほかは商品のページへ。4つなら「4列」で1段にきれいに収まります。
成分や効果は、どこまで書いていいですか: 化粧品の広告には決まりがあるので、「治る」「シミが消える」のような効果の言い切りは避けます。このデモのように、原料や使い方、使った人の感想を中心にすると安心です。
キャンペーンの告知は、どこに出せばいいですか: 「ヘッダー上の一行」なら、全ページの一番上に出ます。くわしい内容は、お知らせに書きます。

この構成で作れるサイト
コスメショップ以外にも

このデモはコスメショップを想定していますが、同じ構成のまま、内容を差し替えるだけで使える業種がたくさんあります。

化粧品店／ハーブ・アロマのお店／ネイル用品店／セレクトショップ／エステサロン／美容室の物販など、「商品と、お店でのサービスの両方を見せたい」お店であれば、そのまま当てはまります。

キャンペーンが終わったら、「ヘッダー上の一行」の文章を書き換えるだけで、全ページの告知が変わります。

まずは無料で試せます
Free（無料版）のご案内

Frames CMSには無料版があります。登録不要でダウンロードでき、期限もありません。
ご自身のサーバーに設置して、管理画面の使い勝手を確かめてから、製品版をご検討ください。

無料版で作ったページやお知らせは、製品版に切り替えてもそのまま残ります。作り直しは必要ありません。

Free(無料版)をダウンロード

このデモをもう一度見る

製品版を購入する