1回目はファイル構成の事に触れたけど、ここから読み進めても多分大丈夫な気がする。前提として、HTMLとCSSくらいしかまともな知識が無いっていう初心者向けの話なので、間違ってるよ！って意見があれば教えてください。訂正します。
何はともあれデザイン
当たり前の話だけど、デザイン作んなきゃ始まんない。そして、こうゆうのってやっぱりクライアント向けに展開する事も多いから、コーポレートサイトを前提に作ろうと思う。こうゆう感じでデザインしてみた。
ごくごく普通の2カラムデザイン。ヘッダーあって、グローバルナビあって、コンテンツとサイドコンテンツ、フッター。あ、一応幅は固定。
このバージョンのConcrete5をいじるのは初めてだから、気持ちとしてフルスクリーンとかレスポンシブとかやってみたい事はいろいろあるんだけど、ひとまず基本的なものを理解しようと思って、こうゆうデザインに。
Concrete5の端的な特長
Concrete5が他のオープンソースCMSと大きく違う所って多分、コンテンツの追加に対する考え方だと思う。街を歩いてるとブロック塀を良く見るけど、Concrete5のコンクリートは、そのコンクリートブロックからきてるらしい。（間違ってたらすいません）なので、追加するコンテンツは基本的に「ブロック」と呼ばれてる。この「ブロック」を追加したり削除したりしてページのコンテンツが出来上がってくって寸法。図にするとこんな感じ。
ほんとに雑な説明図だけど、「ブロック」と呼ばれる固まりをページに追加していって一つのページが出来上がってくイメージ。
大昔のテーブルレイアウト時代にDreamweaverでデザインビューでサイト作ってた人は、「セルの追加」みたいな機能で、枠を作ってレイアウトしてたと思うんだけど、中のコードやタグは置いといて、イメージとしてはあんな感じ。あくまでイメージだけど。要するに割りと直感的にフレキシブルにレイアウトしてく事が出来そうだと思って貰えれば良いかも。
で、この追加出来る「ブロック」ってのがいろいろ種類があって、かなり便利。
標準（インストール）時のブロック一覧
全部はまだ試してないから、実際にどうゆう時に便利なのかってのはまだ分からない部分もあるんだけど、説明しなくてもこの一覧を見ただけで、なんとなく「こんなコンテンツが作れるのかな？」ってのが想像できる。
この想像できるって所が凄い重要だと思う。
WordPressはね、想像が出来ない。多少WEBをかじった人間でも想像出来ないんだから、ド素人同然のクライアントからすれば、もう更新もメンテナンスも外部に頼んだほうが良いってなると思う。
ちょっと話しが逸れたけど、デフォルトで入ってるブロックの種類だけでも、もうサイトは作り上げちゃう事が出来る。それも単純な「テキストと写真だけ」なブログ体のコンテンツじゃなくて、googleマップ入れたり、フラッシュ入れたり、スライドショー入れたり、ナビゲーション入れたりってサイトにあれば便利な機能がほぼ揃ってる。
そこで今回作ろうとしてるデザインをテンプレートにする時にどう考えれば良いかって所。
エリアの考え方
Concrete5で自作のテンプレートにブロックを追加出来るようにするためには「エリア」と呼ばれる場所を用意する必要がある。Concrete5がその「エリア」を判別して、その場所に対して編集が出来るようにしてくれる。
そのエリアの用意の仕方（テンプレート上の記述方法）は、次回に詳しく説明するとして、今は作ったデザインの何処をエリアにするかという話。
エリア＝編集可能箇所
という事だから、更新したい場所、更新する可能性のある場所をエリアにする事になる。
一般的に考えると「コンテンツ部分」（※下図）って事になるんだろうと思う。
だけど、例えばサイトのタイトルが変わる・ロゴが変わる、メインビジュアルを新しくしたい、バナーを増やしたい・変更したい、さらにはSNSを辞めたから消したいなんて要望も出てくる可能性がある。
その度に更新依頼を受けて、見積り出して対応するのは別に問題ないと思うし、制作会社だったらその方が売り上げは増えるのかも知れない。でもそれだと本当の意味でのCMS（コンテンツ・マネジメント・システム）では無いよなーと前から思っていて、「更新したいと思った場所を簡単にかつ何処でも、HTMLの知識が無くても、更新できる」のが、やっぱりクライアントには一番嬉しい事だと思うし、本当のCMSじゃないかと思う訳で。
（更新なんて外部に依頼すれば良いと思ってるクライアントや、CMSの定義が違うという意見があるかもというのは、目をつぶって言ってます。だって毛が生えた程度のWEBデザイナーだから。）
だから今回作るテンプレートも、目指す所は「（ほぼ）全ての場所をHTMLの知識が無くても更新できるテンプレート」にしてみた。
となるとエリアにしないといけない部分は下図のようになった。
全部じゃねーか（笑）
一度作ると分かるんだけど、ここからさらにヘッダーからグローバルナビを分割して「ヘッダーエリア」と「ローバルナビエリア」に分ける。今はなんで分けないといけないかは考えなくても大丈夫。
いや分けなくても良いんだけどさ。
という訳でテンプレートに作るエリアは
１）ヘッダーエリア
２）グローバルナビエリア
３）メインビジュアルエリア
４）コンテンツエリア
５）サイドエリア
６）フッターエリア
の合計６個という事に決まった。
じゃあコレをいよいよテンプレートにしていく。
テンプレートにするためには、まず普通にHTMLで組んで、それをどうのこうの、って感じでConcrete5のチュートリアル書いてるサイトでは言ってるけど、いやそれは確かにその通りなんだけど、ちょっとした注意点とかもあって、それを分かってるのと分かってないのとでは、大違い。あ、でもあくまでプログラム書けない、HTMLとCSSしか分かんないってレベルの話で。
それぐらいの知識しか無くても、バリバリのフロントエンジニアが組んだようなCMSに出来るよって事なので、話す内容はそのレベルを越えません。僕も分からないから。
テンプレートにする為のHTML組みの説明は次回に。
自作テンプレートの道5 下準備3
自作テンプレートの道4 下準備2
自作テンプレートの道3 下準備1
自作テンプレートの道2 デザイン作成とテンプレート作成時の考え方
自作テンプレートの道1 ファイル構成
0 件のコメント:
コメントを投稿