SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
•
13 likes•4,495 views
SaCSS（札幌コーディング勉強会） vol.79の資料に補足を加えたものです。CMSを利用したサイトを制作する前、デザイナー・コーダーへの発注・着手前にディレクション関連で確認すべきことを紹介しています。
Recommended
More Related Content
What's hot
What's hot (20)
Viewers also liked
Viewers also liked (20)
Similar to SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
Similar to SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」 (20)
More from Seiko Kuchida
More from Seiko Kuchida (16)
Recently uploaded
Recently uploaded (9)
SaCSS vol.79「CMSがらみのサイトの受発注で確認すべきこと」
- 1. 口田 聖子 :: WebbingStudio 2016.08.27（Sat）@ わくわくホリデーホール SaCSS 札幌コーディング勉強会 vol.79 CMSがらみの サイトの受発注で 確認すべきこと
- 6. 今回のお題
- 7. CMSサイトの制作前の話 • まず、念頭に置くこと • 受注時のヒアリング • ワイヤーフレームから読み取る • デザイナー・コーダーへの発注 • ハマりやすい落とし穴 • まとめ 発注側のディレクターさんに知ってほしいこと
- 8. まず、念頭に置くこと
- 9. 何が入るか わからない イレギュラーな入力例は 常に考えておく photo by Arto Alanenpää - CC BY-SA 4.0 https://creativecommons.org/licenses/by-sa/4.0/
- 15. 受注時のヒアリング
- 16. 最初の問い合わせ時 • 最も重要な情報はサイトマップ • サイトマップもまだであれば 参考にしたいサイトのURLを確認 • リニューアルであれば現行サイトのURLも • サイトを見てコンテンツの種類と ボリューム感を推理する
- 18. ボリューム感とは 想定される細かい作業の量・やり取りの手数 • 作業量が少ないコンテンツ • ギャラリー／資料アップロード • 作業量が多いコンテンツ • ブログ／商品情報／イベント情報 • インポート作業を含むコンテンツ • 現行サイト／ECサイトからの移行
- 19. 提供してほしい情報優先度 1. サイトマップ 2. 予算感 3. 必須要件 4. 採用するCMS（採用する理由も） 5. 使用予定サーバー 6. 更新担当者の情報（人数・リテラシなど）
- 20. チェックシートを書くことも
- 21. ワイヤーフレームから 読み取る
- 31. 補足 ページ分割の指示漏れはけっこうあります CMSではどの演出を使うかで、工数が全く変わります ・前後リンク ・ページャー ・非同期もっと読む おまかせの場合は最も無難なページャーにしています
- 38. デザイナー・ コーダーへの発注
- 39. デザイナーとCMS
- 40. デザイナーとCMS (1) • 文字数が変わる可能性がある箇所を必ず伝える • デザインが固定となる箇所も伝える • サムネイルの縦横比（正方形／4：3／幅だけ固定） • SNSボタン • ブロック編集型CMSの特殊パーツ • プラグインで自動生成するフォーム
- 41. デザイナーとCMS (2) •ページネーションこわい • デザイン・コーディングが自由にできるCMSが少ない • 「○ページ中 ○～○ページ」が困難なCMSも • jQueryライブラリ前提の演出を入れてしまう デザイナーさんがけっこう多い • メニュー表示、ページ遷移などはワイヤーできちんと指示
- 42. コーダーとCMS
- 43. コーダーとCMS (1) • スケジュールがけっこうタイトになる • 最初に作ってもらうのはプライバシーポリシー • 見出し、段落などの基礎構造がはっきりしている • 基礎構造が出来次第、一旦送ってもらう • 急ぎ案件ではCSSフレームワークが共通語 • ただし、デザインが細かいと工数が増えることも
- 44. コーダーとCMS (2) • マークアップ変更が難しい箇所 • ブロック編集型CMSの特殊パーツ • プラグインで自動生成するパーツ etc… • 状況により対応を判断 • 出力されるHTMLを抜き出して渡す • functions.phpでHTMLを加工 • そこは省いて作ってもらい、CMS担当が巻き取る
- 47. カンプ・コーディングデータの確認
- 48. デザインカンプの確認 • 変更の可能性がある箇所に デザインフォントを使っていないか？ • Webフォントを使うなら問題なし • 文字数の増減を想定しているか？ • 工数が極端に増える演出を入れていないか？
- 49. コーディングデータの確認 • グリッドの一覧ページは特に注意 • 行ごとの回りこみ解除をどのようにしている？ • CMSでの再現・モバイル対応に無理はないか？ • コンテンツごとにCSSが 異なる場合 追加CSSはどうしてる？ • bodyのclass？ • カテゴリーごとにCSS切り替え？
- 51. ハマりやすい落とし穴
- 52. スケジュールの悩み • CMS構築が予定通り進まないことが増えた • 「○日までに着手できないと間に合わない」 デッドライン式でスケジュールを組む • デザイン未確定でもできる CMSの設置・設定・検証などを 先に作業させてもらう アジャイル？
- 53. 一般向けのCMSと予算 予算を減らしたいだけの理由で、ライセンス費用がかからない CMSを指定されることがあるが… 理由もなく、特別安くすむCMSはない。 必ずどこかに「工数」がかかる。 ラ 調査コスト デザイン・コーディングとの連携 保守コスト ラ 調査コスト デ・コ連携 保守コスト ライセンス 調査コスト デ・コ連携 保守コスト ライセンス 調査コスト デ・コ連携 保守コスト
- 54. 補足 「ページ・ブログで構成された、10ページ前後のサイトを 構築した場合に想定されるコストの内訳」 に対する、うぇびんの雑感です それぞれがどのCMSを指しているかはここでは伏せます ラ 調査コスト デザイン・コーディングとの連携 保守コスト ラ 調査コスト デ・コ連携 保守コスト ライセンス 調査コスト デ・コ連携 保守コスト ライセンス 調査コスト デ・コ連携 保守コスト
- 55. サーバーは早めに確認 • 予定していたCMSが設置できないのは致命的 • クラウドサーバーの場合 公開前は予算節減でスペックを落としていることも （管理画面おっそ！） • .htaccessやphp.iniなどの編集権限がないと 日数ロスが大きい
- 56. 誰が更新する？ • ページ更新を制作会社がする場合は HTML直打ちを前提とした方が喜ばれることも • 初心者にWordPressのUIは操作しにくい • 外部委託の更新担当者の端末が古くて CMSが動かない！ということも…
- 58. パーマリンクとリダイレクト • Movable Typeに慣れていると見落としがちなこと • パーマリンクを自由に操作できないCMSもある • つまり、旧サイトからのリダイレクトが難しい • 数百行のリダイレクトを書くことになることも… そもそも、リダイレクトが 必要なコンテンツなの？
- 59. まとめ
- 60. ほうれんそう • 各方面との連絡を常にしっかり取る • クライアント不在は厳禁 • CMS構築で社長のちゃぶ台返しはダメージが大きい • チャット・タスクがある管理ツールは必須 • Slackは過去ログのタスク化が難しい • チャットワークはスマホアプリの操作がいまいち • Backlog・サイボウズLiveは見落としが出やすい