concrete5 osc kyoto
TRANSCRIPT
concrete5 themeCMS初心者Webデザイナーが concrete5コミュニティに飛び込んでオリジナルデザインのテーマを完成させた話
2016/07/30 OSC京都 ver2016/01/01-05/31までのサイト・テーマ紹介追加
About
MotherHeads （マザーヘッズ）Designer （デザイナー）Kazuhiro Matsuda （松田和広）「ここでしか創れないモノを創る！モノ創りをつうじてヒトを財産とする」
www.motherheads.net オフィシャルWEBwww.motherheads.com ECサイト
@dj_kazu1 Kazuhiro Matsuda
About
これは私が立ち上げたブランドになります。独自性をとても大事にしています。ここでは、デザインを通じて様々なモノを創っています。ファッション、 DTP、WEBサイト、イラスト、アクセサリーと様々です。詳しくはmotherheads.netをご覧ください。
About
それでは、本題へはいります。
STORY
ーー 結論！！ ーーCMS初心者の私が concrete5で
WEBサイト＆テーマを創ることができました。
STORY
ーー キーワード ーー「やる気・元気・勇気」
です！
STORY
ーー なぜ！？ ーー「 CMS初心者のWEBデザイナーがなぜ創れたのか！？」をここでは、お話していきます。
STORY
ーー 未経験！ ーー当時の私は、
CMSなんて触った事もデザインを創った事も一度もありません。本当に 0ベースのド素人で、概念すら知らないレベルでした。
STORY
ーー スキルは！？ ーー私の手持ちの武器はデザイン、 HTML&CSS、 JSを少々、PHPは全くわかりません。
当時の自分なので、WEBサイト制作はずっとスタティック (静的 )のみでした。
STORY
ーー 未来のために pt.1 ーー時代とともにクライアントからも自分で更新ができる CMSの要望がありました。
当時の自分当時の私は CMSを触ったこともなく、創り方さえ知りませんでした。
STORY
ーー 未来のために pt.2 ーーさらなるスキルアップのために勉強会に参加することを決めて活動しました。
当時の自分それまでは一切、勉強会などに参加していませんでした。
STORY
ーー アクション ーーはじめて参加した勉強会が、第3回concrete5京都勉強会でした。アポなしの完全飛び込みです。
そこで知り合ったのが主催の菱川さんでした。
STORY
インスピレーション pt.1
まずは、主催しいてる人柄チェックです。チェックの結果は…人柄がとてもステキな感じのヒトでした。受付でお話したときに感じました。で、本題の concrete5はというと！？
STORY
concrete5が直感的操作という言葉とおりでした。GUI操作がステキすぎました。これなら、目視で作業ができる！（デザイナー目線 CMSだと思いました）
インスピレーション pt.2勉強会でふれてみて、 concrete5が直感的に自分の肌に合うと感じた。
STORY
ところで、デザイナーは右脳派＝感覚・感性
だから concrete5にマッチしたと思っています。※あくまでも持論です。
ひらめき直感イメージ記憶芸術性創造性空間的全体を見る力図形を読み取る
右脳話す・書く分析力論理的科学的思考推論言語認識計算数学理解力
左脳
STORY
インスピレーション pt.3
なぜかというと、決められたフォーマットばかりのコンテンツばかりをいれないことができる。ページごとにちょっと違う変更ができるので単調にもでき、一手間くわえた工夫にもできる。ブロックを積み上げていくというパズル型。（クライアント目線 CMSだとも思いました）
STORY
ーー 放浪 ーー( 探さないで下さい )でも、すぐには手をだしませんでした。ちょっと遠回りをすることにしました。他にどんな CMSがあるのだろうと興味を持ち、 CMSを選定する旅をしました。
STORY
ーー 理由 ーーそれは CMSを習得するなら私は不器用なので、ひとつしかできないと思ったからです。
それなら、こだわって自分が納得したCMSを選んで習得したいと思ったからです。
STORY
ーー 調査 ーーそれから 3 ヵ月ぐらい、いろいろな CMSを探して調べて様々な展示会へ行きました。そこで各 CMSの強みや弱みなどを分析しました。
使ってないけど、大まかな知識は増えました。
STORY
ーー 比較 ーー各 CMSを比較して比較しました。わかったことがたくさんあって気づくこともできました。それで決めたのが concrete5でした！
STORY
ーー concrete5の魅力は！？ ーー• 有償から無償にチェンジ！オープンソース化。• 直感的操作 (GUI)であるため「編集モード」でページを見たまま編集（ドラッグアンドドロップ）ができる。• すぐ、つかえるブロックが豊富。• ウェブサイトの全体像を一目で把握ができる分かりやすいツリー形式のページ管理ができる。
STORY
ーー concrete5の魅力は！？ ーー• htmlと cssがわかればサイトがつくれる。• 様々なレイアウトでサイトを表現できるため、単調なデザイン以外にも対応できる。• やりすぎるとカオスの状態になるので、ここは注意することもおもしろさのひとつです。• 恐れなくても大丈夫なヒストリー機能搭載。• ページの量産はコンポーザにたよれる。
STORY
ーー concrete5の魅力は！？ ーー• ファイル管理がとてもしやすい。カスタマイズファイルが各フォルダで管理できる。• コンテンツ部品（写真など）はファイルマネージャーで管理ができ編集もできる。• コアをさわらないオーバーライドで開発ができる。エラーがでてもデバック表示できる。
STORY
ーー concrete5の魅力は！？ ーー• すぐ使える標準の権限機能があります。• 担当者がチェックしてからコンテンツを公開できるワークフロー機能を搭載！• concrete5は制限の少ないMITライセンスなので、カスタマイズしたソースコードを公開する義務はありません。クライアントの制作案件に必要な部分です。
STORY
ーー concrete5の魅力は！？ ーー• GUIはWEBデザイナー、 JS・ PHPはフロントエンジニア、ディレクターは進行管理、監修で分業すると効率アップ！• など他にもたくさん機能はありますが、この時点では使っていないのは発表しません。• 次回スピーカーになれたら、さらなる成長した姿をお見せします。
STORY
ーー How & PDCA ーー材料はそろいました。さあ、どうするか！？ (How)
行く勉強会は、concrete5 関係のみにしぼりました。 (Plan)
やるぞ！と決めたら実行あるのみです。 (Do)
STORY
ーー PDCA ーー実際やってみたら、
アクシデントだらけ。 (Check)
次のページに続く
STORY
concrete5のアツイところ親切で個性的なヒトが多いコミュニティやフォーラムで聞ける毎週木曜日の週刊 concrete5というラジオで教えてくれる
concrete5のツライところ英語のサイトが多い、資料が少ないそれをこのように補っています
STORY
ーー PDCA ーーconrete5サイトのコミュニティにわからないことの書き込みをたくさんしました。 (Action)結果、レスポンスがとてもよかった！
もっと知りたいので、週刊 concrete5に出演しました。 (Action)結果、ここで一気に飛躍しました。
STORY
ーー PDCAの結果 ーーサポートしてくれるヒトたちがいました。Special Thanks
• concrete5 関西 UG 菱川拓郎• concrete5 UGリーダー Katz Ueno• concrete5 関西 UG @acliss• concrete5 Evangelist 佐野譲• concrete5 Evangelist 庄司早香「感謝」でいっぱいです。
STORYーー 要素 ーー1 番大事なのは「やる気・元気・勇気」です！これさえあれば、企画や制作や運用など、なんでもできます！！
Deliverable
実際に、「私が創ったWEBサイト・ theme」をご紹介いたします！どれもコンセプトは全然違います。
2015 年 12 月〜 2016 年 5 月末までで「 2サイト」創りました！
Deliverable
ちなみに、テーマ仕様（汎用性）のため、 htmlのベタばりを少なくしています。
Deliverable
イラストは、私が描いています。写真は素材購入や当時に撮影したものを加工しています。
Deliverable
第 1 弾の紹介です。
Deliverable2016,03,31 concrete5で創ったサイト紹介
DjKazu仕様 djkazu.supervinyl.netconcrete5 ver7.5.6
Deliverable
構築期間• 構成およびワイヤー、デザイン、コーディングで 1 ヵ月ほど。• 作業期間は 2015 年 12 月〜末手前まで。• 初めての構築で 3 ヵ月を費やす。• 作業期間は 2016 年 1 月〜 3 月末で完成。• マーケットプレイス用テーマ申請は 2016 年
4 月〜 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
テーマサイトこちらは無料のテーマサイトのデモです。運用 verと仕様が違います。1. 無料につき、ジャンルに応じてラベルの名前や色が変えられるのは 3 種類まで。2.parallaxはなしになっています。3.トップページがカルーセルになっています。
デモページ heydj.supervinyl.netconcrete5 ver7.5.6
Deliverable
テーマ販売についてこの FirstThemeは無料版となります。
DjKazu 運用 verとは若干違います。※上記ページにて確認願います。concrete5 マーケットプレイスまで
http://www.concrete5.org/marketplace/themes/hey-dj
Deliverable
第 2 弾の紹介です。
Deliverable
構築期間• 構成およびワイヤー、デザイン、コーディングで 1 ヵ月ほど。• 作業期間は 2016 年 4 月〜末手前まで。• 構築は約 2 週間〜 3 週間。• 作業期間は 2016 年 5 月中旬〜 5 月末で完成。
Deliverable特長としてはブログメイン型 WEBサイトです。
1.masonyを用いてコンテンツをランダムに並べられる。レスポンシブ機能あり。2. 権限機能でブログ記事の運用をしている。3.サムネイルの写真の大きさやアイコンの取り付けが選ぶことができる。4. 多様にページリストを使っている。さらにページリストを応用してつかっている。
Deliverable
ページタイプとページ属性とページリストの 3つを組み合わす事で画像の大きさ、アイコンの種類を選択できる要素をもたせたり、ページタイプから各ページへのジャンルを選択できる要素をもたすことが可能。ページリストを応用することで関連記事やピックアップ記事などの表示も可能。
Deliverable
ページリストを応用することによりコンテンツの追加が簡単になり管理もしやすく、運用がスムーズになると思います。理由は、ページリストは 1 ページ単位で管理できる。ページ内での編集ができ、サイトマップからも探すこともできます。
Deliverable
さらに、ワークフロー＆権限機能をつかっています。
Deliverable
ワークフローとは！？例えば、記事を書いたヒトからメールがきます。書いた記事のデザイン、内容などを確認して問題なければ公開できるという機能です。これで安全な運用ができます。
Deliverable
権限とは！？ある一部の特集記事やキャンペーンページを表示・非表示にできます。閲覧できる対象を選択できるという機能です。時間指定などもでき、いつからいつまでというような公開もできます。
Deliverable
まだあります！スタイルカスタマイズを搭載しています。これは、マーケットプレイス用のテーマのみ搭載しています。
デモページ oh-love.ayanyan.net
Deliverable
スタイルカスタマイズとは！？テーマには、スタイルカスタマイズを搭載しています。プリセット（まとめて設定）を設定しておけば、ひとつのテーマで登録しているスタイル分だけの変更設定ができる。プリセットでまとめてではなく、個別でもかえることもできます。
Deliverable
まとめ各ページの活用構成• TOP ページおよびジャンルページはブログに活用できます。ジャンルごとに出力できます。• INFORMATIONはニュースや特集ページにて活用できます。 • CONTACTはお問い合わせにて活用できます。 • FAQはよくある質問にて活用できます。• 基本テーマ仕様なので汎用性をもたす！！※作成者としてはこう思っています。
Deliverable
テーマサイトこちらは有料のテーマサイトのデモです。運用 verと仕様が違います。1.スタイルカスタマイズで concrete5 内でスタイルが変えられる。2.コンテンツボックスのアイコンはつかない。3.コンテンツボックスの hoverがテキストである。
デモページ oh-love.ayanyan.net
Deliverable
テーマ販売についてこの SecondThemeは有料版のみとなります。運用版とは若干違います。※上記ページにて確認願います。
themeサイトconcrete5 マーケットプレイスまで現在、準備中
Information
テーマ余談です第 1 弾のテーマは concrete5の PRB 審査を受け
7/16に名古屋の地にて審査がとおりました。この日は名古屋で concrete5の話をしている最中でした。第 2 弾のテーマを現在、マーケットプレイスに提出できるように創っています。※テーマなので運用版とは違う機能などを入れています。
SemiFinal
最後にご存知かと思いますが、運用を開始したら必ずバックアップをとってから、バージョンアップをしていきましょう。1. バグ修正などがはいっています。2. 機能が向上されている部分もあります。
Question
質疑応答答えられる限り全力でお答えしますが、質問の意図がわからなかったり、言葉足らずで説明ができないこともあると思いますがご了承ください。
Final
予告です！現在、第 3 弾を創っています。「複合検索」「多言語」「会員機能」などを盛り込みます。concrete5のメイン機能を活用したさらなる創りを目指します！ご清聴どうもありがとうございました。