【完全無料】簡単にホームページが作れるStrikinglyの使い方を徹底解説

スポンサーリンク
【完全無料】簡単にホームページが作れるStrikinglyの使い方を徹底解説 プログラミング
悩む女性

自分のお店のホームページを作りたいけど、無料で簡単に作れるって本当?難しいのはわからない。。

こういった悩みに答えます

今回はStrikinglyを使ってホームページを作成する手順を紹介します!

この記事はこんな人にオススメ

  • ホームページを無料で簡単に作りたい
  • プログラミングを始めたばっかりでデザインの勉強もしてみたい
  • プログラミング初心者で模写ばかりやっている
 

ホームページを自分のためや知人のために作りたい人は、今回紹介する手順を見ながらぜひ実際に手を動かして作ってみてください

プログラミング初心者で今誰かのサイトの模写ばかりやっているという人は、Strikinglyで簡単に自分のオリジナルサイトを作ってそのサイトを自分でHTMLとCSSでつくる練習をしてみてはいかがですか?

Strikinglyをうまく使って成長しましょう!

それではどうぞ☟

スポンサーリンク

Strikinglyとは

Strikinglyとは2012に誕生した無料ホームページ作成サービスです

Strikinglyの特徴

Strikinglyを選ぶポイントを見ていきましょう

ホームページの公開まで無料でできる

1つ目は、ホームページの作成から公開まで全て無料でできることです

通常ホームページを持つときはサーバーやドメインが必要になりますが、Strikinglyであればそれも必要ありません

サーバー:ホームページを表示するための情報を保管しておく場所

ドメイン:ホームページの住所のようなもの

プログラミングの知識がいらない

2つ目は、プログラミングの知識がいらないということです

通常、ホームページをつくるときは専門知識が必要なので高いお金を払って外注することが多いかと思います

しかしStrikinglyを使えば何の知識もなくても直感的に操作することができ、誰でも美しいホームページをつくることができます

テンプレートの種類が豊富

3つ目は、テンプレートの種類です

約57種類のテンプレートから自分が作りたいサイトのイメージに近いテンプレートを選択しカスタマイズすることが可能です

※テンプレートは全て英語ですので自分で日本語を打つ必要があります

動きのあるサイトを作れる

4つ目は、動きのあるサイトをつくることができる点です

動きというのはページをスクロールしたらふわっと文字が出てきたり、背景の写真をスクロール時に固定しておくことを指します

通常、ホームページにこのような動きをつけようと思ったら止まったサイトを作るよりも金額が高くなります

なぜならJavaScriptやPHPといった言語を使う必要があるからです

しかしStrikinglyを使えば何もしなくても動きのあるサイトになるのです!

ECサイトも作れる

5つ目は、EC(オンラインショッピング)サイトも作れる点です

商品をただ並べるだけでなく実際に金銭のやり取りもできるのが優れていますね

お問い合わせの設置が可能

6つ目は、お問い合わせの設置ができることです

お問い合わせというセクションを置いて自分のメールアドレスを入力するだけで

ホームページからお問い合わせが来たときに自分のメールに内容が届くのですからこんな簡単なものはありません

レスポンシブ対応

最後のポイントは、レスポンシブ対応を勝手にやってくれることです

レスポンシブ対応とは、パソコンやタブレット、スマホなどデバイスに合わせてデザインを調整すること

通常、パソコン用・スマホ用と作り分けなければいけない作業をStrikinglyは勝手にやってくれます

サイトを作る人は何もしなくてOKです

 

Strikinglyの注意点

ここまでStrikinglyを選ぶべきポイントを紹介しましたが、無料ゆえに完璧ではありませんので注意点も紹介していきます

広告がつく

1つ目の注意点は、Strikinglyの広告が自分のサイトにつくということです

広告を消すには有料会員にならなければいけません

しかし有料会員になるとできることも増えるので、ずっとStrikinglyでサイトを運営していくようであればアップグレードもアリかもしれません

$8/月〜利用可能です

カスタマイズが少ない

2つ目の注意点は、カスタマイズでできることが少ないということです

例えば、文字に枠を付けたい!と思ってもできません。。。

ただ、できることが多すぎても最初は分からなくなってしまうのでちょうどいいのかもしれません

 

以上Strikinglyの特徴をまとめました

個人的には選ばない理由はないかなと思います

無料でできるので試してみるだけでもいいと思います

ということで次から使い方について手順を追って説明していきます!

 
スポンサーリンク

Strikinglyホームページ作成の手順

無料会員登録

まずは無料で会員登録をしましょう

START FOR FREEをクリックしてStrikingly公式サイトへ行きます

Strikingly

※画像が正しく読み取れない場合はこちらのURLからでもいけます

→ Strikingly.com

 
Strikingly

名:自分の下の名前やニックネームを入力

Eメール:メールアドレスを入力

パスワードを設定:すきなパスワードを入力

 

メールが届いたら記載されているURLを開きます

これで登録完了です!

 

テンプレート選択

ではさっそくひとつ目のサイトを一緒に作ってみましょう!

まずはテンプレートを自分の希望に合わせて選びます

Strikingly

全てから見ると57種類も出てきてしまうのでメニューからストアやビジネスなどジャンルを絞っていきましょう

気になるテンプレートがあったらマウスを持っていき「例を表示する」をクリックしてプレビューを見てみましょう

Strikingly
 

私は今回、以下のような設定とターゲットを決めてサイトを作ります

サイトの内容:パーソナルジム

サイトを作る目的:インターネットからのお問い合わせを増やし会員を増やす

性別:女性(OL)

年齢:20代〜30代

どうしてこのような設定を作るのかはこちらの記事で紹介しています

 

パーソナルジムなので近い”GOLD’S FITNESS”というテンプレートを選んでみました

決定したらこのまま使うわけにはいかないので「編集を始めましょう!」からカスタマイズをしていきます

Strikingly
 

カスタマイズ

スタイルの変更

まず編集画面に切り替わったら「スタイル」を選択します

Strikingly

スタイルをクリックすると下のような画面になるのでカラーテーマを選択しましょう

Strikingly

次にオレンジの枠の中を変更します

Strikingly

今回、私は#9f7f4fという色をメインカラー、白をサブカラーにしました

「#数字と文字」とはカラーコードと呼ばれていてWeb上で表現される色を指定するためのコード

下記のサイトを参考にサイトにあった色を選んでみてください!

Webセーフカラー web216 - Web Safe Colors
Webセーフカラーのカラーコードが一目でわかるWEB色見本

オレンジの枠の上の青〜黒でも選択可能ですが、オレンジの枠から選択した方がいろいろな色を選べます◎

 

カラーテーマの他に変更しておきたいのは「ヘッダー&ナビゲーション」です

ここでは上のメニューのスタイルを変更できます

Strikingly

クリックすると下記のメニューが現れますので好きなスタイルを選択してください

今回私は上部にしてみました!

Strikingly

他のスタイルも余裕があったらいじってみてください!

 

セクションの編集

さて次はいよいよメイン部分の編集になります

今回はHOMEを使って編集の仕方を説明します

他のセクションも同じやり方で編集することができますので、手順を確認しながら進めてみてください

セクションとは、HOMEやABOUTなどのかたまりやグループのこと

 
レイアウトを変更

まず初めにレイアウトの変更を行いましょう

先ほどの「スタイル」の画面から「サイト設計に戻る」を選択すると下の画像のようなページになりますので

オレンジ枠の「レイアウト」を選択します

 Strikingly
※画像とテキストか変更されていますがテンプレートのままで大丈夫です

するとA, B, Cと様々なタイプのレイアウトを見ることができます

今回私は、デフォルトのレイアウトが好みだったので変更していませんが右寄せや左寄せなども選べます

次にレイアウトにマウスを乗せるとヌルッと出てくる詳細設定を開いてみましょう

Strikingly

すると上の画像のようなメニューが出てきますので好きなスタイルに変更しましょう

変更したら「保存」忘れずにクリックします

 
画像を変更・アップロードする

続いて大きな画像を変更してみましょう

HOME ▶︎ 背景 ▶︎ 画像をアップロード

と進み下記の画面へいきます

好きな画像をダウンロードしファイルをドラッグまたはアップロードしましょう

これで完了です!

 

※ホームページを実際に使う場合は著作権フリー素材か自分の写真出なければ利用できません

フリー素材をお求めの方、好きな画像が見つからない方には、私が愛用するフリー画像サイトpixabayを紹介します

pixabay

真ん中の検索欄に「フィットネス」など欲しい画像のキーワードを入れて探し、無料ダウンロードをしましょう

 
テキストを変更

次にタイトルとサブタイトルを変更しましょう

他のセクションのテキストも同じやり方で変更できます

まずは変更したいテキストをクリックします

Strikingly

上の画像で言うと黄色くなった部分が変更可能ですのでテキストを打ち込みましょう

Strikingly

変更できましたか?

できたらサブタイトルも変更しましょう

私は「全ての女性は美しい」に変更しました

 
ボタンを変更

続いてボタンを変更しましょう

ボタンの上にマウスを持っていって「編集」をクリック

オレンジ枠の「リンク」と「テキスト」を変更します

Strikingly

今回私は、リンクはそのまま、テキストは「START NOW」から「LEARN MORE」に変更しました

リンクにはhttp://◯◯.comを入れてもOKです

Strikingly

できましたか?

 
背景の調整

画像、テキスト、ボタンの変更を終えたら再度「背景」を選択します

Strikingly

クリックしてメニューを開き「Tt」を選択すると背景の画像とテキストの表示が変わりますのでテキストが見やすいように変更して保存をクリック

 

セクションの削除・追加

編集の仕方がわかったら、セクションの削除の仕方と追加の仕方も見ておきましょう

 

まず削除するページを左のメニューから選択します

今回私は、FACILITIESはいらないな〜と思ったので削除してみます

選択したページをクリックし、×にマウスを持っていきます

Strikingly

すると下の画像のように「このセクションを削除」と出てくるので選択

確認のアラートが出てくるのでOKを選択

完了です!

 

セクションを追加するには左のメニューから「セクションを追加」を選択します

Strikingly

するといろいろなスタイルが出てくるので追加したいセクションスタイルを選択してクリック

Strikingly

追加したセクションは「」で移動可能です

これでセクション追加もできるようになりました!

必要なセクションをどんどん追加し自分のホームページにしていきましょう!

 

プレビューを見る

ホームページがある程度できてきたら実際にどう表示されるのかみてみましょう!

左のメニューから「プレビューサイト」を選択

Strikingly

すると新しいタブに今作ったサイトのプレビューが表示されます

全体を見て編集を加えましょう

 

公開

さあ!素敵なホームページが出来上がったら公開してみましょう!

と、その前にもう一つだけやり残したことをやってしまいます

「設定」をクリック

すると「ドメイン」というページが出てきます

無料会員の場合「http://ここが変更可能.mystrikingly.com」というドメイン名(URL)になりますので

変更可能な部分を変更しましょう

※変更しない場合、「site-数字」がそのまま使われます

変更ができたらサイトの設計に戻ります

 

いよいよ最後のステップです

左のメニューから「公開」を選択

Strikingly

すると下の画面になるので、タイトルとカテゴリーを変更して「公開する」をクリック

Strikingly

終了です!!

お疲れ様でした〜!

 

公開後はマイページから編集、新規サイトの追加が可能です

Strikingly
 
スポンサーリンク

まとめ

ここまでお付き合いいただきありがとうございます!

素敵なサイトはできましたか?

プログラミング学習をしている方は今作ったサイトをHTML, CSS, JavaScript(できなくてもOK)などを使って自分で作ってみてください◎


【ランキングに参加しています】
面白かった!参考になった!という方は下のボタンをクリックしてくれると筆者が喜びます!

ブログランキング・にほんブログ村へ 人気ブログランキングへ
プログラミング
スポンサーリンク
この記事をシェアする
KANONをフォローする
kanonblog

コメント

タイトルとURLをコピーしました