Your SlideShare is downloading. ×
仕様書から見る concrete5 サイトの作り方 〜 WordPress サイト制作とこんなに異なるワークフロー
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

仕様書から見る concrete5 サイトの作り方 〜 WordPress サイト制作とこんなに異なるワークフロー

1,074
views

Published on

concrete5を使ったサイト制作の手順を、コンクリートファイブジャパン株式会社が長年の経験で培ってきたサイト仕様設計書のテンプレートを使って解説します。 …

concrete5を使ったサイト制作の手順を、コンクリートファイブジャパン株式会社が長年の経験で培ってきたサイト仕様設計書のテンプレートを使って解説します。

WordPress での構築手順とどう違うのか、細かくステップ順に紹介していきます。「concrete5仕様書テンプレート」はみなさんにも配布しますので、の仕事をすぐに請けることができます。

Published in: Government & Nonprofit

0 Comments
11 Likes
Statistics
Notes

  • Be the first to comment

Show More
No Downloads
Views
Total Views
1,074
On Slideshare
0
From Embeds
0
Number of Embeds
10
Actions
Shares
0
Downloads
0
Comments
0
Likes
11
Embeds 0
No embeds
Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 1
  • 2. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 2
  • 3. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 2015/2/19 (木) @ CPI x CSS Nite x 優クリエイト「After Dark」（19） 3
  • 4. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 本日の目次 ● 自己紹介 ● 最初に ● WordPress と concrete5 のサイト要素の違い ● 作業ステップの比較 ● concrete5 開発ステップ ● 仕様書を作ろう！ 4
  • 5. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 自己紹介 5
  • 6. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー Katz Ueno (上野 勝之) Twitter: @katzueno ブログ: http://katzueno.com コンクリートファイブジャパン株式会社 Chief Communciations Officer http://concrete5.co.jp 名古屋で concrete5 CMS の普及 6
  • 7. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 2009年 - concrete5 日本コミュニティを立ち上げました concrete5-japan.org 7
  • 8. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 全国各地に普及活動 青森・仙台・東京・千葉・静 岡・浜松・名古屋・京都・大 阪・奈良・広島・福岡でUG が立ち上がる 詳細は concrete5-japan.org/community/local/ 8
  • 9. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 共著の紹介 「concrete5 公式活用ガイドブック」 買ってねー ● マイナビ ● 3542円 ● 書籍 & 電子書籍版 9
  • 10. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー ● 1980年 三重県四日市市生まれ ● アメリカに留学→映画制作 → 雑誌編集 → Web に ● TOEIC 満点 10
  • 11. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 での構築事例 11
  • 12. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordFes Nagoya 2014 副 実行委員長 12
  • 13. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress 公式プラグイン 2本開発 Ustream Status Twitcasting Status 13
  • 14. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress 事例 14
  • 15. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 他にも様々な CMS の仕事の経験 ● MovableType ● Mambot ● Joomla ● EC Cube ● Magento ● OpenPNE 15
  • 16. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 今回のセミナー対象 16
  • 17. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 今日のセミナーの対象について • WordPress 構築経験有りな方 o デザイン、コーディングが理解できる o WordPress テーマを自作したことがある o カスタム投稿タイプやタクソノミーの知識がある • concrete5 は使ったことがないが興味がある方 17
  • 18. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 分かりやすい コンセプトの違い concrete5 x WordPress 18
  • 19. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress 19
  • 20. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress = 左脳な人向け CMS 20
  • 21. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 21
  • 22. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 = 右脳な人向け CMS 22
  • 23. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 左脳と右脳の違い？ コンテンツ入力時 23
  • 24. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 左脳と右脳の違い？ コンテンツ入力時 ● WordPress = 管理画面で入力する場所が決まっている ● concrete5 = 管理画面が無く自由に組み合わせる 24
  • 25. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 左脳な人向け CMS - WordPress とは ● 更新する場所が決まっている ● = マニュアルが作りやすい o 例:) 管理ページで、「ニュース」カスタム投稿タイプで、記事を作成 したら、ニュースの記事が作られる ● 固定したフォーマットのものを大量生産するのに適したCMS ● マニュアルや管理画面を作るのが大変だが、その後が楽 ● 上手く行けば間違いなく確実にページの更新ができる 25
  • 26. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 右脳な人向け CMS - concrete5 とは ● 管理画面とページを行き来しない ● 決められたフォーマットばかりのコンテンツ入力は苦手 ● ページごとにちょっと違う変更を入れたい ● キャンペーンや特集サイトなど柔軟な表現力がほしい ● 「ブロック」を積み重ねるというパズルが苦手な人はとっつきにくい 26
  • 27. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 右脳な人向け CMS - concrete5 とは パズルが苦手な人? ● 例：ブログを作るには、下記のブロックをページに配置 o ページの中に設置するブロックは何を設置するか考えられるか  「タイトル表示」ブロック  「日付表示」ブロック  「本文」ブロック  「日付ナビ」ブロック  「コメント」ブロック ● 上記組み合わせを考えれない人は concrete5 には向かない 27
  • 28. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 2つの CMS の要素の違い WordPress x concrete5 28
  • 29. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress の要素 WordPress x concrete5 29
  • 30. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress の要素 30
  • 31. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress の要素 ● ページ (タイトルと本文) 31
  • 32. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress の要素 ● ページ (タイトルと本文) ● カテゴリ、カスタム投稿タイプ 32
  • 33. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress の要素 ● ページ (タイトルと本文) ● カテゴリ、カスタム投稿タイプ ● ウィジェット 33
  • 34. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress の要素 ● ページ (タイトルと本文) ● カテゴリ、カスタム投稿タイプ ● ウィジェット ● カスタムフィールド、カスタムタクソノミー 34
  • 35. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress の要素 ● ページ (タイトルと本文) ● カテゴリ、カスタム投稿タイプ ● ウィジェット ● カスタムフィールド、カスタムタクソノミー ● プラグイン 35
  • 36. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress の要素 ● ページ (タイトルと本文) ● カテゴリ、カスタム投稿タイプ ● ウィジェット ● カスタムフィールド、カスタムタクソノミー ● プラグイン ● テーマ 36
  • 37. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 の要素 WordPress x concrete5 37
  • 38. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 の要素 ● ブロック (全く新しいコンセプト) 38
  • 39. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 の要素 ● ブロック (全く新しいコンセプト) o ページの中に配置する o 記事ブロック、画像ブロック、 スライドショーブロック等 o レゴブロックのように積み重ねていきます 39
  • 40. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 の要素 ● ページタイプ (全く新しいコンセプト) 40
  • 41. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 の要素 ● ページタイプ (全く新しいコンセプト) o (強引に比較するなら) カスタム投稿タイプ o ページの種類を決めるもの o よく作ってるページタイプの例： トップ、汎用一覧、汎用詳細、ニュース一覧、ニュ ース詳細、製品一覧、製品詳細 41
  • 42. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 の要素 ● ページタイプ (全く新しいコンセプト) o サイトのページを整理しやすくするため o デフォルトで設置するブロックを決められる o 例）ニュース詳細ページタイプ  → タイトル、本文用記事ブロック o 例）製品紹介ページタイプ  → 画像、仕様テーブル用記事ブロック 42
  • 43. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 の要素 ● テーマ o ページの枠 o ブロックを設置する「エリア」の位置を決める o 昔のウェブな方へは：Dreamweaver + Contribute の DW 部分が concrete5 になったような感じ o ページテンプレートはサイトマップ上で自由に使え ます。特定のカテゴリーやカスタム投稿タイプのみ でしか使えないという不自由さはありません 43
  • 44. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 の要素 ● 他にも WordPress には無い機能がデフォルトで搭載 o ページ属性 o 会員管理 o 権限 o 承認フロー プラグインを探さなくて良い！ 44
  • 45. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress と concrete5 の構築ステップ比較 45
  • 46. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress 構築ステップ 46
  • 47. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress 構築ステップ 47
  • 48. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress 構築ステップ 1. サイトマップ作成 48
  • 49. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress 構築ステップ 1. サイトマップ作成 2. プラグイン作成 or インストール 49
  • 50. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress 構築ステップ 1. サイトマップ作成 2. プラグイン作成 or インストール 3. デザイン or テンプレート購入 50
  • 51. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress 構築ステップ 1. サイトマップ作成 2. プラグイン作成 or インストール 3. デザイン or テンプレート購入 4. コーディング 51
  • 52. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress 構築ステップ 1. サイトマップ作成 2. プラグイン作成 or インストール 3. デザイン or テンプレート購入 4. コーディング 5. テーマ作成 52
  • 53. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress 構築ステップ 1. サイトマップ作成 2. プラグイン作成 or インストール 3. デザイン or テンプレート購入 4. コーディング 5. テーマ作成 6. テーマ修正 53
  • 54. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress 構築ステップ 1. サイトマップ作成 2. プラグイン作成 or インストール 3. デザイン or テンプレート購入 4. コーディング 5. テーマ作成 6. テーマ修正 7. function.php 追加 and/or 修正 54
  • 55. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー WordPress 構築ステップ 1. サイトマップ作成 2. プラグイン作成 or インストール 3. デザイン or テンプレート購入 4. コーディング 5. テーマ作成 6. テーマ修正 7. function.php 追加 and/or 修正 8. コンテンツ流し込み 55
  • 56. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップ 56
  • 57. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップ 57
  • 58. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップ 1. サイトマップ作成 58
  • 59. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップ 1. サイトマップ作成 2. デザイン or テンプレート購入 59
  • 60. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップ 1. サイトマップ作成 2. デザイン or テンプレート購入 3. アドオンインストール 60
  • 61. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップ 1. サイトマップ作成 2. デザイン or テンプレート購入 3. アドオンインストール 4. コーディング 61
  • 62. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップ 1. サイトマップ作成 2. デザイン or テンプレート購入 3. アドオンインストール 4. コーディング 5. テーマ作成 62
  • 63. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップ 1. サイトマップ作成 2. デザイン or テンプレート購入 3. アドオンインストール 4. コーディング 5. テーマ作成 6. ページ属性作成 63
  • 64. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップ 1. サイトマップ作成 2. デザイン or テンプレート購入 3. アドオンインストール 4. コーディング 5. テーマ作成 6. ページ属性作成 7. ページタイプ作成 64
  • 65. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップ 1. サイトマップ作成 2. デザイン or テンプレート購入 3. アドオンインストール 4. コーディング 5. テーマ作成 6. ページ属性作成 7. ページタイプ作成 8. カスタムテンプレート作成 65
  • 66. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップ 1. サイトマップ作成 2. デザイン or テンプレート購入 3. アドオンインストール 4. コーディング 5. テーマ作成 6. ページ属性作成 7. ページタイプ作成 8. カスタムテンプレート作成 9. コンテンツ流し込み 66
  • 67. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップ 詳細の紹介 WordPress 経験者向けの concrete5 サイト作成方法 67
  • 68. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップの詳細の目的 68
  • 69. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップの詳細の目的 ● concrete5 構築ステップを学ぼう 69
  • 70. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップの詳細の目的 ● concrete5 構築ステップを学ぼう ● 学べば concrete5 の仕様書を設計できる！ 70
  • 71. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップの詳細の目的 ● concrete5 構築ステップを学ぼう ● 学べば concrete5 の仕様書を設計できる！ ● concrete5 仕様書テンプレート http://bit.ly/c5spectemplates 71
  • 72. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー concrete5 構築ステップの詳細の目的 ● concrete5 構築ステップを学ぼう ● 学べば concrete5 の仕様書を設計できる！ ● concrete5 仕様書テンプレート http://bit.ly/c5spectemplates ● Katz が実際に仕事で使っているテンプレート ● マスターすれば仕事ができる！ 72
  • 73. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 仕様書テンプレートを作るSTEP ノウハウを大公開！ 73
  • 74. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP1: サイト企画 & ページタイプを決める 74
  • 75. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP1: サイト企画 & ページタイプ CMS だったとしても、静的HTMLサイトでも決めないといけない基本！ ● サイトマップ ● 中身のコンテンツ 本当は一番重要だけど、割愛します。詳しくはディレクションや企画の勉強会で！ CMS 上でのサイトマップではなく、一般的なサイトの企画やディレクションです 75
  • 76. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP1: サイト企画 & ページタイプ サイトマップを決めてから ● サイトマップを元に、 concrete5 で作成するページタイプを決める 76
  • 77. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP1: サイト企画 & ページタイプ サイトマップを決めてから ● サイトマップを元に、 concrete5 で作成するページタイプを決める 77
  • 78. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP2: デザイン 78
  • 79. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP2: デザイン ● サイトをデザインする ● 枠 - エリア - ブロックを意識してデザインする 79
  • 80. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP2: デザイン ● サイトをデザインする ● 枠 - エリア - ブロックを意識してデザインする 80
  • 81. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP3: アドオンインストール 81
  • 82. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP3: アドオンインストール きちんとセキュリティチェックなどの審査されたアドオンをマーケットプレイ スからインストール Katz おすすめのアドオン (仕事でほぼ全てのサイトで使ってる) ● Designer Content ● Designer Content Pro ● Manual Nav ● Internationalization ● Page List Plus ● Tomoac Form ● Formidable ● Where is my block 82
  • 83. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP4: コーディング 83
  • 84. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP4: コーディング ● テーマ - エリア - ブロックという 枠を考えたコーディングを心がける (CSS のクラス付、HTML 構造を考える) ● コーディングガイドラインを作成し公開します (宣言) 84
  • 85. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP4: コーディング WordPress 経験者が concrete5 サイトのコーディングに心がけること 85
  • 86. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP4: コーディング WordPress 経験者が concrete5 サイトのコーディングに心がけること ● 編集ツールバーが上部に表示されたりするので、ページ全体を1つの wrapper クラスで囲む ● z-indexは 5 以降を使用する ● クラスの接頭語に「ccm-」を使用しない → 管理画面系で使っているクラスです ● CSS で id を使わない ● ファイルのアップロード位置に依存したコーディングをしない 86
  • 87. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP4: コーディング 【続】WordPress 経験者が concrete5 サイトのコーディングに心がけること ● 繰り返し要素を考慮する (CSS のクラス名で section-1, section-2 など、特別な順番が必要なクラス 名付けを極力しない) ● jQuery や Bootstrap を使用する時は concrete5 が使用しているものに合わ せたほうがいいかも ● 使用 jQueryバージョン ○ concrete5.6.3 は 1.7.2 ○ concrete5.7.3 は 1.11.1 ● 使用 Bootstrap バージョン ○ concrete5.6.3 は 2.0.3 ○ concrete5.7.3 は 3.1.1 87
  • 88. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP4: コーディング 【続】WordPress 経験者が concrete5 サイトのコーディングに心がけること ● <body> タグ o ページ毎に別々 class を付けない。（やってもトップページのみ）→ ブロックが特定のページにしか使えなくなるのでブロックのリサイク ルがしづらくなります。 o position 指定をしない 88
  • 89. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP4: コーディング 【続】WordPress 経験者が concrete5 サイトのコーディングに心がけること ● 記事ブロック部分 o TinyMCE か Redactor という JS ライブラリを使用して入力するので 場合、極力、記事部分のタグにクラスを付けなくても装飾されるよう にタイポグラフィー系のCSSを設定する (h, p, a, table, blockquote, i, b, strong, and etc) o よくやる手： 「.wygiwys h1」のように親クラスを作って、書くタイポグラフィー 系のタグに CSS を割り当てる 89
  • 90. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 90
  • 91. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 ● 詳細はクイックリファレンスを参照 ● テーマはページ (HTML) の枠 ● ページの中で、どこが編集可能な領域である 「エリア」なのかを指定 91
  • 92. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 テーマの設置先 ● テーマフォルダに自分のテーマを作成 o 5.6系は /themes/[テーマハンドル]/ o 5.7系は /application/themes/[テーマハンドル]/ ※ 配布用のパッケージテーマは別の場所に配置 92
  • 93. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 最低限必要なファイル 1. description.txt 2. thumbnail.png 3. default.php 4. view.php (5.7 より必須) 93
  • 94. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 1. description.txt WordPress の style.css の冒頭部分のようなもの。 UTF-8 のエンコーディングで作成。 ● 1行目：テーマのタイトル ● 2行目：テーマの説明 94
  • 95. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 2. thumbnail.png テーマ一覧で使用するPNG画像 ● 5.6.x 以前は 120x90ピクセル ● 5.7.x 以降は 360x270ピクセル 95
  • 96. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 3. default.php ● WordPress でいう「index.php」 ● HTMLコーディングに、数行の PHP 文を入れるだけで完成。 ● WP Query や Loop などを書く必要は一切無し 96
  • 97. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 default.php で必要最低限覚えるコード 覚えなきゃいけないPHPコードは 97
  • 98. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 default.php で必要最低限覚えるコード 覚えなきゃいけないPHPコードは 11行だけ！ (しかもほぼコピペのみ) 98
  • 99. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 default.php で必要最低限覚えるコード 1. セキュリティ対策用PHP (コピペ) PHP全てのファイルに最初に記述する。 おまじないコード。コピペのみ。 <?php defined('C5_EXECUTE') or die(_("Access Denied.")); ?> 99
  • 100. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 default.php で必要最低限覚えるコード 2. テーマパス テーマフォルダを自動的に書きだすPHP文。テーマで使うCSSファイルや画像 ファイルをテーマフォルダ内に保存して読み込むときに使う。 <?php echo $this->getThemePath(); ?> 100
  • 101. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 default.php で必要最低限覚えるコード 2. テーマパス 使い方の例 <link rel="stylesheet" href="<?php echo $this->getThemePath(); ?>/main.css"> 101
  • 102. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 default.php で必要最低限覚えるコード 3. headタグ (コピペ) WordPress でいうところの <?php wp_head(); ?>で<head> の中に配置。テ ーマの CSS や JS ファイルを読み込む前に設置 <?php Loader::element('header_required'); ?> 102
  • 103. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 default.php で必要最低限覚えるコード 4. エリアを指定 ブロックを自由に設置できるエリアを指定します。 <?php $a = new Area('【エリアの名前】'); $a->display($c); ?> 103
  • 104. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 default.php で必要最低限覚えるコード 5. グローバルエリアを指定 サイト全体に同じブロックを設置できるグローバルエリアを指定します。 <?php $a = new GlobalArea(‘【グローバルエリアの名前】'); $a->display(); ?> 104
  • 105. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 default.php で必要最低限覚えるコード エリアとグローバルエリアの注意点 同じ名前でエリア名とグローバルエリア名を作らない。不具合の元になりま す！ 105
  • 106. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 default.php で必要最低限覚えるコード 6. フッターエリアを指定 いわいる <?php wp_footer(); ?> <?php Loader::element('footer_required'); ?> 106
  • 107. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 4. view.php ● 「シングルページ」という concrete5 のシステム関連ページで使うための テーマファイル ● 例：ログイン、404、403 ページ等 107
  • 108. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 view.php で必要最低限覚えるコード 7. ログイン等のページ (シングルページ) メインエリアと同等部分の宣言を、エリアではなくて下記の命令を入れる <?php Loader::element('system_errors', array('error' => $error)); print $innerContent; ?> 108
  • 109. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー たった11行の PHP コードを 覚えるだけで、concrete5 テーマが作れます 簡単でしょ？ ただ レスポンシブ対応で、CSS や JS との バッティングに気をつけないと行けないです 109
  • 110. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー おまけ：知ってて得すること A. 追加のテンプレートファイルを作成する ページテンプレート (5.6 ではページタイプ)の半角英数字と同じ名前の半角英 数字のファイルを作成してテーマを出し分け 例 home.php news.php あとは、コーディングを調整して出力するレイアウトを変えるだけ。 STEP5: concrete5 テーマの作成 110
  • 111. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 おまけ：知ってて得すること B. 共通の部分を別でテンプレートファイルとして分離する WordPress における concrete5 では、<?php $this->inc(‘○○○’);?> を使います。 テーマフォルダの中に「elements」というフォルダを作ってその中に入れるのが慣習 header.php を読み込むための <?php get_header(); ?> footer.php を読み込むための <?php get_footer(); ?> 111
  • 112. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 おまけ：知ってて得すること B. 共通の部分を別でテンプレートファイルとして分離する 例： ファイル保存場所 テーマ上 /[themeフォルダ]/elements/header.php <?php $this->inc('elements/header.php');?> /[themeフォルダ]/elements/footer.php <?php $this->inc('elements/footer.php');?> 112
  • 113. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP5: concrete5 テーマの作成 おまけ：知ってて得すること テーマ作成時に参考になるブログなど WordPress のように、PHPを使いこなしてページ名や、ページ属性を直接表 示させたりする方法もあります。 • 【完全保存版】 concrete5 テーマスニペット集 • concrete5のテーマからページ関連の情報を取得するサンプル • concrete5の各属性タイプの情報を表示するコード集 • concrete5の選択属性の値ごとに違うclassを割り当てたい (5.6.3~) 113
  • 114. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP6: ページ属性の作成 114
  • 115. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP6: ページ属性の作成 • WordPress でいういわいるカスタムフィールドやカスタムタクソノミー • concrete5 はカスタムフィールドのプラグインが存在しません • というか WordPress のプラグイン機能が既に本体に実装。 • どのプラグインを使うのか迷わなくて済む！ • チェック、テキスト、複数行テキスト、ファイル、画像、選択肢、日付が 選べます • 例： イベント告知ページの、イベント種別やイベント開催日、OGP画像など 115
  • 116. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP7: 管理画面でページタイプを作成 116
  • 117. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP7: 管理画面でページタイプを作成 • 管理画面より、ページタイプを作成します。 手順 1. ページタイプを作成 2. デフォルトで使用するページ属性を選択 3. 「デフォルト」で設置するブロックを設置 4. 仕様書に各ページタイプの各エリアやグローバルエリアやスタックに設置 予定なブロックを書き込んでいく 117
  • 118. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP7: 管理画面でページタイプを作成 • 管理画面より、ページタイプを作成します。 手順 1. ページタイプを作成 2. デフォルトで使用するページ属性を選択 3. 「デフォルト」で設置するブロックを設置 4. 仕様書に各ページタイプの各エリアやグローバルエリアやスタックに設置 予定なブロックを書き込んでいく 118
  • 119. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP8: ブロックの カスタムテンプレートを作成 119
  • 120. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP8: ブロックのカスタムテンプレート作成 ブロックのカスタムテンプレートを作ります。 Designer Content でカスタムブロックをすごく簡単に作成できますが、今回は割愛。 120
  • 121. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP8: ブロックのカスタムテンプレート作成 カスタムテンプレートとは WordPress では Loop や WP_Query() をカスタマイズしていくような認識。 concrete5 のブロックが出力するコーディングを簡単にカスタマイズしオプシ ョンを増やしていける方法です。 例： ニュース一覧用のページリストブロックに日付の属性を加える グローバルナビ用のオートナビブロックに独自のクラスを加える 121
  • 122. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP8: ブロックのカスタムテンプレート作成 カスタムテンプレート作成方法 チュートリアル： ブロック修正の仕方とカスタムテンプレートの仕組み 122
  • 123. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP8: ブロックのカスタムテンプレート作成 カスタムテンプレート作成方法 1. ブロックの表示部分を司る View ファイルを元のブロックからコピー o /concrete/blocks/[ブロック]/view.php 2. カスタムテンプレートを作成 o [5.6 の場合] /blocks/[ブロック]/templates/[任意の名前].php o [5.7 から] /application/blocks/[ブロック]/tempates/[任意の名前].php 123
  • 124. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP8: ブロックのカスタムテンプレート作成 カスタムテンプレート作成方法 3. カスタムテンプレートの中身を編集 • PHP 初級程度の知識が必要 • 場合によってはHTMLの知識のみで改変可能 124
  • 125. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP8: ブロックのカスタムテンプレート作成 変哲もない <ul><li> な ナビゲーションに クラスを付けて ナビゲーションっぽく 表示する例 125
  • 126. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー STEP8: ブロックのカスタムテンプレート作成 おまけ：知ってて得すること テーマ作成時に参考になるブログなど（再掲） WordPress のように、PHPを使いこなしてページ名や、ページ属性を直接表 示させたりする方法もあります。 • 【完全保存版】 concrete5 テーマスニペット集 • concrete5のテーマからページ関連の情報を取得するサンプル • concrete5の各属性タイプの情報を表示するコード集 • concrete5の選択属性の値ごとに違うclassを割り当てたい (5.6.3~) 126
  • 127. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 仕様書サンプル 実際のサンプルサイトと仕様書 127
  • 128. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 仕様書サンプル • 2/8 (日) CMS Sunday CMS プロレス Shibuya WGP 128
  • 129. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 仕様書サンプル • 2/8 (日) CMS Sunday CMS プロレス Shibuya WGP 129
  • 130. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 仕様書サンプル • 2/8 (日) CMS Sunday CMS プロレス Shibuya WGP http://dogen.concrete5japan.net 130
  • 131. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 仕様書サンプル • 2/8 (日) CMS Sunday CMS プロレス Shibuya WGP • 仕様書テンプレート http://bit.ly/c5spectemplates 日々最新版に更新していきます！ • 道玄坂大学仕様書 https://drive.google.com/open?id=19vit0DOB1XmVLzhUrodK4RtAU8Jpiea3mJ Gicfa_GlM&authuser=0 (リンクがあとで変わるかも) 131
  • 132. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー いろいろ参考文献 132
  • 133. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー いろいろ参考文献 • 一番分かりやすいWordPressとconcrete5のカスタマイズ 方法の違い • 2015年注目の concrete5 関連スライド資料 • 5.6か、5.7か。それが問題だ 〜2015年、これから concrete5を始める皆さんへ〜 133
  • 134. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー 134
  • 135. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー Content Management is Human Rights 135
  • 136. 2015.2.19 (木) CSS Nite After Dark 19 - 仕様書から見る concrete5 サイトの作り方〜 WordPress サイト制作とこんなに異なるワークフロー ありがとうございました コンクリートファイブジャパン株式会社 info@concrete5.co.jp 03-4513-8599 136