1

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

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

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

2

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

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

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

3

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

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

4

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

ココ

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

5

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

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

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

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

6

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

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

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

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

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

7

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

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

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

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

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

8

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

http://office7f.com/

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

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

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

9

さて、

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

10

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

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

http://office7f.com/

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

11

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

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

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

12

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

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

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

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

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

13

施設概要

年中無休 7時から23時

大宮駅東口 徒歩１分

215平米

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

14

利用料金

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

15

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

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

いずれも WordPressで！

16

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

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

いずれも WordPressで！

17

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

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

18

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

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

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

19

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

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

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

20

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

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

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

21

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

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

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

22

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

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

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

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

23

ソーシャル連携

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

24

プラグイン 「WP Social Bookmarking Light」

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

コワーキングスペースに必要なシステムを 全部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();

?>&amp;layout=box_count&amp;show_faces=false&amp;width=50&amp;action=like&amp;colorscheme=light&amp;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/

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

26

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

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

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

27

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

<!-- facebook 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/

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

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

28

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

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

29

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

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

30

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

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

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

31

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

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

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

32

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

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

33

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

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

34

検索エンジン対策

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

35

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

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

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

36

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

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

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

37

スマートフォン対応

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

38

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

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

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

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

39

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

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

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

40

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

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

41

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

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

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

42

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

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

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

43

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

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

いずれも WordPressで！

44

入退出管理システム

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

45

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

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

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

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

46

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

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

ミタカフェ （三鷹）

MyCafe （名古屋）

Connecting The Dots （渋谷）

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

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

47

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

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

48

作りました！

Special Thanks!

串本さん ユウスケさん

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

49

どうやって使うの？

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

50

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

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

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

51

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

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

52

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

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

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

53

何ができるの？

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

54

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

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

55

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

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

56

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

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

57

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

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

58

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

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

59

権限管理

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

60

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

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

61

ショッピングカート

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

62

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

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

63

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

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

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

64

まとめ

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

65

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

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

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

66

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

http://ja.wordpress.org/

WordPressで繋がろう！

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

67

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

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

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

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