ホームページ(企業サイト)を自分で低コストで作成する方法を詳しく図解入りで一から全て解説【WordPressテーマSWELL使用】

Macに表示されている企業サイト

自分でホームページをゼロから作りたい人に届いて欲しいな〜

ホームページを作りたいけど、費用が。。。
と思いますよね!
Web制作会社に依頼すると、20万は下りません。

自分で作るとしても、そもそも作り方がわからない。。。

一から勉強する時間もない。

でも大丈夫です!!

全くの初心者の方でも制作できるように、画像と解説で超わかりやすくブログにしてみました。

一歩踏み出して一緒に作っていきましょう!

時間はかかりますが、根気さえあればできます!!

どなたでもご自由に制作していただいて結構なのですが、このデモサイトをそのままご自身のポートフォリオとして掲載されるのはお控えください。

目次

作成するホームページのデモサイト

今回はこのような架空のサイトを作成していきます。

画像をクリックすると、デモサイトがご覧になれます。

デモサイトUltraのファーストビュー

他のサイトを制作したい方はこちらをご覧ください。↓

あわせて読みたい

Q & A

Web制作(ホームページ制作)の知識が全くありませんが制作できますか?

全く初心者の方でも制作できるように、詳細に図解入りで解説していますので、その通りに進めていただくと制作できます。

テンプレですか?

テンプレートではありません。

デモサイトと同じデザインしか作れませんか?

いいえ。
制作過程で徐々にWordPressやテーマのSWELLの仕様に慣れてくると思いますので、「ここのこの部分は別のデモサイトに載っているデザインで作る」や「これと同じ項目をもう一つ増やそう」「これは必要ないので削除しよう」「ここの色や大きさをを変更しよう」などなどご自由にレイアウトやデザインしていただけます。

一度制作したサイトのデザインを変更できますか?

何度でも変更可能です。
ローカル環境でもサーバーアップロード環境でも可能です。

短期間で作れますか?

初めての方はかなり時間がかかると思いますので、時間に余裕を持って始められることをお勧めします。

ホームページ作成の工程

2パターン紹介しますので、
適した方で作成してください。

パターン1
XserverのWordPress簡単インストールで、サーバー上に直接サイトやブログを構築する方法です。
ご自身のサイトやブログを構築するのにおすすめです。

パターン2
ローカル環境(Local)でサイトやブログを作成し、出来上がってからAll-in-one WP Migrationを使ってXserverのWordPress簡単インストールで立ち上げたWordPressに引越しさせる方法です。
クライアントワークににはこちらがおすすめです。

【パターン1】ホームページ作成の工程

STEP
WordPressテーマSWELLを購入 17,600円(税込)
WordPressテーマSWELLをダウンロードします。
STEP
Xserverでレンタルサーバーとドメインを取得し(初期費用3,300円 約1,000円/月)、Xserver WordPress簡単インストールでWordPressをインストールし、SSL化します。
SWELLの親テーマ子テーマをインストールします。
STEP
SWELL子テーマを有効化し、サイトやブログを作成していきます。

【パターン2】ホームページ作成の工程

STEP
WordPressテーマSWELLを購入 17,600円(税込)

SWELLをダウンロードします。

子テーマもダウンロードします。

STEP
LOCAL(無料)を使用してローカル環境でWordPressを構築します。

LOCALをダウンロードし、SWELLとSWELLの子テーマもインストールし、ローカル環境(サーバー上にアップロードされていない環境)でWordPressのホームページを作成していきます。

STEP
ホームページ作成後、WordPressのプラグインAll-in-one WP Migrationをインストールします。

All-in-one WP Migrationをインストールし、バックアップファイルとエクスポートファイルを作成します。

STEP
Xserverでレンタルサーバー契約した後(初期費用3,300円 約1,000円/月)、WordPress簡単インストールでWordPressを立ち上げ、All-in-one WP Migrationをインストールします。

All-in-one WP Migrationをインストールし、先ほどのエクスポートファイルをインポートします。

どちらの方法で作成するにしても、WordPressテーマSWELLXserverが必要になります。

実質かかる費用はたったこれだけ!
初期費用17,600円 税込 (買い切りWordPressテーマSWELL価格)
初期費用3,300円 税込 (サーバー契約初期費用)
約1,000円/
月 (サーバーとドメイン代)

WordPressテーマSWELLダウンロードします。

日本人の了さんが直感的に簡単に楽しく素早く操作でき、細部までこだわって作られた、
WordPressテーマです。

ブログでもとても人気のテーマですので、
サイト制作した後にブログを始めてみるのもいいですね!
もちろん買い切り価格ですので、追加料金は発生しません。

今回は完全ノーコードでの制作ですが、追加CSSでより機能性やデザイン性の高いものが作れます。

商品名WordPressテーマ SWELL
販売価格¥17,600(税込み)
※お支払いは一度限りです。月額や年額ではありません。
販売元株式会社LOOS
動作必須環境PHP7.3以上

WordPress5.5以上 (推奨 : 5.6 ~)

※必須環境をみたしてない場合は、エラーが発生します。推奨バージョン未満では、ブロック機能が一部使えません。
※WordPress.comでは利用できません。SWELLはインストール型WordPress.org向け商品です。
対応ブラウザEdge / Chrome / Firefox / Safari (各最新版)
決済方法クレジットカード ( VISA / Master / AMEX / JCB )
※銀行振込での購入は対応できません。
ライセンスSWELLはGPL100%テーマです。
ライセンス制限はなく、複数サイトでご自由にご利用頂けます
SWELL公式サイトより引用
  • SWELLをダウンロードしたら、子テーマもダウンロードしましょう。
    (子テーマはSWELL会員サイト SWELLERS’ のマイページにあります。)
  • 親テーマも子テーマもダウンロードした後、zipファイルのままで大丈夫です。

わからないことがあれば、会員サイトのフォーラムで検索や質問ができます。
(フォーラムへは、ガイドラインをよく読んで参加しましょう。)

サブスクではありませんので、一度の購入で複数のブログやサイトが作れます。

Xserverでサーバーとドメインを取得します。

Xserver

エックスサーバー

Xserverのお申し込み方法の解説になります。↓

お名前.com

コチラは特にドメインが1円〜という破格で人気ですね!

もちろんレンタルサーバーもありますが、
サーバーとドメインを別会社にしたい方は、ドメインだけはお名前.comって方法もあります。

■□━━ 急げ、ドメインは早い者勝ち! ━━□■

     ■お名前.com

Xserver WordPress簡単インストールとSSL設定の解説になります。
申し込みが終わればここまで設定しておいてくださいね。↓

【パターン2】の方のみ Local設定

LocalでWordPressをローカル環境構築していきますので、こちらをご覧になって設定してくださいね。↓

WordPressにSWELLをインストールする

では!頑張って作っていきましょう!
とても時間がかかりますので、無理をしない様に途中休憩を適度に取りながら、水分も忘れず補給しながら進めていってくださいね!

WordPressにログインします。

【パターン1】の方は、Xserver簡単インストールしたWordPress
【パターン2】の方は、Local環境で構築したWordPressです。

外観→テーマアップロードをクリックします。


swellのファイルをzipファイルのままドラッグ&ドロップします。
(ファイルを選択してもいいです)


今すぐインストールをクリックします。


今度はswell_childのファイルをzipファイルのままドラッグ&ドロップします。
(ファイルを選択してもいいです)


今すぐインストールをクリックします。


今度は有効化をクリックします。


親テーマSWELLがインストールされていて、子テーマSWEL CHILDが有効になっていればOKです。

基本的に今有効になっている子テーマを使って制作していきます。

画像をメディアに入れます

今回使用する画像です。

メディアから新規追加をクリックします。


ダウンロードして解凍した画像全てを、ファイルをドロップしてアップロードにドラッグ&ドロップします。
これで画像が入りました。

画像や動画について

画像や動画はご自身で用意、またはweb上で見つけたものを使用される場合の参考になさってください。

画像・動画フリーダウンロードサイト

デザインツール

無料の範囲でも素敵なデザインが作れます。
有料1,000円/月にすると、背景透過やたくさんの素材を使用することができかなり充実しています。

■Canva

7500万点の素材が無料

画像加工サイト

私は頻繁に利用させていただいており、助かっています。

BANNER KOUBOU

画像サイズの変更

画像が大きいと重くなりサイト表示が遅くなります。
画像サイズの変更方法はこちらをご覧ください。↓

画像サイズの目安

大体の目安です。
このサイズじゃないといけないってことではありませんので、
その辺りは臨機応変にご使用ください。

メインビジュアル1600px
中サイズ1000px
小サイズ600px

画像を圧縮してくれる無料サイト

ドラッグ&ドロップで使用でき、
圧縮して、ファイルサイズを小さくしてくれます。

TinyPNG

動画を圧縮してくれる無料サイト

こちらもドラッグ&ドロップで使用できます。

VideoSmaller

背景削除してくれる無料サイト

画像の背景を削除してくれます。

ロゴなどによく使用します。

removebg

固定ページを作ります

管理画面の固定ページから新規追加をクリックします。


ポップアップが出ますので、 をクリックして閉じます。


Homeと打ち、公開をクリックします。
公開をクリックすることでセーブされます。その都度忘れずに!)

このページがHomeページ(トップページ)になります。


再び公開をクリックします。


パーマリンク

ページを作成する時にタイトルが日本語だと、長〜〜い訳のわからないurlになったり(https://〇/%e7%a7%81%e3%81%9f%e3%81%a1%e3%81%ab%e3%81%a4%e3%81%84%e3%81%a6/)

なので、わかりやすい英語表記(スラッグ)にしておきましょう!

そのページの、画面右側→固定ページパーマリンクのurlスラッグを日本語ではなくわかりやすい英語表記に変えましょう!!


左上の をクリックすると、管理画面に戻りますので覚えておいてくださいね。


Homeの固定ページが出来ました。


Privacy PolicySample Pageはそれぞれゴミ箱へ移動をクリックして削除します。


Homeを作成した時と同様に、固定ページにAbout News Recruit Contact それぞれのページを作成してください。

外観カスタマイズ・メニュー設定

管理画面から、外観 カスタマイズをクリックします。

WordPress設定

右側が現在のサイトのトップページの状態です。
このまますぐにでも素敵なブログが書けるような、素晴らしいデザインですね!

しかし今回は、企業サイトを作っていきますので、
もったいないですがこれからガラッとデザインを変更します。

WordPress設定をクリックします。


サイト基本情報をクリックします。


サイトのタイトルを入力します。

キャッチフレーズを入力します。

サイトアイコンを選択をクリックします。


画像をクリックします。

選択をクリックします。


切り抜かないをクリックします。


公開をクリックします。

をクリックします。


ホームページ設定をクリックします。


固定ページに●

ホームページHome

投稿ページNewsを選びます。

公開をクリックします。

をクリックして戻ります。


再び をクリックして、もう一つ前に戻ります。


サイト全体設定

サイト全体設定をクリックします。


基本カラーをクリックします。


色を選択をクリックします。

カラーナンバーを #0c4aad に変更します。

公開をクリックします。

をクリックして戻ります。


基本デザインをクリックします。


全体をフラットにするをチェックします。

フォントは明朝体(Note Serif JP)を選びます。

公開をクリックします。

をクリックして戻ります。


パンくずリストをクリックします。


「ホーム」の文字例Homeにします。

公開をクリックします。

をクリックして戻ります。


再び をクリックして戻ります。


ヘッダー設定

ヘッダーをクリックします。


画像を選択をクリックします。


メディアライブラリをクリックします。

ロゴの画像を選んでクリックします。

画像を選択をクリックします。


ヘッダーのレイアウト(SP)ロゴ:左/メニュー:右を選びます。

ヘッダーの背景を透明にするかどうかする(文字色:黒)を選びます。


表示設定のチェックを外します。

キャッチフレーズの表示位置ヘッダーロゴの近くに表示を選びます。


検索ボタンの表示位置(PC)ヘッダーメニューに表示を選びます。

公開をクリックします。


上の方に戻って をクリックして戻ります。


フッター設定

フッターをクリックします。


フッター背景色#f7f7f7に変更します。

公開をクリックします。

をクリックして戻ります。


サイドバー設定

サイドバーをクリックします。


トップページにサイドバーを表示する
固定ページにサイドバーを表示する
のチェックを外します。

公開をクリックします。

をクリックして戻ります。


トップページ設定

トップページをクリックします。


メインビジュアルをクリックします。


Scrollボタンを表示するにチェックを入れます。

メインビジュアルの高さ設定ウィンドウサイズにフィットさせるを選ぶ。


画像を選ぶをクリックし、PC用SP用それぞれを選びます。


メインテキストを削除します。


公開をクリックします。

をクリックして戻ります。


再び をクリックします。


投稿・固定ページ

投稿・固定ページをクリックします。


タイトルをクリックします。


コンテンツ内タイトルデザインで装飾なしを選びます。


メニュー設定

管理画面まで戻ります。

外観からメニューをクリックします。

メニュー名グローバルメニューと入力します。

グローバルナビにチェックを入れます。

メニューを保存をクリックします。


左側のメニュー項目を追加すべての表示をクリックします。

すべて選択にチェックします。

メニューに追加をクリックします。


右側のメニュー構造に追加されたメニューの順番を整えます。

ドラッグ&ドロップで移動できます。

メニューを保存をクリックします。


管理画面に戻り、外観からカスタマイズメニューをクリックします。


先ほど作成したグローバルメニューをクリックします。


スマホ開閉メニュー内にチェックを入れます。

公開をクリックします。


ウィジェット(フッター)設定

を2回クリックして戻りウィジェットをクリックします。


フッター(PC)1をクリックします。


ウィジェットを追加をクリックします。

画像をクリックします。


画像を選びます。

リンク先にHome(トップページ)のURLを入力します。

完了をクリックします。

ウィジェットを追加をクリックします。


テキストをクリックします。


住所や電話番号などを入力します。

公開をクリックします。

をクリックして戻ります。


Google Mapの埋め込み

フッター(PC)2をクリックします。


GoogleMapを埋め込んでいきます。

ウィジェットを追加をクリックします。

カスタムHTMLをクリックします。


一旦WordPressから離れて、Google Mapで住所を調べます。

共有をクリックします。


地図を埋め込むをクリックします。

を選択します。

HTMLをコピーをクリックします。


WordPressに戻り管理画面から外観→カスタマイズ→ウィジェット→フッター(PC)2をクリックし、内容の場所に先ほどコピーしたHTMLを貼り付けます。

貼り付けたHTML中のwidth=”400″をwidth=”100%”に変更します。

公開をクリックします。

をクリックして戻ります。


ナビゲーションメニュー

フッター(PC)3をクリックします。


ウィジェットを追加をクリックします。

ナビゲーションメニューをクリックします。


タイトルMENUと入力します。

メニューを選択は、グローバルメニューを選びます。

公開をクリックします。

をクリックし、管理画面に戻ります。


ひとまずお疲れ様でした!
これで、ヘッダーとフッターが出来上がりましたね!

サイトを表示 管理画面(ダッシュボード)

サイトを表示するには、管理画面左上、サイトを表示をクリックします。


ダッシュボードに戻るには、左上ダッシュボードをクリックします。


気をつけていただきたい事

これからブロックエディターで制作していきますが、こちらからはお知らせしませんので、ご自分のタイミングで頻繁にセーブしていってください。(でないと、せっかく作ったのが消えてしまいます。)

セーブは画面右上、公開を1回クリックもしくは2回クリックします。
(Localで作成されている方は、公開をクリックしてもサーバー上にはアップされません。セーブされるだけです。)

テキストの改行は、シフトを押しながらエンターキーで、普通に改行されます。

エンターキーだけで改行すると、1段落分のスペースが空きます

どこの なのか注意してください。

わかリにくければ ↓

画面左下で確認できます。

ブロックの位置を上下移動させたい時は、そのブロック場所をクリックして四角で囲われるように指定して をクリックして移動します。

固定ページ Home(トップページ)

Home(トップページ)を作っていきます。

管理画面から固定ページ一覧をクリックします。

Home編集をクリックします。

About

をクリックして表示されたものがブロックと言います。すべて表示をクリックし全てのブロックを表示させます。


フルワイドをクリックします。


タイトル部分にAboutと入力します。

画面右側の設定ブロックエリアが表示されていなければ、一番上の をクリックすると表示されます。

カラー設定の背景色をクリックします。

をクリックし、#ffffff に変更します。

をクリックして、すべて表示をクリックします。


ブロークン型のメディアと文章

画面左側パターンをクリックし[SWELLページ用]を選択し、ブロークン型のメディアと文章をクリックします。


上左の画像をクリックします。

置換をクリックしメディアライブラリを開くをクリックします。


画像を選びクリックし、選択をクリックします。


画像の右側のエリアをクリックして、テキストを入れます。

下の部分は要らないので、クリックし青い四角で表示されたら、 をクリックします。


ブロックを削除をクリックします。


テキストを入れたエリアをクリックし、青い四角を表示させます。


画面右側ブロックのクリックし、背景をクリックします。


格子模様をクリックします。


をクリックし、#f7f7f7にします。


をクリックし全てを表示をクリックします。

スペーサーをクリックします。


画面右側の設定のスペーサー設定50にします。


をクリックし、全て表示をクリックします。


SWELLボタンをクリックします。


画面右側設定でMOREボタンをクリックします。

ボタンの上にMoreと入力します。

その下の四角にhttps://ultra.local/about/と入力します。(ボタンのリンクになります)


また先ほどと同様にスペーサーを入れます。

今回はスペーサー設定100のままです。


Member

をクリックし、フルワイドをクリックします。

表示内になければ、すべて表示をクリックします。


Aboutと同じ様に、タイトル部分に Member と入力します。

画面右側の設定で、背景画像の設定メディアから選択をクリックします。


画像を選んでクリックし、選択をクリックします。


スクロールしても背景画像を固定するFixed Background

画面右側の設定の背景効果を、Fixed Backgroundオンにします。


をクリックし、すべてを表示をクリックします。


リッチカラムをクリックします。


画面右側の設定で、カラムの列数を決めます。

上から、PC、タブレット、スマホです。

今回6なので、3、2、1にしました。


カラムを追加するには、 をクリックします。


をクリックします。


画像を選び選択をクリックします。


画像を選んだ後、下の をクリックします。


段落をクリックします。


テキストを入力し、テキストを中央寄せをクリックし、Bをクリックして文字を太字にします。


テキストの最後にカーソルを置いてエンターキーを押します。


こちらにテキストを入力します。

残り5回、同様に作成します。


News

一旦画面左上の をクリックして管理画面に戻ります。

投稿一覧をクリックします。

Hello world!の見本の記事は要らないので、ゴミ箱へ移動をクリックして削除します。


新規追加をクリックします。


アイキャッチ画像

記事の題名テキストを入力して、画面右側の設定投稿をクリックし、アイキャッチ画像アイキャッチ画像を設定とクリックします。


画像を選びクリックし、アイキャッチ画像を設定をクリックします。

同様にtest2、test3の記事も作成します。


管理画面に戻り、固定ページ一覧Home編集をクリックします。


ブロックのフルワイドをクリックします。


Newsと入力し、 をクリック、投稿リストをクリックします。


画面右側の設定で、テキスト型を選びます。


をクリックし、SWELLボタンをクリックします。


画面右側の設定でMOREボタンをクリックします。

Moreと入力し、その下https://ultra.local/news/と入力します。


Recruit and Contact

画面右側ブロックで、スペーサーをクリックします。


画面右側の設定のスペーサー設定30にします。


画面左ブロックで、リッチカラムをクリックします。


をクリックします。


バナーリンク

画面左ブロックで、バナーリンクをクリックします。


メディアライブラリをクリックします。


画像を選び、選択をクリックします。


テキストを入力します。

下にhttps://ultra.local/recruit/と入力します。


右側も同様にバナーリンクをクリックします。


同様にテキストを入力します。

https://ultra.local/contact/と入力します。


以上でHome(トップページ)が出来上がりました。

初めての方や慣れない方は時間がかかり大変だと思いますが、
慣れてくるともっと短時間で作成できる様になります。
諦めず、よろしければ引き続き下層ページも作ってみてくださいね!

お疲れ様でした。

固定ページ About

Aboutページを作っていきます。

Home(トップページ)が済んでますので、あと少しです!

頑張って作っていきましょう!!

管理画面から固定ページ一覧をクリックし、About編集をクリックします。


をクリックし、すべてを表示をクリックし、画面左のブロックからカバーをクリックします。


画像をクリックし、選択をクリックします。


画像を幅を全幅にします。

をクリックします。


スペーサーをクリックします。


画面右側の設定で、スペーサー設定ピクセル値での高さを200にします。


をクリックし、段落をクリックします。


テキストを入力し、ツールバーで、テキスト中央寄せにします。


画面右側の設定で、焦点ピッカー左90上15にします。

スマホでもこれで画像がいい感じになります。

サイズのカバー画像の最小の高さ650pxにします。


をクリックし、スペーサーをクリックします。

100pxです。


をクリックし、全て表示をクリックし、フルワイドをクリックします。


画像右側ブロックで、背景色 をクリックして#ffffffにします。


タイトルにご挨拶と入力します。

をクリックしすべて表示をクリックし、メディアとテキストをクリックします。


画像を選び、選択をクリックします。


右側コンテンツと書いてあるところをクリックしてカーソルを表示し、テキストを入力します。

をクリックします。


画像を選び選択をクリックします。


で大きさを調節できます。

右寄せにします。


をクリックします。


画面左側ブロックのフルワイドをクリックします。


見出し部分に会社概要と入力し、 をクリックします。


画面左側ブロックのテーブルをクリックします。


カラム2 行数6に変更して表を作成をクリックします。


表の中のテキストを入力します。

画面左下のフルワイドをクリックします。

画面右側ブロックの背景色を#ffffffに変更します。


以上でAboutページは出来上がりました。
Home(トップページ)と比べると楽勝でしたねw

お疲れ様でした。

固定ページ Recruit

あともう少しです〜
頑張ってくださいね!
では、Recruitのページを作っていきます。

段落をクリックしてテキストを入力します。


画面右側の設定のボーダー設定で、02をクリックします。


ステップ

をクリックし、全て表示をクリックし、ステップを選びます。


ご応募と入力します。

その下のテキストも入力し、ブロックのメニューバーでテキスト中央寄せをクリックします。


最後のカーソルの状態で、エンターキーを押します。


をクリック、すべてを表示をクリックして、SWELLボタンをクリックします。


ボタンの上にテキストを入力し、その下にhttps://ultra.local/contact/と入力します。


step2も同様にテキストを入力します。

下の をクリックすると、次のstepが増えます。


同様にstep5まで作成します。


以上でRecruitページは出来ました!
お疲れ様でした。
適度な休憩や水分補給をとってくださいね!

固定ページ Contact

Contactフォーム(お問合わせフォーム)の詳しい解説は、こちらのブログをご覧になってください。↓

Privacy Policy

Privacy Policyのページも必要ですので作成していきます。

管理画面から固定ページ新規追加をクリックします。

Privacy Policyのページを作成します。


管理画面外観メニューをクリックします。


新しいメニューを作成しましょうをクリックします。

フッターメニューと入力します。

フッターチェックを入れます。

メニューを作成をクリックします。


画面左側、固定ページすべて表示をクリックします。

Privacy Policyチェックを入れます。

メニューを追加をクリックします。

画面右側、Privacy Policyが追加されました。

メニュー設定フッターチェックを入れます。

メニューを保存をクリックします。


以上で、Privacy Policyも出来ました。
。。。ということは

できた! できた! ついにできました〜!!!

最後まで頑張って作っていただいて、本当にありがとうございます!!

制作してみて驚かれたと思いますが、
SWELLならノーコードーでも、これほどのクオリティーのサイトなら作れちゃうんです!!
凄いですよね!!

このサイトでよろしければ、このまま画像やテキストを入れ替えて使うのもよし!
もっとcssを使ったりしてアレンジしまくって使うのもよし!
ご自由に使っていただいて結構ですので、よければ活用してください。

【パターン2】で作成された方はLocalからXserverにアップロード

今の状態ではまだローカル環境ですので、

作ったサイトを、サーバー上に公開する方法です。

詳しくは、こちらをご覧ください。

その他のプラグイン

・Snow Monkey Forms

・All in one WP Migration

以上の二つは既に入れていますが、その他セキュリティーの為のお勧めプラグインなどは、
SWELLの公式サイトをご覧になり参考になさってください。

私は他にWP Multibyte PatchとAll In One WP Securityを入れています。

これで制作したサイトをサーバーにアップロードまで出来ましたね!
初めての方だと結構な時間がかかったと思いますが、それと同時に達成感と自信にも繋がった事と思います。
よろしければまた2サイト目3サイト目と是非作っていってください。

本当にお疲れ様でした。

~本日も最後まで読んでいただき、ありがとうございました。〜

他のサイトも制作されたい方は、こちらをご覧ください。↓

あわせて読みたい
よかったらシェアしてね!
  • URLをコピーしました!
  • URLをコピーしました!
目次
閉じる