シナリオ執筆の為、更新停滞気味です

自分でホームページを作る!Wixでのホームページの作り方、初心者でも無料ツールでホームページを作る方法、コードを使わずに簡単作成。エディタの触り方、編集の仕方、イラストレーターのポートフォリオの作り方

ポートフォリオページや、ブログサイト、秘匿用の鍵付きTRPGシナリオページなどが作れるようになります。

※サイトを作りたいけど、無料でこだわりつつ作りたい!という人用

読み飛ばしてもOKな導入

男子D
男子D

サイト作りたいけど
何すればいい?

サイトなら
最近だとWixかな?

男子B
男子B

作り方は
自分で調べて下さい

男子B
男子B

男子D
男子D

「雑に扱われた」と、
Aに連絡を――

いや、雑ではないけど
まあいいや。教える

男子B
男子B
目次

Wixとは

ホームページを簡単に作ることが出来るサイト
シナリオの秘匿HOを配るページに利用したり、
絵師様のポートフォリオページ等に利用したりされる。

Wixでのメリット

  • 無料で作って公開が出来る
  • 感覚的に、画像を動かしたり、文字を変えたりできる
  • 鍵付きページ、ブログ、お問い合わせフォーム等が簡単に出来る

Wixでのデメリット

  • 感覚的だからこそ、何処を弄ればいいか分からない…。
  • 面倒な設定をしないと検索上位には入らない
     →検索から集客を考えるなら、ワードプレス、Lit.linkを推奨
  • 完成ページが重くて開くときに、苛々する事がある。
     →Wixでの装飾はなるべく少なめがおすすめ。

Wix登録前の準備

まず、Wixを使う時は
メールアドレスが無難な
アカウントでの作成を
お勧めします。

男子B
男子B
男子D
男子D

何故?

メールアドレスの一部分が
そのまま
ドメインになる
ので…

男子B
男子B
男子D
男子D

ドメイン?

ネットを開くときに
上に出ている
アルファベットの羅列です。

男子B
男子B
男子D
男子D

こんなところまで
見る人いる…?

Vtuberの特定依頼が
探偵事務所に
入って来る時代なので…

男子B
男子B

使い勝手良いメールアドレスがない場合のGoogleメールの作成仕方↓

Wixの新規登録の仕方

では、Wixのページを
開きましょうか。

男子B
男子B
男子D
男子D

開いたら、
「無料ではじめる」でいい?

はい、それで

男子B
男子B
男子D
男子D

成程。

此処は
メールアドレス必須の
登録なんだね?

これに関しては
電話番号だけは
無理そうだったかな

男子B
男子B
男子D
男子D

分かった。

Googleアカウントを
クリック

新規登録関係に
関しては
慣れてきましたね

男子B
男子B
男子D
男子D

慣れていないのは
Aだけだった気もする…
原始人…

原始ってより、
原初人ですけどね

男子B
男子B

サイト作成ページ

サイト作成
困ったら、ポートフォリオ型で!

何かを消す、という作業が面倒なことが多いので
なるべくシンプルなテンプレートを選ぶことをおすすめします。

とは言っても、テンプレートなしは返ってやり難いです。

ポートフォリオの意味…お仕事の成果、実績、こういったお仕事が出来るよ、が纏まっている資料という意味
ポートフォリオ特化なら、forioさんもおすすめです。

男子D
男子D

サイト作成に
飛んだ

では、
此処からは
伝えていきますね

男子B
男子B

ポートフォリオ、が
一番シンプルなので
とりあえず、それで。

男子B
男子B
男子D
男子D

ネットショップしたい人は
ネットショップの方が良い?

……。
作れますけど、
月2,000円掛かるから
今回はやめて下さい

男子B
男子B
男子D
男子D

なら、
ポートフォリオで

ここもポートフォリオのまま
「次へ」を押してください

男子B
男子B
男子D
男子D

分かった。
名前は適当でいい?

適当で良いですよ

男子B
男子B
男子D
男子D

分かった。
『適当でい――

なんか腹立つから
『適当で良い』
という名前は
却下

男子B
男子B
男子D
男子D

……はぁー--。
仕方ないな

…まあ及第点か

男子B
男子B

目的はどれを選んでも
変わらないはずなので
適当で

男子B
男子B
男子D
男子D

サイトを
作成してみたいに
チェックした

機能に関しては
全部チェックを外して
「次へ」

男子B
男子B
男子D
男子D

分かった。
チャットチェックを
外して「次へ」

一先ずこれで
新規登録は完了です。

男子B
男子B

ダッシュボードについて

男子D
男子D

とりあえず
「ダッシュボード開く」を
クリックしたら、
こんな画面についた

ダッシュボード画面
このサイトの色々な事が出来るページ。
細かいことが弄りたくなったら使う。

今はまだ早い為、割愛

総合メニュー画面みたいなものです。
触ると迷宮に入るので
サイト作成に行きましょう

男子B
男子B

サイトテンプレート作成

質問に答えるだけでテンプレートを作成してくれる。
自力で組み立てるのも可

男子D
男子D

どこのボタン
触ればいい…?

右上の部分の
「アクション」を
クリック

男子B
男子B
男子D
男子D

「新しいサイト作成」が
あった。

選択肢によるテンプレート選び

まずはWix ADIで自動作成
→結局テンプレートを選んでカスタマイズする為、
 どっちもオリジナリティのあるホームページになる

テンプレート選んでも
良いですが、
結局カスタマイズするので
自動作成で行きますね

男子B
男子B

説明が面倒なので、
此処は
「次へ」連打です

男子B
男子B
男子D
男子D

次へ

男子D
男子D

「次へ」

男子D
男子D

「次へ」

あ、最後だけ
チェック外した方が
良いかも
しれないです。

男子B
男子B
男子D
男子D

分かった。
チェック外して
「次へ」

男子D
男子D

出来―ー

サイトは公開されている為、
ドメインを入力すればサイトに行くことは出来る。

でも、Google等には登録されていないから、
人はよっぽど来ない状態だから、安心して編集が出来る。

男子D
男子D

!?!!?
サイト……公開…?

大丈夫です。

男子B
男子B

何もしてない
サブドメインで
作ったサイトが
覗かれることなんて

男子B
男子B

ほぼ、ない

男子B
男子B
男子D
男子D

そんなもの?

検索エンジンにすら
登録してませんしね

男子B
男子B

検索エンジン…Googleやヤフーなどのこと

さて、
エディタを
開いてみましょうか

男子B
男子B
男子D
男子D

メニューっぽい画面に来た

左側のバーを
中心に触ることになりますが、
まずはWixサイトの構成を
説明をしますね

男子B
男子B

なので一旦、
適当な場所をクリックして
メニューを閉じて下さい

男子B
男子B

サイトの大きな中身の話

全体を知っている方が作りやすいかな?と思いますが、操作方法を知りたい方は読み流しでOKです。

基本的に、「ページ」は本に似た形状。

表紙(ヘッダー)
イラストやブログのコンテンツ部分(セクション)
裏表紙(フッター)

更にこのページが複数存在して、ウェブサイトが出来ている。
(Wixも複数ページ作成可能)

省略すると
面倒になるので、
サイトの構造の話をします

男子B
男子B
男子D
男子D

何か分かり難そう。

23秒、下さい

男子B
男子B
男子D
男子D

分かった。

ありがとう

まずは
↓を見て下さい

男子B
男子B
男子D
男子D

見た

全体の構造をざっくり

Wixサイトの要素は
3つ
あります。

男子B
男子B

ざっくり言うと
表紙、
ページ、
背表紙
かな

男子B
男子B
男子D
男子D

ハンバーガーや、
本の形状だね

そうです、
一つずつ伝えますね

男子B
男子B

ヘッダーについて

※削除はできませんが、非表示は出来ます。

まずはヘッダー。
この部分は
画面の一番上にあります

男子B
男子B
男子D
男子D

表紙と目次部分か

そんな感じです

男子B
男子B

セクションについて

ここが、メインの場所。
テキストだったり、
画像や動画を貼る場所です

男子B
男子B
男子D
男子D

セクションは
複数作れそうだね

そうです。
ページも増やせるので
縦長レイアウトも
複数ページレイアウトも
自在かな

男子B
男子B

フッターについて

フッターは
サイトの裏表紙――

男子B
男子B

……よりかは、
裏表紙を
めくって書いてある
会社名とかいつ作られたか、
の部分ですね

男子B
男子B
男子D
男子D

©とかSince何とか~と
書いてあるところだ

そうです

男子B
男子B

改めて、サイトの全体を確認

画像として
まとめるとこうかな

男子B
男子B
男子D
男子D

分かりやすい

え、本当ですか?
Aだと「目が滑る」と
絶対文句言う図を…

男子B
男子B
男子D
男子D

あくまで
教えてもらっている身だし

気を遣われると
返って何処が分からないか
分からなくなるので
正直に言って下さい

男子B
男子B
男子D
男子D

……
ちょっと文字が小さい

うん、同意見だ

男子B
男子B

自分のページの構造確認

男子D
男子D

自分の作っている
セクションの中身を見ると、
こうでいい?

Dの構造とは
同じサイトにしたので
正解です、良いですよ

男子B
男子B
男子D
男子D


よかった

とにかく、
自分の作っているものの
ヘッダー
セクション、
フッターが
どれか分かれば、
かなり優秀です

男子B
男子B

要らないセクション(コンテンツ部分)の消し方

サンプルのページは、
自分にとっては要らないセクションが
入っている事が多い
です。

欲しい時にまた追加すればいいので、
削除の仕方を教えます。

編集始めに、使わないであろう場所を消すのが手癖という話

まず、編集をする時には
要らないセクションの
消したくなるので
そこから行きましょうか

男子B
男子B
男子D
男子D

要らない要素…?

Dはお問い合わせとか
要らないでしょう?
メール苦手そうだし

男子B
男子B
男子D
男子D

……。

あれ…?
何か怒ってる?

男子B
男子B
男子D
男子D

別に????????
友達100000000000000000000000000000000000000000000000000000人いるし

…え、えっと……

後で、増やせるし、
消し方伝えますね…?

男子B
男子B

セクションを消す実践

男子D
男子D

何この↑の装飾

こういうの、
好きかな…って…

男子B
男子B
男子D
男子D

うん、
それは好き

それなら良かった。

男子B
男子B

まず消したいセッション部分を
クリックすると
メニューバーが出ると思います

男子B
男子B

男子D
男子D

出てきた

では、その部分の
「…」をクリックして下さい

男子B
男子B
男子D
男子D

押したらメニューが
出てきた

では、削除を
クリックしてください

男子B
男子B
男子D
男子D

押した。

なら、
消えているはずです

男子B
男子B
男子D
男子D

本当だ…。

あと、
この文字格好良いね

「装甲明朝」、
良いですよね…!

男子B
男子B

フリーフォントなので!!!
是非!!!
格好良いんですよ!

男子B
男子B
男子D
男子D

え……ぁ、ごめん。
使い道ないから…

確かにフォントで
いきなりハイになるのは変か。
失礼しました。

男子B
男子B

よく使うセクションの種類

セクションは色々あります。
その内覚えます。

既にデザインがしっかりしているので、
文字を変えたり、画像を変えるだけでそれっぽくなります。

自分でカスタマイズしたい人は
空のセクションを入れて、そこにパーツを入れていくスタイルも可能。

セクションは
色々ありますが、
よく使うのは、この辺りかな

男子B
男子B

セクションの追加の仕方

男子D
男子D

…?
どこで増やせる機能?

左のバーの
2番目。

男子B
男子B

マウスを乗せたら紫になり、
「セクションを追加」と
書かれているボタンですね

男子B
男子B
男子D
男子D

押したら、
色々なセクションがある

その中で
良さそうなのがあったら
ドラッグして入れる事が出来ます

男子B
男子B

ちなみに
空のセクションの場所が
分かりにくいですが、
↓の辺りです

男子B
男子B

セクションの入れ替え方(パーツの入れ替え方も同じ)

男子D
男子D

場所を入れ替える時は?

入れ替えたいセクションを
クリックして
メニューバーを出して下さい

男子B
男子B
男子D
男子D

出した

なら、そこの

男子B
男子B

「↑↓」で調整できます

男子B
男子B
男子D
男子D

おお…

パーツについて(セクションの中身について)

セクションという入れ物の中に

「パーツ」=
「ブログ、ギャラリー、テキスト、画像…etc」


などが入っている。

どのセクションでも良いので、
セクションを
クリックしてみて下さい

男子B
男子B
男子D
男子D

クリックした

ちょっと枠色を
強調しますね

男子B
男子B
男子D
男子D

紫の枠の中に
青色の枠がある…

はい。

男子B
男子B

この枠は、
「パーツ」部分です

男子B
男子B
男子D
男子D

パーツ?

サイトが
本だとしたら
セクションはページ。

本のページは何で
構成されていますか?

男子B
男子B
男子D
男子D

文字、
後はページ数…ノンブル?だっけ、と
あれば挿絵。

僕より詳しいな…

男子B
男子B

そう、ページの中にも
色々な要素が入っている。

その要素が
「パーツ」部分になります

男子B
男子B

セクションの中身について(サンプルサイトにより個人差あります)

Dのサイトのセクションにある
パーツを図にすると
こんな感じですね

男子B
男子B
男子D
男子D

ストリップ背景…?

これもパーツの一種です。
スマホでも、パソコンでも
画面の端まで画像を出してくれる
おしゃれ機能。

男子B
男子B
男子D
男子D

…そう

ストリップ背景がない人の事前準備

もし、
ストリップ背景がない
サンプルページの方は
このセクションを入れて下さい

男子B
男子B
男子D
男子D

女の人の部分が
ストリップ背景?

そうです。

男子B
男子B

レイアウト画面の変更し方

何も弄っていないセクションの場合、
ボタン一つでレイアウトが変えられる!

では
次はこうですね

男子B
男子B
男子D
男子D

レイアウトの変更?

今のままでも良いけど
ちょっと違うなって時に
便利です。

男子B
男子B

レイアウト変更のやり方

まずメニューの
鉛筆マークを
押してください

男子B
男子B
男子D
男子D

押したら、
左の画面が生えてきた
↓の感じ

良いですね

男子B
男子B

では、
右のレイアウトタブを
クリックして下さい

男子B
男子B
男子D
男子D

押したら
一覧が出てきたよ

ではその中から
好きなレイアウトを
選んで下さい

男子B
男子B
男子D
男子D

違いが
分かりやすい
レイアウトを
選べばいい?

それは助かる。

男子B
男子B
男子D
男子D

…本当だ、
これは便利だ

あとは
細かい微調整の
やり方かな?

男子B
男子B
男子D
男子D

細かいのは…別に…

別にC並みに
0.01mとか、0.1秒とか
こだわらないので気楽に

男子B
男子B

微調整:文字の色やサイズの調整仕方

セクション内のパーツは
自由に調整できる

テキスト→文字色、文字サイズ、位置
画像→サイズ、位置
…etc

調整の仕方
パーツをダブルクリックもしくは
「〇〇を編集」のボタンを押すと
メニューバーが開きます

男子D
男子D

文字色は白の方が
丁度いい?

そうですね。

調整するなら
文字の大きさかな

男子B
男子B

テキストのパーツ部分を
ダブルクリックもしくは
「テキストを編集」のボタンを押すと
メニューバーが開きます

男子B
男子B
男子D
男子D

開いた

では、文字サイズバーで、
左にずらしてください。

数値を変更して
小さくしてもOKです

男子B
男子B
男子D
男子D

よくある
編集画面だね

男子D
男子D

これで
編集が出来た・・・・

テキスト変更メニューアイコンについて

説明省きましたが、
文字色は良く使うので
マーク覚えておくと楽です

男子B
男子B

パーツについて パーツの入れ方について

次はこのあたりかな

男子B
男子B
男子D
男子D

・・・。

不満があるのは良いのですが、
口に出してください…。

男子B
男子B
男子D
男子D

……命令形で
missionを言われるの、
ちょっとウザイなって
思い始めてる

……!
なら、次は仕様を
変えましょうか。

男子B
男子B
男子D
男子D

ありがたい。
これは
セクション追加のやり方と
一緒?

ほぼ一緒なので
基本は見守っています

男子B
男子B

よく使うパーツの種類について

パーツ=コンテンツ
コンテンツ=文章、画像、動画…etc

ブログ機能や、ギャラリー機能、
お問い合わせ用フォーム機能なども充実している。

パーツは
色々ありますが、
よく使うのは、この辺りかな

男子B
男子B

パーツの入れ方

パーツは
このボタン、と言えば
あとは出来ますか?

男子B
男子B
男子D
男子D

うん、このまま
ドラッグして入れるだけ

男子D
男子D

………あ、

最悪作り直せばいいので、
お任せします

男子B
男子B

~数分後~

男子D
男子D

セクション1個消えたけど
何とかなったよ

男子D
男子D

見ての通り、
セクションは消えた

片腕一本なら、
安いものです

男子B
男子B

テキストは
自分でパーツを入れて
作ったんですか?

男子B
男子B
男子D
男子D

そう

ついでに
復習も出来て、
かなり上達してますね

男子B
男子B

やり直す、元に戻すボタン

男子D
男子D

やり直す機能もないし、
自動保存されるし…
困っていた

ありますよ?
元に戻すボタン

男子B
男子B
男子D
男子D

そんなことはない

では、
これは
幻覚と言うことに
しましょうか

男子B
男子B
男子D
男子D

あれば使う

ページについて ページの増やし方

ページの作り方
緑色のボタン→ページを追加→レイアウトを決定→ページを追加
の流れで、ページが作れる。

では、
ページの説明に行きますね
仕様を変えました

男子B
男子B
男子D
男子D

違う。

とは思っていました
Aなら喜ぶ仕様です

男子B
男子B
男子D
男子D

もう元のでいい

助かりますね

男子B
男子B

ページ追加について

ページの作り方
緑色のボタン→ページを追加→レイアウトを決定→ページを追加
の流れで、ページが作れる。

まず、緑の
ページボタンを
クリック

男子B
男子B
男子D
男子D

いつも通りに
メニューが出た。

追加でいい?

もちろんです。

男子B
男子B
男子D
男子D

これは何が良い?

特にはないけど、
……そうだな、

男子B
男子B

何かの紹介ページになると
思うから
一番上に大きな画像があって、
その下にテキストがある形式だと
後々使い勝手良さそうかな

男子B
男子B
男子D
男子D

なら、
真ん中の下にしよう

男子D
男子D

「ページを追加」押す

男子D
男子D

…出来た

ページとメニューパーツの関係について

パーツに「メニュー」があれば、
メニューから別ページに飛べるようになる。

ヘッダー部分にある
「メニュー」を見ると
此処に「基本レイアウト」という名前の
新しいページが出来たことが分かります。

男子B
男子B
男子D
男子D

「基本レイアウト」?

「基本レイアウト」…

男子B
男子B
男子D
男子D

名前、変えたい

説明省こうと思ったのに
墓穴を掘ったな…

男子B
男子B

ページの名前変更

ページ画面で、
それぞれのページの簡単な機能を変更できる。

詳細な機能を変更する場合には、
ページ自体の画面で編集する必要がある。

まず、
ページボタンを
クリックして下さい

男子B
男子B
男子D
男子D

押したら
メニュー出てきた

サイトメニュー
→編集したいページ
→名前を変更
の順
に押してください

男子B
男子B
男子D
男子D

うん、わかった
これで色々変えてみるよ

男子D
男子D

思った以上に
簡単で良かった

それなら、
良かった

男子B
男子B

鍵付きページの作成

秘匿HO配布ページや会員ページなどを作る場合、
鍵付きページがあった方が便利。

設定→アクセス許可→パスワード管理者から可能。

あとは鍵付き
ページですね。

男子B
男子B

某シナリオの秘匿ページに
やっぱり憧れはあるので

男子B
男子B
男子D
男子D


そうなんだ。

でも、
秘密のページは最高

鍵付きページの作り方

まず、
鍵付きにしたいページの
「設定」を押します。

男子B
男子B

押したら、
アクセス許可のタブを
クリックして下さい

男子B
男子B
男子D
男子D

3つ選択がある。

そこの
「パスワード保護者」を
選択すると
鍵付きページにすることが出来ます

男子B
男子B

サイトデザインボタンについて

これも知っていた方が
楽かな?

男子B
男子B
男子D
男子D

Misson
帰ってきた

元々このテンプレートで
作っていたので

男子B
男子B

全体の背景色の変え方

黄色の
サイトデザインボタンを
押します

男子B
男子B
男子D
男子D

押すと、サイト全体の
デザインを変えられるんだね

そうです、理解が早い

男子B
男子B

そのページ背景を
クリックして下さい

男子B
男子B

男子D
男子D

押したら、
色々な背景が出てきた

好きな画像を
背景にしていいですよ

男子B
男子B

男子D
男子D

なら、
これが一番格好良い

それをクリックして

男子B
男子B
男子D
男子D

「そのほかのページに適用?」

……を押すと、
全ページ背景変わるので
押さない方が良いと思います

男子B
男子B
男子D
男子D

分かった

男子D
男子D

ヘッダー部分、
白いね?

背景は
「最背面の色を変える」の
意味なので、
ヘッダーに色がついていれば
変わります

男子B
男子B
男子D
男子D

色ついてなかったよ

白色が
入っていたのでは?

男子B
男子B

ヘッダーやセクションの色の変え方

ヘッダーやセクションの
色の変更は
「…」からできます

男子B
男子B
男子D
男子D

デザインの変更でいい?

そうです。
今回なら
「デザインを
カスタマイズ」かな?

男子B
男子B

不透明度・色を押して

男子B
男子B

男子D
男子D

押したら、
編集バーが出てきた

では、色の不透明度を
0にしてみてください

男子B
男子B
男子D
男子D

……背景が
反映された

正しくは、
白が透明になったから
背景の画像が出てきた、ですけどね

男子B
男子B

最低限ではありますが、
この辺りが分かれば、
TRPGや
絵・動画ポートフォリオを
作りたい人は
作れるようになるはずです。

男子B
男子B
男子D
男子D

やり方は
そこそこ分かったから、
少しずつ触ってみる

関連記事

キャラクター紹介サイトをCanvaで作る方法!自陣サイトテンプレートを使っての作成、自探索者まとめサイトや創作用サイトなどにも応用可能。ホームページをCanvaで作成する方法

Lit.Link(リットリンク)の作り方や使い方、立ち絵一覧のあるプロフィールの作り方、TRPGユーザー向けの立ち絵アイコンやキャラクターシート、地雷一覧や視聴済み一覧が書けるプロフィールの作り方、プロフィールサイトの作り方、複数アカウントを持つ前提での解説

Notionで探索者図鑑を作る!キャラクター図鑑の作り方、キャラクターサイトの作り方、Notionを使ってTRPGや創作のキャラクターの整理をする方法

TRPG配信画面や動画の作り方、枠の作成方法。君だけのリプレイ動画を作る方法。初心者向けにOBSのダウンロードから!ココフォリアとの連携仕方が分からない人や、そもそも立ち絵の光らせ方が分からない人用の記事

Youtubeでの配信の仕方。見たままを行うだけ!OBSとYoutubeを使って配信する方法。初心者向けの説明して行う記事。配信予約枠の作り方。注意するべき点。配信予約枠や限定公開のURLの場所について、設定の仕方について

Vtuberになるには?Vtuberなり方、初心者でも分かる簡単ななり方、ソフトや声について。お金はいくらかかるか?Live2Dの依頼の仕方、PCでのなり方。チャットノベル講座。Live2Dが使えるアプリの紹介とLive2Dモデルの購入し方、依頼の仕方。Vtuberになる為に必要なことの初心者向け記事。どう動かすのかは②へ続く

多くの方に教えてくださると、喜びます!
  • URLをコピーしました!
  • URLをコピーしました!

この記事を書いた人

今はゲームシナリオを書いている者です。
アナログゲームを嗜む脚本家、小説家、人狼もマダミスも好き。

目次