ウェブデザイナーがフレームワークの中でする仕事
ここで一旦、『デザイナー』と『WEBデザイナー』の仕事の違いを見てみましょう。
ざっくりWEBデザインの変遷を見てみましょう。ある意味私の歴史でもありますのでかなり偏ってみていますが・・・・。
【大昔】
インターネットが出始めのころは、ＨＴＭＬのみでデザイン、コンテンツ共に組んでいました。テーブルタグでグリッドを作っている時代です。今から考えるとかなり原始的な作り方でとてもシステマチックな作り方ではありませんでした。
動的処理はperlやC言語で組んでいました。ローカルテストも一台FreeBSDやLinuxでサーバー実機を組み上げてLAN内で行っていました。XAMPPはまだ普及していません。
【かなり前】
そのうちに動的なサイトのニーズも高まりＰＨＰが徐々に広がりを見せます。
まだまだ単独ファイルで組むことの多い状態が続きます。
しかしＰＨＰが容易にＨＴＭＬにデータを埋め込むことができるので、テンプレートとして活用され始めます。
【ＣＶ時代】
テンプレート専用にＳＭＡＲＴＹが台頭してきます。まだまだperlも元気です。
PHP（コントローラー）＋ＳＭＡＲＴＹ（ビュー）＋ＭｙＳＱＬで組むことが多い時代でした。
中規模以上の開発では分業化が課題になってきます。
GitやSubVersionなどバージョン管理とファイルの共有化も安全・便利な方法が主流となってきます。
XAMPPも流行り始めてローカル環境も簡単に設営できるようになりました。
この頃から見た目をスタイルシートで組み始めます。
【最近】
ぼちぼちＣＭＳ（コンテンツマネージメントシステム）が流行ってきます。
ＸＯＯＰＳ・MovableType・WordPressなどが流行ってきます。
PHPはフレームワークが台頭してきます。
ZendFramework・CodeIgnaiter・Cake・・・。
Bootstrapを採用してレスポンシブな設計が主流となってきます。
【今時】
フレームワークは完全にMVC化し、デザインとコンテンツも完全に分離し、分業化してWEBプロジェクトを進める時代になりました。
composerによるモジュールの管理で環境ごとの差異も無くすことができます。
スタイルシートもＳＡＳＳ・ＬＥＳＳでコンパイルする時代になってきます。
さらにコンテナ化により開発環境（作業するPC達）とデプロイ環境（実運用サーバ）の差異もなくなってきています。
このMVCに分けることで制作も、メンテナンスもずいぶん楽になったのです。
今では小規模だろうが大規模だろうがMVCで分けて制作する意味が分からないと仕事にならない環境になっているということです。
ある意味フレームワークという名前がつくシステムは【開発を分業化するための必要条件を揃えるため】に使われるといってもいいと思います。
ではざっくりＭＶＣを解説すると
- MVCを使うにはApacheの設定でmodRewriteという機能を使いすべてのアクセス（リクエスト）をindex.phpに集めます。
（これも.htaccessの使い方で詳しく後程説明します。） - index.phpが受けたリクエストはルーティングの設定に従いコントローラ（C）に渡されます。
- コントローラーはデータベースを使ってデーターを表示させる場合モデル（M）に命令を送ります。
- モデルは決められたルールに従いデータベースからデータのセットを取ってきてコントローラーに返します。
- コントローラーは決められたビュー（V）にデータセットを投げます。
- ビューは受け取ったデータセットを表示できる形に整え、レイアウト機能を使って、HTML化された表示用のテキストをコントローラーに返します。
- コントローラーはレンダリングされたレスポンスをブラウザーに返します。
- 要求のあったブラウザーでページが表示されます。
いろいろ省略しましたがこの動きがわかってないと、WEBデザインはできません。
なぜならViewの部分を書くのはWEBデザイナーの仕事だからです。
上記の6番目の項目を担うわけです。逆に言うとそれ以外はしなくていいのです。
というか、してはダメです。勝手にコントローラーいじっちゃダメです。
プログラマーもデータセットの仕様を渡した後は勝手にビューをいじっちゃダメなんです。
Laravel のばあいはbladeという仕組みを使ってファイルを書かなくてはなりません。
仕様書やプログラマの指示により、渡されるデータセットの概要を把握し、bladeのコマンドを書いて表示（時には条件分岐やループで表示またはそれらの組み合わせ）させる能力が必要です。そんなに難しい書き方ではありません。HTMLのタグの感覚で使えるコマンドです。
大きなプロジェクトではデザインの部分も複数名で担当することとなります。その場合もデザインチームの中にviewの設計とルールを作成するマネージャー（ディレクター）が必要で、ひな形までは作るかもしれません。その下でCSSを組むだけだったら只のへっぽこデザイナーでも行けるかもしれません。
もっとも大規模な場合だとUI/UXの担当者が別枠になり画面遷移までは専門職が行うでしょう。そんなプロジェクトになると当然スタイルシートの管理も大変でSASSが必須となってきます。
SASSはスタイルシートのソースコードを取りまとめて実行用ファイルにトランスパイル（書き換え）してくれる仕組みです。コンパイルという呼び方もしますがバイナリにするわけではないので多分トランスパイルが正しい言い方と思う。
JavaScriptに関してはViewの範疇として扱うケースが多い。ユーザインターフェースの部分で使うことが多く、ブラウザーでの見た目のギミックや画像処理、フォームバリデーションをJavaScriputで行うことが多いからView担当の持ち分となる。
なお、コントローラのサーバサイドバリデーションはプログラマの担当となる。
もっともそのくらいの規模だとコーディングもコントローラー専門、モデル専門、システム管理専門と分業して作業することとなるでしょう。
「いきなりそんなプロジェクトに参加予定はない」と思うでしょうが、小規模や一人での開発は上記のすべての項目を自分でするだけのことです。
規模が変わってもすることは同じです。
このカテゴリーでは最小限デザイナーが自身の開発環境でやるべきことをまとめていきます。
それではわかりやすくLaravelのファイルをまとめてみましたので見てみましょう。
この中で赤の点線で囲った部分がWEBデザイナーが作るファイルです。
各フォルダーの色は
・赤がWEBデザイナーの担当フォルダー
・緑がプログラマーの担当フォルダー
・グレーがLaravelのシステムが利用しているフォルダー
となります。都合上不必要なフォルダー、ファイルは省略しています。
一人でするなら、全作業を、小規模ならプログラマーがサーバ環境整備（デプロイサーバ）までをするケースが多いでしょうね。
WEBデザイナーは自分の開発環境整備と点線の中のファイルを作ります。
今時はCSSもSASSで最初から作ります。