新・固定表示の開閉タブ
下記ｃｓｓとＪＳ【新・固定表示開閉タブOP/CL タブ遅延仕様 / 表示が崩れない対策】でうごく。
/* ===========================
新・固定表示開閉タブ
・文章の幅は最初から完成幅
・外側だけ0幅にして隠す
・中身は左からスライド
・高さ計算JSなし
============================= */
無料のＨＰフィッティング（デモサイトの作成）
❖ 無料だから気軽に頼める
❖ あなた用に調整・修正
❖ 正式依頼前の判断材料に
❖ デザイン選んで入力して送るだけ
ローディングアニメーション 水がいっぱいになるやつ ※ロゴURLは当HPのドメインで使うこと！
/* ==============================
ローディング
水アニメロゴ＋中央から外へ四角く開く
mask固定版
============================== */
ロゴ表示後に開いていく時間などは上記追加ｃｓｓで調整。
ロゴURLはJS【ロゴアニメーション 水注ぎロゴ 3文字白抜き】にいれる。
ローディングの水をいっぱいにする時間や待機時間など調整可能。
幕色とロゴ文字色は同じになるように設定している。
High-Quality Design
業種にあわせて選べるデザイン
ホームページモデルルームOPEN
100件見比べても候補トップ10に残る、月額2,000円のホームページ
下のカラムsplit-rowは下のカバーより画像を下に押し下げるカスタムｃｓｓをいれている。体裁については追加ｃｓｓ
/* ==============================
3分割パネル：画像だけ10秒ズームアウト
クラスはカバー本体
split-left / split-center / split-right
============================== */
キャッチ候補
ゼロから作る負担を減らす、月額2,000円のホームページ
３枚カバーにそれぞれに遅延アニメーションをいれている。カスタムｃｓｓで。それで順にあけていく感じにしている
none
２枚目３枚目のホバーしたときの文字などの体裁は追加ｃｓｓ
/* ==============================
3分割画像：真ん中・右
ホバー時だけ黒半透明＋文字表示
PCのみ
※ 文字の見た目はブロック側の指定をそのまま使う
============================== */
Design
100件見比べても
選ばれる
Web名刺
🛡️ Web窓口は清潔、素敵な印象を
🛡️ テンプレ感満載HPはNO！
🛡️ ダラダラ無駄な文章は逆効果
🛡️ 画像選定はお任せください
Price
スライダー上の文字の配置等について
現在は下記カバー内の文字を下寄せにしている。下からの距離と左からの距離をカバーのカスタムｃｓｓで調整できる
High-Quality Design
業種にあわせて選べるデザイン
ホームページモデルルーム
OPEN
下記グループscroll-guideはラインスクロールアニメの受け皿
体裁は追加ｃｓｓの下記項目のところで調整可能
/* ==============================
SCROLL 縦ライン
空グループ：scroll-guide
※グループ本体は高さ0
※文字・線・球は同じ基準
============================== */
アニメーションは統一したカスタムｃｓｓをいれること。その際にクラス名にscroll-animをいれること。JSで管理している。
LINEUP MODEL
# Select Design by Business Type
LINEUP
# Select Design
上のグループは絞込み検索の読込元データ。下の２つのグループpc-lineup-text-filter、pc-lineup-sub-filterで中分類、小分類の出力をしている。
体裁は追加ｃｓｓの下記項目のところで調整可能。元データ自体は非表示になるようにしている。/* ==============================
PC用 LINEUP 出力フィルター
元PCフィルターは del / del-tp で非表示
CSSでは .work-filter-buttons を隠さない
============================== */
すべて
店舗・
サロン
クリエイター
アーティスト
相談・
サポート
教室・
その他
下の画像カバーのグループ名で分類分けをしている。
例）work-card work-biyo work-beauty → 説明：work-card(共通) work-biyo(中分類) work-beauty(業種分類)
中分類は上のボタンのクラス名と一致させる。小分類は業種別の名称段落のクラス名と一致させる
ある業種を中分類を２つにいれるには、①画像のあるグループに中分類クラス名２つ入れる ②中分類のリストを２つにいれる
体裁調整
■ スマホ画像の左右間隔 --work-card-gap-x: 10px;
■ スマホ画像の上下間隔 --work-card-gap-y: 70px;
■ PC画像の左右間隔 --work-card-gap-x: 60px;
■ 画像比率 aspect-ratio: 16 / 10;
■ 画像角丸 PC：border-radius: 16px; スマホ：border-radius: 10px;
■ 画像の見え方 object-position: center center; 上寄せ：center top 下寄せ：center bottom
■ スマホタイトル font-size: 13px; line-height: 1.45;
■ 画像とタイトルの間 margin: 6px 0 0 0;
■ See More 上余白 margin: 56px auto 0 auto;
■ 中分類の項目間 padding: 0 0.7em 6px 0.7em;
■ 中分類の段間 row-gap: 14px;
■ 小分類の項目間 padding: 0 0.5em 5px 0.5em;
■ 選択中の赤線 border-bottom: 2px solid #d60000;
■ 通常線 中分類：border-bottom: 1px solid #111; 小分類：border-bottom: 1px solid #999;
01 パーソナルジム：ONLY PERSONAL GYM
02 美容室：Hair Salon Camelot
03 英会話教室：Rick English Class "REC"
04 民泊：KAWASE
05 離婚カウンセラー：さくら夫婦問題カウンセリング
06 みかん農家：Citrus Farmer 佐田農園
07 みかん農家：いむら農園
08 ネイルサロン：K
09 陶芸：ATRIER SAB
10 ジュエリーアーティスト：Atelier lino
11 整体サロン：ひなぎく整体
12 茶道家：千心流 高山千心
13 革製品：Workshop NSTM
14 占い：月と灯りの占い部屋
15 探偵：SHIMA探偵社
FLOW
# Easy Step
FLOW
# Easy Steps
01 デザイン選択・
必要事項入力
デザイン一覧（LINEUP）の中から、ご自身の業種にあうサイトを選び、無料フィッティングから、簡単な情報の入力をお願いします。
02 サイト確認
送られた情報・データをもとに、サイトの概要を仕上げ、お送りいたします。内容を確認し修正希望や画像等の提出をお願いします。併せて依頼申込書もご提出いただきます。
03 最終確認
修正事項や画像の差替え等の後、最終出来上がりをご確認いただき、問題なければ完成です。
04 公開
最終確認後にご入金頂き、ご入金確認後、サイトを公開いたします。
上記スマホFLOWの体裁調整
【全体幅】 .flow-sp の max-width → スマホFLOW全体の横幅
【全体の内側余白】 .flow-sp の padding → 左右・上下の余白
【01・02の丸の左側余白】 .flow-sp-item の grid-template-columns .flow-sp-circle の margin → 左側が空きすぎる場合はここ
【丸と文章の距離】 .flow-sp-item の column-gap → 丸と右側テキストの間隔
【縦の項目間隔】 .flow-sp-item の padding-bottom .flow-sp-item の min-height → 01と02、02と03の間隔
【丸のサイズ】 .flow-sp-circle の width / height → 番号丸の大きさ
【丸の番号文字】 .flow-sp-circle の font-size .flow-sp-circle の letter-spacing → 01・02の文字サイズ・字間
【見出し文字】 .flow-sp-title の font-size .flow-sp-title の line-height .flow-sp-title の margin-bottom → 見出しの大きさ・行間・本文との距離
【本文文字】 .flow-sp-text の font-size .flow-sp-text の line-height .flow-sp-text の letter-spacing → 本文の大きさ・行間・字間
【縦線】 .flow-sp-item::before の left / top / bottom → 丸の下に伸びる線の位置
Q&A
# Answers To Your Questions
Q&A
# Answers To Questions
グループのカスタムｃｓｓにアコーディオンの開閉ボタンの画像URLなどをいれている。2回同じURLをいれないといけないことに注意
no
Q1 月額2,200円以外に費用はかかる？
A.
かかりません。どのデザインを選んでも追加料金はありません。
Q2 契約期間に縛りはありますか？
A.
ありません。契約上の期間的な縛りも解約料もありません。但し解約時は1か月前告知をお願いしています。
Q3 SEO対策はしてますか？
A.
はい、最低限のSEO対策はしております。
Q4 スマホに対応してますか？
A.
対応しています。特にスマホは画面が小さく見えづらくなりがちなので、１コンテンツごとにスクロールなしで見られるよう見やすい設計にしています。
Q5 写真や文章がなくても大丈夫ですか？
A.
全然大丈夫です。デザインサイトの写真などは厳選してますので、そのままお使い頂いてもかまいません。
Q6 解約したらHPはどうなりますか？
A.
基本的には解約後は削除いたします。ただ、引き継いで保有したいという要望などあれば別途対応になります。
Q7 HP公開までの期間はどのくらい？
A.
最短3営業日で最初のデモサイトをお送りします。ご提出頂ける情報や写真、修正回数などにもよります。
ABOUT
Smarl Web Design
黒田 貴輝
愛媛県松山市竹原4-7-28
TEL.080-4198-8463
ウェブサイト制作・運営
pro.smarl-web.com
X
個人情報保護方針
Small × Smart ＝ Smarl
低コストで手間いらず、ちょっといいデザイン、それが私たちSmarlです。
低コストで手間いらず、ちょっといいデザイン、
それが私たちSmarlです。
上のグループは右下でくるくるまわる固定表示のやつ。じゃまだから非表示にしている。
edit-placeholder のクラス名で保管モードにするように追加ｃｓｓで設定している。
月額
2,200円
To Smarl