選べるホームぺージ
月額 5,500 円
月額 5,500 円
士業専門ホームぺージ
月額 5,500 円
フィットネス向けホームぺージ
士業専門ホームぺージ
月額 5,500 円
土地家屋調査士ver.
月額 2,200 円
選べるホームぺージ
Smarl
Web
Design
High-Quality Design
業種にあわせて選べるデザイン
ホームページモデルルームOPEN
ゼロから作る負担を減らす、月額2,000円のホームページ
下のカラムsplit-rowは少し下げるカスタムｃｓｓをいれている。それは下のカバーより画像を下に押し下げるため。
Easy Flow
video-url: https://hub1005.smarl-web.com/wp-content/uploads/2026/05/Video-Project-1.mp4
Design
× よくあるテンプレート
〇 オリジナルDESIGN
× 文字ばかりで見づらい
〇 見やすさ・伝わる構成
× 詐欺っぽい・怪しい
〇 信頼感と清潔感
Price
サブスク料金
2,200円 /月(税込）
初期費用 0円
ドメイン使用料 0円
サーバー料 0円
解約料 0円
最低契約期間 なし
スマホ対応
お問合せフォーム
納期最短 3営業日
スライダー上の文字の配置等について
現在は下記カバー内の文字を下寄せにしている。下からの距離と左からの距離をカバーのカスタムｃｓｓで調整できる
High-Quality Design
業種にあわせて選べるデザイン
ホームページモデルルーム
OPEN
下記グループscroll-guideはラインスクロールアニメの受け皿
体裁は追加ｃｓｓの下記項目のところで調整可能
/* ==============================
SCROLL 縦ライン
空グループ：scroll-guide
※グループ本体は高さ0
※文字・線・球は同じ基準
============================== */
アニメーションは統一したカスタムｃｓｓをいれること。その際にクラス名にscroll-animをいれること。JSで管理している。
LINEUP
# 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;
ナニワ-ENGLISH
英会話教室：ナニワ英語教室
video-url: https://hub1005.smarl-web.com/wp-content/uploads/2026/05/Video-Project-1.mp4
美容家：NINA
陶芸：アトリエ KOO
video-url: https://hub1005.smarl-web.com/wp-content/uploads/2026/05/UMI-_-Smarl-Web-Design-Google-Chrome-2026-05-15-16-01-01.mp4
農家：あおぞら農業工房
習字：美しい文字を学ぶ
保険販売：安心保険のzen
カイロプラクティック：骨骨ロック
ITサービス：プログラム全般
ナマステインドカリー
水泳教室：マナベSWIM
なんでも屋：なんでもやります！
ジュエリーデザイナー：DAIA
茶道家：紅葉呉羽
写真家：田中写像
ライター：TAKAYA
登山家：上山下山
ハンドメイド作家：MOKUZO
イラストレーター・漫画家
FLOW
# Easy Step
FLOW
# Easy Steps
01 デザイン選択・
必要事項入力
デザイン一覧の中から、ご自身の業種にあうサイトを選びます。こちらから、サイト作成のための簡単な情報の入力をお願いします。
02 サイト確認
送られた情報・データをもとに、サイトの概要を仕上げ、お送りいたします。内容の確認と必要があれば修正希望や画像等の提出をお願いします。併せて依頼申込書もご提出いただきます。
03 最終確認
修正事項や画像の差替え等の後、最終出来上がりをご確認いただき、問題なければ完成です。
04 公開
最終確認後にご入金頂き、ご入金確認後、サイトを公開いたします。
【全体幅】 .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 → 丸の下に伸びる線の位置
PRICE
# Subscription
月額料金
初期費用
ドメイン使用料
サーバー料
解約料
最低契約期間
モバイル対応
問合わせフォーム
最短納期
1,100円（税込）
不要
込み
込み
不要
3か月
有
有
3日
PRICE
# Subscription
月額料金
初期費用
ドメイン使用料
サーバー料
解約料
最低契約期間
モバイル対応
問合わせフォーム
最短納期
1,100円（税込）
不要
込み
込み
不要
3か月
有
有
3日
Q&A
# Answers To Your Questions
Q&A
# Answers To Questions
グループのカスタムｃｓｓにアコーディオンの開閉ボタンの画像URLなどをいれている。2回同じURLをいれないといけないことに注意
Q1 月額2,200円以外に費用はかかる？
A.
かかりません。どのデザインを選んでも追加料金はありません。
Q2 契約期間に縛りはありますか？
A.
ありません。契約上の期間的な縛りも解約料もありません。但し解約時は1か月前告知をお願いしています。
Q3 SEO対策はしていますか？
A.
はい、最低限のSEO対策はしております。
Q4 スマホに対応してますか？
A.
対応しています。特にスマホは画面が小さく見えづらくなりがちなので、１コンテンツごとにスクロールなしで見られるよう見やすい設計にしています。
Q5 写真や文章がなくても大丈夫ですか？
A.
全然大丈夫です。デザインサイトの写真などは厳選してますので、そのままお使い頂けます。
Q6 解約したらHPはどうなりますか？
A.
基本的には解約後は削除いたします。ただ、引き継いで保有したいという要望などあれば別途対応になります。
Q7 HPの公開までの期間はどのくらい？
A.
最短3営業日です。ご提出頂ける情報や写真などにもよります。
CONTACT
お仕事のご依頼、お問合せ等、 こちらのメールフォームでお受けしております。
担当者より折り返しご連絡させていただきます。
ABOUT
Smarl Web Design
黒田 貴輝
愛媛県松山市竹原4丁目7番28号
TEL . 080-4198-8463
ウェブサイト制作・運営
pro.smarl-web.com
X
個人情報保護方針
Small × Smart ＝ Smarl
低コストで手間いらず、ちょっといいデザイン、それが私たちSmarlです。
低コストで手間いらず、ちょっといいデザイン、
それが私たちSmarlです。
上のグループは右下でくるくるまわる固定表示のやつ。じゃまだから非表示にしている。
edit-placeholder のクラス名で保管モードにするように追加ｃｓｓで設定している。