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

by Rocket Martue

Slide 1

Slide 1 text

Honda / ほんだとしゆき〜　クライアントの目的を叶える、フリーランスチームの取り組み（後編）〜

Slide 2

Slide 2 text

使いやすく更新しやすい管理画面って何？

Slide 3

Slide 3 text

使いやすく更新しやすい管理画面って何？テーマのカスタマイズの話 PHPやCSSの実装の話今日お話しする内容

Slide 4

Slide 4 text

使いやすく更新しやすい管理画面って何？テーマのカスタマイズの話 PHPやCSSの実装の話 × 今日お話しする内容

Slide 5

Slide 5 text

使いやすく更新しやすい管理画面って何？使いやすく更新しやすい管理画面になるように、どんなことを考えて実装したのかを中心にお話します。テーマのカスタマイズの話 PHPやCSSの実装の話 × 今日お話しする内容

Slide 6

Slide 6 text

自己紹介ほんだとしゆき高松のうぇぶ屋さん. マークアップエンジニア。音大卒業後、外食産業の会社などに務めるなか会社のホームページを作ったのがきっかけで WordPress に出会う。のちにECサイトの運営にも携わる。 2016年～フリーランス。仕事は、主に制作会社からの受託で WordPress を使ったサイトの構築やテーマのカスタマイズなどをしています。・WordCamp Ogijima 2018 / 2020 実行委員・WordCamp 2021 Web制作班リーダー・Kagawa WordPress Meetup のオーガナイザー等、WordPress コミュニティの活動にも積極的に参加しています。趣味は、音楽と料理。たまに猫と遊びます。コーヒー・カレー・チョコ・はちみつが好き。 https://instagram.com/wcogijima/ の中の人。 @RocketMartue

Slide 7

Slide 7 text

これからお話すること

Slide 8

Slide 8 text

これからお話すること 1. サイト制作に入る前の準備

Slide 9

Slide 9 text

これからお話すること 1. サイト制作に入る前の準備 2. 管理画面を使いやすくする

Slide 10

Slide 10 text

これからお話すること 1. サイト制作に入る前の準備 2. 管理画面を使いやすくする 3. ブロックを使いやすくする

Slide 11

Slide 11 text

これからお話すること 1. サイト制作に入る前の準備 2. 管理画面を使いやすくする 3. ブロックを使いやすくする 4. 更新しやすくするための工夫

Slide 12

Slide 12 text

これからお話すること 1. サイト制作に入る前の準備 2. 管理画面を使いやすくする 3. ブロックを使いやすくする 4. 更新しやすくするための工夫（レスポンシブフォント、デザイン設計）時間があれば

Slide 13

Slide 13 text

これからお話すること 1. サイト制作に入る前の準備 2. 管理画面を使いやすくする 3. ブロックを使いやすくする 4. 更新しやすくするための工夫 5. まとめ（レスポンシブフォント、デザイン設計）

Slide 14

Slide 14 text

サイト制作に入る前の準備 Notionに必要な情報をまとめる

Slide 15

Slide 15 text

サイト制作に入る前の準備必要な情報が、必要な時に取り出せるように一か所にまとめておくまとめる作業が情報の整理になるアイディアのメモプロジェクトの規模感、工数の目安個人的なメモチーム内で共有タスク管理

Slide 16

Slide 16 text

1. サイト制作に入る前の準備 3. ブロックを使いやすくする 4. 更新しやすくするための工夫（レスポンシブフォント、デザイン設計） 5. まとめ 2. 管理画面を使いやすくする

Slide 17

Slide 17 text

管理画面を使いやすくする

Slide 18

Slide 18 text

管理画面を使いやすくする before after

Slide 19

Slide 19 text

管理画面を使いやすくするメニュー名の変更各投稿タイプに別々のアイコンを設定するメニューの並べ替え管理画面ウィジェット

Slide 20

Slide 20 text

メニュー名の変更各投稿タイプに別々のアイコンを設定するメニューの並べ替え管理画面ウィジェット

Slide 21

Slide 21 text

管理画面ウィジェット投稿タイプの数が多いので  各投稿タイプにアクセスしやすくなるように

Slide 22

Slide 22 text

管理画面ウィジェットこんな感じでコードを書きます

Slide 23

Slide 23 text

管理画面ウィジェットリスト表示したリンクにスタイルをあてるアイコンは、Dashicons を利用 CSS の読み込みは、’admin_enque_scripts’

Slide 24

Slide 24 text

メニュー名の変更各投稿タイプに別々のアイコンを設定するメニューの並べ替え管理画面ウィジェット

Slide 25

Slide 25 text

メニュー名の変更 before after

Slide 26

Slide 26 text

メニュー名の変更デフォルトの「投稿」からフロント側の表示に合わせたメニュー名に変更する例：「お知らせ」　　「スタッフブログ」誰が見ても投稿(編集)する場所がすぐに分かる

Slide 27

Slide 27 text

メニュー名の変更こんな感じでコードを書きますしずみさんのブログ記事 →

Slide 28

Slide 28 text

メニュー名の変更各投稿タイプに別々のアイコンを設定するメニューの並べ替え管理画面ウィジェット

Slide 29

Slide 29 text

各投稿タイプに別々のアイコンを設定する before after 投稿タイプが多い場合、別々のアイコンを設定することで、見分けやすくなるメニューを閉じた状態でも分かりやすい

Slide 30

Slide 30 text

各投稿タイプに別々のアイコンを設定する今回はコードで実装しているが、プラグインを利用した場合でも設定できる Dashicons が使われている WordPress の管理画面では、 register_post_type() の $args で 'menu_icon' を指定する

Slide 31

Slide 31 text

メニュー名の変更各投稿タイプに別々のアイコンを設定するメニューの並べ替え管理画面ウィジェット

Slide 32

Slide 32 text

メニューの並べ替え before after よく使うメニューは、上にある方が使いやすい

Slide 33

Slide 33 text

メニューの並べ替えこんな感じでコードを書きます

Slide 34

Slide 34 text

管理画面を使いやすくする before after

Slide 35

Slide 35 text

管理画面を使いやすくするメニュー名の変更各投稿タイプに別々のアイコンを設定するメニューの並べ替え管理画面ウィジェット

Slide 36

Slide 36 text

1. サイト制作に入る前の準備 2. 管理画面を使いやすくする 4. 更新しやすくするための工夫（レスポンシブフォント、デザイン設計） 5. まとめ 3. ブロックを使いやすくする

Slide 37

Slide 37 text

ブロックを使いやすくする WordPress 5.9 から、FSE (フルサイトエディティング) の  機能が追加されて、Coreのブロックの種類が大幅に増えた。通常のテーマ (クラシックテーマ) では、FSE用のブロックは  基本的には必要ない・使えない。有るとかえって邪魔。使わない(使えない)のなら、非表示にしておくのが親切。

Slide 38

Slide 38 text

ブロックを使いやすくする実装の仕方はいろいろある・プラグインを利用　→ ・ブラックリスト・ホワイトリスト今回はこれ Gutenberg Block Manager

Slide 39

Slide 39 text

ブロックを使いやすくする使わないブロックは非表示にして、できるだけブロックを探しやすくする

Slide 40

Slide 40 text

ブロックスタイルの登録

Slide 41

Slide 41 text

ブロックスタイルの登録ブロックスタイルを登録しておくと、ボタンをクリックするだけでスタイルが反映される高度な設定でclass指定しなくてよい

Slide 42

Slide 42 text

ブロックスタイルの登録 PHPコードでブロックスタイルを追加追加したスタイルにCSSをあてる参考ブログ →

Slide 43

Slide 43 text

1. サイト制作に入る前の準備 2. 管理画面を使いやすくする 3. ブロックを使いやすくする（レスポンシブフォント、デザイン設計） 5. まとめ 4. 更新しやすくするための工夫

Slide 44

Slide 44 text

トップページの実装

Slide 45

Slide 45 text

トップページの実装・画像ブロック・リストブロック利用しているブロック画像が簡単に差し替えられる他のブロックでも実装できるカスタムブロックを作ってもいいメンテナンスのことを考えると、できるだけ有るもので工夫して実装するのがベター管理画面(編集画面)から、コンテンツを入れ替えられる仕組みにしておく

Slide 46

Slide 46 text

管理画面(編集画面)からコンテンツを入れ替えられる仕組み実際に管理画面を見てみる

Slide 47

Slide 47 text

へなちょこの森へ行こうチャートをたどって本を見つけるコンテンツ

Slide 48

Slide 48 text

今回のプロジェクトの中で、わりと早い段階からこんなのが作りたいと要望の出ていたコンテンツ

Slide 49

Slide 49 text

よくあるプロジェクトの流れヒアリング → 要件定義 → 仕様の決定 → デザイン → 実装

Slide 50

Slide 50 text

今回のプロジェクト図書館さんからの要望仕様の決定デザイン全体MTG 実装チームMTG デザインデザインチームMTG チームMTG プロトタイプクライアントも実装者もお互い納得したより良い形で仕様を決定できる

Slide 51

Slide 51 text

へなちょこの森の例図書館さんからの要望プロトタイプ仕様の決定デザインデザイン全体MTG 実装チームMTG チームMTG チームMTG デザインこんな感じで作れます。どうでしょうか？こんなのが作りたいチャートのサンプルスプレッドシートクライアントも実装者もお互い納得したより良い形で仕様を決定できる

Slide 52

Slide 52 text

へなちょこの森へ行こう・チャートをブロックパターンに登録。・ブロックスタイルで、デザインを何パターンか選べるようにする。・ボタンの色もそれぞれ変更できるようにする。最初の計画問題点実際に管理画面を見てみる

Slide 53

Slide 53 text

へなちょこの森へ行こう仕様の決定入力はカスタムフィールドを使用

Slide 54

Slide 54 text

へなちょこの森へ行こうスプレッドシートとカスタムフィールドの項目を合わせる

Slide 55

Slide 55 text

へなちょこの森へ行こうデザインは3パターン仕様の決定

Slide 56

Slide 56 text

蔵書登録同じデータは一か所で管理もし入力ミスがあっても... 一か所修正すれば全部に反映される今回のケースでは本の情報

Slide 57

Slide 57 text

管理画面にスラッグを表示する簡単にコピペできる

Slide 58

Slide 58 text

1. サイト制作に入る前の準備 2. 管理画面を使いやすくする 3. ブロックを使いやすくする 4. 更新しやすくするための工夫（、デザイン設計） 5. まとめレスポンシブフォント

Slide 59

Slide 59 text

レスポンシブフォント IE のサポートが終了して対応ブラウザから外れたので CSS の clamp 関数を使用できるようになった・最大値と最小値の間で font-size が可変・メディアクエリーが要らない

Slide 60

Slide 60 text

1. サイト制作に入る前の準備 2. 管理画面を使いやすくする 3. ブロックを使いやすくする 4. 更新しやすくするための工夫（レスポンシブフォント、） 5. まとめデザイン設計

Slide 61

Slide 61 text

デザイン設計デザインコンポーネントの設計タイポグラフィー周りの設計背景色・テキストカラーの設計デザインファイル上で、これらの設計がきちんとされているとそのままCSSの変数(カスタムプロパティ)として使用できる ↓ CSS設計が楽になるレスポンシブフォントの設定は、FigmaのText Stylesを元に設定

Slide 62

Slide 62 text

デザイン設計

Slide 63

Slide 63 text

デザイン設計早い段階でサンプルページを作成して表示確認できるフィードバックをもらえる

Slide 64

Slide 64 text

デザイン設計 alt テキストの入ったデザインファイルは、初めて見ました

Slide 65

Slide 65 text

今回のデザインファイルの一部必要な情報がすべてデザインされていました ! この大きさだと分かりづらいけれど、 menu や pagenation は hover だけでなく current のデザインもちゃんとある

Slide 66

Slide 66 text

1. サイト制作に入る前の準備 2. 管理画面を使いやすくする 3. ブロックを使いやすくする 4. 更新しやすくするための工夫（レスポンシブフォント、デザイン設計） 5. まとめ

Slide 67

Slide 67 text

まとめサイト制作サイト完成

Slide 68

Slide 68 text

まとめ実際にサイトを運営されるのは図書館さんサイト制作サイト完成

Slide 69

Slide 69 text

まとめ制作者実際にサイトを運営されるのは図書館さんサイト制作サイト完成

Slide 70

Slide 70 text

まとめ制作者実際にサイトを運営されるのは図書館さんサイト制作サイト完成管理画面を使いやすくするように考える

Slide 71

Slide 71 text

まとめ自分でコンテンツの修正や更新ができる仕組みを考える管理画面を使いやすくするように考える制作者実際にサイトを運営されるのは図書館さんサイト制作サイト完成

Slide 72

Slide 72 text

まとめコンテンツ作りが楽になるように考える自分でコンテンツの修正や更新ができる仕組みを考える管理画面を使いやすくするように考える制作者実際にサイトを運営されるのは図書館さんサイト制作サイト完成

Slide 73

Slide 73 text

使いやすく更新しやすい管理画面って何？

Slide 74

Slide 74 text

使いやすく更新しやすい管理画面って何？何が正解？

Slide 75

Slide 75 text

使いやすく更新しやすい管理画面って何？正解は無い何が正解？

Slide 76

Slide 76 text

使いやすく更新しやすい管理画面って何？相手によって違う

Slide 77

Slide 77 text

使いやすく更新しやすい管理画面って何？相手によって違う WordPress → アップデート

Slide 78

Slide 78 text

使いやすく更新しやすい管理画面って何？相手によって違う WordPress → アップデート　使える機能が変わる・増える

Slide 79

Slide 79 text

Honda / ほんだとしゆき使いやすく更新しやすい管理画面って何？その時できるベストの方法を考えてより使いやすく更新しやすいサイトを目指す