SIRUHAのサブブログ

手作りの本革システム手帳、帆布バッグを販売しているSIRUHA。生き方、考え方、やりたいことの見つけ方、アイデア発想法、勉強法など、本当に大切だと思うことについてSIRUHA目線でまとめていきます。

無料の「Wix」を使って商品紹介ページ作ったらお金払って広告消したいと思うぐらい良い感じになった。

無料でホームページが作れる「Wix」

CMなどもしていて有名ですよね。

 

SIRUHA手帳の商品紹介ページを作りたくて「Wix」を使ってみました。

すると、専門知識のない素人の僕でも思った以上のサイトを作ることができました。

 

この記事で紹介したサイトです。

www.siruhanote.jp

  

作ったサイトの一部を貼っておきます。

 

f:id:SIRUHA:20160114160948p:plain

SIRUHA手帳

 

こんな感じです。

個人的にかなり満足しています。自己満かも(汗)

僕が作ったサイトの完成度は置いておいて、Wixを使えば知識がなくても思った通りのサイトを作ることができます。

素人がページ数の少ないランディングページやaboutページを作る時にオススメのサービスだと思ったので紹介させていただきます。

 

 

プログラムなどを一切使わずに、素人でも思い通りのページを作れます。

今回の商品紹介ページを作成するために、HTMLやCSSなどのプログラムに関する知識は一切不要でした。

大まかなサイトデザインもボタンも問い合わせフォームなどもテンプレートを選択するだけです。

そこから、デザインを自分好みにカスタマイズしていきます。

デザインの変更はかなり自由度が高い

テンプレートから選択すると言っても、その後かなり細かく変更できるので、思った通りのデザインにすることができます。

 

 

例えばボタンのデザインを変えたい時は、以下のようにテンプレートから選べます。

f:id:SIRUHA:20160114210234p:plain

 

もっと細かく選びたい時は、こちらのように透明度、枠線、角のアール、影などを変更できます。さらにボタンにマウスが乗った時の効果(ボタンや文字の色を変えるなど)やアニメーションを加えることができます。

f:id:SIRUHA:20160114210639p:plain

 

文章、画像、ボタンなどの配置はドラッグするだけで自由に動かせます。

移動は基本的にマウスでドラッグするだけなのでとても簡単です。

 

デザイン性が高く、かなり本格的なサイトを作れる

用意されているテンプレートの質が高く、ボタンなどにはアニメーションで動きを加えることができるので、かなりおしゃれでかっこいいページを作ることができます。

 

無料版に表示される広告もそれほど目立たない

無料版だとWixの広告が入りますが、控えめなのでそれほど気になりません。

SIRUHAでは大切な商品紹介ページに使っているので広告は外したいのですが、あまり目立たないのでもう少し無料版で様子を見ようと思います。

PC表示 

f:id:SIRUHA:20160111085301p:plain

スマホ表示

f:id:SIRUHA:20160111090055j:plain

 ちなみに有料版だとプランにもよりますが、広告削除、独自ドメイン、Googleアナリティクス、ネットショップ機能、ストレージ容量UP、プレミアムサポートなどの機能が増えます。

 

看板になるような気合を入れて作りたいページに

Wixは最初にページを開く時に全てのページを読み込むようになっているので、ページ数が多くなるようなサイトだと表示が遅くなってしまうようです。

なのでブログなどには向いていないかもしれません。

デザインはとても良いので、商品紹介ページやaboutページなど魅力伝えていくためにとても重要だけどページ数は必要としないようなサイトの作成にオススメだと思います。

 

楽しかった

特に難しすぎてしんどいことはなく、マウスでデザインや配置を自由に変えられるので、作っていて楽しかったです。作業が捗りました。

 

他だと、「こうしたい」という明確なデザインが決まっていない状態で試行錯誤しながらサイトのデザインを作っていこうとすると、プログラムなどにかなり時間を取られてしまうと思います。

Wixだととりあえずなんとなくで始めても、移動や選択でカンタンにデザインを変更できるので、試行錯誤しながらサイトデザインを作っていくのにとても便利だと感じました。

 

サイトを作る前の下書きとして

直感的に操作でき、デザインの変更が簡単なので、サイトデザインの構想を練るときの試作用のツールとしても魅力的なのかなと思ったりもしています。

WordPressは使ったことないのですが、専門知識が必要だったりで、サイトを作ることだけで消耗してしまいそうです。

そんな環境でデザインを考えたり、試行錯誤して変更をたくさん加えていくのは大変だと思います。

でもサイトにとってデザインはとても大切。訪問者にとって使いやすく魅力的なページを作る必要があります。

 

いきなり本番で難しいことをしながらデザインやレイアウトを考えていくよりも、まず簡単なWixで最高のデザインを作ってみる。完成したデザインをWordPressで再現する。そうやっていくと良いのかなと考え中です。

WordPressの方がSEOや表示速度、コスト面などにメリットがありそうなので

 

Wixは試作に。そんな使い方もありなのかも

 

いつかはWordPressもやってみたい

 ちゃんとした知識があれば、やっぱりWordPressでのサイト運営がいいのかなと思います。

ローコストでSEOも良くて表示速度も速い、他にもかなりなんでもできるようです。

ただ、プログラム、セキュリティ、サーバーなど素人にはすこし難しそう、、

勉強していつかはWordPressでのサイト運営にも取り組んでいきたいと思っています。

 

ちなみにWordPressには2つのタイプがあるみたい

一つはサーバーとドメインを自分で用意してWordPress.orgというソフトをインストールして使うタイプ

もう一つはWordPress.comというサーバーやドメインを用意しなくても使えるタイプ(無料ブログと同じ形式)

前者の方が自由度が高くいろいろなことができるようですが、サーバーとドメインを用意するためには費用がかかります。

後者の方が無料で簡単に始めることができます。

 

最初はWordPressに慣れるためにWordPress.comで練習して、いつかメリットの大きいWordPress.orgでサイトを運営できればと考えたりしています。

 

 

 

 

画像サイズの最適化は必須

こういったページを作るのは初めてだったので、使用する画像のサイズはそのままで使っていました。

完成してサイトを表示させてみると、読み込みにかなり時間がかかっていました。

表示速度が遅いのは致命的なので調べてみると、Wixブログの以下の記事が参考になりました。

ja.wix.com

サイトの読み込みが遅いときの、サイト側の問題としては以下のような点が挙げられています。

  • 画像を最適化してない
  • コンテンツが多すぎる
  • フォントや色を多用している

など

表示速度を改善するための方法として、一番手軽なのが画像サイズの最適化ということなので、紹介されていた以下の画像最適化ツールを使ってみました。

tinypng.com

英語のサイトですが、とても簡単なので英語がわからなくても大丈夫でした。

中心にある「Drop your .PNG file here」をクリックして、PNGファイルをドロップすると、あっという間にファイルを圧縮してくれる優れもの。「Download」をクリックして圧縮されたファイルをダウンロードすることができます。無料で使い方もいたって簡単!

サイトが重い?読込み速度を改善するためのヒント - Wixブログ

 

このツールを使って画像サイズを最適化すると、見た目の劣化はなく、表示速度がかなり改善されました。

 

 

まとめ

  • Wixは知識がなくても、自由におしゃれなサイトを作れる。
  • ページ数が多いと重くなるので、商品紹介ページ、aboutページなどのページ数が少ないサイトの作成に
  • 表示速度やSEOなどに不安があるので、できるならやっぱりWordPressが良さそう(用途次第)

 

素人が勉強せず、いい感じのサイトを作りたい場合にオススメです。

あと直感的で簡単なのでサイトのデザインを考えるときにとりあえずWixで構想を練るのもありなのかなと思います。

 

 

知識がなくてもいい感じのサイトが作れる「Wix」を紹介させていただきました。

 

ja.wix.com

 

ja.wordpress.com

 

ja.wordpress.org


f:id:SIRUHA:20170128173009p:plain