CSS設計について
、実際に新規でFLOCSSを用いてHPを作成する場...

JJJJ　

CSS設計について、
実際に新規でFLOCSSを用いてHPを作成する場合、
各プロジェクトやコンポーネントなどのclass名などは、
どの段階で、どのように決めて行くのでしょうか？

設計段階では、htmlのcssのコーディングはせず、
ワイヤフレームや、画面モックをPhotoShopなどを作成し、
そこからCSSの設計を行っていくイメージでしょうか？

もしくは、ある程度、一旦は、htmlやcssでモックを作成してしまい、
あとあとリファクタするイメージでしょうか？

前者でできるのであれば、前者の方が、手戻りがなく効率が良い気もしますが、
机上では限界もある気もいたします。

ただ、後者のように実際に作りながらだと、リファクタ分の手戻り工数も発生し、
バグも発生しやすくなる危険性もあります。

実際の現場ではどのようにされるのが一般的なのか
ご教示いただけたら幸いです。

2020/02/01

回答 0件

各プロジェクトやコンポーネントなどのclass名などは、実際にコードを書きながら決めていきます。

一般的な流れは、以下となることが多いです。

①(主にサービスやサイト全体の設計をする人が)ワイヤーフレームを作成する
各ページにどんな要素が必要か、簡易なワイヤーフレームを作成します。

②(主にデザイナーが)PhotoShopなどで「Webページのデザイン」を作成する
実際のWebページとほぼ同じ見た目の、カラフルで写真やイラストなどが入った「Webページのデザイン」を作成します。

③(主にフロントエンドエンジニアが)HTMLとCSSでコーディングを行う
コーディング前に「FLOCCSで設計する！」という大方針は決めますが、細かいclass名は決めないのが一般的です。
デザイナーの「Webページのデザイン」と同様になるように、試行錯誤してclass名を決めつつ、コーディングしていきます。
実際に作りながらクラス名を決めていきますので、何度もデザインが崩れた画面を見ながら、
最終的に、デザイナーの「Webページのデザイン」と同様になるように、思考錯誤を繰り返して、
class名を決めたり、CSSを変更したりしていきます。

1970/01/01

CSS設計について
、実際に新規でFLOCSSを用いてHPを作成する場...

部活の学習一覧

ご意見箱

CSS設計について、 実際に新規でFLOCSSを用いてHPを作成する場...

部活の学習一覧

ご意見箱

CSS設計について
、実際に新規でFLOCSSを用いてHPを作成する場...