concrete5 themeCMS初心者Webデザイナーがconcrete5コミュニティに 飛び込んでオリジナルデザインのテーマを完成させた話

2016/07/30　OSC京都ver 2016/01/01-05/31までのサイト・テーマ紹介追加

1

About

MotherHeads （マザーヘッズ） Designer（デザイナー） Kazuhiro Matsuda （松田和広） 「ここでしか創れないモノを創る！ モノ創りをつうじてヒトを財産とする」

www.motherheads.net　オフィシャルWEB www.motherheads.com ECサイト

@dj_kazu1 Kazuhiro Matsuda

About

これは私が立ち上げたブランドになります。 独自性をとても大事にしています。

ここでは、デザインを通じて様々なモノを 創っています。

!

ファッション、DTP、WEBサイト、 イラスト、アクセサリーと様々です。

詳しくはmotherheads.netをご覧ください。

About

それでは、本題へはいります。

STORY

ーー　結論！！　ーー !

CMS初心者の私がconcrete5で WEBサイト＆テーマを創ることができました。

STORY

ーー　キーワード　ーー !

「やる気・元気・勇気」 !

です！

STORY

ーー　なぜ！？　ーー !

「CMS初心者のWEBデザイナーが なぜ創れたのか！？」

をここでは、お話していきます。

STORY

ーー　未経験！　ーー !

当時の私は、 CMSなんて触った事もデザインを創った事も

一度もありません。 本当に0ベースのド素人で、概念すら知らないレ

ベルでした。

STORY

ーー　スキルは！？　ーー 私の手持ちの武器は

デザイン、HTML&CSS、JSを少々、 PHPは全くわかりません。

!

当時の自分 なので、WEBサイト制作は

ずっとスタティック(静的)のみでした。

STORY

ーー　未来のためにpt.1　ーー !

時代とともにクライアントからも 自分で更新ができるCMSの要望がありました。

!

当時の自分 当時の私はCMSを触ったこともなく、 創り方さえ知りませんでした。

STORY

ーー　未来のためにpt.2　ーー !

さらなるスキルアップのために 勉強会に参加することを決めて活動しました。

!

当時の自分 それまでは一切、勉強会などに 参加していませんでした。

STORY

ーー　アクション　ーー !

はじめて参加した勉強会が、 第3回concrete5京都勉強会でした。 アポなしの完全飛び込みです。

!

そこで知り合ったのが主催の菱川さんでした。 !

!

STORY

インスピレーションpt.1 !

まずは、主催しいてる人柄チェックです。 チェックの結果は…

人柄がとてもステキな感じのヒトでした。 受付でお話したときに感じました。

!

で、本題のconcrete5はというと！？ !

!

STORY

concrete5が直感的操作という 言葉とおりでした。

GUI操作がステキすぎました。 これなら、目視で作業ができる！

（デザイナー目線CMSだと思いました）

インスピレーションpt.2 勉強会でふれてみて、concrete5が 直感的に自分の肌に合うと感じた。

STORY

ところで、デザイナーは右脳派＝感覚・感性

だからconcrete5にマッチしたと思っています。 ※あくまでも持論です。

ひらめき 直感 イメージ記憶 芸術性 創造性 空間的 全体を見る力 図形を読み取る

右脳話す・書く 分析力 論理的 科学的思考 推論 言語認識 計算 数学理解力

左脳

STORY

インスピレーションpt.3 !

なぜかというと、 決められたフォーマットばかりのコンテンツばかりをいれないことができる。 ページごとにちょっと違う変更ができるので単調にもでき、一手間くわえた工夫にもできる。 ブロックを積み上げていくというパズル型。 （クライアント目線CMSだとも思いました）

STORY

ーー　放浪　ーー (探さないで下さい)

でも、すぐには手をだしませんでした。 ちょっと遠回りをすることにしました。 他にどんなCMSがあるのだろうと

興味を持ち、CMSを選定する旅をしました。 !

!

!

!

STORY

ーー　理由　ーー !

それはCMSを習得するなら私は不器用なので、ひとつしかできないと思ったからです。

!

それなら、こだわって自分が納得した CMSを選んで習得したいと思ったからです。

!

!

!

STORY

ーー　調査　ーー !

それから3ヵ月ぐらい、いろいろなCMSを 探して調べて様々な展示会へ行きました。

そこで各CMSの強みや弱みなどを分析しました。 !

使ってないけど、大まかな知識は増えました。 !

!

!

STORY

ーー　比較　ーー !

各CMSを比較して比較しました。 わかったことがたくさんあって 気づくこともできました。

!

それで決めたのがconcrete5でした！ !

!

!

STORY

ーー　concrete5の魅力は！？　ーー !

• 有償から無償にチェンジ！オープンソース化。 • 直感的操作(GUI)であるため「編集モード」でページを見たまま編集（ドラッグアンドドロップ）ができる。 • すぐ、つかえるブロックが豊富。 • ウェブサイトの全体像を一目で把握ができる分かりやすいツリー形式のページ管理ができる。

!

!

STORY

ーー　concrete5の魅力は！？　ーー !

• htmlとcssがわかればサイトがつくれる。 • 様々なレイアウトでサイトを表現できるため、単調なデザイン以外にも対応できる。 • やりすぎるとカオスの状態になるので、ここは注意することもおもしろさのひとつです。 • 恐れなくても大丈夫なヒストリー機能搭載。 • ページの量産はコンポーザにたよれる。 !

!

STORY

ーー　concrete5の魅力は！？　ーー !

• ファイル管理がとてもしやすい。カスタマイズファイルが各フォルダで管理できる。 • コンテンツ部品（写真など）はファイルマネージャーで管理ができ編集もできる。 • コアをさわらないオーバーライドで開発ができる。エラーがでてもデバック表示できる。

!

!

!

STORY

ーー　concrete5の魅力は！？　ーー !

• すぐ使える標準の権限機能があります。 • 担当者がチェックしてからコンテンツを公開できるワークフロー機能を搭載！ • concrete5は制限の少ないMITライセンスなので、カスタマイズしたソースコードを公開する義務はありません。クライアントの制作案件に必要な部分です。

!

!

STORY

ーー　concrete5の魅力は！？　ーー !

• GUIはWEBデザイナー、JS・PHPはフロントエンジニア、ディレクターは進行管理、監修で分業すると効率アップ！ • など他にもたくさん機能はありますが、この時点では使っていないのは発表しません。 • 次回スピーカーになれたら、さらなる成長した姿をお見せします。

!

!

STORY

ーー　How & PDCA　ーー 材料はそろいました。

さあ、どうするか！？(How) !

行く勉強会は、 concrete5関係のみにしぼりました。(Plan)

!

やるぞ！と決めたら実行あるのみです。(Do) !

!

STORY

ーー　PDCA　ーー !

実際やってみたら、 !

アクシデントだらけ。(Check) !

次のページに続く !

!

!

STORY

concrete5のアツイところ 親切で個性的なヒトが多い

コミュニティやフォーラムで聞ける 毎週木曜日の週刊concrete5という

ラジオで教えてくれる !

concrete5のツライところ 英語のサイトが多い、資料が少ない

それをこのように補っています

STORY

ーー　PDCA　ーー !

conrete5サイトのコミュニティにわからないことの書き込みをたくさんしました。(Action) 結果、レスポンスがとてもよかった！

!

もっと知りたいので、 週刊concrete5に出演しました。(Action) 結果、ここで一気に飛躍しました。

!

!

STORY

ーー　PDCAの結果　ーー サポートしてくれるヒトたちがいました。

Special Thanks • concrete5 関西UG 菱川拓郎 • concrete5 UGリーダー Katz Ueno • concrete5 関西UG @acliss • concrete5 Evangelist 佐野譲 • concrete5 Evangelist 庄司早香

「感謝」でいっぱいです。 !

!

STORY

ーー　要素　ーー !

1番大事なのは 「やる気・元気・勇気」

です！ !

これさえあれば、 企画や制作や運用など、なんでもできます！！

!

Deliverable

実際に、 「私が創ったWEBサイト・theme」

をご紹介いたします！ !

どれもコンセプトは全然違います。 2015年12月～2016年5月末までで

「2サイト」創りました！

Deliverable

ちなみに、 テーマ仕様（汎用性）

のため、htmlのベタばりを 少なくしています。

Deliverable

イラストは、私が描いています。 !

写真は素材購入や当時に撮影したものを加工しています。

Deliverable

第1弾の紹介です。

Deliverable

2016,03,31 concrete5で創ったサイト紹介

DjKazu仕様 djkazu.supervinyl.net concrete5 ver7.5.6

Deliverable

構築期間 !

•構成およびワイヤー、デザイン、コーディングで1ヵ月ほど。 •作業期間は2015年12月～末手前まで。 •初めての構築で3ヵ月を費やす。 •作業期間は2016年1月～3月末で完成。 •マーケットプレイス用テーマ申請は2016年4月～7月16日で承認されました。

Deliverable

特長としては コーポレート型WEBサイトです。

1.parallaxを用いて動きのあるサイトであり、parallaxオフ対応もできる。 2.レスポンシブ機能あり。 3.カスタムレイアウトプリセットを使用。 4.ジャンルごとにラベルの名前や色が変えられる。 5.ページリストを応用してつかっている。

Deliverable

カスタムレイアウトプリセットとは！？ !

Bootstrapで使うレイアウト機能です。 基本的には○○カラムとその都度の設定をしますが登録をしておけば、決め打ちでカラム設定ができます。これは便利です。 ただし、カラムというレイアウトのみの設定になります。 !

!

Deliverable

カスタムレイアウトプリセットとは！？ !

さらにclass=“○○”とかも書いておけるのでCSSが使いやすくなります。

!

Deliverable

ページリストを応用することにより コンテンツの追加が簡単になり管理もしやすく、

運用がスムーズになると思います。 !

理由は、 ページリストは1ページ単位で管理できる。

ページ内での編集ができ、サイトマップからも探すこともできます。

Deliverable

まとめ 各ページの活用構成

• TOPページはコーポレート的に活用できます。 • ABOUTページはスタッフ紹介、地図、お問い合わせに活用できます。

• FAVORITページは商品紹介に活用できます。 • DIARYはブログに活用できます。 • SCHEDULEはニュースや特集ページに活用できます。 • 基本テーマ仕様なので汎用性をもたす！！

※作成者としてはこう思っています。

Deliverable

テーマサイト こちらは無料のテーマサイトのデモです。

運用verと仕様が違います。 1.無料につき、ジャンルに応じてラベルの名前や色が変えられるのは3種類まで。 2.parallaxはなしになっています。 3.トップページがカルーセルになっています。

デモページ heydj.supervinyl.net concrete5 ver7.5.6

Deliverable

テーマ販売についてこのFirstThemeは 無料版となります。

DjKazu運用verとは若干違います。 ※上記ページにて確認願います。

!

concrete5 マーケットプレイスまで http://www.concrete5.org/marketplace/themes/hey-dj

Deliverable

第2弾の紹介です。

Deliverable

運用仕様ver ayanyan.net concrete5 ver7.5.6

2016,05,31 concrete5で創ったサイト紹介

Deliverable

構築期間 !

•構成およびワイヤー、デザイン、コーディングで1ヵ月ほど。 •作業期間は2016年4月～末手前まで。 •構築は約2週間～3週間。 •作業期間は2016年5月中旬～5月末で完成。

Deliverable特長としては

ブログメイン型WEBサイトです。 1.masonyを用いてコンテンツをランダムに並べられる。レスポンシブ機能あり。 2.権限機能でブログ記事の運用をしている。 3.サムネイルの写真の大きさやアイコンの取り付けが選ぶことができる。 4.多様にページリストを使っている。さらにページリストを応用してつかっている。

!

Deliverable

ページタイプとページ属性と ページリストの3つを組み合わす事で

画像の大きさ、アイコンの種類を選択できる 要素をもたせたり、

ページタイプから各ページへのジャンルを 選択できる要素をもたすことが可能。

!

ページリストを応用することで 関連記事やピックアップ記事などの表示も可能。

Deliverable

ページリストを応用することにより コンテンツの追加が簡単になり管理もしやすく、

運用がスムーズになると思います。 !

理由は、 ページリストは1ページ単位で管理できる。

ページ内での編集ができ、サイトマップからも探すこともできます。

Deliverable

さらに、 ワークフロー＆権限機能をつかっています。

!

Deliverable

ワークフローとは！？ !

例えば、記事を書いたヒトからメールがきます。 書いた記事のデザイン、内容などを確認して問題なければ公開できるという機能です。 これで安全な運用ができます。

!

Deliverable

権限とは！？ !

ある一部の特集記事やキャンペーンページを表示・非表示にできます。 閲覧できる対象を選択できるという機能です。 時間指定などもでき、いつからいつまでというような公開もできます。

!

Deliverable

まだあります！ スタイルカスタマイズを搭載しています。

!

これは、マーケットプレイス用のテーマのみ搭載しています。

!

デモページ oh-love.ayanyan.net !

Deliverable

スタイルカスタマイズとは！？ !

テーマには、スタイルカスタマイズを搭載しています。 プリセット（まとめて設定）を設定しておけば、ひとつのテーマで登録しているスタイル分だけの変更設定ができる。 プリセットでまとめてではなく、個別でもかえることもできます。 !

Deliverable

まとめ 各ページの活用構成

• TOPページおよびジャンルページはブログに活用できます。ジャンルごとに出力できます。

• INFORMATIONはニュースや特集ページにて活用できます。

• CONTACTはお問い合わせにて活用できます。 • FAQはよくある質問にて活用できます。 • 基本テーマ仕様なので汎用性をもたす！！

※作成者としてはこう思っています。

Deliverable

テーマサイト こちらは有料のテーマサイトのデモです。

運用verと仕様が違います。 1.スタイルカスタマイズでconcrete5内でスタイルが変えられる。 2.コンテンツボックスのアイコンはつかない。 3.コンテンツボックスのhoverがテキストである。

デモページ oh-love.ayanyan.net

Deliverable

テーマ販売についてこのSecondThemeは 有料版のみとなります。 運用版とは若干違います。 ※上記ページにて確認願います。

!

themeサイト concrete5 マーケットプレイスまで

現在、準備中

Information

テーマ余談です第1弾のテーマはconcrete5のPRB審査を受け 7/16に名古屋の地にて審査がとおりました。 この日は名古屋でconcrete5の話をしている

最中でした。 第2弾のテーマを現在、マーケットプレイスに

提出できるように創っています。 !

※テーマなので運用版とは違う機能などを入れています。 !

SemiFinal

最後に !

ご存知かと思いますが、運用を開始したら必ずバックアップをとってから、バージョンアップをしていきましょう。 1.バグ修正などがはいっています。 2.機能が向上されている部分もあります。

Question

質疑応答

答えられる限り全力でお答えしますが、 質問の意図がわからなかったり、 言葉足らずで説明ができないことも

あると思いますが ご了承ください。

Final

予告です！ 現在、第3弾を創っています。

「複合検索」「多言語」「会員機能」などを 盛り込みます。

concrete5のメイン機能を活用した さらなる創りを目指します！

ご清聴どうもありがとうございました。