Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Upcoming SlideShare
即席データサイエンティスト
Next
Download to read offline and view in fullscreen.

3

Share

concrete5 my theme HeyDJ

Download to read offline

concrete5 my theme

concrete5 web site
http://djkazu.supervinyl.net

concrete5 theme Demosite
http://heydj.supervinyl.net

concrete5 Marketplace
http://www.concrete5.org/marketplace/themes/hey-dj

Related Books

Free with a 30 day trial from Scribd

See all

concrete5 my theme HeyDJ

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

    May. 18, 2016
  • tanjc321

    May. 14, 2016
  • HishikawaTakuro

    May. 14, 2016

concrete5 my theme concrete5 web site http://djkazu.supervinyl.net concrete5 theme Demosite http://heydj.supervinyl.net concrete5 Marketplace http://www.concrete5.org/marketplace/themes/hey-dj

Views

Total views

563

On Slideshare

0

From embeds

0

Number of embeds

9

Actions

Downloads

2

Shares

0

Comments

0

Likes

3

×