SlideShare una empresa de Scribd logo
1 de 40
concrete5 theme
WEBデザイナーがconcrete5を語る
9ヵ月前の自分とシャドウボクシングしました
CMS夏祭り2016
1
About
MotherHeads (マザーヘッズ)
Designer(デザイナー)
Kazuhiro Matsuda (松田和広)
「ここでしか創れないモノを創る!
モノ創りをつうじてヒトを財産とする」
www.motherheads.net オフィシャルWEB
www.motherheads.com ECサイト
@dj_kazu1 Kazuhiro Matsuda
About
Holm.design inc. (ホルムデザイン株式会社)
Web Designer(ウェブデザイナー)
Kazuhiro Matsuda(松田和広)
www.holmdesign.jp
LP系をメインにしています。
企業のWEBサイトやDTP関連などもやっており
ます。
About
この二つの違いは!?
自分のブランド
自由気ままで
好き放題しています
仕事をうけます
会社として、やっています
安心してください
WEBページが
独特だょ!!
今、concrete5で
つくってるよ!!
Title
WEBデザイナーが語るエンターテイメントショー
初心者でもconcrete5でサイトは創れます。
Information
本日は、これだけのCMSさんが
展示されています。
STORY
ここでは、
のご紹介をいたします。
STORY
紹介内容
の魅力について
STORY
CMS超初心者のWEBデザイナーです。
concrete5をはじめて今日で11ヶ月になります。
そして6ヵ月でテーマ(1作品)を公開できました。
なんと、Evangelistをやっております。
その前に…実は私、
STORY
どれもコンセプトは全然違います。
2015年12月〜2016年5月末で
「2サイト」創りました!
「私が創ったWEBサイト・theme」で
す。よければ閲覧ください。
djkazu.supervinyl.net
ayanyan.net
STORY
2016,03,31 concrete5で創ったサイト紹介
DjKazu仕様 djkazu.supervinyl.net
concrete5 ver5.7.5.6
Deliverable
テーマ販売について
このFirstThemeは
無料版となります。
DjKazu運用verとは若干違います。
※下記ページにて確認願います。
concrete5 マーケットプレイスまで
http://www.concrete5.org/marketplace/themes/hey-dj
STORY
運用仕様ver ayanyan.net
concrete5 ver5.7.5.6
2016,05,31 concrete5で創ったサイト紹介
Deliverable
テーマ販売について
このSecondThemeは
有料版となります。
運用verとは若干違います。
※現在、申請への準備中です。
STORY
紹介内容
の魅力とは!?
concrete5ってなに!?
STORY
紹介内容
の魅力とは!?
concrete5ってなに!?
なんだ!?
家を建てるのか!?
STORY
紹介内容
の魅力とは!?
ちがうっ!!
WEBサイトをつくるんだ!
STORY
紹介内容
の魅力とは!?
ちがうっ!!
WEBサイトをつくるんだ!
わかった!OK!!
それでは、いってみよう!
STORY
• コード(PHP・JS)を書かないと使えない
CMSではありません。
※ただし自由度を高めるなら必要です。
他のCMSとは、少し違うCMSです。
• 直感的操作(GUI)でパズルのようにコンテン
ツ(ブロック)を積み上げてページをつくっ
ていきます。
は、
ーー concrete5とは ーー
STORY
• なによりも自由度が高い!
そして完成してからも自由がききます。
• 管理画面からだけではなく、実際のページを
見ながら更新できます。
• コミュニケーションをとりながら気軽に編集
できます。
は、
ーー concrete5とは ーー
STORY
• 基本機能でできることが豊富に揃っています
最初からつくるときは「○○ のときは、これ
をする」というのがわかりやすい
• コンテンツの更新やページのコピーなどユーザ
ーの「やりたいこと」をカタチにしやすい
• 直感的に更新できるのでスピーディーな更新が
できる
は、
ーー concrete5とは ーー
STORY
ーー concrete5の魅力 ーー
Goodポイント!
WEBデザイナー必見!!
• htmlとcssがわかれば、サイトがつくれます。
デザイナーやコーダーが構築しやすいCMS
• 様々なレイアウトでサイトを表現できるため、
単調なデザイン以外にも対応できる。
STORY
ーー concrete5の魅力 ーー
歴史
• アメリカ(ポートランド)生まれのCMS
。
• もともとは有償でした。
• そして2008年、オープンソース化&無償
へシフトチェンジしました。
STORY
ーー concrete5の魅力 ーー
ライセンス
• 制限の少ないMITライセンス。
すべて自己責任となりますが、改変・再配布・
商用利用などができ、著作権表示を保持します
。ソースコードを非公開にもできる。
たとえば、カスタマイズしたソースコードを公
開する義務はないのでクライアントワークスに
適しています。
STORY
ーー concrete5の魅力 ーー
• 直感的操作(GUI)なので「編集モード」でページを
見たまま編集ができる。
目視で確認できる
STORY
ーー concrete5の魅力 ーー
•ウェブサイトの全体像を一目で
把握ができる。
わかりやすいツリー形式でペー
ジ管理ができる。
目視で確認できる
STORY
ーー concrete5の魅力 ーー
• ドラッグ&ドロップでコンテンツを配置する。
今すぐ使える機能
STORY
ーー concrete5の魅力 ーー
• すぐ使えるブロックが豊富で29個あ
ります。(ver 5.7.5.9現在)
CSSをあてることで装飾できます。
便利ブロック例:
フォームブロック
Googleマップブロック
youtubeブロックなど
今すぐ使える機能
STORY
ーー concrete5の魅力 ーー
• やり直しができるバージョン機能
搭載(履歴機能のことです)。
これで失敗しても安心して戻れま
す。
何のバージョンという命名もつけ
て管理もできます。
今すぐ使える機能
STORY
ーー concrete5の魅力 ーー
• コンテンツ部品(写真など)は
ファイルマネージャーで管理が
でき画像の編集もできる。
管理がしやすい
STORY
ーー concrete5の魅力 ーー
• ファイル管理がとてもしやす
い。
カスタマイズファイルが各フ
ォルダで管理できる。
管理がしやすい
STORY
ーー concrete5の魅力 ーー
• コアをさわらないオーバーラ
イド(コピペ)で開発ができ
る。
使いたい部品をコアからコピ
ーして使います。
安全にできます。
安全な構築
STORY
ーー concrete5の魅力 ーー
• エラーがでてもデバック表
示ができる。エラー箇所が
わかります。
安全な構築
STORY
ーー concrete5の魅力 ーー
• ページの量産はコン
ポーザでできます。
作成したフォームに
登録していきます。
安全な構築
STORY
ーー concrete5の魅力 ーー
• 多言語のページがわかりやすい
。
サイトマップのツリーでひと目
でわかるように表示してくれま
す。
安全な構築
STORY
ーー concrete5の魅力 ーー
すばらしい機能
• すぐ使える標準での権限機能があります。
• 担当者がチェックしてからコンテンツを公開で
きるワークフロー機能を搭載。
• 公開開始日から終了日までの指定できます。
キャンペーンサイトや期間限定ページのスケジ
ュール表示ができる。
STORY
ーー concrete5の魅力 ーー
チームワークCMS
• みんなで共有できるチームワークCMS。
ディレクターは進行管理・サイト監修を担当、
WEBデザイナーはGUI担当、
フロントエンジニアはJS・PHP担当で
分業すると効率アップができる!
STORY
ーー concrete5の魅力 ーー
まとめると!?
concrete5をつかえば、
クライアント・ディレクター・デザイナー・
エンジニアのすべてのヒトがハッピーになれる可
能性を秘めています。
Question
質疑応答
答えられる限り全力でお答えしますが、
質問の意図がわからなかったり、
言葉足らずで説明ができないことも
あると思いますが、ご了承ください。
Final
予告!
現在、第3弾を創っています。
「複合検索」「多言語」「会員機能」などを
盛り込みます。
concrete5のメイン機能を活用した
さらなる創りを目指します!
ご清聴どうもありがとうございました。

Más contenido relacionado

La actualidad más candente

デザイン通りのコーディング!消耗しないまちがい探し【Frontend Nagoya#3】
デザイン通りのコーディング!消耗しないまちがい探し【Frontend Nagoya#3】デザイン通りのコーディング!消耗しないまちがい探し【Frontend Nagoya#3】
デザイン通りのコーディング!消耗しないまちがい探し【Frontend Nagoya#3】
Asuka Kobayashi
 
コンセプトキャッチャーVer03
コンセプトキャッチャーVer03コンセプトキャッチャーVer03
コンセプトキャッチャーVer03
Shunsuke Sato
 
新入生歓迎LT祭り2014
新入生歓迎LT祭り2014新入生歓迎LT祭り2014
新入生歓迎LT祭り2014
Azusa Uezu
 

La actualidad más candente (20)

concrete5 osc kyoto
concrete5 osc kyotoconcrete5 osc kyoto
concrete5 osc kyoto
 
熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいこと
熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいこと熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいこと
熊本地震支援Webサイトの実例紹介と支援のためのホームページを作りたい人に絶対知っていてほしいこと
 
WebデザイナーによるWebデザイナーのためのマーケティング入門
WebデザイナーによるWebデザイナーのためのマーケティング入門WebデザイナーによるWebデザイナーのためのマーケティング入門
WebデザイナーによるWebデザイナーのためのマーケティング入門
 
Yat-wbnara201602
Yat-wbnara201602Yat-wbnara201602
Yat-wbnara201602
 
WordCamp Kyoto 2017「縁結びの聖地でWordPressと恋に落ちたテーマ制作者の話」
WordCamp Kyoto 2017「縁結びの聖地でWordPressと恋に落ちたテーマ制作者の話」WordCamp Kyoto 2017「縁結びの聖地でWordPressと恋に落ちたテーマ制作者の話」
WordCamp Kyoto 2017「縁結びの聖地でWordPressと恋に落ちたテーマ制作者の話」
 
デザイン通りのコーディング!消耗しないまちがい探し【Frontend Nagoya#3】
デザイン通りのコーディング!消耗しないまちがい探し【Frontend Nagoya#3】デザイン通りのコーディング!消耗しないまちがい探し【Frontend Nagoya#3】
デザイン通りのコーディング!消耗しないまちがい探し【Frontend Nagoya#3】
 
プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方プロトタイプ時代の
WordPressテーマの作り方・考え方
プロトタイプ時代の
WordPressテーマの作り方・考え方
 
2015年のWebを考える
2015年のWebを考える2015年のWebを考える
2015年のWebを考える
 
フリーランスに必要な “リサーチスキル”と仕事の作り方
フリーランスに必要な “リサーチスキル”と仕事の作り方フリーランスに必要な “リサーチスキル”と仕事の作り方
フリーランスに必要な “リサーチスキル”と仕事の作り方
 
WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介
WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介
WordPress 初心者さんが知っておいたほうが良い事&プラグインの紹介
 
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
誰に何を伝える?わたしの デザインコンセプトの 作り方、探し方
 
自分のこれからについて語るときに僕の語ること Webディレクターのための弁証法入門-
自分のこれからについて語るときに僕の語ること  Webディレクターのための弁証法入門-自分のこれからについて語るときに僕の語ること  Webディレクターのための弁証法入門-
自分のこれからについて語るときに僕の語ること Webディレクターのための弁証法入門-
 
WordPressカスタム投稿とカスタム分類を使ってみよう
WordPressカスタム投稿とカスタム分類を使ってみようWordPressカスタム投稿とカスタム分類を使ってみよう
WordPressカスタム投稿とカスタム分類を使ってみよう
 
南実業会Webサイト開設について
南実業会Webサイト開設について南実業会Webサイト開設について
南実業会Webサイト開設について
 
コンセプトキャッチャーVer03
コンセプトキャッチャーVer03コンセプトキャッチャーVer03
コンセプトキャッチャーVer03
 
Web制作のためのおすすめツール
Web制作のためのおすすめツールWeb制作のためのおすすめツール
Web制作のためのおすすめツール
 
第10回ゼロからはじめるWordPress勉強会(初心者向け)
第10回ゼロからはじめるWordPress勉強会(初心者向け)第10回ゼロからはじめるWordPress勉強会(初心者向け)
第10回ゼロからはじめるWordPress勉強会(初心者向け)
 
サービス業から学んだコミュニケーションのコツ
サービス業から学んだコミュニケーションのコツサービス業から学んだコミュニケーションのコツ
サービス業から学んだコミュニケーションのコツ
 
クライアントと同じ方向を向くという事
クライアントと同じ方向を向くという事クライアントと同じ方向を向くという事
クライアントと同じ方向を向くという事
 
新入生歓迎LT祭り2014
新入生歓迎LT祭り2014新入生歓迎LT祭り2014
新入生歓迎LT祭り2014
 

Destacado

Destacado (13)

Borang pentaksiran (bm)
Borang pentaksiran (bm)Borang pentaksiran (bm)
Borang pentaksiran (bm)
 
Bulletin d'opportunités 77 - Mai à août 2016
Bulletin d'opportunités 77 - Mai à août 2016Bulletin d'opportunités 77 - Mai à août 2016
Bulletin d'opportunités 77 - Mai à août 2016
 
concrete5 my theme HeyDJ
concrete5 my theme HeyDJconcrete5 my theme HeyDJ
concrete5 my theme HeyDJ
 
LA SIMPLIFICATION EN MARCHE : une dynamique à l’épreuve des faits
LA SIMPLIFICATION EN MARCHE : une dynamique à l’épreuve des faitsLA SIMPLIFICATION EN MARCHE : une dynamique à l’épreuve des faits
LA SIMPLIFICATION EN MARCHE : une dynamique à l’épreuve des faits
 
Forklift final
Forklift finalForklift final
Forklift final
 
Les relations publiques 2.0 (#3rslw)
Les relations publiques 2.0 (#3rslw)Les relations publiques 2.0 (#3rslw)
Les relations publiques 2.0 (#3rslw)
 
Vijay seminor ..analysis
Vijay seminor ..analysisVijay seminor ..analysis
Vijay seminor ..analysis
 
Culture Villes Mondes - chiffres clés 2015
Culture Villes Mondes - chiffres clés 2015Culture Villes Mondes - chiffres clés 2015
Culture Villes Mondes - chiffres clés 2015
 
Monde : quelle nouvelle géographie économique dans dix ans ? Baro-éco Décembr...
Monde : quelle nouvelle géographie économique dans dix ans ? Baro-éco Décembr...Monde : quelle nouvelle géographie économique dans dix ans ? Baro-éco Décembr...
Monde : quelle nouvelle géographie économique dans dix ans ? Baro-éco Décembr...
 
concrete5 勉強会 20150117_テーマ作成
concrete5 勉強会 20150117_テーマ作成concrete5 勉強会 20150117_テーマ作成
concrete5 勉強会 20150117_テーマ作成
 
35 DAVID SUTTON PICTURES THE CONGENITAL SKELETAL ANOMALIES: SKELETAL DYSPLAS...
35 DAVID SUTTON PICTURES  THE CONGENITAL SKELETAL ANOMALIES: SKELETAL DYSPLAS...35 DAVID SUTTON PICTURES  THE CONGENITAL SKELETAL ANOMALIES: SKELETAL DYSPLAS...
35 DAVID SUTTON PICTURES THE CONGENITAL SKELETAL ANOMALIES: SKELETAL DYSPLAS...
 
Sonographic evaluation of msk dysplasia Dr. Muhammad Bin Zulfiqar
Sonographic evaluation of msk dysplasia Dr. Muhammad Bin ZulfiqarSonographic evaluation of msk dysplasia Dr. Muhammad Bin Zulfiqar
Sonographic evaluation of msk dysplasia Dr. Muhammad Bin Zulfiqar
 
British Columbia's carbon tax
British Columbia's carbon taxBritish Columbia's carbon tax
British Columbia's carbon tax
 

Similar a concrete5 CMS FES 2016(CMS夏祭り2016)

第三回ディレクタートークショー -DECADE(+2-
第三回ディレクタートークショー -DECADE(+2-第三回ディレクタートークショー -DECADE(+2-
第三回ディレクタートークショー -DECADE(+2-
Takayuki Onishi
 
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦
sogawaminoru
 
これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプランこれからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプラン
Sasaki Kouhei
 

Similar a concrete5 CMS FES 2016(CMS夏祭り2016) (20)

concrete5 my lt
concrete5 my ltconcrete5 my lt
concrete5 my lt
 
concrete5 harvest
concrete5 harvestconcrete5 harvest
concrete5 harvest
 
concrete5 wesling
concrete5 weslingconcrete5 wesling
concrete5 wesling
 
第三回ディレクタートークショー -DECADE(+2-
第三回ディレクタートークショー -DECADE(+2-第三回ディレクタートークショー -DECADE(+2-
第三回ディレクタートークショー -DECADE(+2-
 
小川流!わかりやすいテーマの作り方
小川流!わかりやすいテーマの作り方小川流!わかりやすいテーマの作り方
小川流!わかりやすいテーマの作り方
 
concrete5バージョン8リリースパーティ「テーマを作ろう」
concrete5バージョン8リリースパーティ「テーマを作ろう」 concrete5バージョン8リリースパーティ「テーマを作ろう」
concrete5バージョン8リリースパーティ「テーマを作ろう」
 
デ部会 女子部 20170329
デ部会 女子部 20170329デ部会 女子部 20170329
デ部会 女子部 20170329
 
Webサービスをデザインするってどういうこと?
Webサービスをデザインするってどういうこと?Webサービスをデザインするってどういうこと?
Webサービスをデザインするってどういうこと?
 
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
工数削減! 印刷物デザイナーに知ってほしい コスパの良いWebデザイン.pdf
 
Pulse cms first theme
Pulse cms first themePulse cms first theme
Pulse cms first theme
 
Lightning Talk
Lightning TalkLightning Talk
Lightning Talk
 
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
デザイナーさんでもできる Browsersync からはじめる作業効率化・春デザイナーさんでもできる Browsersync からはじめる作業効率化・春
デザイナーさんでもできる Browsersync からはじめる作業効率化・春
 
僕のFireworks普及計画!!
僕のFireworks普及計画!!僕のFireworks普及計画!!
僕のFireworks普及計画!!
 
Jbug福岡#3 Backlogを活用したシェアオフィス管理
Jbug福岡#3 Backlogを活用したシェアオフィス管理Jbug福岡#3 Backlogを活用したシェアオフィス管理
Jbug福岡#3 Backlogを活用したシェアオフィス管理
 
デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦デザイナーとプログラマーの 仲良し大作戦
デザイナーとプログラマーの 仲良し大作戦
 
Re:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the futureRe:Cre Vol.14 | Web design process for the future
Re:Cre Vol.14 | Web design process for the future
 
Web Design Process for The Future
Web Design Process for The FutureWeb Design Process for The Future
Web Design Process for The Future
 
いまさら聞けない!ホームページの立ち上げから運用体制構築
いまさら聞けない!ホームページの立ち上げから運用体制構築いまさら聞けない!ホームページの立ち上げから運用体制構築
いまさら聞けない!ホームページの立ち上げから運用体制構築
 
これからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプランこれからのWebデザイナーのキャリアプラン
これからのWebデザイナーのキャリアプラン
 
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
フリー3ヶ月目で思う、2年後稼げるWebデザイナー像
 

concrete5 CMS FES 2016(CMS夏祭り2016)

Notas del editor

  1. 会社名:HOLM.design メンバーの紹介