Home > スポンサー広告 > 無料ホームページ作成サービス「WiX」を触ってみた

スポンサーサイト

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

Comments: -

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: -

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/196-d679a644
Listed below are links to weblogs that reference
スポンサーサイト from バニデザノート

Home > スポンサー広告 > 無料ホームページ作成サービス「WiX」を触ってみた

Home > プロモーション > 無料ホームページ作成サービス「WiX」を触ってみた

無料ホームページ作成サービス「WiX」を触ってみた

wix.jpg

wixは無料ホームページ作成サービス。名前は知っていましたが、はじめて触ってみました。
今回はその感想と、コツっぽいところを書いてみたいと思います。

とにもかくにもサインイン&ログインしてみる

ログインすると、どんなサイトをつくりたいかのカテゴリーを聞かれます。
ここで、方向性を決めて「次へ」をクリックするとおすすめのテンプレートが表示されます。

わたしは、全体が見たかったので「すべてのテンプレートを表示するにはこちら」をクリック。

テンプレート選択画面

こんな感じで、ここからもカテゴリーから選択することも可能になっています。
「表示」クリックでサンプル表示、「編集」でテンプレート編集画面になります。

ここで、作業を終了させると何も保存されないまま終わります。
日本でよく見かけるサーバー型CMSだと、
[登録]→[URL発行]→[テンプレ編集] というような進み方をしますが
WiXの場合は [登録]→[編集]→[保存]→[公開] という手順を取っているようです。

どのテンプレートの編集ボタンを押しても、テンプレート確定にはなりません。
テンプレートを保存した時点でたぶん確定みたいな感じです。

WiXのテンプレートは英語ベースのテンプレートを日本語化した印象
▲テンプレ説明文は英語が多い印象でした

▲きっと英語のタイポグラフィだと可愛いんだろうなぁな文字崩れ

▲予約システムよく出来てる。

▲こういうのも、日本語だともうちょっと調節必要

WiXのテンプレートは英語ベースのテンプレートを日本語化していて
ベース文字は明朝体。クオリティ高そうなデザインはたぶん日本語じゃ崩れるんじゃないかと思うレベルです。
日本語化した途端、例えて言うなら、ヴィトンとかエルメスとかのサイトで見かける
謎の書体で作らているちょっと信用の薄いサイト(ブランドはハイブランドなのに!)といったセンスです。英語の文字組はかっこいいのになぁ。とちょっと残念な印象でした。

なんとなく、英語の sans-serif も serif もウェブでは綺麗だからたぶんそうなっているのかなとおもいます。まぁ無料ですし英語圏でスタートアップしたサービスだしこればっかりはしょうがないですね。

なんだか進めなくなってしまって、日本国内サイトの事例を見に行った

見に行ったところ、あんまりテンプレ通りに作ってない・・。
これは、もしかしたらエディタが使いやすくて、白紙から作るのかも、とおもいました。
テンプレート選択画面に「白紙テンプレート」が・・・ある!
ということで、白紙テンプレートを開いてみました。

▲白紙のテンプレートはこんな感じ。完全白紙のものと、枠があって画像やテキストをいれていけるようなもの。


上から3分割されていますが、縦に上からヘッダ、コンテンツ、フッタ部分になっています。Museっぽいですね。何から始めたらいいかわからない感がすごいですが、だいたいこういうのは「追加」でなんとかなるのかな。
1カラムサイトを作ろうと思ったので、「追加」から「ストリップ」を追加。

そこからはだいたい動きを把握できたので、サクサクとデザインを作成できました。
ショートカットも豊富ですし、固定ヘッダーもページ内リンクも設定できて便利。道のり長かった・・。

独自のデザインをサクサクやるときは、テンプレ選択画面を素通りして
[白紙テンプレ]→[コンテンツ入れ込み] のほうが早いかもです。

WiXエディタをちょっと紹介

wixエディタでは、「追加」ボタンを押すことでどんどんデータを追加していけます。
使いそうなのは「ストリップ」といわれるページセクションや、四角形などの形状を追加できる「シェイプ」、テキストなどでしょうか。
「ストリップ」は、横幅100%の割り振りエリアで、カバー画像や、1枚ページデザインの際に利用できます。パララックスもできるみたいです。

ヘッダーなどに置くメニューは、ページと連動していて、リンク漏れがなさそうです。外部ページなども追加できます。

「エディタ切替」ボタンから、スマホサイトの表示も編集可能です。白紙からつくると崩れますので調整が必要です。


ストリップなども含めて、ツールボックスの「サイズ」で数値指定できるのは親切でよいです。


右クリックなコンテキストメニューが出現!べんりです。
各パーツに対して、CSSアニメーションをつけることもできるようです。


アニメーション効果。基本的なのはだいたい揃ってる。

出来上がったサイトはこんな感じ

細かなことを知らなくても、ここまでつくれるのはすごいです。
ただ、写真の表示が遅れたり、重めな印象も否めないです。

→ばにがつくってみたサンプルサイト
メールアカウント名.wix.com に強制的にURLを設定されるの地味につらい・・。本格的にやる際は有料独自ドメイン使うほうがいいっぽいですね。


スマホサイトの表示調整もしてみました。スマホサイトの表示調整は思った以上にやりやすかったです。指定する場所が限られているのがいいですね。

編集のコツ
テンプレートで思うものがなければ白紙からつくる!

ざっくりテンプレートを見渡してみて、思うものがなければ白紙から作りましょう。
テンプレートというより、設定サンプルと見たほうがいいような気がします。
テンプレート一覧から編集画面に移動して、欲しい動きだけチェックしておいて自分のページで実装がいいのかなと。

とにかくストリップ!

ストリップでBOXをつくることでデザインが捗ります。

ストリップが作れたら、背景を設定!

ストリップに背景を設定していきます。パララックスや、動画の背景も入れられるみたいです。背景画像は、ご自身で用意されたものでもOKですし、サンプル写真も数多くストックされています。

だいたいの枠ができたら、アプリから欲しい追加機能を追加!

フォームや、コメント機能、ギャラリー、イベントカレンダー、サイト内検索、FAQ、カート機能(一部有料?)、予約機能(一部有料?)など、ウェブで必要なものは一通りそろっているようです。

保存して公開!

デザインを保存して公開します。独自ドメインは有料のようです。


最初のテンプレートを見た時にくじけないことが大事です。エディタの白い画面を見た時にもくじけないことが大事です。
そこで挫けなければ、どんどんコンテンツを追加して、ちゃんとhtml5ベースのデザインのサイトが出来上がります。
まぁ、挫けそうになったのは、ウェブ制作をふだんデザインカンプとwiswig系も使わずにコーディングしているせいで「これどうやってるんだろう」とか「日本語で崩れたら嫌だな」というドキドキが強くて、進めなかっただけかもしれません。
もしかしたら、知識のない人のほうが、
なんとなくで作っていけるのかもしれません。

ウェブ製のデザインエディタとしては、とても作りこまれていて、ショートカットもできて、細かな設定と、Webfontでうまくやっているなぁとおもいました。テンプレートもたくさんあって、準備されているように見受けます。
ただ、全体的にもうちょい日本寄りになってもいいかもと思いました。これからに期待です。

WiX無料ホームページへはこちらから
関連記事

Comments: 0

Comment Form
サイト管理者にのみ通知する

Trackback+Pingback: 0

TrackBack URL for this entry
http://vanidesign.blog.fc2.com/tb.php/196-d679a644
Listed below are links to weblogs that reference
無料ホームページ作成サービス「WiX」を触ってみた from バニデザノート

Home > プロモーション > 無料ホームページ作成サービス「WiX」を触ってみた

Sponsored Link
▲WordPress初心者向けに、ばにが書きおろしたオンライン授業です。上記バナーから受講いただくと、33%OFF!
ホームページ・ウェブサイトデザイン・制作ならバニレートデザイン事務所まで。Wordpress(ワードプレス)、カラーミーショップのカスタマイズから、レスポンシブ、Retina対応、スマホ用サイトもできます♪デザインカンプのみの納品や、バナーのみの納品などでも受付いたします!お気軽にご相談くださいませ。
Books - 寄稿させていただいた本たち
WordPressデザイン 仕事のネタ帳 見た目と効果を向上させるプロのテクニック
WordPressを利用して、趣味〜お仕事が可能なレベルの実践的な内容になっています。 ブログ風、Pinterest風、CMSとしてWordPressを利用する方法の3つをメインに、さらにこれらを拡張していきやすいような考え方や、きっかけを掴んでいただければという想いで書かせていただきました。担当Chapter:9chapter (メイン3、サブ6。110ページ前後ぐらい。)
【Amazon.co.jp限定】神速Photoshop [Webデザイン編] CC対応 特製PSショートカットステッカー for Mac 付
Photoshopの作業をすばやく行って、デザイン自身に集中できるように。基本動作であっても、考え方としてどのように持っていくか、ということをテーマに書かせていただきました。(担当:本編の全体89のテクニックのうち、23ぐらいのテクニックと、特典PDFの中にもいくつか。)
レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法
「レスポンシブWebデザインテクニックブック プロが教えるマルチデバイス対応の手法」にてCase Studyの1つを寄稿させていただきました!
Popular Posts
Recent Entry
Category
about:vanillate
vanillate

author: vanillate(バニレート)

フリーランスのウェブクリエイター。
wordpressやカラーミーショップのデザインなど、シンプルで可愛いサイトを作っています。






Link
Recommend
レンタルサーバー 【ヘテムル】 なら、 独自ドメイン【無制限】、データベース【50 個まで】を追加費用無料で設定できます。 しかも、サーバー容量は余裕の 42.195GB! 1 つの契約でたくさんのサイトを運営したい方にぴったりのサービスです。
★【カラーミーショップ】なら本当に安心!★
かわいいテンプレートが続々登場するから、初心者のあなたにも安心!
オンラインショップ・ショップブログ・モバイルショップなど、こんなに揃って月額875円~!
有名ショップ様にも多数ご利用をいただいているから、どんどん参考にしちゃおう!
Design Items
上記広告は1ヶ月以上更新のないブログに表示されています。新しい記事を書くことで広告を消せます。