スポンサーサイト

  • --/--/--
  • このエントリーをはてなブックマークに追加

スポンサーリンク

上記の広告は1ヶ月以上更新のないブログに表示されています。
新しい記事を書く事で広告が消せます。

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

  • 2015/03/24
  • このエントリーをはてなブックマークに追加

スポンサーリンク

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

ちなみに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

お試しあれ。

スポンサーリンク

トップへ戻る

Twitter版のネタ帳では毎週月曜~金曜までWeb屋さんに役立つ色んな情報や単なるネタまでをつぶやいています。

関連するエントリー

コメント

この記事にコメントする人はクリック

コメントポリシーをお読みください
管理者にだけ表示を許可する

Hiroki 新エディタは

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

2016/01/11 Mon 10:43| |

トラックバック

この記事にトラックバックする人はクリック

2chまとめ新着記事一覧【まとめBUZZ!】

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

まとめBUZZ!:2015-03-26 17:07

FC2Ad

広告


IT・Web業界の求人なら転職サイトgreen(グリーン) ホームページテンプレート、WordPressテーマ、Facebookページテンプレートならクラウドテンプレート ネットマーケティングとは│ネットマーケティング検定 SEOコンサルティング&SEO対策 無料レスポンシブWebデザインテンプレート 広告主募集

あわせて読みたい
フィードメーター - ホームページを作る人のネタ帳

人気の記事一覧

あなたのブログの再訪問者を増やす50の方法

私の経験から感じた事を書き記します。全てが全てその時々で、正しいとは限りませんが、一つの指針としてお使いください。因みに全部リスト化すると230くらいありましたが、それはきっとセミナーとかでやるかなぁと。

http://e0166.blog89.fc2.com/blog-entry-824.html

あなたの生活を確実に拘束し時間を浪費させる動画50

今回は生産性を向上させる事ばかり考えて記事を書いてきたので、逆に年末にかけて忙しい皆さんの時間を出来るだけ拘束し、忙しさを倍増させるものが無いかを考えました。その結果、動画で行こうと言う事になったのが1ヶ月以上前。動画閲覧本数はおそらく600本以上。その中から、おもしろそうなものを50個ベストチョイスいたしました。

http://e0166.blog89.fc2.com/blog-entry-820.html

webデザインのセンスを磨く○○系のwebデザインまとめ

webデザインを学ぶならwebデザインから。と言うわけで、今回は海外のエントリを中心に、○○系のまとめをまとめます。

http://e0166.blog89.fc2.com/blog-entry-817.html

jQueryプラグインのベストトレンド総まとめ2010

もはやこの業界ではかなり浸透しつつあるjQuery。今回はそんなjQueryにスポットを当て、本年度紹介された中でも、ホットなトレンドプラグインをご紹介します。

http://e0166.blog89.fc2.com/blog-entry-816.html

ツイッターの日常における35の行動パターン

私が良く見かける35の行動パターンに名前をつけてみようと思う。年末の誰も見てない時に公開しようと思っていた、ただのネタだったのですが、結構時間がかかりこの時期に・・・。

http://e0166.blog89.fc2.com/blog-entry-823.html

ウェブデザイナーのためのウェブアプリ15

OSがWindowsであろうと、ubuntuであろうと、共通のサービスを受けることができるのがウェブアプリケーションです。ウェブデザイナーの中には、自宅ですでにubuntuを利用している人も多い。また、Mac、Windowsと、各自それぞれの使いやすい物を利用していると思います。

http://e0166.blog89.fc2.com/blog-entry-784.html

愛用するGoogleChromeエクステンション12個

この2年でノートPC2台購入。自他のPCはクラッシュしてリカバリー。会社のPCは新しいのがあたり、再セットアップ。そんなこんなで、会社はまぁともかくとして、とりあえず全PCが比較的3ヶ月に一度リカバリーしてもいいように、自分用にメモとして残しておきます。

http://e0166.blog89.fc2.com/blog-entry-784.html

文章や会話のプレゼンテーションを向上させる方法

文章力がないためにプレゼンに失敗した、会話がうまくできずにプレゼンに失敗した。こういう経験はなかなか無い。なぜなら多くの場合、失敗したことに気がつかないからです。

http://e0166.blog89.fc2.com/blog-entry-802.html

サイトの裏側の意識を変え売り上げをアップする方法

ネットショップ運営者が、あることをちょっとだけ始めてみただけでわずか5ヶ月で売り上げが3倍になりました。はたして、webサイト運営がどのように変わったのでしょうか。。

http://e0166.blog89.fc2.com/blog-entry-749.html

webサイトのリピーターを増やすさりげない5つのコツ

多くのビジネスサイトのアクセス数を支えている大手検索サイト、Yahoo、Googleのアルゴリズムが変わる事で、突然商売がひっくり返る事態を回避する方法。

http://e0166.blog89.fc2.com/blog-entry-746.html
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。