コワーキングスペースに 必 要 なシステムを 株 式 会 社 コミュニティコム 星 野 邦 敏 330-0802 埼 玉 県 さいたま 市 大 宮 区 宮 町 1-5 銀 座 ビル7 階 URL: http://www.communitycom.jp/ E-MAIL: mail@communitycom.jp 1
星 野 邦 敏 (ほしの くにとし) Twitter : @khoshino Facebook : 星 野 邦 敏 (Kunitoshi Hoshino) 株 式 会 社 コミュニティコムという 会 社 で 自 社 運 営 サイトやアプリ 他 企 業 様 向 けサイトも 作 っています オープンソースの 活 動 をしたり IT 系 の 勉 強 会 を 主 催 したり 地 域 の 活 動 をしたり WordPressをCMSとしてWEBサイトを 作 ることが 増 えています 2
WordPressのイベントである WordCamp や WordBench に スタッフやスピーカーとして 参 加 3
WordPress 日 本 語 サイトの イベントカレンダー を 更 新 する 係 ココ 4
公 式 ディレクトリにプラグインを 登 録 したり Japan Tenkiプラグイン 全 国 142 地 域 の 天 気 を 自 動 表 示 Hello Wapuuプラグイン ブログ 更 新 を 応 援 5
WordPressに 関 して 書 籍 や 雑 誌 で 執 筆 をしたり 2012 年 1 月 に 出 版 web creators 特 別 号 Webサイト 制 作 最 新 トレンドの 傾 向 と 対 策 2012 年 2 月 に 出 版 Web Designing 2012 年 3 月 号 2012 年 3 月 に 出 版 速 習 デザインWordPress 6
WordPressに 関 して 書 籍 や 雑 誌 で 執 筆 をしたり 2012 年 7 月 に 出 版 2013 年 1 月 に 出 版 2013 年 2 月 に 出 版 web creators 特 別 号 WordPressプラグイン & プロが 選 ぶ WordPress スマートフォン ソーシャル メディア WordPress WebAPI 活 用 ガイドブック 優 良 プラグイン 事 典 7
コワーキングスペース 7F の 運 営 埼 玉 県 さいたま 市 大 宮 駅 東 口 徒 歩 1 分 65 坪 215 平 米 http://office7f.com/ スタッフ 募 集 中 です http://www.communitycom.jp/recruit/ 8
さて 9
コワーキングスペース いつも 凄 くたくさん 人 が 来 ますよね! 埼 玉 県 さいたま 市 大 宮 駅 東 口 徒 歩 1 分 65 坪 215 平 米 http://office7f.com/ 10
コワーキングスペース7F とは? コワーキングスペース7F http://office7f.com/ https://www.facebook.com/office7f/ 11
現 在 のコワーキングスペース7F 2012 年 10 月 中 旬 から 準 備 スタート 2012 年 12 月 1 日 ( 土 )に 本 格 オープン 2013 年 7 月 の 実 績 利 用 者 数 : 月 間 延 べ 約 1800 人 月 額 会 員 :40 人 超 スタッフ 数 : 女 性 8 名 男 性 2 名 計 10 名 12
施 設 概 要 年 中 無 休 7 時 から23 時 大 宮 駅 東 口 徒 歩 1 分 215 平 米 コワーキングスペースに 必 要 なシステムを 13
利 用 料 金 コワーキングスペースに 必 要 なシステムを 14
1.より 人 に 来 てもらうための 集 客 2. 管 理 側 のシステム いずれも WordPressで! 15
1.より 人 に 来 てもらうための 集 客 2. 管 理 側 のシステム いずれも WordPressで! 16
メールマガジン 配 信 システム 17
メールマガジン 登 録 & 投 稿 システム 無 料 プラグインとして Subscribe2 Subscribe2 widget プラグイン がありますが 18
メールマガジン 登 録 & 投 稿 システム 7Fでは 属 性 に 応 じて 配 信 する 内 容 を 変 える 等 の 仕 様 要 件 から 有 料 プラグインの メールマガジンニュース レタープラグイン を 使 っています 19
メールマガジン 登 録 & 投 稿 システム メールアドレスだけでなく メールカテゴリーを 設 定 して 配 信 する 属 性 を 分 けることができる 20
メールマガジン 登 録 & 投 稿 システム メールマガジンのテンプレートを 作 れる 21
メールマガジン 登 録 & 投 稿 システム [user field=user_login] などを 使 うと 様 と いうようなことができる 属 性 を 分 けて 配 信 や 一 括 で 送 るメール 数 を 操 作 できる 22
ソーシャル 連 携 23
プラグイン WP Social Bookmarking Light 色 々なソーシャルアイコンを WordPressの 本 文 の 上 または 下 に 設 置 する ことができるプラグイン 24
プラグインを 使 わず テーマに 書 く 方 法 も <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-bookmarktitle="<?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.sthatena.com/js/bookmark_button.js" charset="utf-8" async="async"></script> </li> </ul> デザインの 自 由 度 が 高 い http://www.communitycom.jp/2012/09/13/twitter-facebook-google-hatena/ 25
OGP(Open Graph protocol) 要 は SNSにWebサイトの 情 報 を 認 識 してもらうもの Facebookに 流 れてきたとして どちらの 方 がクリックしてもらいやすい? 26
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/ プラグインもあるし テーマに 直 接 書 くと 自 由 度 が 高 い 27
Jetpack by WordPress.com プラグイン を 有 効 化 するだけでも OGPの 実 装 ができる! 28
WordPressの 記 事 の 更 新 を TwitterやFacebookに 流 す または TwitterやFacebookの 情 報 を WordPressに 保 存 する 29
プラグインで 実 装 Social プラグイン WordPressから TwitterとFacebookの タイムラインに 更 新 を 流 せる また コメント 欄 で SNSアカウントとして コメント 投 稿 できる 30
Social プラグインでの 投 稿 Broadcast Postを Yes にする プレビューが 表 示 される 31
Social プラグインでの 投 稿 32
Jetpack by WordPress.com プラグイン を 有 効 化 するだけでも ソーシャルへの 自 動 投 稿 ポストの 実 装 ができる! 33
検 索 エンジン 対 策 34
全 国 に300 以 上 あるらしいコワーキングスペース の 中 でも 店 舗 としては7Fがパーソナライズ 検 索 を 外 した 状 態 で コワーキングスペース と 検 索 して 一 番 上 位 に 表 示 されます(2013 年 8 月 現 在 ) 全 体 でも 上 から3 番 目 (2013 年 8 月 現 在 ) 35
検 索 エンジン 対 策 1. 内 部 要 因 WordPressのテーマで 内 部 構 造 を 整 える 2. 外 部 要 因 WordPressを 使 って 被 リンクなどを 整 える ご 興 味 がありましたら 懇 親 会 や 宿 泊 などで! 36
スマートフォン 対 応 37
CSS3のメディアクエリ(Media Queries)を 使 ってテーマで 対 応 レスポンシブ ウェブデザインで! レスポンシブ ウェブデザインって? 要 は 画 面 サイズによってレイアウトを 変 えること 38
要 は 同 じHTMLが 良 いと 言 ってる 他 の 方 法 を 否 定 はしていない Googleウェブマスター 向 け 公 式 ブログ: Googleがお 勧 めするスマートフォンに 最 適 化 された ウェブサイトの 構 築 方 法 http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html 39
Googleウェブマスター 向 け 公 式 ブログ: Googleがお 勧 めするスマートフォンに 最 適 化 された ウェブサイトの 構 築 方 法 http://googlewebmastercentral-ja.blogspot.jp/2012/06/google.html 40
Googleウェブマスター 向 け 公 式 ブログ: タブレット 端 末 ユーザーには フルサイズのウェブを 表 示 しましょう http://googlewebmastercentralja.blogspot.jp/2012/11/givin g-tablet-users-full-sizedweb.html 41
レスポンシブ ウェブデザインを 推 奨 する Googleの 公 式 見 解 この 方 法 でWordPressテーマを 作 る! バナーの 振 り 分 けをCSS3だけでは 難 しいので その 部 分 はWordPressの 条 件 分 岐 タグを 使 う 外 部 バナーなどはwp_is_mobile 関 数 など で 条 件 分 岐! 42
1.より 人 に 来 てもらうための 集 客 2. 管 理 側 のシステム いずれも WordPressで! 43
入 退 出 管 理 システム 44
入 退 出 管 理 システム どうしよう? (1)スペース 内 に いつ 誰 が いるか 分 からない もし 何 か 事 件 や 事 故 があった 時 にリスク (2) 今 中 に 誰 がいるかスタッフ 間 で 共 有 できない 顧 客 管 理 と スタッフと 利 用 者 さんの 交 流 (3) 今 の 混 雑 状 況 が 分 かれば 利 用 者 さんに 便 利 あの 人 がいるなら 行 こうかな とか 45
他 のコワーキングスペースは どうしてるの? QRコードで 管 理 手 打 ち&タッチ FeliCaで 管 理 ミタカフェ ( 三 鷹 ) Connecting The Dots ( 渋 谷 ) MyCafe ( 名 古 屋 ) それぞれ 独 自 でお 金 と 時 間 を 掛 けて 作 ってる! 46
WordPress & プラグイン で 作 れば 誰 でも 使 える! 47
作 りました! Special Thanks! 串 本 さん ユウスケさん 48
どうやって 使 うの? 49
(1)WordPressユーザーを1 利 用 者 ごとに 作 る ( 独 自 のMember 権 限 ) バーコード 番 号 は 任 意 で 決 められて ユーザープロフィールも 独 自 で 入 れられる 50
(2)バーコードリーダーを 用 意 ( 数 千 円 で 買 えます) 51
(3)バーコード 読 み 取 り 画 面 を 開 く ( 独 自 のFront Staff 権 限 or 通 常 権 限 ) 発 行 したバーコードを スマホ or 会 員 カードで 表 示 して バーコードリーダーで 読 み 取 る 52
何 ができるの? 53
(1) 利 用 者 の 過 去 の 入 退 出 履 歴 が 分 かる 事 件 等 の 照 会 が 公 的 機 関 からあっても 対 応 できる 利 用 者 の 過 去 の 利 用 頻 度 などを 把 握 できる 54
(2)スタッフ 側 で コワーキングスペース 内 に 今 誰 がいるか 把 握 できる 利 用 者 の 顔 や 名 前 やプロフィール 等 をスタッフが 把 握 55
(3)スペースにいる 人 がネットから 誰 でも 分 かる 混 雑 状 況 や 今 誰 がスペース 内 にいるか 分 かる あの 人 がいるなら 行 こうかな とか 起 きるかも 中 にいることを 非 公 開 にしたい 人 の 設 定 もあります 56
(4) 利 用 者 集 計 ができる 1 日 に 何 人 来 たかが 分 かる 売 上 管 理 なども 楽 になるかも 57
(5) 会 員 メンバーの 情 報 管 理 ができる 管 理 画 面 で 利 用 者 の 属 性 などを 把 握 できる WordPressユーザーのデータベースをベースにして いるので 他 のプラグインなどと 色 々な 連 携 ができる 管 理 画 面 に 個 人 情 報 を 入 れてしまうのが 怖 い 場 合 も あるので 7Fでは 運 用 上 一 部 は 別 管 理 している 58
権 限 管 理 59
コワーキングスペース7Fでは 女 性 スタッフが8 名 男 性 スタッフが2 名 合 計 10 名 いるので User Role Editor プラグインを 使 って スタッフ 用 のオリジナル 権 限 を 作 る スタッフは 文 章 や 写 真 を 入 れるコンテンツに 集 中 できる 制 作 側 と 責 任 の 切 り 分 けができる 60
ショッピングカート 61
近 い 将 来 7FのTシャツや 7Fで 行 っている 講 座 などを WordPressで 売 れるように ショッピング カートを 作 ります 62
(1)Welcartプラグイン http://www.welcart.com/ 無 料 プラグイン 事 例 も 豊 富 有 料 オプションと 組 み 合 わせて コンテンツ 販 売 システムも 作 れる (2)ネットショップ 管 理 プラグイン http://www.cmswp.jp/plugins/ net_shop_admin/ 有 料 プラグイン コンテンツ 販 売 システムも 作 れる 63
まとめ 64
1.より 人 に 来 てもらうための 集 客 2. 管 理 側 のシステム WordPressを 使 えば 集 客 もできるし 売 上 もアップするし 管 理 システムも 権 限 管 理 もできるし それらを 短 時 間 で 実 装 できるよ! 65
WordPressで 繋 がろう! WordPressのコミュニティに ぜひご 参 加 を! WordPressのイベントや 勉 強 会 に 参 加 してみませんか? http://ja.wordpress.org/ 66
今 後 のお 問 い 合 わせなど 何 かありましたら Twitter: @khoshino Mail: mail@communitycom.jp URL: http://www.communitycom.jp/ http://wp3.jp/ などに ご 連 絡 ください ありがとうございました! 株 式 会 社 コミュニティコム 星 野 邦 敏 67