口田 聖子 :: WebbingStudio 2016.08.27（Sat）@ わくわくホリデーホール

SaCSS 札幌コーディング勉強会 vol.79

CMSがらみの サイトの受発注で 確認すべきこと

口田 聖子（うぇびん）

Webエンジニア CMSアドバイザー a-blog cmsエバンジェリスト

CMS Mixで話しました

エバンジェリストやってます

a-blog cms公式イベントは、9月10日！https://ablogcms-sapporo.doorkeeper.jp/events/50842

今回のお題

CMSサイトの制作前の話

• まず、念頭に置くこと

• 受注時のヒアリング

• ワイヤーフレームから読み取る

• デザイナー・コーダーへの発注

• ハマりやすい落とし穴

• まとめ

発注側のディレクターさんに知ってほしいこと

まず、念頭に置くこと

何が入るか わからない

イレギュラーな入力例は 常に考えておく

photo by Arto Alanenpää - CC BY-SA 4.0 https://creativecommons.org/licenses/by-sa/4.0/

デザインや コーディングを 待たなくてよい

先行着手が基本 最低でもCMS設置まで

サーバー環境が 工数に響く

権限はどこまでもらえる？ テストサーバーが

メチャ遅いことも…

文字より 言葉より

図がものを言う用語はみんなバラバラ

キャプチャツールを駆使

「想定外」は 必ず起こる

連携ミス・勘違い・バグ… 日程は余裕を持って

http://matome.naver.jp/odai/2137692424870228601/2137692581070811103

今日の話は この５つで

ほぼ終わってますここからの話は

今挙げたことの応用です

受注時のヒアリング

最初の問い合わせ時

• 最も重要な情報はサイトマップ

• サイトマップもまだであれば参考にしたいサイトのURLを確認

• リニューアルであれば現行サイトのURLも

• サイトを見てコンテンツの種類とボリューム感を推理する

コンテンツの種類とは

レイアウト・構成が異なるページ群の数

ページ＋新着情報が基本 多ければ工数増 作ったことがあれば工数減

ページ 新着情報

イベント アーカイブ

お問い合わせ

http://cssnite-sapporo.jp/

ボリューム感とは

想定される細かい作業の量・やり取りの手数

• 作業量が少ないコンテンツ

• ギャラリー／資料アップロード

• 作業量が多いコンテンツ

• ブログ／商品情報／イベント情報

• インポート作業を含むコンテンツ

• 現行サイト／ECサイトからの移行

提供してほしい情報優先度

1. サイトマップ

2. 予算感

3. 必須要件

4. 採用するCMS（採用する理由も）

5. 使用予定サーバー

6. 更新担当者の情報（人数・リテラシなど）

チェックシートを書くことも

ワイヤーフレームから読み取る

「とりあえずこれで進めてください」と

渡されたワイヤー

懸念点を 重要な順に挙げていきます

補足

ブログはタイトルの文字数が一行に収まることはまずありません

エントリーに文字数制限を設けるなど、投稿ルールが明確なコンテンツであれば問題ありません

もちろん、ワイヤーの各記事の タイトルの文字数を変える必要もありません Adobe XDのグリッド機能は便利ですね :D

補足

カテゴリーについても、最初の段階で確定し 公開後、大幅な追加・変更がなければ問題ありません

親子カテゴリーやドリルダウンメニューがあると工数が増えます

補足

ページ分割の指示漏れはけっこうあります CMSではどの演出を使うかで、工数が全く変わります

・前後リンク ・ページャー ・非同期もっと読む

おまかせの場合は最も無難なページャーにしています

補足

帯状のヘッダに カテゴリー名が入っているデザインは人気です

キャプション変更に対応する場合 ・キャプションがないカテゴリーがある可能性 ・なかった場合の挙動 はデザイン・コーディングに影響します

必ず入れるなら問題ありません

補足

サムネイルのトリミング表示は、CSS3の background-size:cover の登場で楽になりました

アクセシビリティ上、若干問題があるため 画像に重要な意味がある場合や、官公庁のサイトでは img要素での配置の方がよい場合があります

なお、正方形の自動トリミングは 多くの一般的なCMSが対応しています

補足

難しい話になりますが…

複数人でスタッフブログを運営する場合、 全員がログインして投稿するケースは、実はまれです 更新担当者一人が、他のスタッフに原稿をもらい 代理投稿を行うケースが多いのです

その場合、CMSのユーザー情報を自動表示できません どう選択させるか考える必要があります

　デザイナー・コーダーへの発注

デザイナーとCMS

デザイナーとCMS (1)

• 文字数が変わる可能性がある箇所を必ず伝える

• デザインが固定となる箇所も伝える

• サムネイルの縦横比（正方形／4：3／幅だけ固定）

• SNSボタン

• ブロック編集型CMSの特殊パーツ

• プラグインで自動生成するフォーム

デザイナーとCMS (2)

•ページネーションこわい • デザイン・コーディングが自由にできるCMSが少ない

• 「○ページ中　○～○ページ」が困難なCMSも

• jQueryライブラリ前提の演出を入れてしまうデザイナーさんがけっこう多い

• メニュー表示、ページ遷移などはワイヤーできちんと指示

コーダーとCMS

コーダーとCMS (1)

• スケジュールがけっこうタイトになる

• 最初に作ってもらうのはプライバシーポリシー

• 見出し、段落などの基礎構造がはっきりしている

• 基礎構造が出来次第、一旦送ってもらう

• 急ぎ案件ではCSSフレームワークが共通語

• ただし、デザインが細かいと工数が増えることも

コーダーとCMS (2)

• マークアップ変更が難しい箇所

• ブロック編集型CMSの特殊パーツ

• プラグインで自動生成するパーツ etc…

• 状況により対応を判断

• 出力されるHTMLを抜き出して渡す

• functions.phpでHTMLを加工

• そこは省いて作ってもらい、CMS担当が巻き取る

CMSの コーディングは

コーダーの試金石技量差がモロ出ます　いやいやまじで

補足

CMSサイトのコーディングは、どうしても テンプレートと統合したあとの調整が必要になります

経験が浅い人のコードは、読みにくい・探しにくいなど どうしても手数がかかります

コーダーさんがGit・Gulpを使っているかどうかは 私の場合は工数に加味していません CMSで大事なのは、HTMLやclassの整合性です

カンプ・コーディングデータの確認

デザインカンプの確認

• 変更の可能性がある箇所にデザインフォントを使っていないか？

• Webフォントを使うなら問題なし

• 文字数の増減を想定しているか？

• 工数が極端に増える演出を入れていないか？

コーディングデータの確認

• グリッドの一覧ページは特に注意

• 行ごとの回りこみ解除をどのようにしている？

• CMSでの再現・モバイル対応に無理はないか？

• コンテンツごとにCSSが異なる場合追加CSSはどうしてる？

• bodyのclass？

• カテゴリーごとにCSS切り替え？

補足

コンテンツごとにCSSを切り替える場合 主に二通りの方法があります

1）body要素にコンテンツ名のclassをつける 2）カテゴリー・ブログごとに追加CSSを差し替える

最近のCMSは、どちらでも構いません ルールは統一してください

ハマりやすい落とし穴

スケジュールの悩み

• CMS構築が予定通り進まないことが増えた

• 「○日までに着手できないと間に合わない」デッドライン式でスケジュールを組む

• デザイン未確定でもできるCMSの設置・設定・検証などを先に作業させてもらう

アジャイル？

一般向けのCMSと予算

予算を減らしたいだけの理由で、ライセンス費用がかからないCMSを指定されることがあるが…

理由もなく、特別安くすむCMSはない。 必ずどこかに「工数」がかかる。

ラ 調査コスト デザイン・コーディングとの連携 保守コスト

ラ 調査コスト デ・コ連携 保守コスト

ライセンス 調査コスト デ・コ連携 保守コスト

ライセンス 調査コスト デ・コ連携 保守コスト

補足

「ページ・ブログで構成された、10ページ前後のサイトを 構築した場合に想定されるコストの内訳」 に対する、うぇびんの雑感です それぞれがどのCMSを指しているかはここでは伏せます

ラ 調査コスト デザイン・コーディングとの連携 保守コスト

ラ 調査コスト デ・コ連携 保守コスト

ライセンス 調査コスト デ・コ連携 保守コスト

ライセンス 調査コスト デ・コ連携 保守コスト

サーバーは早めに確認

• 予定していたCMSが設置できないのは致命的

• クラウドサーバーの場合公開前は予算節減でスペックを落としていることも（管理画面おっそ！）

• .htaccessやphp.iniなどの編集権限がないと日数ロスが大きい

誰が更新する？

• ページ更新を制作会社がする場合はHTML直打ちを前提とした方が喜ばれることも

• 初心者にWordPressのUIは操作しにくい

• 外部委託の更新担当者の端末が古くてCMSが動かない！ということも…

補足

「なぜ、WordPressのUIは操作しにくいのですか？」 という質問がありました

WordPressのサブメニューは「hover」が前提となっています 普段、携帯しか使っていない人は マウスを思い通りに止められないため、まごついてしまうのです

本人が、WordPressに慣れていれば問題ありません プラグインで、使用するリンクを1階層目に出す手もありますが 設定にもそれなりの工数がかかります

パーマリンクとリダイレクト

• Movable Typeに慣れていると見落としがちなこと

• パーマリンクを自由に操作できないCMSもある

• つまり、旧サイトからのリダイレクトが難しい

• 数百行のリダイレクトを書くことになることも…

そもそも、リダイレクトが 必要なコンテンツなの？

まとめ

ほうれんそう

• 各方面との連絡を常にしっかり取る

• クライアント不在は厳禁

• CMS構築で社長のちゃぶ台返しはダメージが大きい

• チャット・タスクがある管理ツールは必須

• Slackは過去ログのタスク化が難しい

• チャットワークはスマホアプリの操作がいまいち

• Backlog・サイボウズLiveは見落としが出やすい

補足

この辺は完全に各個人の好みの問題です SaCSS当日は、Redmineが最高という人もいましたし タスク管理のみに絞って、Trelloを使う人もいます

個人的にはチャットワークが好きですが 私は、制作会社さんの助っ人が主なお仕事なので ツールを指定できないのが悩みの種です

何より大事なのは情報の共有です

信頼関係の維持静的サイトよりも

困難は多い お互いの不安や懸念点は

早め・正直に

ありがとうございました

http://webbingstudio.com/