concrete5 my theme HeyDJ
-
Upload
kazuhiro-matsuda -
Category
Design
-
view
284 -
download
1
Transcript of concrete5 my theme HeyDJ
![Page 1: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/1.jpg)
concrete5 themeFirst Theme 「 Hey DJ 」 ver7.5.6
![Page 2: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/2.jpg)
ABOUT
MotherHeads (マザーヘッズ)Designer (デザイナー)Kazuhiro Matsuda (松田和広)「ここでしか創れないモノを創る!モノ創りをつうじてヒトを財産とする」
www.motherheads.net オフィシャル WEBwww.motherheads.com EC サイト
@dj_kazu1 Kazuhiro Matsuda
![Page 3: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/3.jpg)
ABOUT
私は二つの顔を持っています!!
![Page 4: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/4.jpg)
ABOUT
Holm.design inc. (ホルムデザイン株式会社)Designer (デザイナー)Kazuhiro Matsuda (松田和広)www.holmdesign.jpLP 系をメイン。企業の WEB サイト、 DTP 関連メンバー構成は、グラフィックデザイナー、フロントエンドエンジニアWEB デザイナー兼コーダー(私です)の 3 人で経営しております。
![Page 5: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/5.jpg)
ABOUT
この二つの違いは!?
自分のブランド自由気ままで好き放題しています 仕事をうけます会社として、やっています安心してください
![Page 6: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/6.jpg)
STORY
準備運動はここまでにします。本題に入ります。
![Page 7: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/7.jpg)
STORY
CMS 初心者の私がいきなり concrete5 でテーマを創ることができました。
![Page 8: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/8.jpg)
STORY
なぜ、WEB デザイナーが創れたのか!?をここでは、お話していきます。
![Page 9: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/9.jpg)
STORY
私の武器はデザイン、 HTML&CSS 、 JS を少々、PHP はわかりません。
![Page 10: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/10.jpg)
STORY
concrete5 が直感的操作という言葉を前にだしているとおりだった。GUI 操作がステキです。※ ただし慣れは必要です。
インスピレーションまずは、どの CMS より concrete5 が直感的に自分の肌に合うと感じた。
![Page 11: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/11.jpg)
STORY
持論ですがデザイナーは右脳派=感覚・感性
だから concrete5 にマッチしたと思っています。※ あくまでも持論です。
ひらめき直感イメージ記憶芸術性創造性空間的全体を見る力図形を読み取る
右脳話す・書く分析力論理的科学的思考推論言語認識計算数学理解力
左脳
![Page 12: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/12.jpg)
STORYなによりもサポートしてくれるヒトたちがいた
Special Thanksconcrete5 Japan CEO 菱川拓郎
concrete5 Japan CCO Katz Uenoconcrete5 関西 UG @acliss
concrete5 Integrate partner 佐野譲 ( さのゆずる )concrete5 Integrate partner 庄司早香など「感謝」でいっぱいです。
![Page 13: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/13.jpg)
STORY
concrete5 のアツイところ親切で個性的なヒトが多いコミュニティやフォーラムで聞ける毎週木曜日の週刊 concrete5 というラジオで教えてくれる
concrete5 のツライところ英語のサイトが多い、資料が少ないそれをこのように補っています
![Page 14: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/14.jpg)
Deliverable
お待たせしました。では、そろそろ「私の theme 」をお見せします!
![Page 15: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/15.jpg)
Deliverable
ちなみに、テーマ仕様(汎用性)のため、 html のベタばりを少なくしています。
![Page 17: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/17.jpg)
Deliverable
イラストは、私が描いています。写真は素材購入や当時に撮影したものを加工しています。
![Page 18: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/18.jpg)
Deliverable←Header はスタックとオートナビを使用←FV はHtml ブロックで SVGアニメーション
←カスタムレイアウトプリセットで Parallaxを再現
←ページタイトルカスタムテンプレートでParallax を再現
![Page 19: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/19.jpg)
Deliverable
←商品一覧はページリストにて php でラベルの色もかえれる
←Youtube ブロック
←ページタイトルカスタムテンプレートでParallax を再現
![Page 20: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/20.jpg)
Deliverable
←ブログ一覧はページリスト日付は php で出力←Footer はソーシャルナビで画像アイコン&テキストを表現テキストだけなら Manual-Navでやります
←ページタイトルカスタムテンプレートでParallax を再現
![Page 21: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/21.jpg)
Deliverable
←ヘッダー画像エリアで設定してもいいし、グリッドを無効化でフルワイドにできる
←カスタムレイアウトプリセットで Parallax を再現画像ブロック&記事ブロックカスタムテンプレートとエディタクラスのミックス
![Page 22: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/22.jpg)
Deliverable
←GoogleMap ブロック←特色ブロック←カスタムレイアウトプリセット画像ブロック&記事ブロックフォームブロック
![Page 23: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/23.jpg)
Deliverable
←トピックリスト& JS にてアニメーション表示
←ページリストphp でラベルの色もかえれる
←ページ説明で短文を表示
![Page 24: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/24.jpg)
Deliverable←ページタイプとページ属性表示ブロック←本文はコンポーザーブロックで記事説明を追加することで改行ができる
![Page 25: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/25.jpg)
Deliverable←トピックリスト&アンカーリンクにて疑似推移で表現
←ブログ一覧はページリスト日付は php で出力
←ページ説明で短文を表示←日付ナビで絞り込み
←Facebook は Html ブロックtwitter は Html ブロック
![Page 26: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/26.jpg)
Deliverable←ブログ一覧はページリスト日付は php で出力
←本文はコンポーザーブロックで記事説明を追加することで改行ができる
←ページタイプとページ属性表示ブロック
![Page 27: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/27.jpg)
Deliverable
←ページリスト応用 verコンポーザーで開いて編集ができます。記事ブロックに画像と文章を設定するだけです。編集ボタンを搭載しているので編集も楽にできます。動作は 3 つアウトインアウトインアウトムーブなし
![Page 28: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/28.jpg)
Deliverable
まとめ各ページの活用構成• TOPページはコーポレート的に活用できます。• ABOUTページはスタッフ紹介、地図、お問い合わせに活用できます。• FAVORITページは商品紹介に活用できます。• DIARY はブログに活用できます。• SCHEDULE はニュースや特集ページに活用できます。• 基本テーマ仕様なので汎用性をもたす!!※ 作成者としてはこう思っています。
![Page 29: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/29.jpg)
Deliverable
というわけで、私の theme にはconcrete5 の基本機能をたくさんつかっています。
私が鉄板と思っているブロック一覧です。
![Page 30: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/30.jpg)
Deliverable基本のブロック• 記事ブロック• html ブロック• 画像ブロック• 特色ブロック登竜門的なブロック• オートナビ• ページタイトル• ベージリスト
まぁ使いますねブロック• フォーム• ソーシャルリンク• youtubeビデオ• Google マップここは重要なブロック• ページ属性表示• コンポーザー
![Page 31: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/31.jpg)
Deliverable
これ以外にもまだ使っていないブロックがあるので、次回テーマ作成には取り入れていきたいと思っています。
![Page 32: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/32.jpg)
Deliverable
デザインから創ったことで得れたこと!• concrete5 の概要・構成・流れがわかった。• ブロックの使い方や意味合いがわかった。• スタティックサイトの時点での気をつけるポイントがわかった。(特にマークアップ)
https://github.com/katzueno/concrete5-Coding-Guideline/tree/japanese
• CSS は ccm-page などでくくることでconcrete5 の基盤 CSS との干渉を防ぐ。
![Page 33: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/33.jpg)
Deliverable
たくさんのカスタムテンプレートを創りました。ブロックには、ほぼカスタムテンプレート( CSS )をあてています。詳しい説明は次回のネタにとっておきます。今回は概要的にお話します。
![Page 34: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/34.jpg)
Deliverable
カスタムレイアウトプリセットが大活躍!ver 7.5.3 から搭載されました。レスポンシブサイトを創るなら、これは活用できます。ポイントは page_theme.php ファイルです。
詳しい説明は次回のネタにとっておきます。今回は概要的にお話します。
![Page 35: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/35.jpg)
Deliverable
カスタムクラスよりエディタクラス派になった。テキストの装飾時などにカスタムテンプレートと併用して使いました。現在は、 ckdEditor を導入しています。詳しい説明は次回のネタにとっておきます。今回は概要的にお話します。
![Page 36: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/36.jpg)
Deliverable
最後にひとつだけ言うなら、「 concrete5 を制するならページリストをマスターすれば」ある程度、最強になれます。このページリストを応用することによりコンテンツの追加が楽になり管理もしやすく、運用がやさしくなると思います。
![Page 37: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/37.jpg)
Result
実際、創ってみた感想1. 自由なデザイン設計にできるので、おもしろい。2. デザイナー(デザイン、 HTML&CSS 、 GUI )とコーダー( JS 、 PHP )で分担したほうが効率よく創れると感じた。
3. こだわればこだわるほど、難易度が高くなり、その都度、炎上していました。でも、自由度はスティックぐらいあります。というかできないことはない!
![Page 38: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/38.jpg)
Result
実際、創ってみた感想4. スタティックページの修正が多かった。
HTML のマークアップ修正や CSS があたらないなどのハプニングがあった。5.PHP に興味が持てた。 私はあくまでもデザイナーになりたいので深く まではするつもりはありません。その先はタッグを組みます ww
![Page 39: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/39.jpg)
Result
実際、創ってみた感想6.PHP ができなくても concrete5 はできることを実感しました。ただ、ほんの少しだけの意味合いは知らないといけません。自分が思い通りの設計にしたいなら、
PHP ができないといけないことも実感しました。7. 本当に、炎上が多かった wwちなみに何回も MAMP のデータをぶっ飛ばしました ww
![Page 40: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/40.jpg)
Study
私の学習方法Cloud9 を導入これは遠隔でも質疑応答ができる環境創りです。Mamp を導入Cloud9 で覚えたことをその都度、繰り返して作業する環境創りです。イヤでも覚えれました ww
![Page 41: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/41.jpg)
Strong
concrete5 を選んだ理由 pt.1• インテグレートパートナーシップ制度がある「パートナーになれば案件の紹介がある」• テーマが販売できるルートがある「マーケットプレイス」• GUI 操作(ドラッグ&ドロップ)で直感操作ができる。コンテンツの追加・削除・移動が簡単!
![Page 42: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/42.jpg)
Strong
concrete5 を選んだ理由 pt.2
• 小中規模からのサイト創りに適している• WEB サイトが創れる• 権限モードがあり、管理者の有無がないとページ公開ができない更新などの管理ができるチームワークで共有できる• templateごとにカスタムしたファイルをわけられる
![Page 43: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/43.jpg)
Strong
concrete5 を選んだ理由 pt.3
• 代表の菱川氏と家が近い、思考が合うなども決め手の 1 つにしました。• 最終、呑み友までになった ww
![Page 44: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/44.jpg)
Question
質疑応答答えられる限り全力でお答えしますが、質問の意図がわからなかったり、言葉足らずで説明ができないこともあると思いますがご了承ください。
![Page 45: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/45.jpg)
Question
質疑応答私から皆さんに質問があります。このテーマはどのようなカテゴリーで使えると思いますか?意見を聞かせてください。
![Page 46: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/46.jpg)
Information
テーマ販売についてテーマを販売にあたって、この FirstTheme には無償版があります。無償では機能が限られていますがお試しには、ちょうどいいかと思い別途作成いたしました。商業利用不可となっておりますがご利用ください。
concrete5 マーケットプレイスまでhttp://www.concrete5.org/marketplace/themes/hey-dj
![Page 47: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/47.jpg)
Information
無償版でのご案内heydj.supervinyl.net
SVG アニメーションの部分などがかわります。画像、テキストとしての表示になります。parallax機能なし、ラベル色が 3色まで、一部 JS機能なしなどなどです。オリジナルデザインを求められる方、私のような仕様にしたい方がいたらオリジナルデザイン(ロゴ、イラスト、写真加工)にてお受けします。
![Page 48: concrete5 my theme HeyDJ](https://reader036.fdocument.pub/reader036/viewer/2022062522/5873277f1a28ab596c8b4f03/html5/thumbnails/48.jpg)
Final
これから第 2 、第 3 とテーマを創っていきます。どうぞ、よろしくお願いします。ご清聴どうもありがとうございました。