オープンソースCMS「concrete5」でウェブサイトを作ってみよう！初心者対象のチュートリアルガイドです。用意するものはブラウザのみ。HTML/CSS/PHPの知識は一切不要。勉強会などで使用してください。

1. はじめてのconcrete5で
ウェブサイト作成
入門チュートリアルガイド
by Takuro Hishikawa (Concrete5 Japan Inc.)
v.2015.1.9
画面はconcrete5.7.3のものです。

2. concrete5とは？
• オープンソースのCMS
• オープンソース…ソフトウェアのプログラムのソー
スコードが公開されていること。公開されているの
で、どなたでも入手してライセンスに従って利用で
きる。
• CMS…コンテンツマネジメントシステムの略。ウェ
ブサイトのコンテンツを管理するためのシステム。

3. concrete5の特徴
• ドラッグ＆ドロップで、ページ内にブロックと呼ば
れるパーツを並べていく方式
• 公式サイトからソフトウェアをダウンロードし、サー
バーにインストールして使用する
• もともとは企業などで大人数でコンテンツを作成す
るための有償のソフトウェアがオープンソースになっ
たもの

4. concrete5の歴史
• 2003年にアメリカで開発された「Concrete CMS」が前
身
• 2008年にオープンソースとして配布開始、2009年には日
本語のユーザーコミュニティが発足
• 2011年に日本国内の企業ユーザーのサポートや、
concrete5のビジネス活用を促進するコンクリートファイ
ブジャパン株式会社ができる
• 2014年『concrete5 公式活用ガイドブック』出版

5. ２つのバージョン
• バージョン5.6系と5.7系の２つのconcrete5があります
• バージョン5.7はモバイル時代に対応した新しいインターフェー
スを実装した最新のconcrete5ですが、リリースされたばかり
で情報も少ない
• バージョン5.6系も今年まで最新版が開発されていた安定して動
作するバージョン。5.7がリリースされたあともメンテナンスは
継続されます。『concrete5 公式活用ガイドブック』で解説し
ているのはこちら
• 今回使用するのはバージョン5.7です

6. concrete5 関連リンク
• 日本語公式サイト concrete5-japan.org
• 英語公式サイト（本家） concrete5.org
• Facebook www.facebook.com/concrete5japan
• Twitter twitter.com/concrete5japan

7. concrete5を
インストールしてみよう！

8. ウェブサーバーについて
• PHPとMySQLが利用できるウェブサーバーが必要です
（PHPのバージョンや必要モジュールなどさらに詳細な要件は公式
サイト「使用条件」ページを参照）
• 自動インストーラーのあるサーバーもあります（公式サイ
ト「ホスティング会社別インストールガイド」ページを参照）
• ご自分のパソコン内にウェブサーバーのソフトウェアを
インストールすることで、ローカルマシンでconcrete5
を動作させて開発確認することもできます。XAMPP,
MAMPなどがよく利用されています

9. ウェブブラウザについて
• concrete5はブラウザから操作します。通常のウェ
ブサイトよりも複雑な動きをしますので、古いブラ
ウザだと付いて来れないことがあります。できるだ
け最新バージョンを使用してください。
• また、高速に動作するブラウザがオススメです。
ChromeやFirefoxが良いです。

10. 今回使用するのは
• NIFTY Cloudの「C4SA」というサービスを利用します
• 月額900円∼から利用できるアプリケーション開発プ
ラットフォーム
• 15日間無料で利用できます
• あとからスペックアップができるクラウドサービス
• concrete5の動作に必要なセットアップを自動でやって
くれます

11. サイトにアクセスして「ログイン
／利用開始」ボタンをクリック
http://c4sa.nifty.com/

12. いずれかのア
カウントでロ
グインします
SNSやGoogleのアカウント
をお持ちでない方は @nifty
ID を作成してください

13. キャンバスを作成
新規キャンバス ボタンをクリック

14. Canvas S プランを選択
D1, D2はさらにハイスペックですが無料期間が短いです

15. コンテクストを選択
concrete5 を選んでください

16. キャンバスに名前をつける
分かりやすい方がいいでしょう

17. キャンバスが自動で作成されてい
ます
しばらくお待ちください

18. キャンバスの作成が完了
キャンバスを開く ボタンをクリック

19. 作成されたサイトにアクセスしま
しょう

20. インストール言語（地域）の選択
Japanese (Japan) を選択しましょう

21. サーバーのチェックが行なわれます
お使いのサーバーによって赤いチェックが出た場合は、
サーバーの設定を見直してください。

22. サンプルコンテンツの選択
今回は「空白のサイト」を選択します

23. サイトの基本情報を入力
パスワードは必ず複雑で推測できないものに！
パスワードを忘れ
るとログインできません。
必ずメモ！

24. データベース情報を入力
左側がC4SAのコントロールパネルです。
※コピー＆ペーストすると不要な改行が含まれることがあります。
タイプして入力してください

26. インストール完了！

27. システムと設定ページを開く

28. アクセシビリティページを開く

29. ツールバータイトルを有効化に
チェックして保存しましょう
慣れるまではタイトルを出した方が便利

30. サイト名を入れましょう

31. 「新規」ボタンでブロック一覧を開き、
「記事」ブロックを「Header Site Title
Area」までドラッグします

32. エリアの枠線が太くなったら、離
します

33. サイト名を入力して、見出し１を選
びましょう

34. サイト名を選択してから「リンクを
追加」をクリック

35. サイトマップアイコンをクリック

36. ページを選択すれば、そのページ
へのリンクをつけることができます。
いまはまだ「ホーム」ページしかありません。

37. 「挿入」ボタンでリンクが完了
サイト名をクリックするとホームページに戻れるのがセ
オリーです

38. エディタの「保存」ボタンをクリック
して「記事」ブロックの編集を完了

39. 画像ブロックを入れてみ
よう

40. 「新規」ボタンで開いたパネルから「画
像」ブロックを「メイン」エリアにド
ラッグ＆ドロップして配置しましょう

41. 画像の「新ファ
イル選択」を
クリック

42. 「ファイルマネージャー」が表示されますの
で、「ファイルをアップロード」をクリック
ファイルのアップロードができたら、ファイルをクリッ
クして選択

43. その他のオプ
ション
ALTテキストは必ず入力し
ましょう。画像の代替
（Alternate）となるテキス
トです。視覚障害など画像
が見れない方に提供する情
報になります。

44. 画像を用意してない方は…
フリーライセンスの写真サイ
トでダウンロードしましょう

45. 複数のフリーライセンスサイトか
ら写真を検索できるサービス
http://www.pexels.com/

46. 日本でとってもよく使われている写
真素材サイト
http://www.pakutaso.com/

47. 利用規約やライセンスに注意

48. どーん！入りました
ちょっと大きいですね

49. 「画像」ブロックをクリックしてメニュー
を表示、「ブロック編集」をクリック

50. 選択した画像を
クリックしてメ
ニューを表示、
「編集」をク
リック

51. 幅を1200pxくらいに縮小、画像の
切り抜きで高さを小さくしましょう
操作をデモンストレーションしますので見てください

52. お好みでフィルターもかけましょう
画像の編集が終わったら「保存」ボタン

53. 画像の編集を
反映させるた
め、一度画像
を「クリア」し
て選び直しま
しょう

54. 良い感じになりました

55. コピーライト表記を入れま
しょう

56. 「記事」ブロックを「Footer Legal」エリアに
ドラッグ＆ドロップで配置しましょう

57. こんな感じで
フッターには連絡先やお店の住所なども記載します

58. 編集を保存しましょう

59. 「編集モード終了」ボタンをクリック、
公開、または一時保存、破棄を選びます
あとでどのような変更をしたか分かるように、
コメントはできるだけ残しましょう

60. 「公開」すると即、変更が反映されます。
「保存」すると、このようにページが
「承認待ち」になります。
「このバージョンを承認する」ボタンを押すまで、
一般ユーザーにはひとつ前のバージョンが見えている状態です。

61. 編集履歴（バー
ジョン）は、
「設定」ボタン
の「バージョン」
メニューから確認
できます。
過去のバージョンを「承認」
すると、そのバージョンが
一般公開になり、最新バー
ジョンは下書き扱いになり
ます。

62. ちょっとウェブサイトっぽくなって
きましたね！

63. レイアウトを追加してみ
よう

64. 編集モードで、「メ
イン」エリアのタブ
をクリックしてメニュー
を開き、「レイアウ
トを追加」をクリック

65. 上下の▲▼でカラム数を調整
□を左右に動かして幅の調整
「レイアウトを追加」ボタンで確定

66. レイアウトで分割したエリアに、
「特色」ブロックを置いてみましょう

67. レイアウトを使うと情報の整理が
できます

68. レスポンシブ
デザイン
レイアウトは、幅の狭い画面で見ると
縦に並びます。これを「レスポンシブウェ
ブデザイン」といい、スマートフォンや
タブレットなど、幅の狭い画面での表
示に対応できます。
レイアウトは見た目だけで追加するの
ではなく、縦に並べた時に情報の意味
が通っている必要があります。
編集するマシンの画面が小さいと、レ
イアウト機能を追加したのに何故か縦
に並ぶ？ということがありますが、こ
のためです。

69. レイアウト作成のための参
考資料
• 「モバイルファーストからコンテンツファーストへ」
レスポンシブWebデザイン専門家が語る、コンテン
ツの捉え方
http://contentmarketinglab.jp/trend-in-japan/
responsive-web-design-4.html
• レスポンシブ ウェブ デザインに再構築し、ユーザー
動向と収益性を大きく改善「なつレゴ」事例
http://adsense-ja.blogspot.jp/2013/11/4.html

70. ページを追加してみよう

71. 「新規ページ」ボタンから、「新
しいページ」のリンクをクリック

72. 新しいページには、空の記事ブロック
がひとつ置かれているだけの状態です。
サイト名とコピーライトは共通ですでに入っています。「サイト全
体の」と表記されているエリアは、中身が全ページ共通になります。

73. 記事ブロックの上に「ページタイト
ル」ブロックを配置してみましょう
ページの名前を自動で表示する便利なブロックです。

74. このまま「新規」ボタンで追加
まだページの名前を付けていないので空っぽで表示され
ますが、気にせず続けましょう

75. 記事ブロックを編集しましょう
ブロックをクリックしてメニューを表示、
「ブロック編集」を選択

76. 記事ブロックを保存したら、
ツールバーの「設定」ボタンをクリックしてください。

77. 基本情報をす
べて入力し、
「公開」ボタ
ンをクリック
してください。
ページ名はナビゲーショ
ンにも表示されますの
で分かりやすく。
「ページ位置」は、サ
イト内のどの位置に
ページを配置するかを
選びます。

78. ページが作成できました！

79. 次に、「お問い合わせ」ページを
作成してみましょう。

80. 「お問い合わせ」ページは
３つのブロックで構成されています。

81. 「フォーム」
ブロックを追加
してみましょう
フォームに表示する「質問」
のラベルと、答えのタイプ
を選択し、「新規質問」を
クリック。これを繰り返して、
最後に右下の「新規」ボタ
ンをクリックします

82. 「編集」タブから
追加済みの質問を
編集したり、
並び替えができ
ます。
お問い合わせの内容はデー
タベースに保存され、管理画
面から確認できます。メール
で通知を受け取りたい場合
は、「オプション」タブで
設定してください。

83. ナビゲーションを追加して
みよう

84. 「オートナビ」ブロックを「Header
Navigation」エリアに追加しましょう

85. 設定はそのままでOKです
設定項目の詳細は、公式サイトを参照してください。

86. ナビゲーションのデザインを調整
しましょう
ブロックメニューの「デザイン＆カスタムテンプレート」
を選択します

87. カスタムテン
プレートを変更
しましょう
ギアボタンをクリックし、
表示される「詳細」パネル
の「カスタムテンプレート」
のプルダウンで、「レスポン
シブヘッダーナビゲーション」
を選択して、「保存」をク
リックしてください。

88. ナビゲーションのデザインが
変更されました！

89. 「お知らせ」機能をサイ
トに追加しましょう

90. まず「News」ページを作成します。
中身は空で構いません。
あとでお知らせの一覧ページにします。

91. お知らせ専用のページタイプを作成します。
「ページ」の横にある「コピー」ボタンをクリック
ページタイプ…サイト内の様々なページを、種類別に整
理するための機能。

92. 名前とハンドル
を設定して「コ
ピー」ボタン
をクリック
名前…ページを作成する時
に選択肢に出てくる
ハンドル…システムで使用。
半角英数字で設定

93. 作成したページタイプの
「基本情報」ボタンをクリック

94. 「お知らせ記
事」ページタ
イプの編集
!
コンポーザーで開きますか？
を「はい」に

95. 公開方法を選びます
先ほど追加したお知らせ一覧ページの下の階層に、
新しいお知らせ記事が追加されていくようにする設定です。
最後に「保存」ボタンをクリック

96. 次に、作成したページタイプがどの
ように出力されるかを設定しましょう

97. 「デフォルトを編集」ボタンを
クリック

98. 編集モードに切り替え、「メイン」エリアに
「ページタイトル」ブロックを配置してください
通常のページ編集と同じ手順です

99. 「ページタイトル」
ブロックのカスタ
ムテンプレートを
「バイライン」に
変更して保存
!
ブログの様に日付などが表
示されるテンプレートです。

100. 「コンポーザーブロックコントロール」ブロッ
クをページタイトルの下に追加しましょう。
ページタイプのデフォルトを編集する時のみ使える特殊
なブロックです。

102. このようになればOKです
「編集モード終了」ボタンをクリックし、変更を保存し
てください。

103. 新規ページからいま作成した
「お知らせ記事」ページタイプを選択

104. 「お知らせ記事」の作成ができる
ようになりました
「公開」ボタンで公開

105. 「News」ページを、お知らせ記事
の一覧ページにしましょう
Newsページにアクセスし、「ページリスト」ブロック
を配置しましょう。

106. 表示件数を指定し、表示するペー
ジタイプを選択しましょう
ここでは、「お知らせ記事」を選択。件数はお好みで

107. その他の設定の例

108. お知らせページができました！
お疲れさまでした。ページタイプを設定しておくと、日々
の更新の手間を削減することができます。

109. 備考：
作成中の下書
きページは、
「新規ページ」
の下に表示さ
れています。

110. フルサイトマップでサイ
ト全体の構造を考えよう

111. サイト全体の構成を「フルサイト
マップ」ページで確認できます

112. ページのアイコンをつかんでドラッ
グ＆ドロップで並び替えができます
移動できる位置に線が表示されますので、その状態で離
すと離した位置にページが移動します

113. ドラッグして他のページの上でドロップする
と、そのページの下層にページが移動します
移動、エイリアス、コピーから操作を選択できます。

114. その他、ウェブサイトの
公開前にやっておくことを
さらっと紹介…

115. システムと設定 > SEOと統計
• プリティーURL
concrete5のデフォルト設定ではURLに /
index.php/ が入りますが、これを消して短いURL
にします（一部対応していないサーバーもあります）
• トラッキングコード
Google Analyticsなどのアクセス計測タグを入力
します。

116. システムと設定 > 最適化
> キャッシュとスピード設定
• PHPは、ウェブサーバーにアクセスがある度にデータベースから
データを読み込み、HTMLに整形してウェブページを表示する関
係で、表示に時間がかかります。処理結果を一時的に保存してお
くことで表示を高速化することができ、その仕組みをキャッシュ
と言います。
• ウェブサイトを公開したら、キャッシュは基本的に有効にします。
デザインの変更等大きな変更を行う際は無効にしておきます。
• フルページキャッシュは劇的に表示を高速化しますが、「すべて
の場合でキャッシュを利用」オプションを使うと、フォームなど
の「動的」なブロックが、動かなくなります。

117. システムと設定 > 最適化
> 自動実行ジョブ
• 検索ブロックのための検索インデックス（索引）の
作成、SEOのためのsitemap.xml（検索エンジンに
サイト内のページの一覧を通知するファイル）の更
新、古いページバージョンを削除してデータベース
を軽くする、などのメンテナンス処理を定期的に実
行する必要があります。

118. サーバーでcronが
使えない場合は、
「ページにアクセス
があった時に処理」
を選択してください。
（C4SAは使えません）

119. システムと設定 > 権限と
アクセス
• サイトアクセス
ウェブサイトの作成中で一般公開したくない、又は
ログインユーザーのみの非公開サイトを作りたい時
• 上級権限モード
企業などの人数の多い組織向けの詳細な権限を設定
できるモード
• IPブラックリスト
不正ログイン対策

120. システムと設定 > Eメール
• メールが送れないサーバーの場合、フォームブロッ
クの通知メールやパスワードリセットメールが届か
ない。
• 外部のSMTPサーバーを介してメールを送信するこ
とができる。プロバイダーで提供されているSMTP
サーバーやGmailなどを使うことができる
• C4SAはメールが送れないタイプのサーバー

121. Gmail経由でメール送信する設定の例

122. ブログ設定
• ブログの利用設定はちょっと複雑ですが、どのよう
なブロックを配置するかは、インストール時に「フ
ルサイト」を選択すると分かります。
• アメブロ、WordPressなどを利用し、「RSS表
示」ブロックで最新記事を読み込むこともできます。

123. concrete5を拡張
• テーマ（外観）やアドオン（追加機能）をダウンロードし、
concrete5を拡張することができます。
• コミュニティに接続するには、concrete5.orgにユーザー登録
が必要です。
• コミュニティには世界中の開発者が開発したテーマやアドオン
が登録されており、無償でダウンロードできるものもあれば、
有償のものもあります。ライセンスもオープンソースではないの
で注意。
• 購入にはクレジットカードまたはPaypalのアカウントが必要。

124. テーマを自作するには…
• 公式サイトでドキュメントを充実させていきます！
• 5.6系の情報は比較的充実しています。
『concrete5 公式活用ガイドブック』もよろしく

125. ではいよいよ、デザイン
カスタマイズしてみよう！

126. 「設定」ボタン > デザイン > 選択さ
れたテーマの「カスタマイズ」ボタン
プリセットの切り替えで、お手軽イメージチェンジ！

127. 各種見出しや様々な要素を並べた
デザイン確認用ページを作ると
デザインカスタマイズに便利！

128. 自分だけのウェブサイト
が作れましたか？
（時間切れかな…）

129. 最後に…
C4SAの無料期間は15日な
ので気をつけて

130. はじめてのconcrete5で
ウェブサイト作成
チュートリアルガイド