コワーキングスペースに必要なシステムを全部wordpressで …€¦ ·...

1

株式会社コミュニティコム星野邦敏

コワーキングスペースに必要なシステムを全部WordPressで作ったお話

〒330-0802 埼玉県さいたま市大宮区宮町1-5 銀座ビル7階 URL： http://www.communitycom.jp/ E-MAIL： [email protected]

2

株式会社コミュニティコムという会社で、自社運営サイトやアプリ、他企業様向けサイトも作っています。オープンソースの活動をしたり、IT系の勉強会を主催したり、地域の活動をしたり。 WordPressをCMSとしてWEBサイトを作ることが増えています。

星野邦敏(ほしのくにとし) Twitter ： @khoshino Facebook : 星野邦敏（Kunitoshi Hoshino）


3

WordPressのイベントである「WordCamp」や「WordBench」にスタッフやスピーカーとして参加。


4

WordPress日本語サイトの「イベントカレンダー」を更新する係。

ココ


5

公式ディレクトリにプラグインを登録したり。

Japan Tenkiプラグイン →全国142地域の天気を自動表示

Hello Wapuuプラグイン →ブログ更新を応援


6

WordPressに関して、書籍や雑誌で執筆をしたり。

2012年1月に出版 web creators特別号 Webサイト制作最新トレンドの傾向と対策

2012年3月に出版速習デザインWordPress

2012年2月に出版 Web Designing 2012年3月号


7

WordPressに関して、書籍や雑誌で執筆をしたり。

2012年7月に出版 web creators特別号スマートフォン・ソーシャルメディア・WordPress

2013年1月に出版 WordPressプラグイン & WebAPI活用ガイドブック

2013年2月に出版プロが選ぶ WordPress 優良プラグイン事典


8

埼玉県さいたま市大宮駅東口徒歩１分 65坪、215平米。

http://office7f.com/

コワーキングスペース「7F」の運営。

スタッフ募集中です。 http://www.communitycom.jp/recruit/



http://www.communitycom.jp/recruit/

9

さて、


10

コワーキングスペース、いつも凄くたくさん人が来ますよね！

埼玉県さいたま市大宮駅東口徒歩１分 65坪、215平米。




11

「コワーキングスペース7F」とは？

コワーキングスペース7F http://office7f.com/ https://www.facebook.com/office7F/



https://www.facebook.com/office7F/

12

現在のコワーキングスペース7F

2012年10月中旬から準備スタート。

2012年12月1日（土）に本格オープン。

2013年7月の実績利用者数：月間延べ約1800人月額会員：40人超スタッフ数：女性８名、男性２名、計１０名


13

施設概要

年中無休 7時から23時

大宮駅東口徒歩１分

215平米


14

利用料金


15

１．より人に来てもらうための集客２．管理側のシステム


いずれも WordPressで！

16




17

メールマガジン配信システム


18

メールマガジン登録＆投稿システム

無料プラグインとして、 Subscribe2 Subscribe2 widget プラグインがありますが・・・


19

7Fでは、属性に応じて、配信する内容を変える等の仕様要件から、有料プラグインの「メールマガジンニュースレタープラグイン」を使っています。



20

メールアドレスだけでなく、メールカテゴリーを設定して、配信する属性を分けることができる。



21

メールマガジンのテンプレートを作れる。



22

[user field=user_login] などを使うと、「○○様」というようなことができる。

属性を分けて配信や、一括で送るメール数を操作できる。



23

ソーシャル連携


24

プラグイン「WP Social Bookmarking Light」

色々なソーシャルアイコンを、 WordPressの本文の上または下に設置することができるプラグイン。


25

プラグインを使わず、テーマに書く方法も。 <ul> <li> <a href="https://twitter.com/share" class="twitter-share-button" data-count="vertical" data-via="khoshino" data-url="<?php

the_permalink(); ?>" data-text="<?php the_title(); ?>">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>

</li> <li> <iframe src="http://www.facebook.com/plugins/like.php?href=<?php the_permalink();

?>&layout=box_count&show_faces=false&width=50&action=like&colorscheme=light&height=62" scrolling="no" frameborder="0" style="border:none; overflow:hidden; width:70px; height:62px;" allowTransparency="true"></iframe>

</li> <li><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall" href="<?php

the_permalink(); ?>"></g:plusone></li> <li> <a href="http://b.hatena.ne.jp/entry/<?php the_permalink(); ?>" class="hatena-bookmark-button" data-hatena-bookmark-

title="<?php the_title(); ?>｜<?php bloginfo('name'); ?>" data-hatena-bookmark-layout="vertical" title="このエントリーをはてなブックマークに追加"><img src="http://b.st-hatena.com/images/entry-button/button-only.gif" alt="このエントリーをはてなブックマークに追加" width="20" height="20" style="border: none;" /></a><script type="text/javascript" src="http://b.st-hatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script>

</li> </ul> デザインの自由度が高い。

http://www.communitycom.jp/2012/09/13/twitter-facebook-google-hatena/


https://twitter.com/share

http://www.facebook.com/plugins/like.php?href=

https://apis.google.com/js/plusone.js

http://b.hatena.ne.jp/entry/

http://b.st-hatena.com/images/entry-button/button-only.gif

http://b.st-hatena.com/js/bookmark_button.js

http://b.st-hatena.com/js/bookmark_button.js

http://www.communitycom.jp/2012/09/13/twitter-facebook-google-hatena/

26

OGP（Open Graph protocol） →要は、SNSにWebサイトの情報を認識してもらうもの。

Facebookに流れてきたとして、どちらの方がクリックしてもらいやすい？


27

OGPの実装。 meta情報としてOGPを書くと、設定できる。

 <meta property="og:locale" content="ja_JP"> <meta property="og:type" content="article"> <meta property="fb:admins" content="（ココにFacebookのユーザーIDを書く、半角数字）"> <meta property="fb:app_id" content="（ココにFacebookのPlatformアプリケーションIDを書く、半角数字）"> <meta property="og:site_name" content="<?php bloginfo('name'); ?>"> <?php if (has_post_thumbnail()) :?> <?php $image_id = get_post_thumbnail_id(); $image_url = wp_get_attachment_image_src($image_id,'medium'); ?> <meta property="og:image" content="<?php echo $image_url[0]; ?>"> <?php else: ?> <meta property="og:image" content="<?php bloginfo('template_url'); ?>/（ココに画像までのパスを書く）"> <?php endif ;?> <?php if (is_home() || is_front_page()) :?> <meta property="og:title" content="<?php bloginfo('name'); ?>"> <?php else: ?> <meta property="og:title" content="<?php the_title(); ?>"> <?php endif ;?> <?php if (is_home() || is_front_page()) :?> <meta property="og:url" content="<?php bloginfo('url'); ?>"> <?php else: ?> <meta property="og:url" content="<?php the_permalink(); ?>"> <?php endif ;?> <meta property="og:description" content="<?php the_excerpt(); ?>">

http://www.communitycom.jp/2012/05/26/wordpress-facebook-ogp/

プラグインもあるし、テーマに直接書くと自由度が高い。


http://www.communitycom.jp/2012/05/26/wordpress-facebook-ogp/

28

「Jetpack by WordPress.com」プラグインを有効化するだけでも、 OGPの実装ができる！


29

WordPressの記事の更新を、 TwitterやFacebookに流す。または、TwitterやFacebookの情報を、 WordPressに保存する。


30

プラグインで実装。「Social」プラグイン。

WordPressから、 TwitterとFacebookのタイムラインに更新を流せる。また、コメント欄で、 SNSアカウントとしてコメント投稿できる。


31

「Social」プラグインでの投稿。

Broadcast Postを「Yes」にする。プレビューが表示される。


32

「Social」プラグインでの投稿。


33

「Jetpack by WordPress.com」プラグインを有効化するだけでも、ソーシャルへの自動投稿ポストの実装ができる！


34

検索エンジン対策


35


全国に300以上あるらしいコワーキングスペースの中でも、店舗としては7Fがパーソナライズ検索を外した状態で、「コワーキングスペース」と検索して一番上位に表示されます（2013年8月現在）。

全体でも上から３番目（2013年8月現在）。

36

検索エンジン対策１．内部要因 → WordPressのテーマで、内部構造を整える。２．外部要因 → WordPressを使って、被リンクなどを整える。

ご興味がありましたら、懇親会や宿泊などで！


37

スマートフォン対応


38

レスポンシブ・ウェブデザインって？

CSS3のメディアクエリ（Media Queries）を使ってテーマで対応 → レスポンシブ・ウェブデザインで！

要は、画面サイズによってレイアウトを変えること。


39

Googleウェブマスター向け公式ブログ: Googleがお勧めするスマートフォンに最適化されたウェブサイトの構築方法 http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html

→要は、同じHTMLが良いと言ってる。他の方法を否定はしていない。


http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html

40

Googleウェブマスター向け公式ブログ: Googleがお勧めするスマートフォンに最適化されたウェブサイトの構築方法 http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html



41

Googleウェブマスター向け公式ブログ: タブレット端末ユーザーにはフルサイズのウェブを表示しましょう http://googlewebmastercentral-

ja.blogspot.jp/2012/11/giving-tablet-users-full-sized-web.html






42

・レスポンシブ・ウェブデザインを推奨する Googleの公式見解。 → この方法でWordPressテーマを作る！

・バナーの振り分けをCSS3だけでは難しいので、その部分はWordPressの条件分岐タグを使う。 → 外部バナーなどはwp_is_mobile関数などで条件分岐！


43




44

入退出管理システム


45

入退出管理システム、どうしよう？（１）スペース内に、いつ、誰が、いるか分からない。 →もし何か事件や事故があった時にリスク。

（２）今、中に誰がいるかスタッフ間で共有できない。 →顧客管理と、スタッフと利用者さんの交流。

（３）今の混雑状況が分かれば利用者さんに便利。 →あの人がいるなら行こうかな、とか。


46

他のコワーキングスペースは、どうしてるの？

それぞれ独自でお金と時間を掛けて作ってる！

ミタカフェ（三鷹）

MyCafe （名古屋）

Connecting The Dots （渋谷）

手打ち＆タッチ。 QRコードで管理。 FeliCaで管理。


47

WordPress ＆プラグインで作れば、誰でも使える！


48

作りました！

Special Thanks!

串本さんユウスケさん


49

どうやって使うの？


50

（１）WordPressユーザーを１利用者ごとに作る。（独自のMember権限）

バーコード番号は任意で決められて、ユーザープロフィールも独自で入れられる。


51

（２）バーコードリーダーを用意。（数千円で買えます）


52

（３）バーコード読み取り画面を開く。（独自のFront Staff権限 or 通常権限）

発行したバーコードを、スマホ or 会員カードで表示して、バーコードリーダーで読み取る。


53

何ができるの？


54

（１）利用者の過去の入退出履歴が分かる。 → 事件等の照会が公的機関からあっても対応できる。 → 利用者の過去の利用頻度などを把握できる。


55

（２）スタッフ側で、コワーキングスペース内に今、誰がいるか把握できる。 → 利用者の顔や名前やプロフィール等をスタッフが把握。


56

（３）スペースにいる人がネットから誰でも分かる。 → 混雑状況や、今誰がスペース内にいるか分かる。 → あの人がいるなら行こうかな、とか起きるかも。 → 中にいることを非公開にしたい人の設定もあります。


57

（４）利用者集計ができる。 → １日に何人来たかが分かる。 → 売上管理なども楽になるかも。


58

（５）会員メンバーの情報管理ができる。 → 管理画面で利用者の属性などを把握できる。 → WordPressユーザーのデータベースをベースにしているので、他のプラグインなどと色々な連携ができる。 → 管理画面に個人情報を入れてしまうのが怖い場合もあるので、7Fでは、運用上、一部は別管理している。


59

権限管理


60

コワーキングスペース7Fでは、女性スタッフが８名、男性スタッフが２名、合計１０名いるので、「User Role Editor」プラグインを使って、スタッフ用のオリジナル権限を作る。 → スタッフは、文章や写真を入れるコンテンツに集中できる。 → 制作側と責任の切り分けができる。


61

ショッピングカート


62

近い将来、7FのTシャツや、7Fで行っている講座などを、WordPressで売れるように、ショッピングカートを作ります。


63

（１）Welcartプラグイン http://www.welcart.com/ →無料プラグイン、事例も豊富 →有料オプションと組み合わせてコンテンツ販売システムも作れる。


（２）ネットショップ管理プラグイン http://www.cmswp.jp/plugins/ net_shop_admin/ →有料プラグイン →コンテンツ販売システムも作れる。

http://www.welcart.com/

http://www.cmswp.jp/plugins/net_shop_admin/

http://www.cmswp.jp/plugins/net_shop_admin/

64

まとめ


65



WordPressを使えば、集客もできるし、売上もアップするし、管理システムも権限管理もできるし、それらを、短時間で実装できるよ！

66

WordPressのコミュニティに、ぜひご参加を！ WordPressのイベントや勉強会に参加してみませんか？

http://ja.wordpress.org/

WordPressで繋がろう！


http://ja.wordpress.org/

67

今後のお問い合わせなど何かありましたら、 Twitter： @khoshino Mail： [email protected] URL： http://www.communitycom.jp/ http://wp3.jp/ などに、ご連絡ください。

ありがとうございました！

株式会社コミュニティコム星野邦敏


コワーキングスペースに 必要なシステムを 全部wordpressで …€¦ ·...

Documents

コワーキングスペースに必要なシステムを全部wordpressで …€¦ ·...