Facebookページにフォームを設置する。

この記事は1年以上前に投稿されました。
公開時の情報を元に記述してありますので、最新版に対しては内容が陳腐化している可能性があります。ご注意ください。

Facebookページに何らかのフォームを付けたいという要望は多いと思います。

先日お客様から、アンケートフォームの設置依頼が来たので、設置方法をまとめておきました。

やり方としてはHiveloSocialAppsの「Form」アプリを設置する形になります。

項目等もある程度自由に設定できるので、中々便利です。

手順

１．HiveloSocialAppsをFacebookへ導入。

前提条件として、どこかのFacebookページの管理人になっておいて下さい。

Facebookログイン状態で、こちらのURLにアクセスします。

https://apps.facebook.com/hivelosocialapps/

Formを選択肢、インストールを押します。

これで該当ページに設置されました。

次にフォームの中身を設定します。

２．タブに表示する名前を設定

該当するFacebookページに移動し、【設定】→【アプリ】と移動すると、

追加済みアプリケーションに【Form】がありますので、【設定を編集】を押すとタブに表示する名前を変更できます。

空欄だとデフォルトの【Form】です。任意の名前を付けて保存して下さい。

３．フォームの各項目を設定

次に【アプリケーションに移動】から、フォームの各項目を設定する画面に入ります。

最初にフォームの見出しや、受け取り先のメールアドレスなど基本事項を設定します。

次に【質問内容の設定】で、お問い合わせフォームの内容を決めていきます。

参考に以下の内容で設定してみます。電話番号以外は必須にしておきます。

質問項目	回答タイプ	※必須
・お名前	テキスト	チェック
・メールアドレス	テキスト	チェック
・電話番号	テキスト
・メッセージ	テキストエリア	チェック

回答タイプは「テキスト」「テキストエリア」「チェックボックス」「セレクトボックス」「ラジオボタン」が選べますので、簡単なフォームであれば十分対応出来ると思います。必須項目も選択可能です。

追加が終わると、こんな感じになります。

この場面では、順番の入れ替えも可能です。

４．確認

実際にFacebookページを見てみると、タブの後ろの方に追加されています。

目立たせたいときは、【タブの管理】から、順番を前の方に変えましょう。

以上で設置は完了です。

５．投稿データを見る。

フォームページの下に、【管理画面】へのリンクボタンがありますので、そこからアプリの設定画面に入ります。【お問い合わせ内容を閲覧する】ボタンが出来てますので、ここから確認します。

送って頂いた内容は、メールで届くのと同時にこちらの管理画面内にも蓄積されます。

複数人で運用するなどFacebook上で管理を完結させたい場合は便利です。

フォームが設置できると、Facebookページの使い道が広がりますね。

お問い合わせ以外にも、アンケートフォームや、申込みフォームなどにも応用できます。

上手に使って、訪問者からのフィードバックを集めてみましょう。

新潟グラム x CSS Nite「Webで使うIllustrator」に参加してきました

先日11月6日に、新潟グラム x CSS Niteに参加してきました。

テーマは「Webで使うIllustrator」

「WebデザインといえばまずはPhotoshop!」って入口からきて、今までPhotoshopメインでデザインしてきました。
が、もとはIllustratorを使う方が多かった自分（パスいじっているのが好き…）。
できたら、IllustratorでもWebデザインするのに、もっと活用できたらいいなってことで、今回初めて参加してみました。

気になったこと・使っていきたい機能などを、忘れない内にメモします。

新潟グラム／CSS Niteについて

【新潟グラムとは】
新潟でデザイン業務に関わる方に向けたセミナーを主催されています。

【CSS Niteとは】
株式会社スイッチの鷹野雅弘さんが主催するセミナー。CSSに限らずweb制作に関する知識を発信するセミナーです。
今回は鷹野さんが講師もされていました。

Web制作の動向

いままでビットマップベースで行っていたパーツの作成を
SVGやWebフォント、アイコンフォントなどのベクター表現や、CSS3を活用することで
マルチデバイスに対応したWebデザインをしていく。

↓

ベクター表現が得意なIllustratorでWeb制作

Illustratorの便利な機能

時間をかけずに、編集しやすいデータをつくれるIllustratorの機能をいくつか紹介されてましたので、その中でも特に気になったものをいくつかピックアップしました。

1 ライブカラーで再配色

ハーモニーカラーをリンク。あとはホイールをぐるぐるまわすだけで簡単にカラーバリエーションができます。
別々に配色する必要のあった「塗り」と「線」も、これで一度に変更が可能に!
配色に悩んでいるときも、これで気軽に別の雰囲気の色が試せますね。

2 文字タッチツール

文字のアウトライン化をすることなく、一文字単位で文字の移動･回転ができます。
今まで文字パレットの数値でいじっていたのを、感覚的にできるのでいいですね!
しかも下位バージョンでデータを開くこともできるそう。
でも残念ながら、こちらはCCのみ対応の機能となっています。

3 段組み設定を使ったgrid対応のワイヤーフレーム作成

段組み設定でグリッド分割し、さらにその分割したオブジェクトを段組み設定で結合。
結合したオブジェクトに、ダミーの画像やテキストをアピアランスで適応
…と、ものの数分でサクサクとワイヤーフレームができあがっていく様は圧巻でした…!
段組み設定にこんな使い方があったんだなーと、一番印象に残った項目でした。

6 Layer Exporterや画像アセット（Photoshop）を使ったPNG/SVG/JPEGの書き出し

スライスを使用せず、レイヤーやフォルダ単位で画像を書き出すことができます。
しかも、レイヤー名（フォルダ名）を対応する名前に変えると、それにあわせた形式や解像度で書き出してくれるそうです!
面倒だったスライス作業がなくなると、相当な時間短縮になるのではないでしょうか。

しかしこちら、CCから対応の機能です…。本当に残念です…。

参加してみての雑感

・Illustratorのこと以外にも、「Webデザイン」制作の動向も知れて、大変ためになりました。

・鷹野さんのスライドの構成・デザインもわかりやすく、かつ遊びがあって素敵でした。
・視点誘導に使用されていたスポットライト機能(Mouseposéというそうです)も、わかりやすかったです。

Mouseposé
人前でデモしたりするときにやっておくといいこと（Mac OS編） – DTP Transit（Mac OS X, セミナー, イベント, 展示会, プレゼンテーション, ユーティリティ）

・CCの機能っていろいろあるんだなーと、新機能を試すのが今から楽しみです。

・使い慣れているつもりになっているソフトでも、知らない機能･活用方法がたくさん。まだまだ勉強しないとですね。

・次回開催されるときには、またぜひとも参加したいです。

ショッピングサイトのまとめ4

寒いのがもっと嫌いなhaneです。
本当に、いろんな機能が低下してきます。

第4回目は月々の利用料はおさえつつ、しっかりとした機能を利用できる「ショップサーブ」です。

特徴

ショップサーブは、株式会社Eストアーが運営するネット通販システムです。
ネットショップ業界では老舗に入ります。
ショップサーブのホームページ内に他社との違いというページを掲載しているのですが、
これは自社と他社サービスの違いを項目ごとに分類してメリット・デメリットを比較できる内容で、
比較しやすく、好感が持てます。

メリット

●ネットショップ成功ノウハウが学べる無料セミナーが実施されています。
●オンラインで見られる図解入りのマニュアルが充実しています。
●HTML、CSSが直接編集でき、デザインをカスタマイズできる範囲が広いです。

デメリット

●機能が豊富なので、無料期間の2週間では物足りないです。
●一番下の料金プランでも、他社より高いようなイメージがあります。
●ライトプランのみロイヤリティー(売上の5％)が発生します。
●プランによってはスマートフォンサイトの最適化がオプション料金になっています。
●基本的なhtmlの作りがtableで作られているため、多少扱いづらいです。

＜こんな店舗におすすめ＞
●デザインにこだわりたい場合
●サービス提供元のサポート体制を重視する場合
●月々の利用料はおさえつつ、しっかりとした機能を利用したい場合

WORDPRESS　権限の違いと複数管理者対応

WORDPRESSの管理者権限には5つの種類があり、それぞれに投稿や編集に関する権限が違います。
今回は、その権限の違いと、それを踏まえて複数の管理者が居る場合の対応についてです。

管理者権限の種類として
『管理者』『編集者』『投稿者』『寄稿者』『購読者』の5つの権限があります。

『管理者』とは？
WORDPRESSの全てに対して編集・管理できる権限を持ちます。

『編集者』とは？
記事に対しては編集や公開・削除など全ての権限を持ち、カテゴリやリンクなどの編集が行えます。

『投稿者』とは？
投稿者本人の記事を公開・管理する権限は持ちますが、ファイルをアップロードする事ができません。

『寄稿者』とは？
記事の投稿や自分の記事の管理はできますが、記事の公開やファイルのアップロードはできません。

『購読者』とは？
コメントの読み書きやメールマガジンを受け取る事はできますが、コンテンツに関わる事は一切できません。

続きを読む WORDPRESS　権限の違いと複数管理者対応

誰かに何かを伝えるときに意識すること

こんにちは！
お日様が出ている時間もだいぶ短くなってきましたね。
洗濯物が乾きにくくって困っているyasaiです。
ちなみにすきな野菜は大根です。先日は大根と春菊のシチューを食べました。

今日はちょっとWeb以外のお話を。
皆さんも社内、社外に関わらず自分の考えていことや、何かの説明を自分以外の他者へ伝えることってあるのではないかと思います。
お客様に更新方法の説明するとき。チームの人間にサイト構成と意図を説明するとき。
もっと身近に、友達に今日あったことの説明をしたいとき。
自分の読んだ本の感想を伝えたいとき、今感じたことをどうしても伝えたいとき。

そういうときに、要領よくわかりやすく端的にまとめて話すことができたらよいのですが、僕はそういうことがとても苦手です。(言葉数が多くなってしまいます…)
人と話をしていると、この人は話し方が上手だなぁとか、この人は言っていることは何となくわかるけど、伝え方が下手だなぁとか感じることってあると思います。
今日は人に何かを伝えるのが苦手な僕が、なるべく気を付けるようにしていることをお話します。

「なんの話か」をはっきり伝える。(5W1H)

5W1Hなんてのはよく言われることですが。
逆に話を聞く立場に立って考えてみましょう。相手が何かを話しているときに、自分の中で不足する情報は無意識のうちに推測or予測して補完して聞いていますよね。
補完しながら、この人は「こういうこと」を言っているんだろう、って思いながら聞いているわけです。
この時にそもそも相手から与えられなければ補完しようがない情報は推測しづらいと思うのです。
補完できないので、「この人は何の話をしているんだろう」→「何言ってるかよくわからない」になるのですね。
例えば、

A「あの田中のシュートが入ってたらわかんなかったと思うんだよね。だってあの後の展開を考えると…」

突然A氏がこのように話し始めたとします。
今あなたはA氏が何の話をしていると思いましたか？サッカーでしょうか？
このサッカーという部分が、あなたが今無意識のうちに推測して補完した部分です。
このA氏の発言だけでは、これが何の話なのかよくわかりません。
「サッカー」の話なのか、「バスケット」の話なのか、「いつ」の話なのか、「誰の」話なのか(田中選手はA氏の好きなチームの選手かもしれませんし、あなたのことかもしれません。)。もしかしたら、「シュート」は野球の球種なのかもしれません。
A氏が話したかった内容の、バッググラウンドに当たる部分の説明が何もないので推測ができないのです。
この発言だけでA氏の言いたい話を理解できるとすれば、それはあなたがA氏との間に、話のバックグラウンドを共有している場合になるでしょう。
A氏の発言がこのようだったら、知らない人でも伝わったかもしれません。

A「先週のサッカーの代表戦、あの田中のシュートが入っていたらわかんなかったと思うんだよね。だってあの後の展開を考えると…」

「先週のサッカーの代表戦」を付け加えただけですが、ぐっと推測しやすくなりました。
伝えることが苦手な人は、この相手に推測してもらうための情報をつけ忘れやすいのかもしれません。
バッググラウンドは相手が共有しているだろう、というのは本人の思い込みかもしれません。
バッググラウンドが共有しやすい友達や家族ならまだしも、社外の人間や同僚などにあなたのバッググラウンドの推測をすることはとても難しいことかもしれません。
ということで、僕が気を付けていることの1点目は、「自分がこれから何の話」をしようとしているかを意識的に伝える、です。

相手のわかる言葉で話す

20年も人生生きていると、ある程度自分の話し方ってかたまってきますよね。
その話し方っていうのは、おそらく自分の中で一番聞きやすい話し方なのではないでしょうか？
誰しもたいがいの誰かに何かを伝えたいという場面で、僕たちは一番伝わりやすいだろう方法、話し方を探すでしょう。
せっかく一番よく伝わりやすいだろう方法を考えて伝えようとしているのに、うまく伝わらないのはなぜなのでしょう？
それは僕にとって一番伝わりやすい言葉が、相手にとっても一番伝わりやすい言葉とは限らない、ということなのではないでしょうか？

例えば料理のレシピを伝えるときに、

A「卵が何個(約何g)、スープが何cc、塩が小さじで何杯･･･」
B「卵とスープに塩気を足して･･･」

同じ内容のレシピだったとしても、Aの方が理解しやすい人、Bの方がイメージしやすい人両方いると思います。

理系の人、文系の人、直感的な人、理詰めな人、先に結論を言った方がわかりやすい人、順序立てて説明した方が理解しやすい人。
人の理解する手順は十人十色なのだと思います。
もし本題に入る前に、相手の話の癖をつかむことができる時間があるのなら、相手の話の組み立て方や結論の出し方を注意してみていると、相手に伝わりやすい言葉を探しやすいかもしれません。
というわけで、僕が意識していること2点目は、相手の理解しやすい言葉(この中には難しい専門用語は使わない、なども含む)で話す、ということです。

相手の立場になって考えてみなさい、小学生の時に言われることですが、

相手がどう理解しようとしているのか、どういう風に聞こえているのか、そんなところに気を配りながら

お話ができたら、わかりにくい話もちょっとは伝わりやすくなるのかな、と思います。
長々と書いてきましたが、それが今日の結論めいたものです。
結局長すぎて、この記事もよくわからくなっている気もしますが…