Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」

3,668 views

Published on

SaCSS(札幌コーディング勉強会) vol.79の資料に補足を加えたものです。CMSを利用したサイトを制作する前、デザイナー・コーダーへの発注・着手前にディレクション関連で確認すべきことを紹介しています。

Published in: Technology
  • Be the first to comment

SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」

  1. 1. 口田 聖子 :: WebbingStudio 2016.08.27(Sat)@ わくわくホリデーホール SaCSS 札幌コーディング勉強会 vol.79 CMSがらみの サイトの受発注で 確認すべきこと
  2. 2. 口田 聖子(うぇびん) Webエンジニア CMSアドバイザー a-blog cmsエバンジェリスト
  3. 3. CMS Mixで話しました
  4. 4. エバンジェリストやってます
  5. 5. a-blog cms公式イベントは、9月10日! https://ablogcms-sapporo.doorkeeper.jp/events/50842
  6. 6. 今回のお題
  7. 7. CMSサイトの制作前の話 • まず、念頭に置くこと • 受注時のヒアリング • ワイヤーフレームから読み取る • デザイナー・コーダーへの発注 • ハマりやすい落とし穴 • まとめ 発注側のディレクターさんに知ってほしいこと
  8. 8. まず、念頭に置くこと
  9. 9. 何が入るか わからない イレギュラーな入力例は 常に考えておく photo by Arto Alanenpää - CC BY-SA 4.0 https://creativecommons.org/licenses/by-sa/4.0/
  10. 10. デザインや コーディングを 待たなくてよい 先行着手が基本 最低でもCMS設置まで
  11. 11. サーバー環境が 工数に響く 権限はどこまでもらえる? テストサーバーが メチャ遅いことも…
  12. 12. 文字より 言葉より 図がものを言う 用語はみんなバラバラ キャプチャツールを駆使
  13. 13. 「想定外」は 必ず起こる 連携ミス・勘違い・バグ… 日程は余裕を持って http://matome.naver.jp/odai/ 2137692424870228601/2137692581070811103
  14. 14. 今日の話は この5つで ほぼ終わってます ここからの話は 今挙げたことの応用です
  15. 15. 受注時のヒアリング
  16. 16. 最初の問い合わせ時 • 最も重要な情報はサイトマップ • サイトマップもまだであれば
 参考にしたいサイトのURLを確認 • リニューアルであれば現行サイトのURLも • サイトを見てコンテンツの種類と
 ボリューム感を推理する
  17. 17. コンテンツの種類とは レイアウト・構成が異なる
 ページ群の数 ページ+新着情報が基本 多ければ工数増 作ったことがあれば工数減 ページ 新着情報 イベント アーカイブ お問い合わせ http://cssnite-sapporo.jp/
  18. 18. ボリューム感とは 想定される細かい作業の量・やり取りの手数 • 作業量が少ないコンテンツ • ギャラリー/資料アップロード • 作業量が多いコンテンツ • ブログ/商品情報/イベント情報 • インポート作業を含むコンテンツ • 現行サイト/ECサイトからの移行
  19. 19. 提供してほしい情報優先度 1. サイトマップ 2. 予算感 3. 必須要件 4. 採用するCMS(採用する理由も) 5. 使用予定サーバー 6. 更新担当者の情報(人数・リテラシなど)
  20. 20. チェックシートを書くことも
  21. 21. ワイヤーフレームから
 読み取る
  22. 22. 「とりあえずこれで進めてください」 と 渡されたワイヤー
  23. 23. 懸念点を 重要な順に挙げていきます
  24. 24. 補足 ブログはタイトルの文字数が
 一行に収まることはまずありません エントリーに文字数制限を設けるなど、
 投稿ルールが明確なコンテンツであれば問題ありません もちろん、ワイヤーの各記事の タイトルの文字数を変える必要もありません Adobe XDのグリッド機能は便利ですね :D
  25. 25. 補足 カテゴリーについても、最初の段階で確定し 公開後、大幅な追加・変更がなければ問題ありません 親子カテゴリーや
 ドリルダウンメニューがあると工数が増えます
  26. 26. 補足 ページ分割の指示漏れはけっこうあります CMSではどの演出を使うかで、工数が全く変わります ・前後リンク ・ページャー ・非同期もっと読む おまかせの場合は最も無難なページャーにしています
  27. 27. 補足 帯状のヘッダに カテゴリー名が入っているデザインは人気です キャプション変更に対応する場合 ・キャプションがないカテゴリーがある可能性 ・なかった場合の挙動 はデザイン・コーディングに影響します 必ず入れるなら問題ありません
  28. 28. 補足 サムネイルのトリミング表示は、CSS3の background-size:cover の登場で楽になりました アクセシビリティ上、若干問題があるため 画像に重要な意味がある場合や、官公庁のサイトでは img要素での配置の方がよい場合があります なお、正方形の自動トリミングは 多くの一般的なCMSが対応しています
  29. 29. 補足 難しい話になりますが… 複数人でスタッフブログを運営する場合、 全員がログインして投稿するケースは、実はまれです 更新担当者一人が、他のスタッフに原稿をもらい 代理投稿を行うケースが多いのです その場合、CMSのユーザー情報を自動表示できません どう選択させるか考える必要があります
  30. 30.  デザイナー・
 コーダーへの発注
  31. 31. デザイナーとCMS
  32. 32. デザイナーとCMS (1) • 文字数が変わる可能性がある箇所を必ず伝える • デザインが固定となる箇所も伝える • サムネイルの縦横比(正方形/4:3/幅だけ固定) • SNSボタン • ブロック編集型CMSの特殊パーツ • プラグインで自動生成するフォーム
  33. 33. デザイナーとCMS (2) •ページネーションこわい • デザイン・コーディングが自由にできるCMSが少ない • 「○ページ中 ○~○ページ」が困難なCMSも • jQueryライブラリ前提の演出を入れてしまう
 デザイナーさんがけっこう多い • メニュー表示、ページ遷移などはワイヤーできちんと指示
  34. 34. コーダーとCMS
  35. 35. コーダーとCMS (1) • スケジュールがけっこうタイトになる • 最初に作ってもらうのはプライバシーポリシー • 見出し、段落などの基礎構造がはっきりしている • 基礎構造が出来次第、一旦送ってもらう • 急ぎ案件ではCSSフレームワークが共通語 • ただし、デザインが細かいと工数が増えることも
  36. 36. コーダーとCMS (2) • マークアップ変更が難しい箇所 • ブロック編集型CMSの特殊パーツ • プラグインで自動生成するパーツ etc… • 状況により対応を判断 • 出力されるHTMLを抜き出して渡す • functions.phpでHTMLを加工 • そこは省いて作ってもらい、CMS担当が巻き取る
  37. 37. CMSの コーディングは コーダーの試金石 技量差がモロ出ます いやいやまじで
  38. 38. 補足 CMSサイトのコーディングは、どうしても テンプレートと統合したあとの調整が必要になります 経験が浅い人のコードは、読みにくい・探しにくいなど どうしても手数がかかります コーダーさんがGit・Gulpを使っているかどうかは 私の場合は工数に加味していません CMSで大事なのは、HTMLやclassの整合性です
  39. 39. カンプ・コーディングデータの確認
  40. 40. デザインカンプの確認 • 変更の可能性がある箇所に
 デザインフォントを使っていないか? • Webフォントを使うなら問題なし • 文字数の増減を想定しているか? • 工数が極端に増える演出を入れていないか?
  41. 41. コーディングデータの確認 • グリッドの一覧ページは特に注意 • 行ごとの回りこみ解除をどのようにしている? • CMSでの再現・モバイル対応に無理はないか? • コンテンツごとにCSSが
 異なる場合
 追加CSSはどうしてる? • bodyのclass? • カテゴリーごとにCSS切り替え?
  42. 42. 補足 コンテンツごとにCSSを切り替える場合 主に二通りの方法があります 1)body要素にコンテンツ名のclassをつける 2)カテゴリー・ブログごとに追加CSSを差し替える 最近のCMSは、どちらでも構いません ルールは統一してください
  43. 43. ハマりやすい落とし穴
  44. 44. スケジュールの悩み • CMS構築が予定通り進まないことが増えた • 「○日までに着手できないと間に合わない」
 デッドライン式でスケジュールを組む • デザイン未確定でもできる
 CMSの設置・設定・検証などを
 先に作業させてもらう アジャイル?
  45. 45. 一般向けのCMSと予算 予算を減らしたいだけの理由で、ライセンス費用がかからない
 CMSを指定されることがあるが… 理由もなく、特別安くすむCMSはない。 必ずどこかに「工数」がかかる。 ラ 調査コスト デザイン・コーディングとの連携 保守コスト ラ 調査コスト デ・コ連携 保守コスト ライセンス 調査コスト デ・コ連携 保守コスト ライセンス 調査コスト デ・コ連携 保守コスト
  46. 46. 補足 「ページ・ブログで構成された、10ページ前後のサイトを 構築した場合に想定されるコストの内訳」 に対する、うぇびんの雑感です それぞれがどのCMSを指しているかはここでは伏せます ラ 調査コスト デザイン・コーディングとの連携 保守コスト ラ 調査コスト デ・コ連携 保守コスト ライセンス 調査コスト デ・コ連携 保守コスト ライセンス 調査コスト デ・コ連携 保守コスト
  47. 47. サーバーは早めに確認 • 予定していたCMSが設置できないのは致命的 • クラウドサーバーの場合
 公開前は予算節減でスペックを落としていることも
 (管理画面おっそ!) • .htaccessやphp.iniなどの編集権限がないと
 日数ロスが大きい
  48. 48. 誰が更新する? • ページ更新を制作会社がする場合は
 HTML直打ちを前提とした方が喜ばれることも • 初心者にWordPressのUIは操作しにくい • 外部委託の更新担当者の端末が古くて
 CMSが動かない!ということも…
  49. 49. 補足 「なぜ、WordPressのUIは操作しにくいのですか?」 という質問がありました WordPressのサブメニューは「hover」が前提となっています 普段、携帯しか使っていない人は マウスを思い通りに止められないため、まごついてしまうのです 本人が、WordPressに慣れていれば問題ありません プラグインで、使用するリンクを1階層目に出す手もありますが 設定にもそれなりの工数がかかります
  50. 50. パーマリンクとリダイレクト • Movable Typeに慣れていると見落としがちなこと • パーマリンクを自由に操作できないCMSもある • つまり、旧サイトからのリダイレクトが難しい • 数百行のリダイレクトを書くことになることも… そもそも、リダイレクトが 必要なコンテンツなの?
  51. 51. まとめ
  52. 52. ほうれんそう • 各方面との連絡を常にしっかり取る • クライアント不在は厳禁 • CMS構築で社長のちゃぶ台返しはダメージが大きい • チャット・タスクがある管理ツールは必須 • Slackは過去ログのタスク化が難しい • チャットワークはスマホアプリの操作がいまいち • Backlog・サイボウズLiveは見落としが出やすい
  53. 53. 補足 この辺は完全に各個人の好みの問題です SaCSS当日は、Redmineが最高という人もいましたし タスク管理のみに絞って、Trelloを使う人もいます 個人的にはチャットワークが好きですが 私は、制作会社さんの助っ人が主なお仕事なので ツールを指定できないのが悩みの種です 何より大事なのは情報の共有です
  54. 54. 信頼関係の維持 静的サイトよりも 困難は多い お互いの不安や懸念点は
 早め・正直に
  55. 55. ありがとうございました http://webbingstudio.com/

×