Smarl
Web
Design
ローディングの体裁 ロゴ表示時間（読込時間＋0.8秒）→広がっていく
/* ==============================
ローディング
白背景＋中央ロゴ
中央から外へ四角く開く
============================== */
ロゴ表示後に開いていく時間は下記ｃｓｓで調整。
/* 広がる時間 */
transform 1.0s cubic-bezier(.76, 0, .24, 1);
ロゴの大きさなんかも調整可能
読込後の0.8秒の時間調整はJS（ロゴローディング）
setTimeout(function(){
document.body.classList.add('sw-loading-open');
}, 800);
High-Quality Design
業種にあわせて選べるデザイン
ホームページモデルルームOPEN
100件見比べても候補トップ10に残る、月額2,000円のホームページ
下のカラムsplit-rowは下のカバーより画像を下に押し下げるカスタムｃｓｓをいれている。体裁については追加ｃｓｓ
/* ==============================
3分割パネル：画像だけ10秒ズームアウト
クラスはカバー本体
split-left / split-center / split-right
============================== */
キャッチ候補
ゼロから作る負担を減らす、月額2,000円のホームページ
３枚カバーにそれぞれに遅延アニメーションをいれている。カスタムｃｓｓで。それで順にあけていく感じにしている
none
２枚目３枚目のホバーしたときの文字などの体裁は追加ｃｓｓ
/* ==============================
3分割画像：真ん中・右
ホバー時だけ黒半透明＋文字表示
PCのみ
※ 文字の見た目はブロック側の指定をそのまま使う
============================== */
Easy Flow
video-url:https://hub1008.smarl-web.com/wp-content/uploads/2026/05/Video-Project-1.mp4
Design
100件見比べても選ばれるWeb名刺
オリジナルデザイン
➤ テンプレ感満載HPは作りません。
画像・文章を差し替えて制作
➤ あなたの事業に合わせてオリジナルに。
スマホで見ても伝わる構成
➤ 1コンテンツ1画面が基本の見やすい構成。
必要な情報だけを見やすく掲載
➤ 無駄にだらだら載せても見られません。
名刺代わりに使える
➤ 紹介やSNSの案内にも。Web窓口は清潔、素敵な印象で。
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;
パーソナルジム：ONLY PERSONAL GYM
英会話教室：Rick English Class "REC"
民泊：KAWASE
離婚カウンセラー：さくら夫婦問題カウンセリング
ミカン農家：Citrus Farmer 佐田農園
ミカン農家：いむら農園
ネイルサロン：K
陶芸：ATRIER SAB
ジュエリーアーティスト：Atelier lino
整体サロン：ひなぎく整体
茶道家：千心流 高山千心
革製品：Workshop NSTM
占い：月と灯りの占い部屋
探偵：SHIMA探偵社
FLOW
# Easy Step
FLOW
# Easy Steps
01 デザイン選択・
必要事項入力
デザイン一覧の中から、ご自身の業種にあうサイトを選びます。こちらから、サイト作成のための簡単な情報の入力をお願いします。
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