ホームページを作る人のネタ帳

今更だけど超簡単にホームページが作成できるWixを使い倒してみたけど本当に簡単だった

wix(ウィックス)
というわけで今回は、Webサイトを手軽に作れるWix(ウィックス)に焦点を当ててご紹介。
今更なんですけども、今回はとりあえず適当に私のポートフォリオでも作ってみましょうか。

ちなみに3時間くらいでつくったやつがこれ


王様はコンテンツ

まずは登録


画面右上の「ログイン、新規登録」ボタンから登録が行えます。
ログイン、新規登録
メールアドレスとパスワードで、新規登録を行ってもよし、私は面倒臭いのでとりあえずGoogleアカウントからログインします。
サイトの作成
もちろんまだ何も作っていないので、今直ぐサイトを作成から作成開始です。

テンプレート作成


作成を開始すると、テンプレートを選択するページに切り替わります。
テンプレートの選択
それぞれのカテゴリには、さらに細かく分類されたカテゴリがありますので、正直ここでめっちゃ悩みます。
wixテーマのカテゴリの選択
とりあえずブログでは、バックグラウンド全画像とかやってないので、そっち系のテンプレートを探しました。

ぶっちゃけここでめちゃくちゃ時間使いました。。。。

このへんかなぁなんて見ながら探すんですが、テンプレート豊富すぎ。

テンプレート選び
この左上のやつで行こうかと適当に決めました。

ちなみにいくらでもあとから変更はできるのでどんどん確認していったほうが早いかもしれませんね。

編集モード


さて、テンプレートが決まったらいよいよ編集モードに入ります。
編集モード

とりあえず左上のテキストあたりから変更。
テキスト変更
テキスト編集か、ダブルクリックで直接編集できますね。

テキスト編集

タイトルの下に適当に文字入れたかったので、テキストの追加を行います。
テキストの追加
左のプラスボタンから、追加したいものを選択すればOKですね。

ちなみにテキストにはアニメーション効果も追加ができたり、影や、フチありといった装飾も出来ます。

テキスト装飾
テキスト装飾

アニメーションはテキストをクリックから
テキストアニメーション

下に、さらにテキストを追加したいと考えました。
テキストの追加
ただ、普通にテキストを追加するだけでは、見えにくいので、黒い透過レイヤーをはさみたい。

図形の挿入

ボックス挿入後、スタイルの変更も行えます。
ボックスを挿入後、スタイルの変更も行える
例えば丸角や、グラデーションのかかったボックス、影のついたボックスなど、多種多様。ここで色の編集等も可能です。

この上の画像のように、ボックスごとに編集が可能ですし、ボックススタイル1、2、3といったパーツをカスタマイズしておくことで、全てのボックスを統一することが出来ます。

統一しておくことで、あとで変更がある場合でも、一箇所のボックススタイルを編集すれば、全て適応されます。

これは、ボックス以外にも、テキストの装飾やスタイル、画像の装飾やスタイルにも同じように使われているシステムです。

さらに画像に関しては上記のスタイル編集と、画像編集の2種類が用意されています。
画像編集とスタイル編集
画像の編集とはその名の通り、簡単な画像編集が行えます。
画像編集
スタイル編集に関しては、私が制作したサンプルページを参考にしてもらうとわかりますが、画像の周りにシャドウを入れたり、画像を丸角にしたり、セロハンテープで貼ったようなものにしたりできます。

画像に関しては、Wixが用意した無料素材画像もてんこ盛りで入ってます。というか相当な数なので、選びたい放題ではないかと思います。当然ながら外人ばっかりですけども。
画像の挿入

別のページへの移動に関しては左のページを開き、各種ページをクリックするとページを移動して編集が出来ます。また、ドロップダウンメニューを作成したい場合は、ドラッグアンドドロップで、入れ子にするだけでOKでした。便利っす。
ページの構成

色々追加


例えばFacebookのいいねボタンや、シェアボタン、Googleプラス、Twitterのフォローボタン、及びツイートボタン、Youtubeのチャンネル登録ボタン等、追加ボタンの「ソーシャル」から簡単に追加出来ました。
追加ボタンからの操作

また、ブログを押すと、ブログシステムも導入出来ます。
ただし、無償版では画像アップロード領域に難があるので、導入するなら上位プランにする必要があるかもしれない。

こちらのブログシステムも、デザインが自由にカスタマイズが可能になっている。

ソーシャルの下にはアプリの追加ボタンがあるけど、ここからお問い合わせフォームや、Googleマップ、ペイパル、Skypeなどのアプリが追加できるようになっている。

また、WixAppからは、さらに多様なアプリが導入できる。
とりあえず検索窓からFacebookや、Twitterを検索すると、いいねボタンやツイートボタンを追加することが可能だ。
WixAppの追加
ちなみにドロップアンドドラッグで好きなところに設置できます。
ボタンの追加

タブのWixアプリには、日本人向けのアプリが収められています。
Wixアプリ
Googleカレンダーの挿入、ペイパル、Googleアドセンス、Googleマップ、いいねボタン、ソーシャルメディアボタンバー、インスタグラム用フィードの読み込み、Googleプラスボタン、動画プレイヤー、Gドライブ共有、Dropboxフォルダの共有など、様々なものが収録。

正直、このタブ以外は英語が多いのであまり使えないが、Wixアプリタグだけで、ある程度やりたい事は全てできる設計になっている。

そんで適当に3時間位かけて作ったサンプルページが以下です。
王様はコンテンツ

レビュー書くために、各種機能をひと通り覚えるまで2時間位かかった気がするので、次は多分1時間もかからずに作れると思う。

というかこんな便利だったんだね。

体感として、夜中の0時過ぎるとなんとなくツール自体が重い気がする。それ以外は、もうショッピングカートとかも簡単に設置できるので、急いでいる時とか、とにかく早く作れるかも。

あと、最初にテンプレート選びましたけど、正直慣れればテンプレートが要りません。
白紙から作っても余裕で普通のウェブサイトと同じように作ることが可能です。

ウェブサイト制作とかわかんないけどWordくらいなら触れるという方なら、すぐ作れるんじゃないかと思います。
Wix.com

お試しあれ。
@yamada_nt
Posted by@yamada_nt
スポンサードリンク

Comments 1

There are no comments yet.

Hiroki  

新エディタは

新エディタだともっと簡単ですよ
追記
1日にどの位訪問者がいますか
Wix ヒットカウンター
というアプリを使うと
簡単に分かります

2016/01/11 (Mon) 10:43

Leave a reply