高知こどもの図書館のウェブサイト制作から学ぶ “一緒に作り、育てる” ウェブサイト

5月5日に公開された「高知こどもの図書館」のウェブサイト。このサイトはクラウドファンディングで資金調達をし、アクセシビリティを意識したサイトをフリーランスのチームが制作しました。

後編の今回は、納品がゴールではない“一緒に作り、育てる” ウェブサイト制作についてお話します。
使いやすく更新しやすい管理画面になるようにどんなことを考えて実装したのかを中心にお話します。

今日の話を聴いたみなさんが、今後のサイト制作をする上で、依頼者にとって使いやすく更新しやすい管理画面とは何なのかを考えるきっかけになったり、何かしらのヒントを得てもらえていたらうれしいです。

Transcript

1. Honda / ほんだ としゆき 〜　クライアントの目的を叶える、フリーランスチームの取り組み（後編）〜
2. 使いやすく更新しやすい管理画面って何？
3. 使いやすく更新しやすい管理画面って何？ テーマのカスタマイズの話 PHPやCSSの実装の話 今日お話しする内容
4. 使いやすく更新しやすい管理画面って何？ テーマのカスタマイズの話 PHPやCSSの実装の話 × 今日お話しする内容
5. 使いやすく更新しやすい管理画面って何？ 使いやすく更新しやすい管理画面になるように、 どんなことを考えて実装したのかを中心にお話します。 テーマのカスタマイズの話 PHPやCSSの実装の話 × 今日お話しする内容
6. 自己紹介 ほんだとしゆき 高松のうぇぶ屋さん. マークアップエンジニア。 音大卒業後、外食産業の会社などに務めるなか会社のホームページを作った のがきっかけで WordPress に出会う。 のちにECサイトの運営にも携わる。 2016年～ フリーランス。 仕事は、主に制作会社からの受託で WordPress を使ったサイトの構築や テーマのカスタマイズなどをしています。 ・WordCamp Ogijima 2018 / 2020 実行委員 ・WordCamp 2021 Web制作班リーダー ・Kagawa WordPress Meetup のオーガナイザー 等、WordPress コミュニティの活動にも積極的に参加しています。 趣味は、音楽と料理。たまに猫と遊びます。 コーヒー・カレー・チョコ・はちみつが好き。 https://instagram.com/wcogijima/ の中の人。 @RocketMartue
7. これからお話すること
8. これからお話すること 1. サイト制作に入る前の準備
9. これからお話すること 1. サイト制作に入る前の準備 2. 管理画面を使いやすくする
10. これからお話すること 1. サイト制作に入る前の準備 2. 管理画面を使いやすくする 3. ブロックを使いやすくする
11. これからお話すること 1. サイト制作に入る前の準備 2. 管理画面を使いやすくする 3. ブロックを使いやすくする 4. 更新しやすくするための工夫
12. これからお話すること 1. サイト制作に入る前の準備 2. 管理画面を使いやすくする 3. ブロックを使いやすくする 4. 更新しやすくするための工夫 （レスポンシブフォント、デザイン設計） 時間があれば
13. これからお話すること 1. サイト制作に入る前の準備 2. 管理画面を使いやすくする 3. ブロックを使いやすくする 4. 更新しやすくするための工夫 5. まとめ （レスポンシブフォント、デザイン設計）
14. サイト制作に入る前の準備 Notionに必要な情報をまとめる
15. サイト制作に入る前の準備 必要な情報が、必要な時に取り出せるように一か所にまとめておく まとめる作業が情報の整理になる アイディアのメモ プロジェクトの規模感、工数の目安 個人的なメモ チーム内で共有 タスク管理
16. 1. サイト制作に入る前の準備 3. ブロックを使いやすくする 4. 更新しやすくするための工夫 （レスポンシブフォント、デザイン設計） 5. まとめ 2. 管理画面を使いやすくする
17. 管理画面を使いやすくする
18. 管理画面を使いやすくする before after
19. 管理画面を使いやすくする メニュー名の変更 各投稿タイプに別々のアイコンを設定する メニューの並べ替え 管理画面ウィジェット
20. メニュー名の変更 各投稿タイプに別々のアイコンを設定する メニューの並べ替え 管理画面ウィジェット
21. 管理画面ウィジェット 投稿タイプの数が多いので
 各投稿タイプに アクセスしやすくなるように
22. 管理画面ウィジェット こんな感じでコードを書きます
23. 管理画面ウィジェット リスト表示したリンクにスタイルをあてる アイコンは、Dashicons を利用 CSS の読み込みは、’admin_enque_scripts’
24. メニュー名の変更 各投稿タイプに別々のアイコンを設定する メニューの並べ替え 管理画面ウィジェット
25. メニュー名の変更 before after
26. メニュー名の変更 デフォルトの「投稿」から フロント側の表示に合わせたメニュー名に変更する 例：「お知らせ」 　　「スタッフブログ」 誰が見ても投稿(編集)する場所がすぐに分かる
27. メニュー名の変更 こんな感じでコードを書きます しずみさんのブログ記事 →
28. メニュー名の変更 各投稿タイプに別々のアイコンを設定する メニューの並べ替え 管理画面ウィジェット
29. 各投稿タイプに別々のアイコンを設定する before after 投稿タイプが多い場合、別々のアイコン を設定することで、見分けやすくなる メニューを閉じた状態でも分かりやすい
30. 各投稿タイプに別々のアイコンを設定する 今回はコードで実装しているが、プラグインを利用した場合でも設定できる Dashicons が使われている WordPress の管理画面では、 register_post_type() の $args で 'menu_icon' を指定する
31. メニュー名の変更 各投稿タイプに別々のアイコンを設定する メニューの並べ替え 管理画面ウィジェット
32. メニューの並べ替え before after よく使うメニューは、 上にある方が使いやすい
33. メニューの並べ替え こんな感じでコードを書きます
34. 管理画面を使いやすくする before after
35. 管理画面を使いやすくする メニュー名の変更 各投稿タイプに別々のアイコンを設定する メニューの並べ替え 管理画面ウィジェット
36. 1. サイト制作に入る前の準備 2. 管理画面を使いやすくする 4. 更新しやすくするための工夫 （レスポンシブフォント、デザイン設計） 5. まとめ 3. ブロックを使いやすくする
37. ブロックを使いやすくする WordPress 5.9 から、FSE (フルサイトエディティング) の
 機能が追加されて、Coreのブロックの種類が大幅に増えた。 通常のテーマ (クラシックテーマ) では、FSE用のブロックは
 基本的には必要ない・使えない。有るとかえって邪魔。 使わない(使えない)のなら、非表示にしておくのが親切。
38. ブロックを使いやすくする 実装の仕方はいろいろある ・プラグインを利用　→ ・ブラックリスト ・ホワイトリスト 今回はこれ Gutenberg Block Manager
39. ブロックを使いやすくする 使わないブロックは非表示にして、 できるだけブロックを探しやすくする
40. ブロックスタイルの登録
41. ブロックスタイルの登録 ブロックスタイルを登録しておくと、 ボタンをクリックするだけでスタイルが反映される 高度な設定でclass指定しなくてよい
42. ブロックスタイルの登録 PHPコードでブロックスタイルを追加 追加したスタイルにCSSをあてる 参考ブログ →
43. 1. サイト制作に入る前の準備 2. 管理画面を使いやすくする 3. ブロックを使いやすくする （レスポンシブフォント、デザイン設計） 5. まとめ 4. 更新しやすくするための工夫
44. トップページの実装
45. トップページの実装 ・画像ブロック ・リストブロック 利用しているブロック 画像が簡単に差し替えられる 他のブロックでも実装できる カスタムブロックを作ってもいい メンテナンスのことを考えると、 できるだけ有るもので工夫して実装するのがベター 管理画面(編集画面)から、コンテンツを 入れ替えられる仕組みにしておく
46. 管理画面(編集画面)から コンテンツを入れ替えられる仕組み 実際に管理画面を見てみる
47. へなちょこの森へ行こう チャートをたどって本を見つけるコンテンツ
48. 今回のプロジェクトの中で、わりと早い段階から こんなのが作りたいと要望の出ていたコンテンツ
49. よくあるプロジェクトの流れ ヒアリング → 要件定義 → 仕様の決定 → デザイン → 実装
50. 今回のプロジェクト 図書館さんからの要望 仕様の決定 デザイン 全体MTG 実装 チームMTG デザイン デザイン チームMTG チームMTG プロトタイプ クライアントも実装者もお互い納得した より良い形で仕様を決定できる
51. へなちょこの森の例 図書館さんからの要望 プロトタイプ 仕様の決定 デザイン デザイン 全体MTG 実装 チームMTG チームMTG チームMTG デザイン こんな感じで作れます。 どうでしょうか？ こんなのが 作りたい チャートのサンプル スプレッドシート クライアントも実装者もお互い納得した より良い形で仕様を決定できる
52. へなちょこの森へ行こう ・チャートをブロックパターンに登録。 ・ブロックスタイルで、デザインを何パターンか選べるようにする。 ・ボタンの色もそれぞれ変更できるようにする。 最初の計画 問題点 実際に管理画面を見てみる
53. へなちょこの森へ行こう 仕様の決定 入力はカスタムフィールドを使用
54. へなちょこの森へ行こう スプレッドシートと カスタムフィールドの項目を合わせる
55. へなちょこの森へ行こう デザインは3パターン 仕様の決定
56. 蔵書登録 同じデータは一か所で管理 もし入力ミスがあっても... 一か所修正すれば全部に反映される 今回のケースでは本の情報
57. 管理画面にスラッグを表示する 簡単にコピペできる
58. 1. サイト制作に入る前の準備 2. 管理画面を使いやすくする 3. ブロックを使いやすくする 4. 更新しやすくするための工夫 （ 、デザイン設計） 5. まとめ レスポンシブフォント
59. レスポンシブフォント IE のサポートが終了して対応ブラウザから外れたので CSS の clamp 関数を使用できるようになった ・最大値と最小値の間で font-size が可変 ・メディアクエリーが要らない
60. 1. サイト制作に入る前の準備 2. 管理画面を使いやすくする 3. ブロックを使いやすくする 4. 更新しやすくするための工夫 （レスポンシブフォント、 ） 5. まとめ デザイン設計
61. デザイン設計 デザインコンポーネントの設計 タイポグラフィー周りの設計 背景色・テキストカラーの設計 デザインファイル上で、これらの設計がきちんとされていると そのままCSSの変数(カスタムプロパティ)として使用できる ↓ CSS設計が楽になる レスポンシブフォントの設定は、FigmaのText Stylesを元に設定
62. デザイン設計
63. デザイン設計 早い段階で サンプルページを作成して 表示確認できる フィードバックをもらえる
64. デザイン設計 alt テキストの入ったデザインファイルは、初めて見ました
65. 今回のデザインファイルの一部 必要な情報がすべてデザインされていました ! この大きさだと分かりづらいけれど、 menu や pagenation は hover だけでなく current のデザインもちゃんとある
66. 1. サイト制作に入る前の準備 2. 管理画面を使いやすくする 3. ブロックを使いやすくする 4. 更新しやすくするための工夫 （レスポンシブフォント、デザイン設計） 5. まとめ
67. まとめ サイト制作 サイト完成
68. まとめ 実際にサイトを運営されるのは図書館さん サイト制作 サイト完成
69. まとめ 制作者 実際にサイトを運営されるのは図書館さん サイト制作 サイト完成
70. まとめ 制作者 実際にサイトを運営されるのは図書館さん サイト制作 サイト完成 管理画面を使いやすくするように考える
71. まとめ 自分でコンテンツの修正や更新ができる仕組みを考える 管理画面を使いやすくするように考える 制作者 実際にサイトを運営されるのは図書館さん サイト制作 サイト完成
72. まとめ コンテンツ作りが楽になるように考える 自分でコンテンツの修正や更新ができる仕組みを考える 管理画面を使いやすくするように考える 制作者 実際にサイトを運営されるのは図書館さん サイト制作 サイト完成
73. 使いやすく更新しやすい管理画面って何？
74. 使いやすく更新しやすい管理画面って何？ 何が正解？
75. 使いやすく更新しやすい管理画面って何？ 正解は無い 何が正解？
76. 使いやすく更新しやすい管理画面って何？ 相手によって違う
77. 使いやすく更新しやすい管理画面って何？ 相手によって違う WordPress → アップデート
78. 使いやすく更新しやすい管理画面って何？ 相手によって違う WordPress → アップデート 　使える機能が変わる・増える
79. Honda / ほんだとしゆき 使いやすく更新しやすい管理画面って何？ その時できるベストの方法を考えて より使いやすく 更新しやすいサイトを目指す