ホームページ作成・カスタマイズ

• ホームページ作成前の下ごしらえ
• プロにお任せコースはおすすめしておりません
• 分身ホームページは下ごしらえしてからつくる
• スモールサービスのホームページに必要なページはこれだ
• Stripeでコードを取得し、ホームページに設定する
• お客様のご利用イメージ
• パーツを削除・エリアから表示解除する
• 文章に見出しをつける・解除する
• 文章の装飾を削除する
• 箇条書き（リスト）を作成する

• ホームページ作成前の下ごしらえ

  リウムスマイル！では、ホームページを作成する前、もっと言うと集客やファンづくりを行う前に「下ごしらえ」が大切ですよ！と繰り返しお伝えしています。

   

  下ごしらえとは

  自分のステキを爆発させ、自分のビジネスのコンセプト

  • 誰に
  • 何を提供して
  • どうなってほしい

  を明確にし、そのコンセプトをオンリーワンなメニューにすることです。

   

  ホームページやブログやSNSなどは、「どうやるか」「やり方」の部分。

  どうやるかを考える前に「何をやるか」を下ごしらえしましょう！

  という考え方です。
  くわしく！
• プロにお任せコースはおすすめしておりません

  リウムスマイル！の料金ページをご覧になった方なら、なんとなく伝わっているかと思うのですが、プロにお任せコース、あんまりおすすめしてません。

   

  

   

  なぜかというと、リウムスマイル！は

  スモールサービスが自分でステキを爆発させ繁盛へ向かうサポートを行うシステム&サービス

  を目指しているからです。

   

  できたら、自分でホームページ作って欲しい。そしてその経験を活かしてホームページを育てていって欲しい。

  それが僕らの願いだからであります。
  くわしく！
• 分身ホームページは下ごしらえしてからつくる

  スモールサービスのホームページは分身であるべき！と申しておりますが、その分身ホームページはどのようにつくればよいのでしょうか。

   

  僕がおすすめしているのは、

  ホームページの作成前に、ちゃんと下ごしらえする！

  ということ。

   

  つまり、ホームページをいきなり作り出さない。

  ホームページ作る前に、どんな内容のホームページにするのか、をちゃんと明確にしてからつくる、という手順です。
  くわしく！
• スモールサービスのホームページに必要なページはこれだ

  スモールサービスがホームページをつくる時に迷うのが

  自分のホームページにはどんなページが必要なのか

  を決めること。

   

  みんな、イメージはあると思うんですよ。

  でも、それを具体的にどんなページ構成にするのか、と考えるのは難しい。

  
  ということで、リウムスマイル！が提唱する「分身ホームページ」的にどんなページが必要なのか、ということを定義したいと思います。
  くわしく！
• Stripeでコードを取得し、ホームページに設定する

  Stripeアカウント登録

  クレジットカード決済を利用するには、まずStripeのアカウントを作成し、初期設定を行う必要があります。

  公式サイトにアクセスして、新規登録と本人確認を済ませましょう。

  Stripe（ストライプ）

  
  

  Stripeをご利用いただく前にご確認ください

  • Stripeのご利用には、決済ごとの手数料がかかります。

  • Stripeの利用規約を必ずご確認ください。

  • Stripeの審査により、ご利用いただけない場合があります。
    
    

  また、インターネット上で商品やサービスを提供する場合、以下の表示が法律で義務付けられています。

  • 特定商取引法に基づく表示

  • プライバシーポリシー・キャンセルポリシー

  これらはStripeの利用審査時にも確認されます。事前にページを作成しておきましょう。

  >>>参考「特定商取引法に関する表記ページを作成・編集する」
  >>>参考「プライバシーポリシー・キャンセルポリシーページを編集する」

  
  

  既にStripeアカウントをお持ちの方は、次のステップへお進みください。

  
  
  

  

  1. Stripeのトップページで［今すぐ始める］をクリック
  
  

  

  1. アカウント作成に必要な情報を入力する
  2. ［アカウントを作成］をクリック
     
     
     
     
  1. 入力したメールアドレス宛に届く確認メール内の［メールアドレスを確認する］ボタンをクリックし、 本人確認を行う
  
  

  
  

  本人確認が完了すると、テストモード（サンドボックス）のダッシュボードが表示されます。
  
  
  1. 右上の［本番環境を有効化］をクリックする
  
  
  
  1. 以下の情報を順に登録する
  • ビジネスタイプ（個人事業主、法人など）
  • 運営者の個人情報（氏名・住所など）
  • 事業の詳細（提供サービスの内容など）
  • 割賦販売法に基づくコンプライアンスに関する質問への回答
  
  

  ※割販法に基づき、コンプライアンス関連の質問に回答する必要があります。

  各項目の回答は、以下を参考にしてください。

  • 自社のサーバー上にカード番号を保存するか、電話でカード番号を収集するなどの方法で、自社 (またはお客様の代理の会社) で顧客のカード番号を直接管理する予定はありますか？

  「いいえ」

  • 自社 (またはお客様の代理の会社) で、3Dセキュアなどの本人確認対策を導入する予定はありますか？

  「はい」

  • 自社 (またはお客様の代理の会社) で、決済ごとにカードのセキュリティコードの入力を求めるようにする予定はありますか？

  「はい」

  • 自社 (またはお客様の代理の会社) で、不正な配送先住所を検出するための対策を講じる予定はありますか？

  「いいえ」

  • 過去 5 年間に特定商取引法に違反したことがありますか？もしくはこれまでに消費者契約法違反による敗訴判決を受けたことがありますか？

  この質問はあなた(の団体)がこれまでの事業活動にて違反をしたことは無いか？をヒアリングするものです。

  これら違反に類する指摘を受けたことがあるかどうか回答してください。

  
  
  1. 入金用口座の登録やアカウントのセキュリティ設定を行い、画面の案内に沿って必要な手続きを進める
  2. すべての情報を入力したら、最後に内容を確認し、画面下部の［送信］をクリックして申請を完了させる

  以上の手続きが完了し、Stripeの審査に通ってアカウントが有効化されると、実際の決済を受け付けることができるようになります。

  
  

  セキュリティ・チェックリストに基づく対策措置状況申告書

  Stripeでは、2024年4月1日以降に作成された新たなStripeアカウントを対象にセキュリティチェックリストの記入が必須となりました。以下に記載例をあげておきます

  最終的な判断はStripe社にて行われる為、以下の回答で100％アカウント作成が可能であるかは保証いたしかねますので、ご理解ください。Stripe社の判断の他、各クレジットカード会社の判断でも利用の可否が変わることもあります。ご不明な点は直接Stripe社へご確認ください。

  
  

  ■導入する方法について詳細をお知らせください
  

  顧客にどのように決裁を行いますか？

  ＞その他（例えば、Stripe Checkout や Payment Element）
  

  
  

  ■自社のウェブサイトで商品またはサービスを販売していますか。

  ＞はい
  

  
  

  ■1. 管理者画面のアクセス制限と管理者のID/PW管理

  管理者のアクセス可能なIPアドレスを制限する。IPアドレスを制限できない場合は管理画面にベーシック認証等のアクセス制限を設ける。

  ＞はい
  

  
  

  取得されたアカウントを不正使用されないよう二段階認証または二要素認証を採用する。

  ＞はい
  

  ※リウムスマイル！では管理画面ログイン時の2要素認証を用意しています。必要に応じて2要素認証が可能です。

  
  

  管理者画面のログインフォームでは、アカウントロック機能を有効にし、10回以下(PCIDSS ver4.0基準)のログイン失敗でアカウントをロックする。
  

  ＞はい
  

  
  

  ■2. データディレクトリの露見に伴う設定不備への対策

  公開ディレクトリには、重要なファイルを配置しない。（特定のディレクトリを非公開にする。公開ディレクトリ以外に重要なファイルを配置する。）

  ＞はい
  

  
  

  WebサーバやWebアプリケーションによりアップロード可能な拡張子やファイルを制限する等の設定を行う。

  ＞はい
  

  
  

  ■3. Webアプリケーションの脆弱性対策

  脆弱性診断またはペネトレーションテストを定期的に実施し、必要な修正対応を行う。

  ＞はい
  

  
  

  SQLインジェクションの脆弱性やクロスサイト・スクリプティングの脆弱性対策として、最新のプラグインの使用（当該脆弱性が無いものが望ましい）やソフトウェアのバージョンアップを行う。

  ＞はい
  

  
  

  Webアプリケーションを開発またはカスタマイズされている場合には、セキュアコーディング済みであるか、ソースコードレビューを行い確認する。その際は、入力フォームの入力値チェックも行う。

  ＞はい
  

  
  

  ■4. マルウェア対策としてのウイルス対策ソフトの導入、運用

  マルウェア検知/除去などの対策としてウイルス対策ソフトを導入して、シグネチャーの更新や定期的なフルスキャンなどを行う。

  ＞はい
  

  
  

  ■5. 悪質な有効性確認、クレジットマスターへの対策

  ＞はい
  

  
  

  ■6. 不正ログイン対策

  以下の各セクションから少なくとも1つを実装する必要があります。

  会登録時
  

  ＞不審なIP アドレスからのアクセス制限
  

  ＞会員登録時の個人情報確認（氏名・住所・電話番号・メールアドレス等）

  
  

  ログイン認証時

  ＞不審なIP アドレスからのアクセス制限
  

  
  

  属性変更時

  ＞不審なIP アドレスからのアクセス制限
  

  
  

  ■委託先情報

  貴社に代わってどなたがセキュリティ対策を実行しますか？

  ＞委託先企業
  

  
  

  委託先企業名
  

  ＞有限会社リウム
  

  
  

  ASPカート事業者名

  ＞ASPカートを利用していません
  

  
  

  PCI DSS準拠の審査を行ったQSA (Qualified Security Assessor)

  ＞レベル3のため不要

  
  

  APIキー取得とリウムスマイル！への登録

  Stripeアカウントの作成が終わったら、次は「APIキー」を取得して、リウムスマイル！とStripeをつなぐ設定を行います。

  
  

  APIキーとは、Stripeとリウムスマイル！を安全に連携させるための“認証コード”のようなものです。

  このキーをリウムスマイル！に登録することで、Stripeの決済情報を正しく受け取れるようになります。

  
  

  Stripeでは、本番環境用・テスト環境用 それぞれに「公開可能キー」と「シークレットキー」が用意されています。

  リウムスマイル！では、以下の4つの情報を設定する必要があります

  
  

  • （A）公開可能キー（本番環境用）
  • （B）シークレットキー（本番環境用）
  • （C）公開可能キー（テスト環境用）
  • （D）シークレットキー（テスト環境用）

  
  

  まずは、本番用のキーを取得し、リウムスマイル！に登録していきましょう。

  
  

  本番環境用のAPIキーを取得する
  

  まずは、実際の決済に使用する「本番環境用のAPIキー」をStripeから取得します。

  
  

  

  1. Stripeにログインし、左下のメニューから ［開発者］ をクリック
  2. 開発者メニューの中から ［APIキー］ を選択

  上記のような本番環境用のAPIキーが表示されますので、

  • （A）本番用公開可能キー
  • （B）本番用シークレットキー

  を後述するリウムスマイル！側のStripe決済連携設定画面に貼り付けます。

  シークレットキーについて

  シークレットキーは、 一度しか表示されず、後で確認することができませんので、しっかりコピーしてください。

  後で確認しようとしてもセキュリティ保護のために、「sk_live...bkbk」のように、省略して表示されます。

   

  もし、コピーなどに失敗した場合は、以下の手順でキーの再作成をする必要があります。

  1. 更新したいキーの右に表示された「…」をクリック
  2. キーを取り消すを選択
  3. 古いキーの有効期限を選択し、パスワード認証を行う
  4. 新しいキーが発行されます

  ※キーを更新する場合には、以前のキーが使用できなくなることにご留意ください。
  
  

  テスト環境用のAPIキーを取得する

  実際の決済を行う前に、テスト環境でStripe決済が正常に動作するか確認することができます。

  まずは、Stripeを「テスト環境」に切り替えましょう。

  
  
  
  1. Stripe画面の左上に表示されているアカウント名（またはワークスペース名）をクリック
  2. 表示されたメニュー内の［サンドボックスに切り替える］をクリック
  3. 続いて表示されるオプションの中から［テスト環境］を選択
     
     

  テスト環境に切り替わると、画面上部に「テスト環境」と書かれたオレンジのバーが表示されます。

  この表示が確認できれば、テストモードに正しく切り替わっています。
  
  

  

  テスト環境用のAPIキーが表示されますので、

  • （C）テスト用公開可能キー
  • （D）テスト用シークレットキー

  を後述するリウムスマイル！側のStripe決済連携設定画面に貼り付けます。

  APIキーについて

  【テスト環境】と【本番環境】に張り付けるキー（文字列）は、それぞれ別のものです。

  ここが間違っていると決済ができませんので、しっかり確認してくださいね！

  
  
  
  くわしく！
• お客様のご利用イメージ

  申し込み受付フォーム

  お申込み受付フォームより、お支払い方法「クレカ決済」を選択していただき、［確認］ボタンをクリックしていただく

  ---

  内容確認画面

  お申込み内容を確認のうえ、［予約送信］ボタンをクリックしていただく
  
  

  ---

  Stripe決済画面

  Stripeの決済画面に遷移するので、クレジットカード情報を入力して、［支払う］ボタンをクリックしていただく

  
  

  
  

  テスト用カード情報

  前述の「Stripe決済連携設定」画面の【実行動作環境選択】で、「テスト環境」を選択中の時は、次のテスト用のカード番号で実際の決済をすることなく、動作確認ができます。

  カード番号	4242 4242 4242 4242
  有効期限	任意
  セキュリティコード	任意

  ---

  受け付け完了

  受け付け完了メッセージが表示されます

  
  
  
  
  

  ---

  リウムスマイル！の管理画面のコンタクト一覧に受け付けデータ表示

  

  受け付けたデータは、リウムスマイル！管理画面のコンタクト一覧などに、「クレカ支払い」として表示されます。

  
  
  • 「Stripe決済」は、Stripeが提供するサービスになります。動作環境は「Stripe決済」の仕様に準じます。
  • Stripeに対して決済手数料が掛かります。
  • Stripeの審査によりご利用いただけない場合がありますので予めご了承ください。

• パーツを削除・エリアから表示解除する

  リウムスマイル！の「パーツを削除する」という操作には、

  • 「現在表示しているエリア（場所）から消す」という操作
  • 「パーツ自体を削除する」という操作

  の二種類の操作が存在します。

   

  

  例えば、上記のようなプレビュー画面の状態の時、「おすすめコース」というパーツは、

  1. エリア８（メインエリア）にバナー形式
  2. エリア４（サイドエリア）にリンクタイトル形式

  それぞれ違った形式で2か所に表示されています。

   

  エリア８に表示しているパーツを表示解除すると、エリア８の「おすすめコース」は消えますが、エリア４の「おすすめコース」は消えません。

  対して、この「おすすめコース」パーツ自体を削除すると、エリア８及びエリア４の両方とも消え、そのページパーツ自体も無くなります。
  

   

  以下に、それぞれの操作手順をご案内します。

  
  

  操作手順

• 文章に見出しをつける・解除する

  本文に書かれている内容を一目で伝える見出しをつけると、読み手にやさしく、また読み手を惹きつけます。

  
  
  くわしく！
• 文章の装飾を削除する

  文字の大きさなどの装飾は、何度も重ねて設定していくうちに、装飾のスタイルが複雑に重なり合い、思い通りに操作できなくなる場合があります。

  一度文字の装飾を削除し、プレーンな状態に戻してから、再度文字の装飾を行っていただくとご希望の状態に設定できるようになります。

   

  

  1. 装飾をクリアしたい箇所を、マウスでドラッグ（左ボタンをクリックしたままマウス移動）して選択する
  2. 上部ツールバーにある［プレーンテキスト化］をクリック

  ※一回で装飾が削除されない場合は、何度か同じ手順を繰り返していただくと装飾が削除されます。

• 箇条書き（リスト）を作成する

  サービス、商品などの特徴や順序などを説明するときには、箇条書きが適しています。

  箇条書きにすると一つ一つの情報が区切られるので読みやすくなります。

   

  

  1. 文章中の箇条書きにしたい箇所を、マウスでドラッグ（左ボタンをクリックしたままマウス移動）して選択する
  2. 上部ツールバーにある、設定したい箇条書きをクリック

  箇条書き編集のヒント

  • 箇条書き中に、「enterキー」を押すと、次の箇条書き項目へ移動します。
  • 箇条書きを終了するには、「enterキー」を二回続けて押します。
  • 箇条書きの１つの項目内で改行したい場合は、「shiftキー」を押しながら、「enterキー」を押します。
  • 既存の箇条書きを再編集したい時は、箇条書き文上で、マウスをダブルクリック（マウスの左ボタンを素早く二回連続で押す）します。