concrete5 harvest

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 のメイン機能を活用したさらなる創りを目指します！ご清聴どうもありがとうございました。