前回はデータベース連携の機能を紹介しましたが、今回はページ内の要素の表示・非表示をボタンクリックで切り替える方法に挑戦してみます。

また、それ以外にも公式サイトにあるデモをご紹介します。

Wix Codeは独自のJavaScriptを使いますが、サンプルコードもあるので
すぐに導入が可能ですよ。

デモ1.ボタンクリックで画像を切り替える

ボタンをクリックすると、画像が切り替わるシンプルなデモです。

動作デモ

サンプルコードを実際に組み込んで動かす方法

こちらのサイトの一番下にある「Open Editor」ボタンをクリックすると
自分のWixの画面に組み込む事が可能です。

■Example&Wixへの読み込み

↑「Open Editor」の場所はこちらです。クリックするとWixのログイン画面が表示され、ログインをするとサイト内のエディターで表示をしてくれます。

設置するためのコード

このサンプルで記述するJavaScriptは以下の内容になっています。

let showing = 'outside';

export function theButton_onClick(event) {
	if (showing === 'outside') {
		$w('#theImage').src = "image://v1/画像名が入ります。";
		$w('#theButton').label = "Look Outside";
		$w('#searchVLine').hide();
		showing = 'inside';
	}
	else {
		$w('#theImage').src = "image://v1/画像名が入ります。";
		$w('#theButton').label = "Look Inside";
		$w('#searchVLine').show();
		showing = 'outside';
	}

}

$wと言う独自の変数を使用します。
記述の仕方はjQueryと似ているので、jQueryを触った事がある方は
触りやすいかもしれませんね。

画像を変更する方法

サンプルデモのコードを修正する際に画像の変更方法に迷うと思いますので
変更方法をご紹介します。

↑画像のパスが記述されている箇所をマウスオーバーすると
メディア管理画面表示されます。
表示されたOpen Media Managerをクリックします。

↑通常の画像設定画面が表示されるので
ここから画像を選択すればOKです。

クリック後の画像を切替える方法も同様に可能です。

デモ2.マウスオーバーで吹き出し表示/ハイライト処理

↑このようにマウスオーバーする事で吹き出しを表示し、
画像のハイライトをする事が可能です。

動作デモ

設置するためのコード

マウスオーバーした際に 該当箇所のshow()を呼び出しています。

export function yellowHotspot_onMouseIn(event) {
	yellow.show();
	captions.show(0);
}

export function yellowHotspot_onMouseOut(event) {
	hideAll();
}

実際の利用はこちらも「Open In Editor」から利用してください。
■Example&Wixへの読み込み

デモ3.グリッドレイアウトとタイルレイアウトを切り替える

↑ボタンをクリックすると、
レイアウトを切り替える事が可能です。
サンプルではタイル表示とグリッド表示を切り替えています。

動作デモ

実際の利用はこちらも「Open In Editor」から利用します。

■Example&Wixへの読み込み

デモ4.要素の折りたたみ

↑列をクリックすると
折りたたんでいた要素を表示する事が可能です。

動作デモ

■Example&Wixへの読み込み

デモ5.操作に応じて要素を非表示にする

バックパックに追加できる4つのアイテムのそれぞれがonMouseIn、onMouseOut、onClickイベントハンドラを使用して、各インタラクションの適切な画像を非表示にして表示します。

↑アイテムをクリックすると、バックパックの中に表示されます。

動作デモ

■Example&Wixへの読み込み

デモ6.プリローダー

外部のWEBサイトからのデータ取得など、読み込みに時間がかかるものがある場合に使用すると、Webサイトのコンテンツがロードされていることを知らせる事が可能です。

↑コンテンツが読み込まれると、プリローダーがフェードアウトして
コンテンツを表示します。

動作デモ

実際の利用はこちらも「Open In Editor」から利用してください。

■Example&Wixへの読み込み

まとめ

Wix Codeを使用する事で今までにないインタラクティブなサイトが構築できるようになっていますね。

JavaScriptを触った事が無い人でもサンプルを見ながら操作できるので、
興味のある機能がありましたらぜひ使ってみてください。

Wix.comは2008年にβ版がリリースされてから、現在では世界一億人ユーザーが使う無料ホームページ作成サービスです。
見た目に美しいデザインがドラッグ&ドロップで簡単に作れるのが特徴で、
カスタマイズも直感的に可能です。

ネットに詳しくない方でも使いやすいインターフェイスになっているのが特徴です。

そんなwix.comですが、実はブログも作れるのはご存知でしたでしょうか？

Wix.comのブログはデザイン性が高く綺麗なテンプレートからカスタマイズが可能な事や、
写真や動画がボタン一つで投稿できること、SEO対策としてパーマリンクやメタ情報も設定機能もある非常に高機能なブログサービスになっています。

こんなにすごい仕組みなのに無料なのが驚きですよね。

ブログを始めて見たい方、もしくは今のブログサービスに満足していない方のために、使ってみた様子をご紹介。

ブログの始め方

まずはwix.comのブログ開設ページにアクセスをします。

↑「今すぐはじめる」をクリック

↑テンプレート選択画面から、好みのデザインを選びます。
ビジネス・ネットショップ・写真・飲食店・イベント・美容・健康向けなど16カテゴリ、400個以上のテンプレートから選ぶことが可能です。

↑テンプレートを選んだら、ブログのタイトルや位置を自分好みに変更します。
ドラッグ&ドロップで直感的に操作ができるので、見た目にもこだわる事が可能です。
背景の変更やテキストの修正など、リアルタイムに修正できます。

Liveチャット機能の追加やフォーラムの追加など、機能単位の「アプリ」を追加する事で機能を追加していく事も可能です。

↑ブログ・パーツも設定可能。画面は新着記事を追加する様子です。

↑ブログパーツはその他にも関連記事の表示機能、Facebookコメントの表示なども設定可能です。

これだけ沢山の機能があれば自分好みのブログにカスタマイズできますね！

ブログ投稿に便利な機能

ブログ投稿時の機能も非常に便利なものが揃っていますのでご紹介です。

↑シンプルなブログ投稿画面
ボタン要素をアイコンにする事で画面全体がすっきりとしていて、書くことに集中出来るようになっています。

↑画像のアップロード画面。自分のコンピューターからアップする以外にも
無料フリー素材から選択可能です。
この写真が非常に沢山あるため、写真に困る事はなさそうです。
ビジネスでブログを立ち上げる場合などで、他のサイトで使っている写真と被らないようにしたい場合は、有料のbigstockの写真も割引価格で購入可能です。

↑画像ギャラリーの作成。自動再生のOn/Offやスライドショーの表示時間についても細かく設定が可能。
レイアウトをタイル型に変更する事も出来ます。

↑動画の投稿もボタン1つで可能に。
YoutubeとVimeoからキーワード検索をして貼り付ける事ができます。
その他にもGIFアニメの貼り付けも同じように操作可能です。

↑HTMLタグを挿入したい場合も専用の入力ボックスから可能。
JavaScriptやiframeも挿入出来るので、
FacebookやTwitterのウィジェットや、他のサイトのパーツを埋め込んだりする事も可能です。

↑SEOの設定が記事入力時に可能です。
metaタイトル、metaディスクリプション、記事抜粋を指定する事で検索に引っかかりやすくする設定が可能なのです。
URLパーマリンクの指定、モバイルタイトルも指定出来るようになっています。

↑関連記事の指定が可能。
過去に投稿したブログ記事から検索し、どの記事を関連記事エリアに表示するか指定します。

モバイルエディタ

↑モバイルの見え方は「モバイルエディタ」に切り替えて設定できます。
モバイル版ではブログパーツの追加は出来ないようになっています。

見栄えの調整が主な用途になりそうです。

最後に

ブログは作って終わりではなく、記事を更新してコンテンツを追加していく必要があります。
長く使うために必要なのが使いやすさだと思っていて、
どんなに高機能でも使いづらかったりすると、続けて行くのは難しいと思います。

その点、Wix.comのブログは非常に使い勝手が良く、初心者の方も直感的に使えるので途中でつまずく事なく設定ができると思います。

興味のある方はぜひ使ってみてください。

みなさまはいかがいかがお過ごしでしょうか？

私は今年は
自分と向き合う時間をつくっています。

仕事をしているとどうしても目先の事で忙しくなり、
じっくり考える時間が出来なくなってしまいます。

出来る限り効率的に、
かつファン作りや集客もしっかりやっていきたい物です。

さて、本日はセミナー講師をしたい方やすでにされている方や、
これから集客を始めていきたいと思っている方におすすめの
動作マーケティングについてのお話をしたいと思います。

「動画で自分の価値や情報を伝える」という選択肢があると
影響力を及ぼせる範囲が、非常に広がります。

例えばですが、地方に住んでいて、パン教室のお仕事にされている方が、
「自宅で出来るパン作り動画講座」を作れば、
全国のパン作りをしたい方に情報を届ける事が出来るようになります。

なかなか集客ができる都会に出ていけない方も
自宅や近隣で活動する事が多い方も
「距離」と「時間」と言う制約を外すことができるのです。

動画講座を作ることで、
参加メンバーのフォローに回る事が出来、手厚く対応する事が可能にもなります。

動画講座のメリットを以下にまとめてみました。

全国どこにいても受講可能

やはり地域が遠いとハードルがどうしても高くなります。

遠くにいる人にも、自分の言葉で情報を伝えられるメリットがあります。

セミナーに通うための、交通費・宿泊費が不要

通常遠方から参加する場合は、移動のための電車・新幹線や飛行機代がかかりますし
懇親会などもある場合だと宿泊をしないと帰りの便が無い事も多いです。

私自身も半年以上、毎月飛行機で通った経験があるので
この辺の費用は結構痛いです。

動画は何度でも見ることができます

一度聞いただけでは実践出来ない事も多々あります。（自分の場合はですが・・）
何度も繰り返し聞ける事で、自分の中の腑に落とす事が可能です。

一緒に頑張れる仲間と出会えます

動画コンテンツにコメントが書き込めると、その中で交流が生まれてきます。
コミュニティが生まれれば、自然と人は集まってきます。

これから動画講座を始めたい方へ

Wixビデオを使用する事で簡単に動画のHDストリーム再生、有料配信、定期購入などが可能になります。
インストラクターの方の口座や料理教室のレッスン動画など、様々に活用が可能です。

wixビデオは、ホームページ作成サービスのWix.comが提供しているサービスです。

動画のアップロード方法

動画を直接アップロードも可能ですし YouTube、Vimeo、Facebook から追加も出来るようにになっています。

スマートフォン対応の動画プレーヤー

やはり今はスマートフォンからのアクセス対策が非常に重要です。
スマートフォンで見やすいコンテンツだと、何度もリピートして見れますね。

HD画質のストリーム配信

HD画質のため、画質が重要なコンテンツもしっかりと配信が可能です。

有料配信に対するコミッションは一切なし

通常、有料配信可能なサービスは、何パーセントかはプラットフォームに支払う必要があります。
しかし、Wixビデオをあればコミッションは一切無しとの事。
これは太っ腹ですね。

ライブストリーミングや 360 度動画にも対応

ライブストリーミング対応する事でリアルな今を共有できたり、
360動画にも対応する事で最先端の動画コンテンツ作りが可能です。

最後に

まだ動画コンテンツなんて自分には早い、
「動画コンテンツって言っても何のテーマでやろう…」
とお悩みになる方もいらっしゃると思います。

そんな時は自分の「好き」を載せたらいいなと思っています。

例えば、パン作りが好きで、それをやっていきたい場合。
本当に色々なテーマがあると思います。
例えば、子供と作るパン作り、とか
恋人、奥さん、旦那さんに作ってあげる、とか
お皿の選び方とか
保存の方法とか、
何が好きなのか？パン作りの中でも何に興味が向いているのか？は、
表現して、人に見せると、
どんどんはっきりしていきます。

そうして自分のカラーを出していった時に
この人のレシピを作ってみたいな、とか
この人の話を聞きたいな、って
どんどん興味が沸いてくるんです。

パン作りにかぎらず、占いだったり、ファッションだったり、プログラミンだったり
なんでも同じです。

そして一つのテーマに絞れない場合は、
最初から絞らなくて良いです。

なんとなくぼんやり面白そう、やってみたいな、
これだったら出来そう、って思った事から
発信していって良いんです。

もっと、自分を表現して良いんです。

発信していきましょう。

こんなことみんな知ってるし〜

これくらいみんな分かってるだろ〜

って思っている事ほど、

実は他の人にとっては

へ〜〜〜〜〜〜〜〜〜！！

って感動する事があるんです。

ぜひ挑戦してみてくださいね

・頑張っても集客が出来ない
・商品が思うように売れない
・何をやれば良いか分からない。

読者の皆様もそんな風に思われた事は無いでしょうか。

本日はそんな悩みを解決する一つの手法、特にEメールマーケティングの活用方法をご案内いたします。

集客に繋がるメディア作り

読者の皆様はすでにメディアはお持ちでしょうか？

Facebookや無料ホームページ制作の仕組みを使えば

個人の方がメディアを持ち、情報発信する事が簡単な時代になりました。

しかし、どうせ同じ発信をするなら

将来集客を助けてくれる、良質なコンテンツを作りたいと思いませんか？

今やFacebookのコミュニティやメルマガを使い、

自分のファンと交流をしながら売上を上げる方が増えてきています。
(特に個人の方)

自分たちで商品を販売したり、スキルを提供したりする場合
メディアは命綱です。

知ってもらわないといけない、価値を感じてもらわないといけない。

だけど、商品を進めるような広告の記事は誰も見に行きません。

だから大事な事は楽しんでやること。

こんな楽しい事が出来るよ。
こんな素敵な感想がもらえたよ。

って、自分が面白がってやること。

そうすると、周りの人達も引き込まれて、
質問してきたり興味をもってもらったりしてきます。

そうするとコミュニケーションが発生し、ファンが出来てくるのです。

商品を売るよりもファン作りが先。商品は、ファンが必要としている物を作る

ここでびっくりされた方もいるかもしれません。

商品を作って売ることで、ファンを獲得するんじゃないの？

と思っていませんでしたか。

答えはNo。

ファンが求める物を作って行くのです。

私がとある事で調べ物をした時に、

まだ起業したてのコンサルタントの方のブログを見ました。

その方は最初はそれほど有名では無かったのですが、

次にセミナーをやる、

次は地方に行く。

次は本を出す。

と、次々展開が進んで行くと

おおー！頑張ってるなー！

凄い！チャレンジしてる！

とブログを見ながら興奮していた事があります。

もちろん書籍も購入いたしました。

なので、自分がやっていることをどんどんアピールして

どんどん大きくなっていく姿を見せて上げてください。

そこから濃いファンが生まれてきます。

そして濃いファンとつながり続けるのに、Eメールマーケティングを活用できます。

ファンにだけの特別な情報を提供する

ブログやホームページには掲載しない、特別な情報をメルマガ読者限定で発信していく事でユーザーは興味を持ちます。

特別な情報を提供される喜びがあるため、間単に離れる事もありません。

さらに、メルマガだと返信でメッセージが送れるので

ファンとのコミュニケーションが活発になっていきます。

Wix ShoutOut

これからメルマガを始める場合には、どういったシステムを活用すればよいでしょうか。

お勧めはWix ShoutOutです。

ホームページ作成サービスのWix.comが提供しているメルマガ作成・送信サービスです。

無料なのにHTMLメールまで送れます。

今やメールはスマートデバイスでの閲覧が主流。
スマートフォンに適したメールデザインを作成する事ができます。
テンプレートをポチポチ選んでいくだけで、素敵なデザインが仕上がります。

もちろん、作成もスマートフォンから可能です。

使い方

使い方はとても簡単です。

まず始めにテンプレートを選択します。
テンプレートセール情報、ニュースレター、イベント情報など9タイプから選ぶ事が可能です。

するとWixの操作画面が表示されますので、

テキストや画像をその場で編集する事が可能です。

スタイルを選ぶ事でデザインを簡単に変更可能です。

背景画像もいくつかのパターンから選択可能

デザインが決まったら送信先メールアドレスを指定します。

自分でアドレスを手入力する事もできますが、

Gmail アカウントやCSVからインポートする方法が選べます・

後はメール送信するだけ完了です。

開封率管理

Wix ShoutOutの優れている所は

開封率やクリック率が見れる所

メールってどのくらい読まれたのか、クリックしてWEBサイトに訪問されたのか

わかりずらいですよね。

Wix ShoutOutなら

管理画面から簡単に結果を確認できます。

選べるデザイン

デザインは色々パターンがありますのでぜひWix ShoutOutでニュースレターを配信してみてください。

最後に

濃いファンづくりができるからこそ、
濃い内容のコンテンツが作成でき、
もっと情報を知りたいと言うユーザーの欲求に応えるビジネスが簡単に行えるようになります。

濃いファンがいる事で

SNSなどの情報発信の広がり方も変わってきます。

ぜひ、メルマガを初めていない方は挑戦してみてくださいね。

以上、Eメールマーケティングではじめるファンの作り方　自分メディアの構築でした。

MarkdownでかかれたファイルをHTMLデータでダウンロードできるサイトです。

Markdown 2 Html

マークダウン形式のデータを貼り付けて、make!ボタンを押すとHTMLに変換してくれます。

そのほか、PDFに変換したりも出来るようになっています。

http://md2pdf.higty.xyz/md2html

iTunesやAppleMusicでの音楽ダウンロード販売が無料で出きるWixMusicと言うサービスを教えてもらったのでブログでもシェアします!

ミュージシャン、音楽制作者向けのWEBサイト作成ツールです。

音楽に関するダウンロードやグッズ販売が行える

音楽のダウンロード販売（iTunesやAppleMusic等大手配信サービを含む、120以上の音楽配信サービスと提携）、グッズ販売やプレスキットの作成・提供機能など、音楽配信のワンストップショップが作成できるとの事。

売り上げは100%還元のダウンロード販売

Wixミュージックを使って音楽配信を行う場合には独自の価格を設定することが可能になっています。
手数料が一切かからないのが凄いです。

デザイン選択は44種類

デザインは音楽ジャンル毎にいくつか選べるようになっています。
オープンしたばかりですが、44種類から選べるようになっています。

その他

リアルタイムで楽曲の販売数、再生数、シェア数、ダウンロード数などのデータをグラフで表示し、解析することができます。

どうでしょうか？音楽製作している方にとっては面白いサイトかと思います。
興味のある方は↓のリンクからどうぞ

http://ja.wix.com/website/templates/html/music/1

退会ページって分かりづらくされていますよね。

以下のURLから退会が出来るようになっています!!

Facebook

https://www.facebook.com/deactivate.php

Twitter

https://twitter.com/settings/accounts/confirm_deactivation

Google

https://plus.google.com/downgrade/

Feedly

http://feedly.com/#erase

github

https://github.com/settings/admin

楽天

https://member.id.rakuten.co.jp/rms/nid/vc?__event=delete

Ameba

http://link.ameba.jp/239104/

DIV要素1つでCSSアイコンを表示出来るOne divをご紹介。

サイト自体は2012年からあるのですが、改めてCSSアイコンを作る際に参考にさせていただきました。

HTMLがDIVタグ1つなのとCSSが簡単にダウンロード出来るようになっています。

プログレスバーや矢印など101個のアイコンが使えるようになっています。

興味のある方は下のリンクからどうぞ
One div

本日は、楽天の消費データをYahooショッピング向けに変換してくれるサービス「すごい!商品データ移行」を紹介します。

めちゃくちゃ簡単な移行ツール

楽天csvデータ画像をダウンロードし、Yahoo用csvにデータ変換してくれます。
Yahooに画像アップロードもしてくれるので、簡単に移行が可能になっています。

その他にも、ちょっとした機能がついてます

・禁止ワードの一括置換機能
・商品画像取得機能

現在は個人でも無料で使用できるYahoo!ショピング。これからますます盛り上がって来ると思います。
楽天に出店されている方は使ってみてはいかがでしょうか。

以下のサイトを参考にさせていただきました。
楽天データでYahoo!ショッピングへ移行！便利だった無料ツール３つ

以上、楽天市場からyahoo!ショッピングへの移行が簡単に出来るツールのご紹介でした。

4月18日に発売されたWeb Designing 2014年5月号に私が書いた記事が掲載されました。
今回Webクリエイティブ系ブロガーが厳選するツール＆サービスというお題で原稿を執筆させていただきました。

初めて執筆させていただいたのですが、感じた事は編集者さんの校正がものすごいなぁ。と本当に勉強になりました。

沢山読ませていただいた雑誌に自分が載るのはなんだか嬉しいことです。

目次

特集1：制作を効率化するための24ポスト
Webクリエイティブ系ブロガーが厳選するツール＆サービス
特集2：業務支援アプリ・ケーススタディ
急拡大するB2Bアプリ市場の実態とその可能性
速報！ ぼくらの福岡移住計画 2014 in TOKYO開催レポート
福岡への移住をサポートする「住」と「職」のプレゼン＆トーク
肖像 －Web Craftman’s Portrait－
徳井直生（Qosmo）＿工学博士が挑戦する現実←→仮想のオーバーラップ
ツクルヒト
佐々木健（茶師）＿お茶を磨き、味と香りをつくる
Monthly Focus
実行結果をリアルタイムに反映するコード共有サービス「CodePen」
Web Designing Lab.
JavaScript Lab.＿HTML5のHistory APIを理解しよう
Flash Lab.＿［HTML5オーサリング編］マウス、タッチ、キーボードに対するインタラクションを実装する
Website Front
新規公開およびリニューアルしたWebサイトの中から、WDが今月のベストサイトを選んで紹介します
WF Inside Story
Webマガジン「ハニカム」が提示するユニークなECの表現

Kindle版の方がお安くなっているようです

Kindle版

雑誌版

良かったらぜひお買い求めください