Ce diaporama a bien été signalé.
Nous utilisons votre profil LinkedIn et vos données d’activité pour vous proposer des publicités personnalisées et pertinentes. Vous pouvez changer vos préférences de publicités à tout moment.

13

Partager

Télécharger pour lire hors ligne

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

Télécharger pour lire hors ligne

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

Livres associés

Gratuit avec un essai de 30 jours de Scribd

Tout voir

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/
  • HirOKoizumiLittleSpring

    Sep. 18, 2016
  • HiroshiMiyazaki3

    Sep. 18, 2016
  • iwasakihide

    Sep. 3, 2016
  • GouYamaguchi

    Aug. 31, 2016
  • KazukiImamura

    Aug. 31, 2016
  • katz515

    Aug. 30, 2016
  • seinosusumu

    Aug. 29, 2016
  • super92

    Aug. 29, 2016
  • aar1nana7

    Aug. 28, 2016
  • junichisasagawajdash2000

    Aug. 28, 2016
  • GoNishiduka

    Aug. 28, 2016
  • dj_kazu

    Aug. 28, 2016
  • 428design

    Aug. 28, 2016

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

Vues

Nombre de vues

4 320

Sur Slideshare

0

À partir des intégrations

0

Nombre d'intégrations

218

Actions

Téléchargements

10

Partages

0

Commentaires

0

Mentions J'aime

13

×