concrete5 my theme HeyDJ

concrete5 theme
First Theme 「Hey DJ」ver7.5.6
1

ABOUT
MotherHeads （マザーヘッズ）
Designer（デザイナー）
Kazuhiro Matsuda （松田和広）
「ここでしか創れないモノを創る！
モノ創りをつうじてヒトを財産とする」
www.motherheads.net オフィシャルWEB
www.motherheads.com ECサイト
@dj_kazu1 Kazuhiro Matsuda

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

ABOUT
Holm.design inc. （ホルムデザイン株式会社）
Designer（デザイナー）
Kazuhiro Matsuda（松田和広）
www.holmdesign.jp
LP系をメイン。企業の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 Thanks
concrete5 Japan CEO 菱川拓郎
concrete5 Japan CCO Katz Ueno
concrete5 関西UG @acliss
concrete5 Integrate partner 佐野譲(さのゆずる)
concrete5 Integrate partner 庄司早香
など
「感謝」でいっぱいです。

STORY
concrete5のアツイところ
親切で個性的なヒトが多い
コミュニティやフォーラムで聞ける
毎週木曜日の週刊concrete5という
ラジオで教えてくれる
concrete5のツライところ
英語のサイトが多い、資料が少ない
それをこのように補っています

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

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

Deliverable
djkazu.supervinyl.net
concrete5 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
←トピックリスト＆アンカー
リンクにて疑似推移で表現
←ページ説明で短文を表示
←日付ナビで絞り込み
←FacebookはHtmlブロック
twitterはHtmlブロック

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

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

Strong
• 代表の菱川氏と家が近い、思考が合うなども決
め手の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とテーマを創っていきます
。
どうぞ、よろしくお願いします。
ご清聴どうもありがとうございました。

concrete5 my theme HeyDJ

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Was ist angesagt?

Was ist angesagt? (14)

Andere mochten auch

Andere mochten auch (17)

Ähnlich wie concrete5 my theme HeyDJ

Ähnlich wie concrete5 my theme HeyDJ (15)

concrete5 my theme HeyDJ