concrete5 harvest
TRANSCRIPT
concrete5 themeCMS 初心者 Web デザイナーの生き様を語ります！！
2016/11/26 Tokyo2016/01/01-05/31 までの 2 サイトの紹介マーケットプレイスで公開しているテーマの紹介
About
本日は京都からやってきました。
About
MotherHeads （マザーヘッズ）Designer （デザイナー）Kazuhiro Matsuda （松田和広）「ここでしか創れないモノを創る！モノ創りをつうじてヒトを財産とする」
www.motherheads.net オフィシャル WEBwww.motherheads.com EC サイト
@dj_kazu1 Kazuhiro Matsuda
About
これは私が立ち上げたブランドになります。独自性をとても大事にしています。ここでは、デザインを通じて様々なモノを創っています。オフィシャルサイトがすでに独特です。
About
これは私が立ち上げたブランドになります。独自性をとても大事にしています。ここでは、デザインを通じて様々なモノを創っています。オフィシャルサイトがすでに独特です。
ファッション、 DTP 、 WEB サイト、イラスト、アクセサリーと様々です。 motherheads.netをご覧ください。
About
Holm.design inc. （ホルムデザイン株式会社）Web Designer （ウェブデザイナー）Kazuhiro Matsuda （松田和広）www.holmdesign.jp
LP 系をメインにしています。企業の WEB サイトや DTP 関連などもやっております。
About
この二つの違いは！？
自分のブランド自由気ままで好き放題しています 仕事をうけます会社として、やっています安心してください
WEB ページが独特だょ！！ 今、 concrete5 でつくってるよ！！
About
今年下半期の目標は！？concrete5 での案件を全力でとりにいく所存です。
ご紹介およびご依頼・ご相談などありましたら、どうぞよろしくお願いいたします。
Title
WEB デザイナーが語るエンターテイメントショーCMS 初心者 Web デザイナーの生き様を語ります
STORY
紹介内容1 話 のテーマ作成秘話2 話 でつくったサイト事例3 話 マーケットプレイス活用という流れでお話させていただきます。
STORY
CMS 超初心者の WEB デザイナーです。concrete5 をはじめて今日で 11 ヶ月になります。そして 6 ヵ月でテーマ（ 1 作品）を公開できました。なんと、 Evangelist をやっております。
その前に…実は私、
STORY
京都勉強会にてメインで登壇してます。奈良勉強会にてベンチ入りで登壇してます。OSC 京都 2016 にて登壇しました。CMS 夏祭り 2016 にて登壇しました。CMS プロレス第二回にて出場しました。
登壇ステージ
STORY
紹介内容1 話 のテーマ作成秘話2 話 でつくったサイト事例3 話 マーケットプレイス活用という流れでお話させていただきます。
のテーマ作成秘話！？STORY
CMS をはじめて 1 年未満な私がWEB サイト（テーマ）がつくれて、マーケットプレイス用のテーマまで公式で発表することができました。
ーー 結果 ーー
※ これまで CMS を触った経験は一切ありません。 スタティックオンリー WEB デザイナーです。 デザイン、 html&CSS 、 JS 少々のスキルで PHP はできません。
「やる気・元気・勇気」です！
STORY
ーー キーワード ーーのテーマ作成秘話！？
STORY
ーー ごめんなさい ーー• 専門用語がでてきます。これからやろうとしてる方は頭の片隅にでも置いておいて、今は聞き流す程度で、むずかしく考えないで下さい。• HTML&CSS をさわった方向けの話になるところもあります。
のテーマ作成秘話！？
STORY
Are You Ready ！？ーー 心の準備はいいかい！？ ーー
のテーマ作成秘話！？
STORY
テーマには、WEB サイトとマーケットプレイスとふたつ言い方があります。
のテーマ作成秘話！？ーー 豆知識 ーー
STORY
テーマには、WEB サイトとマーケットプレイスとふたつ言い方があります。
ややこしいなー。わかった！！それでは、いってみよう！
のテーマ作成秘話！？ーー 豆知識 ーー
STORY
• コード（ PHP ・ JS ）を書かないと使えないCMS ではありません。※ただし自由度を高めるなら必要です。他の CMS とは、少し違う CMS です。
• 直感的操作 (GUI) でパズルのようにコンテンツ（ブロック）を積み上げてページをつくっていきます。
は、ーー concrete5 とは ーー
STORY
• なによりも自由度が高い！そして完成してからも自由がききます。• 管理画面からだけではなく、実際のページを見ながら更新できます。• コミュニケーションをとりながら気軽に編集できます。
は、ーー concrete5 とは ーー
STORY
• 今すぐ使えるデフォルト機能が充実しいます。なので最初からつくるとき「○○ のときは、これをする」というのがわかりやすい• コンテンツの更新やページのコピーなどユーザーの「やりたいこと」をカタチにしやすい• 直感的に更新できるのでスピーディーな更新ができる
は、ーー concrete5 とは ーー
STORY
Goodポイント！ーー WEB デザイナー必見！！ ーー
• html と css がわかれば、サイトがつくれます。• 様々なレイアウトでサイトを表現できるため、単調なデザイン以外にも対応できます。• GUI操作でコンテンツ（ブロック）を積み上げます。また画面をみながら編集ができます。
STORY
ーー なぜ concrete5 なの！？ ーーFTP とか使わずに、自分でも更新してみたいんだよね〜なんか、こうヒョイッヒョイッととかサクサクッとねー クライアント
ーー きっかけ ーー
STORY
ーー なぜ concrete5 なの！？ ーー
マヂか！？・・・そんなことできるのか！？
ーー きっかけ ーーFTP とか使わずに、自分でも更新してみたいんだよね〜なんか、こうヒョイッヒョイッととかサクサクッとねー クライアント
STORY
ーー なぜ concrete5 なの！？ ーーーー リサーチ ーーFTP を使わないのが CMS かぁーそして、 concrete5 というモノがあるのか！？
その他の候補としてはBaser 、 Drupal 、 WordPress などがありました。
STORY
ーー なぜ concrete5 なの！？ ーーーー 井の中の蛙は… ーーでは、勉強会というモノに参加してみるか！？
第3回concrete5京都勉強会でした。アポなしの完全飛び込みです。
STORY
ーー なぜ concrete5 なの！？ ーーーー はじめての勉強会 ーーまずは、主催しいてる人柄チェックです。チェックの結果は…↓人柄がとてもステキな感じのヒトでした。受付でお話したときに感じました。
concrete5japan代表菱川さん
STORY
ーー なぜ concrete5 なの！？ ーーーー 成果 ーー勉強会でふれてみて、 concrete5 が直感的に自分の肌に合うと感じた。直感的操作 (GUI) がデザイナー目線CMS だと思いました。しかも、なによりも対応が親切だった。
STORY
ーー なぜ concrete5 なの！？ ーーーー 挑戦 ーーよし！自分で最初からサイトをつくるぞ！！
STORY
ーー 実際に concrete5 をやってみた ーーーー さっぱりわからん ーーフォーラムというモノがあるよ！わからないことを投稿してください。 concrete5-japan.org/
STORY
ーー 実際に concrete5 をやってみた ーーーー さっぱりわからん ーー
おお！神よ！！
フォーラムというモノがあるよ！わからないことを投稿してください。 concrete5-japan.org/
STORY
ーー 実際に concrete5 をやってみた ーーーー すこしだけわかった ーー書き込みしまくりました。レスポンスがはやくて丁寧だ！！ちなみに質問は、誰が見てもわかるように書く。スクショなどをはりつけて図解解説があれば…より的確に返ってきます。
STORY
ーー 実際に concrete5 をやってみた ーーーー もっと知りたいぜ ーーでも返答を待つのがツライぜ！！伝え方が難しいところがある！！だったら、どうする！？ついに！！あのオトコとコンタクトをとってみるか！？
STORY
ーー 実際に concrete5 をやってみた ーーーー もっと知りたいぜ ーーねぇ、菱川さん！マジ（本気）で concrete5 やりたいんだけど、ここを教えて！？
STORY
ーー 実際に concrete5 をやってみた ーーーー もっと知りたいぜ ーー
ふむ、ふむ・・・あいかわらず、おもしろいこと考えるよねーああ、いいよ！
ねぇ、菱川さん！マジ（本気）で concrete5 やりたいんだけど、ここを教えて！？
STORY
ーー 個別指導 菱川インタビュー ーー• カフェで怒濤の質問攻めをされました。本人のやる気に魅了されました。• デザイナー目線での要望もたくさん提案してくれました。• concrete5 は DJ Kazu の意見を大々的に採用します。• あと、紹介したいヒトがいるんだよ。
concrete5japan代表菱川さん
ーー 実際に concrete5 をやってみた ーー
STORY
ーー 週刊 concrete5 ーーhissy から聞いてるよ。もっと知りたいなら、週刊 concrete5に参加しなよ。あと、カレーが大好きなんだよね〜
concrete5CCO
katz さん
ーー 実際に concrete5 をやってみた ーー
STORY
ーー 週刊 concrete5 発信図 ーーーー 実際に concrete5 をやってみた ーー広がる週刊 concrete5ネットワーク！！！
発信基地の名古屋katz さん京都DJ Kazu
千葉庄司さん
はレギュラーはゲストエリア拡大中です放送は 300 回越え！
STORY
ーー 実際に concrete5 をやってみた ーーーー というわけで ーー週刊 concrete5 に出演決定！！毎週木曜日 約 21時頃から開始です。即答でその場で聞けます。
今では、レギュラー出演！現在ゲスト募集中です。ここで Evangelist 庄司早香さんと知り合いました。
STORY
ーー 実際に concrete5 をやってみた ーーーー 広がるヒトとのつながり ーー週刊 concrete5 の放送を聞いていて、おもしろいこと言うよね〜。ボクとタッグを組まないか！？キミのアイディアをカタチにするのを手伝うよ！！ 関西 UG
acliss さん
STORY
ーー 実際に concrete5 をやってみた ーー週刊 concrete5 の放送を聞いていて、おもしろいこと言うよね〜。ボクとタッグを組まないか！？キミのアイディアをカタチにするのを手伝うよ！！
なんと！神よ！！よろしくお願いします！！！
ーー 広がるヒトとのつながり ーー
関西 UGacliss さん
STORY
ーー 実際に concrete5 をやってみた ーーーー その結果 ーー週刊 concrete5 と acliss さんのおかげ concrete5 の使い方を早くより理解できました。こうやって、サイトをつくれるようになりました。
今は concrete5 のフリーダムさにハマっています。
STORY
ーー 実際に concrete5 をやってみた ーーーー アドバイス ーーひとりで考えるのもいいですけど、わからなかったら、勉強会への参加やコミュニティで聞いてみましょう。
まとめると！！ concrete5 のコミュニティやサポートしてくれるヒトが親切でいいヒトばかりです！！
STORY
ーー 実際に concrete5 をやってみた ーーーー 募集 ーーというわけで週刊 concrete5 でわからないことを聞いてみたいという方がおられたらご連絡ください。いっしょに出演しましょう！！
Kazuhiro Matsuda もしくは slackへご連絡下さい。どうぞ、よろしくお願いします。
STORY
紹介内容1 話 のテーマ作成秘話2 話 でつくったサイト事例3 話 マーケットプレイス活用という流れでお話させていただきます。
STORY でのサイト事例
それなら、見せてもらおうか！！
STORY でのサイト事例
それなら、見せてもらおうか！！
とくとご覧あれ！
Deliverable
どれもコンセプトは全然違います。2015 年 12 月〜 2016 年 5 月末まで「 2 サイト」創りました！制作時は 5.7.5.6 になります。
「私が創った WEB サイト・theme 」を簡単にご紹介いたします！
djkazu.supervinyl.netayanyan.net
Deliverable
テーマ仕様（汎用性）のため、html のベタばりを少なくしています。
Deliverable
サイトにでてくるイラストは、私が描いています。写真は、素材購入や当時に撮影したものを加工しています。
Deliverable
第 1弾の紹介です。
Deliverable2016,03,31 concrete5 で創ったサイト紹介
DjKazu仕様 djkazu.supervinyl.netconcrete5 ver5.7.5.6 （制作時）
Deliverable
•構成およびワイヤー、デザイン、コーディングで1 ヵ月ほど。
•作業期間は 2015 年 12 月〜末手前まで。•初めての構築で 3 ヵ月を費やす。•作業期間は 2016 年 1 月〜 3 月末で完成。•マーケットプレイス用テーマ申請は 2016 年 4 月〜 7 月頃で 7 月 16 日で承認されました。
構築期間
Deliverable
特長としてはコーポレート型WEB サイトです。
1.parallax を用いて動きのあるサイトであり、parallax オフ対応もできる
2.レスポンシブ機能あり3.カスタムレイアウトプリセットを使用。4.ジャンルごとにラベルの名前や色が変えられる5.ページリストを応用してつかっている
Deliverable
Bootstrap で使うレイアウト機能です。基本的には○○カラムとその都度の設定をしますが登録をしておけば、決め打ちでカラム設定ができます。これは便利です。ただし、カラムというレイアウトのみの設定になります。
カスタムレイアウトプリセットとは！？
カスタムレイアウトプリセットとは！？Deliverable
さらに class=“○○” とかも書いておけるのでCSS が使いやすくなります。
ページリストを応用することによりコンテンツの追加が簡単になり管理もしやすく、運用がスムーズになると思います。
Deliverable
理由は、ページリストは 1 ページ単位で管理できる。ページ内での編集ができ、サイトマップからも探すこともできます。
Deliverable
• TOP ページはコーポレート的に活用できます。• ABOUT ページはスタッフ紹介、地図、お問い合わせに活用できます。• FAVORIT ページは商品紹介に活用できます。• DIARY はブログに活用できます。• SCHEDULE はニュースや特集ページに活用できます。• 基本テーマ仕様なので汎用性をもたす！！※ 作成者としてはこう思っています。
まとめ各ページの活用構成
Deliverable
第 2弾の紹介です。
Deliverable
運用仕様ver ayanyan.netconcrete5 ver5.7.5.6 （制作時）
2016,05,31 concrete5 で創ったサイト紹介
Deliverable
•構成およびワイヤー、デザイン、コーディングで1 ヵ月ほど。
•作業期間は 2016 年 4 月〜末手前まで。•構築は約 2週間〜 3週間。•作業期間は 2016 年 5 月中旬〜 5 月末で完成。
構築期間
Deliverable
特長ブログメイン型WEB サイトです。1.masony を用いてコンテンツをランダムに並べられる。レスポンシブ機能あり。2.権限機能でブログ記事の運用をしている。3.サムネイルの写真の大きさやアイコンの取り付けが選ぶことができる。4.多様にページリストを使っている。さらにページリストを応用してつかっている。
ページタイプとページ属性とページリストの 3 つを組み合わす事で画像の大きさ、アイコンの種類を選択できる要素をもたせたり、ページタイプから各ページへのジャンルを選択できる要素をもたすことが可能。ページリストを応用することで関連記事やピックアップ記事などの表示も可能。
Deliverable
ページリストを応用することによりコンテンツの追加が簡単になり管理もしやすく、運用がスムーズになると思います。
Deliverable
理由は、ページリストは 1 ページ単位で管理できる。ページ内での編集ができ、サイトマップからも探すこともできます。
Deliverable
さらに、ワークフロー＆権限機能をつかっています。
Deliverable
例えば、記事を書いたヒトからメールがきます。書いた記事のデザイン、内容などを確認して問題なければ公開できるという機能です。これで安全な運用ができます。
ワークフローとは！？
Deliverable
ある一部の特集記事やキャンペーンページを表示・非表示にできます。閲覧できる対象を選択できるという機能です。時間指定などもでき、いつからいつまでというような公開もできます。
権限とは！？
Deliverable
• TOP ページおよびジャンルページはブログに活用できます。ジャンルごとに出力できます。• INFORMATION はニュースや特集ページにて活用できます。 • CONTACT はお問い合わせにて活用できます。 • FAQ はよくある質問にて活用できます。• 基本テーマ仕様なので汎用性をもたす！！※ 作成者としてはこう思っています。
まとめ各ページの活用構成
STORY
紹介内容1 話 のテーマ作成秘話2 話 でつくったサイト事例3 話 マーケットプレイス活用という流れでお話させていただきます。
STORY マーケットプレイス活用
サイトをつくれないヒトはどうする！？
STORY マーケットプレイス活用
サイトをつくれないヒトはどうする！？
マーケットプレイスというところから使いたいテーマやアドオンをダウンロードすればいい！！
STORY マーケットプレイス活用
じゃぁ、私の HeyDJ で説明しよう！
STORY マーケットプレイス活用
じゃぁ、私の HeyDJ で説明しよう！
おお、ナイスアイディア！！
その前に、concrete5マーケットプレイスへいき、登録をしましょう！ブラウザで「 concrete5 マーケットプレイス」と検索するとでてきます。もしくはアドレスが「 https://www.concrete5.org/marketplace 」になります。
STORY マーケットプレイス活用
それでは、右肩にある「 Join our Community 」をクリックしましょう。
STORY マーケットプレイス活用
ID 、 Pass 、 Email を登録していきましょう。 Website Building は初期値でいいです。
STORY マーケットプレイス活用
STORY マーケットプレイス活用
次に同意するにチェックをいれて認証パスワードをいれます。見にくいと思ったらリロードアイコンをクリックしてください。パスワードの間には半スペを入れましょう。
ダメだったら NG がこのようにでます。この場合は Id が使われているということです。再トライしましょう！
STORY マーケットプレイス活用
認証されれば、このような画面になります。プロフィールはあとでもいれることができます。
STORY マーケットプレイス活用
STORY マーケットプレイス活用
一旦戻って、concrete5マーケットプレイスのトップへいき BrowseThemeへ進みます。
STORY マーケットプレイス活用
テーマ一覧になります。サムネイルをクリックしたら、クリックした各 theme ページへいけます。
STORY マーケットプレイス活用
ここで Freeボタン (Download Archive) を押してダウンロードします。
STORY マーケットプレイス活用
テーマのインストール方法は、1. concrete5 を空でインストールします。2. package の中に解凍したフォルダをいれます。3. GUIへいき、 concrete5 を拡張を選択。4. インストールで「はい。サイトのコンテンツをパッケージの内容でリセットします。」を選択。※ Hey DJ に限ります。5. 読み込みがはじまり、少し待てば完了です。
アドオンも同じ容量で入れる事ができます。簡易説明しておくと、ダウンロードしてきたら package フォルダの中の部品を concrete5 のpackage フォルダにいれるだけです。GUIへいき、 concrete5 を拡張を選択でインストールです。
STORY マーケットプレイス活用
一例： hissy アドオン「 author_profile 」を HEY DJ にいれるとhissy アドオン解説はここです。HEY DJ仕様部品アドレスid:adminpass:harvestこれは本体をいれてから blocks の中にそのままいれるだけの部品です。
STORY マーケットプレイス活用
Deliverable2016,07,16 マーケットプレイスで公開
デモページheydj.supervinyl.net/concrete5 ver5.7.5.6 （制作時）
Deliverable
• TOP ページはコーポレート的に活用できます。• ABOUT ページはスタッフ紹介、地図、お問い合わせに活用できます。• FAVORIT ページは商品紹介に活用できます。• DIARY はブログに活用できます。• SCHEDULE はニュースや特集ページに活用できます。• 基本テーマ仕様なので汎用性をもたす！！※ 作成者としてはこう思っています。
各ページの活用構成
Deliverable
マーケットプレイス用テーマこちらは無料のテーマのデモです。運用 ver と仕様が違います。1.無料につき、ジャンルに応じてラベルの名前や色が変えられるのは 3種類まで。2.parallax はなしになっています。3.トップページがカルーセルになっています。
デモページ heydj.supervinyl.netconcrete5 ver7.5.6 （制作時）
テーマ販売についてこの FirstTheme は無料版となります。
DjKazu運用 ver とは若干違います。※ 下記ページにて確認願います。concrete5 マーケットプレイスまで
http://www.concrete5.org/marketplace/themes/hey-dj
Deliverable
SemiFinal
最後にご存知かと思いますが、運用を開始したら必ずバックアップをとってから、バージョンアップをしていきましょう。1.バグ修正などがはいっています。2.機能が向上されている部分もあります。3.バックアップをとって機能追加をする。
Message
あと少しだけ私は CMS を触った事ない初心者から現在では登壇者になりました次は「あなた」です！！キーワードは、「やる気・元気・勇気」です。
Final
予告！現在、第 3弾を創っています。「複合検索」「多言語」「会員機能」などを盛り込みます。concrete5 のメイン機能を活用したさらなる創りを目指します！ご清聴どうもありがとうございました。