CSS Nite in Fukuoka, vol.13フォローアップ（2）屋代 敬介さん

2020年1月 2日（木）

2019年2月26日にデジタルハリウッド STUDIO福岡で開催したCSS Nite in Fukuoka, vol.13のフォローアップとして、屋代 敬介さん（ディーゼロ）の『クオリティを維持しながら短期間で効率よく制作を進めたい！ミニマルデザインの制作事例によるワークフローのご紹介』セッションのスライドなどを公開します。

フォローアップ

ご参加いただいた皆さま、ありがとうございました。『クオリティを維持しながら効率よく制作を進めるために』でお話させていただいた屋代です。

みなさまからのアンケートも全て拝見しました。非常に多くの方から役に立ったという回答をいただき、お話できて良かったと心から感じております。

複数人のプロジェクトチームで、デザインのクオリティを維持しながら、ボリュームのあるサイトを短期間で組み上げるにはどうしたら良いか。私自身、日々、効率的なワークフローという課題に悩んでいる制作者のひとりです。

今回のポイントとしては、「サイト内で使用するレイアウトパーツを限定する」「原稿にパーツを割り振ることでページの制作者がレイアウトに悩まないようにする」「準備したパーツをコンポーネント化する」という3点が大きなポイントでしたが、これを行うことで、考える人と考えずにアウトプットだけする人を明確に分けたという点が効率化という部分に大きくつながったと思っています。

今回お伝えしたように、単純作業をいかに効率化するかということが、クオリティアップにも直結します。クリエイターとして設計やデザイン、演出など考える部分にしっかり時間を使うことが出来たらもっともっとより良いクリエイティブが生まれていくのではないでしょうか。

アンケートで頂いた貴重なご意見、ご質問に関して

（質問）それぞれの原稿にIDをふるのは実際どんな風にやっているのか気になりました。その原稿はどのようにして共有されているのでしょうか？

まず原稿ですが、クライアントからページ単位でテキストとして準備していただきました。それをディレクトリマップと同じ階層構造でフォルダ分けし、社内のファイルサーバで管理しました。IDを振る作業ですが、ディレクトリマップに原稿の列を設け、IDの割り振りが必要なページ（主要ページと各種フォーマット）に印を付けて、そのページのテキスト原稿に内容を見ながら適したパーツを割り振っていきました。

（感想）バーガーエディタのモジュールをカスタマイズできるのがいい！

そうですね、今回のようにブロック全体を入れ替えることも出来ますし、デフォルトのブロックにオリジナルのブロックを追加することも可能です。ただ、セッションの中でもお伝えしましたが、あまりに選択肢が増えすぎると更新担当者が選択に迷ってしまい、結果的に使いづらいCMSになってしまいますので、その点は注意したいところです。

（質問）baserCMSが気になりました。

BurgerEditorというプラグインを使用することで、Webの知識がなくても、簡単にリッチなページを作成することが可能になります。使用可能なブロックの数は48種類あり、写真や文章のブロックだけでなく、YouTubeやGoogleマップなど多種多様なブロックでWebページの表現の自由度が高まります。下に関連リンクを記載していますので、ぜひデモでお試しください。

（質問）SEO要件はどの程度のものだったか知りたいです。

SEOに関して特に要件はなかったのですが、ユーザーにとって有益な情報となるようコンテンツを充実させたり、ページタイトルの付け方を工夫するなど情報の中身の部分で手を入れました。

（質問）レイアウトの検証にどれくらい時間をかけたのか、何パターンほど試したのかを知りたい。

レイアウトの検証については、レイアウト特性の違うページをディレクトリマップからピックアップし、6パターンほど実際のデザインパーツを当てて検証しました。検証する中で、やはり上下に並んだ時にバランスが悪かったり、メリハリが無かったりするパーツが出て来ましたので、それぞれ適した組み合わせになるようデザイン変更し調整を繰り返しました。

関連URL

2019年、CSS Niteでは49回の関連イベントを通して123セッションが行われました。その中からベスト・セッション＋αを選びました。

2010年から2019年のベスト・セッション