Upload
seiko-kuchida
View
3.080
Download
0
Embed Size (px)
Citation preview
口田 聖子 :: 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
今日の話は この5つで
ほぼ終わってますここからの話は
今挙げたことの応用です
受注時のヒアリング
最初の問い合わせ時
• 最も重要な情報はサイトマップ
• サイトマップもまだであれば参考にしたいサイトの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/