concrete5 my theme heydj

concrete5 themeFirst Theme 「 Hey DJ 」 ver7.5.6

ABOUT

MotherHeads （マザーヘッズ）Designer （デザイナー）Kazuhiro Matsuda （松田和広）「ここでしか創れないモノを創る！モノ創りをつうじてヒトを財産とする」

www.motherheads.net　オフィシャル WEBwww.motherheads.com EC サイト

@dj_kazu1 Kazuhiro Matsuda

ABOUT

私は二つの顔を持っています！！

ABOUT

Holm.design inc. （ホルムデザイン株式会社）Designer （デザイナー）Kazuhiro Matsuda （松田和広）www.holmdesign.jpLP 系をメイン。企業の WEB サイト、 DTP 関連メンバー構成は、グラフィックデザイナー、フロントエンドエンジニアWEB デザイナー兼コーダー（私です）の 3 人で経営しております。

ABOUT

この二つの違いは！？

自分のブランド自由気ままで好き放題しています 仕事をうけます会社として、やっています安心してください

STORY

準備運動はここまでにします。本題に入ります。

STORY

CMS 初心者の私がいきなり concrete5 でテーマを創ることができました。

STORY

なぜ、WEB デザイナーが創れたのか！？をここでは、お話していきます。

STORY

私の武器はデザイン、 HTML&CSS 、 JS を少々、PHP はわかりません。

STORY

concrete5 が直感的操作という言葉を前にだしているとおりだった。GUI 操作がステキです。※ ただし慣れは必要です。

インスピレーションまずは、どの CMS より concrete5 が直感的に自分の肌に合うと感じた。

STORY

持論ですがデザイナーは右脳派＝感覚・感性

だから concrete5 にマッチしたと思っています。※ あくまでも持論です。

ひらめき直感イメージ記憶芸術性創造性空間的全体を見る力図形を読み取る

右脳話す・書く分析力論理的科学的思考推論言語認識計算数学理解力

左脳

STORYなによりもサポートしてくれるヒトたちがいた

Special Thanksconcrete5 Japan CEO 菱川拓郎

concrete5 Japan CCO Katz Uenoconcrete5 関西 UG @acliss

concrete5 Integrate partner 佐野譲 ( さのゆずる )concrete5 Integrate partner 庄司早香など「感謝」でいっぱいです。

STORY

concrete5 のアツイところ親切で個性的なヒトが多いコミュニティやフォーラムで聞ける毎週木曜日の週刊 concrete5 というラジオで教えてくれる

concrete5 のツライところ英語のサイトが多い、資料が少ないそれをこのように補っています

Deliverable

お待たせしました。では、そろそろ「私の theme 」をお見せします！

Deliverable

ちなみに、テーマ仕様（汎用性）のため、 html のベタばりを少なくしています。

Deliverable

djkazu.supervinyl.netconcrete5 ver7.5.6

Deliverable

イラストは、私が描いています。写真は素材購入や当時に撮影したものを加工しています。

Deliverable←Header はスタックとオートナビを使用←FV はHtml ブロックで SVGアニメーション

←カスタムレイアウトプリセットで Parallaxを再現

←ページタイトルカスタムテンプレートでParallax を再現

Deliverable

←商品一覧はページリストにて php でラベルの色もかえれる

←Youtube ブロック

←ページタイトルカスタムテンプレートでParallax を再現

Deliverable

←ブログ一覧はページリスト日付は php で出力←Footer はソーシャルナビで画像アイコン＆テキストを表現テキストだけなら Manual-Navでやります

←ページタイトルカスタムテンプレートでParallax を再現

Deliverable

←ヘッダー画像エリアで設定してもいいし、グリッドを無効化でフルワイドにできる

←カスタムレイアウトプリセットで Parallax を再現画像ブロック＆記事ブロックカスタムテンプレートとエディタクラスのミックス

Deliverable

←GoogleMap ブロック←特色ブロック←カスタムレイアウトプリセット画像ブロック＆記事ブロックフォームブロック

Deliverable

←トピックリスト＆ JS にてアニメーション表示

←ページリストphp でラベルの色もかえれる

←ページ説明で短文を表示

Deliverable←ページタイプとページ属性表示ブロック←本文はコンポーザーブロックで記事説明を追加することで改行ができる

Deliverable←トピックリスト＆アンカーリンクにて疑似推移で表現

←ブログ一覧はページリスト日付は php で出力

←ページ説明で短文を表示←日付ナビで絞り込み

←Facebook は Html ブロックtwitter は Html ブロック

Deliverable←ブログ一覧はページリスト日付は php で出力

←本文はコンポーザーブロックで記事説明を追加することで改行ができる

←ページタイプとページ属性表示ブロック

Deliverable

←ページリスト応用 verコンポーザーで開いて編集ができます。記事ブロックに画像と文章を設定するだけです。編集ボタンを搭載しているので編集も楽にできます。動作は 3 つアウトインアウトインアウトムーブなし

Deliverable

まとめ各ページの活用構成• TOPページはコーポレート的に活用できます。• ABOUTページはスタッフ紹介、地図、お問い合わせに活用できます。• FAVORITページは商品紹介に活用できます。• DIARY はブログに活用できます。• SCHEDULE はニュースや特集ページに活用できます。• 基本テーマ仕様なので汎用性をもたす！！※ 作成者としてはこう思っています。

Deliverable

というわけで、私の theme にはconcrete5 の基本機能をたくさんつかっています。

私が鉄板と思っているブロック一覧です。

Deliverable基本のブロック• 記事ブロック• html ブロック• 画像ブロック• 特色ブロック登竜門的なブロック• オートナビ• ページタイトル• ベージリスト

まぁ使いますねブロック• フォーム• ソーシャルリンク• youtubeビデオ• Google マップここは重要なブロック• ページ属性表示• コンポーザー

Deliverable

これ以外にもまだ使っていないブロックがあるので、次回テーマ作成には取り入れていきたいと思っています。

Deliverable

デザインから創ったことで得れたこと！• concrete5 の概要・構成・流れがわかった。• ブロックの使い方や意味合いがわかった。• スタティックサイトの時点での気をつけるポイントがわかった。（特にマークアップ）

https://github.com/katzueno/concrete5-Coding-Guideline/tree/japanese

• CSS は ccm-page などでくくることでconcrete5 の基盤 CSS との干渉を防ぐ。

Deliverable

たくさんのカスタムテンプレートを創りました。ブロックには、ほぼカスタムテンプレート（ CSS ）をあてています。詳しい説明は次回のネタにとっておきます。今回は概要的にお話します。

Deliverable

カスタムレイアウトプリセットが大活躍！ver 7.5.3 から搭載されました。レスポンシブサイトを創るなら、これは活用できます。ポイントは page_theme.php ファイルです。

詳しい説明は次回のネタにとっておきます。今回は概要的にお話します。

Deliverable

カスタムクラスよりエディタクラス派になった。テキストの装飾時などにカスタムテンプレートと併用して使いました。現在は、 ckdEditor を導入しています。詳しい説明は次回のネタにとっておきます。今回は概要的にお話します。

Deliverable

最後にひとつだけ言うなら、「 concrete5 を制するならページリストをマスターすれば」ある程度、最強になれます。このページリストを応用することによりコンテンツの追加が楽になり管理もしやすく、運用がやさしくなると思います。

Result

実際、創ってみた感想1. 自由なデザイン設計にできるので、おもしろい。2. デザイナー（デザイン、 HTML&CSS 、 GUI ）とコーダー（ JS 、 PHP ）で分担したほうが効率よく創れると感じた。

3. こだわればこだわるほど、難易度が高くなり、その都度、炎上していました。でも、自由度はスティックぐらいあります。というかできないことはない！

Result

実際、創ってみた感想4. スタティックページの修正が多かった。

HTML のマークアップ修正や CSS があたらないなどのハプニングがあった。5.PHP に興味が持てた。　私はあくまでもデザイナーになりたいので深く　まではするつもりはありません。その先はタッグを組みます ww

Result

実際、創ってみた感想6.PHP ができなくても concrete5 はできることを実感しました。ただ、ほんの少しだけの意味合いは知らないといけません。自分が思い通りの設計にしたいなら、

PHP ができないといけないことも実感しました。7. 本当に、炎上が多かった wwちなみに何回も MAMP のデータをぶっ飛ばしました ww

Study

私の学習方法Cloud9 を導入これは遠隔でも質疑応答ができる環境創りです。Mamp を導入Cloud9 で覚えたことをその都度、繰り返して作業する環境創りです。イヤでも覚えれました ww

Strong

concrete5 を選んだ理由 pt.1• インテグレートパートナーシップ制度がある「パートナーになれば案件の紹介がある」• テーマが販売できるルートがある「マーケットプレイス」• GUI 操作（ドラッグ＆ドロップ）で直感操作ができる。コンテンツの追加・削除・移動が簡単！

Strong

concrete5 を選んだ理由 pt.2

• 小中規模からのサイト創りに適している• WEB サイトが創れる• 権限モードがあり、管理者の有無がないとページ公開ができない更新などの管理ができるチームワークで共有できる• templateごとにカスタムしたファイルをわけられる

Strong

concrete5 を選んだ理由 pt.3

• 代表の菱川氏と家が近い、思考が合うなども決め手の 1 つにしました。• 最終、呑み友までになった ww

Question

質疑応答答えられる限り全力でお答えしますが、質問の意図がわからなかったり、言葉足らずで説明ができないこともあると思いますがご了承ください。

Question

質疑応答私から皆さんに質問があります。このテーマはどのようなカテゴリーで使えると思いますか？意見を聞かせてください。

Information

テーマ販売についてテーマを販売にあたって、この FirstTheme には無償版があります。無償では機能が限られていますがお試しには、ちょうどいいかと思い別途作成いたしました。商業利用不可となっておりますがご利用ください。

concrete5 マーケットプレイスまでhttp://www.concrete5.org/marketplace/themes/hey-dj

Information

無償版でのご案内heydj.supervinyl.net

SVG アニメーションの部分などがかわります。画像、テキストとしての表示になります。parallax機能なし、ラベル色が 3色まで、一部 JS機能なしなどなどです。オリジナルデザインを求められる方、私のような仕様にしたい方がいたらオリジナルデザイン（ロゴ、イラスト、写真加工）にてお受けします。

Final

これから第 2 、第 3 とテーマを創っていきます。どうぞ、よろしくお願いします。ご清聴どうもありがとうございました。