microCMS × imgixを活用して品質とレスポンスを両立したポートフォリオサイトを作成した話

2022年4月21日に行われた microCMS Online Meetup の発表資料です。
https://microcms.connpass.com/event/240629/

※一部スライドに不備があったため、手直ししています

-
イベントアーカイブ（YouTube）

https://www.youtube.com/watch?v=2BBsCR1Mop8&t=157s

-
取材記事

【株式会社日本デザインセンター様】microCMSとimgixを活用して画像の品質とレスポンスを両立したポートフォリオサイトを実現
https://blog.microcms.io/usecase-ndc/

-
参考記事

Jamstackとは何を指すのか今一度考えてみる
https://blog.microcms.io/what-is-jamstack

コンテンツ・デリバリー・ネットワーク — CDN とは？
https://www.akamai.com/ja/our-thinking/cdn/what-is-a-cdn

ヘッドレスCMSって何？WordPressとの違いや特徴、DXで推進される要因を解説
https://blog.microcms.io/vs-wordpress/

なぜヘッドレスCMSを選ぶのか？ヘッドレスCMSが選定される7つの理由
https://blog.microcms.io/7reasons-to-choose-headlesscms/

microCMS + NuxtでJamstackブログを作ってみよう
https://blog.microcms.io/microcms-nuxt-jamstack-blog/

繰り返しフィールドが追加されました
https://blog.microcms.io/update-repeater-field/

カテゴリーやタグは作成できますか？
http://help.microcms.io/ja/knowledge/categories-and-tabs

Introduction - i18n-module
https://i18n.nuxtjs.org/

imgixで動的画像・OGPを作成する
https://blog.microcms.io/imgix-ogp/

imgixによる画像サイズの出し分けをpictureタグで対応する
https://blog.microcms.io/imgix-picture/

microCMSの画像編集機能
https://blog.microcms.io/microcms-with-image-editing/

【イベントレポート】サイト速度改善の完全攻略法セミナー
https://blog.microcms.io/imgix-microcms-seminar/

Transcript

1. 株式会社日本デザインセンター／Webデザイナー 後藤健人 2022.4.21 #microcms_meetup microCMS Online Meetup Session #1 microCMS × imgixを活用して 画像の品質とレスポンスを両立した ポートフォリオサイトを作成した話 @takehitogoto
2. 自己紹介 #microcms_meetup 株式会社日本デザインセンターに所属する アートディレクター／Webデザイナー。 Webデザインを中心に、 映像・モーショングラフィックスなど、 横断的にオンスクリーンメディアの デザインを手がけています。 後藤健人 @takehitogoto
3. 日本デザインセンターについて #microcms_meetup 1959年創業のデザインプロダクション。本質を見 極め、可視化する「VISUALIZE」を掲げ、Webサ イトやアプリケーションの開発、グラフィック、 サイン計画、展覧会のプロデュースなど多領域で デザイン活動を展開しています。 本質を見極め、 可視化する。 ndc.co.jp
13. セッションのターゲット #microcms_meetup microCMS Online Meetup Session #1 — 1 / 6
14. セッションのターゲット #microcms_meetup H Webデザイナーの5 H Webディレクターの5 H（フロントエンドエンジニアの方） microCMSを使って、ポートフォリオサイトを作ろうと考えている 概念的な話や事例紹介が中心なので、コードは少なめです。
15. ご注意 #microcms_meetup 詳しくは、 microCMSさん公式の ドキュメント／チュートリアルをご覧ください 各トピックに関する参考記事をQRコードでご紹介します ご注意 #microcms_meetup
16. 今日お話すること #microcms_meetup microCMS Online Meetup Session #1 — 2 / 6
17. 今日お話すること #microcms_meetup 「画像の品質」 と 「レスポンス」 を両立した
 ポートフォリオサイトの事例紹介
18. 今回のレスポンスの定義 #microcms_meetup レスポンス＝ページの表示速度・応答性
19. レスポンスの判断の基準になるもの #microcms_meetup Core Web Vitals コアウェブバイタル Googleが2021年6月より導入している、 Web上で優れたUX（ユーザー体験）を 計測するための指標。 https://blog.microcms.io/imgix-microcms-seminar/ 【イベントレポート】 サイト速度改善の完全攻略法セミナー
20. コアウェブバイタルの３つの指標 #microcms_meetup ページ読み込み後の予期せぬレイアウト （画像やボタンなどの表示位置）のずれ。 視覚的な安定性を測る ページ内で一番大きなコンテンツ（テキス ト・画像・動画など）が表示されるまでの 時間 ページの表示速度を測る ユーザーがページ内で最初のアクション （リンクのクリック、タップ、テキスト入力 など）をしてからブラウザがその操作に応答 するまでの時間。 ページの応答性を測る LCP Largest Contentful Paint FID First Input Delay CLS Clumlative Layout Shift
21. コアウェブバイタルの３つの指標 #microcms_meetup ページ読み込み後の予期せぬレイアウト （画像やボタンなどの表示位置）のずれ。 視覚的な安定性を測る ページ内で一番大きなコンテンツ（テキス ト・画像・動画など）が表示されるまでの 時間 ページの を測る 表示速度 ユーザーがページ内で最初のアクション （リンクのクリック、タップ、テキスト入力 など）をしてからブラウザがその操作に応答 するまでの時間。 ページの を測る 応答性 LCP Largest Contentful Paint FID First Input Delay CLS Clumlative Layout Shift
22. レスポンスを良くするには、 #microcms_meetup 表示速度 応答性 と を向上させる
23. しかし… #microcms_meetup 高画質とレスポンスはトレードオフ 可能な限り改善できる方法を探りました
24. 今日のキーマン紹介 #microcms_meetup 0 なぜ導入したの2 0 API設計$ 0 スキーマの応用例 0 imgixとH 0 imgixのメリッF 0 imgixの使用例
25. レスポンス向上に効果的な方法 その１ #microcms_meetup Jamstack開発をする
26. Jamstackとは？ #microcms_meetup Webサーバーに依存しない な構成である 事前にビルドされた からJavaScript経由で
 APIをコールする 静的ファイルを している サーバーレス 静的なファイル CDNから配信 1. 2.
 3. https://blog.microcms.io/what-is-jamstack Jamstackとは何を指すのか今一度考えてみる
27. レスポンス向上に効果的な方法 その２ #microcms_meetup CDN (Content Delivery Network) を使う
28. CDN (Content Delivery Network) とは？ #microcms_meetup コンテンツ・デリバリー・ネットワーク（CDN）は、ユーザーに でコンテンツを配 信することにより、高速かつ信頼性の高いオンライン体験を実現します。 ... CDN サービスは、グラフィックや動画などのリッチ Web コンテンツをインターネットで配信すること で生じる ために創り出されました。 ... CDN を使用すれば、分散サービス妨害攻撃（DDoS）などの攻撃者や を Web サイトに提供することもできます。 なるべく近い場所 ネットワーク輻輳の問題（交通渋滞のようなもの）を解決する セキュリティ上の懸念に対する強 力な防御 https://www.akamai.com/ja/our-thinking/cdn/what-is-a-cdn コンテンツ・デリバリー・ネットワーク — CDN とは？
29. 作ったもの #microcms_meetup microCMS Online Meetup Session #1 — 3 / 6
30. 作ったもの #microcms_meetup
31. 作ったもの #microcms_meetup 日本デザインセンター 深尾映像研究室 日本デザインセンター内にある、 映像ディレクター／写真家の深尾大樹が主宰 する、映像・写真の企画制作を行う部署の ポートフォリオサイト。 fukao.ndc.co.jp
32. インタビュー記事があります #microcms_meetup https://blog.microcms.io/usecase-ndc/ 【株式会社日本デザインセンター様】 microCMSとimgixを活用して画像の品 質とレスポンスを両立したポートフォリオ サイトを実現 本セッションで取り上げる事例について microCMS様に取材いただきました。
 よろしければ併せてご覧くださいませ。
33. なぜ microCMS を導入したのか？ #microcms_meetup microCMS Online Meetup Session #1 — 4 / 6
34. 画像CDN （imgix） が統合されている 運用をスムーズにしたかった Jamstack開発ができる 1.
 2.
 3. なぜ microCMS を導入したのか？ #microcms_meetup
35. 画像CDN （imgix） が統合されている 運用をスムーズにしたかった Jamstack開発ができる 1.
 2.
 3. なぜ microCMS を導入したのか？ #microcms_meetup
36. 今回つくったもの #microcms_meetup 映像ディレクター／写真家のポートフォリオサイト
37. 立ちはだかる問題 #microcms_meetup 大量の を扱う ＆ である必要がある 画像・動画 高画質
38. 高画質だと起こること #microcms_meetup 高画質＝ページの表示が なりがち 重く 高画質な映像や写真を、ユーザーにストレスなく見せる必要がある
39. 実現にあたって #microcms_meetup アセットのホスティングについて考える必要があった CDNの事など、いろいろとリサーチしました
40. なんと #microcms_meetup microCMSには が統合されている！ imgix 画像CDNが統合されている国産CMSはmicroCMSだけ（！）
41. imgixとは？ #microcms_meetup imgix.com imgixはURLパラメータによって画像を リアルタイムで編集することができる画像向け CDNです。 microCMSでは、画像編集処理にimgixのAPIを ご利用いただけます。microCMSのご利用料金 にimgixのAPI利用料金が含まれていますので、 別途imgixの契約は不要でご利用可能です。
42. imgixとは？ #microcms_meetup imgix.com imgixはURLパラメータによって画像を リアルタイムで編集することができる画像向け CDNです。 microCMSでは、画像編集処理にimgixのAPIを ご利用いただけます。microCMSの ので、 でご利用可能です。 ご利用料金 にimgixのAPI利用料金が含まれています 別途imgixの契約は不要
43. HTMLとアセットのデリバリーを分ける #microcms_meetup 画像CDN ブラウザ 動画CDN 画像の表示 動画の表示 ホスティング/CDN Vercel imgix Vimeo HTML表示 アクセス
44. microCMSを採用してよかったこと #microcms_meetup 画像を専用のCDNから配信できるようになった 今までのレンタルサーバーでの運用では、HTMLも画像も同じサーバーに格納するしかなかった
45. 画像CDN （imgix） が統合されている 運用をスムーズにしたかった Jamstack開発ができる 1.
 2.
 3. なぜ microCMS を導入したのか？ #microcms_meetup
46. microCMSの管理画面 #microcms_meetup
47. 編集者も開発者も 幸せになれる 管理画面 microCMSの管理画面の特長 #microcms_meetup r UI、表示項目がとてもシンプg r 動作がサクサクしていe r APIが作りやすい
48. カスタムが簡単  スキーマの種類が豊&  カスタムフィールドの設計が簡  繰り返しフィールドが無制限で利用可 microCMSの管理画面の特長 #microcms_meetup
49. microCMSを採用してよかったこと #microcms_meetup レクチャーがとても簡単で 運用負荷を下げることができた 30分のオンラインMTGでレクチャー完了
50. 画像CDN （imgix） が統合されている 運用をスムーズにしたかった Jamstack開発ができる 1.
 2.
 3. なぜ microCMS を導入したのか？ #microcms_meetup
51. 個人的な理由になりますが #microcms_meetup Jamstack開発の実績を作りたかった 高レスポンスを実現する、モダンなワークフローで開発したWebサイト
52. 本サイトの構成 #microcms_meetup ヘッドレスCMS 画像CDN ブラウザ 動画CDN 編集者 Webhook コンテンツ 追加・更新 ビルド 画像の表示 動画の表示 画像の アップロード HTML表示 アクセス デプロイ ホスティング/CDN SSG (静的サイトジェネレータ) microCMS Vercel imgix Vimeo Nuxt.js
53. SSGからビルドされた静的ファイルのみをホ スティングする。PHPのようなサーバーサ イド言語と違い、事前生成されたHTMLを 返すだけなので、ページの表示レスポンス が優れている。セキュリティや。突発的なト ラフィックの増加にも強い。類似サービスに Netlify、GitHub Pages等がある。 コンテンツ管理のみに特化したCMS。 管理画面で任意のコンテンツを返すための APIを作成する。 従来のCMSと異なり、自身によるメンテナ ンスが不要で、プラグインの脆弱性に怯える 必要もない。 APIから返ってきたコンテンツを表示する ページテンプレート等を作るための Javascriptフレームワーク。 microCMSの更新のタイミングで走る Webhookを検知し、事前にページを全て静 的ページとしてビルドすることができる。 vue.jsベースのNuxt.jsのほかに、React.js ベースのNext.js、Gatsby.jsなどがある。 ヘッドレスCMS SSG（静的サイトジェネレータ） CDN／ホスティングプラットフォーム Jamstackのコア部分 #microcms_meetup
54. Jamstack開発を採用してよかったこと #microcms_meetup CDN SSG セキュア レスポンス ＋ で で の高いサイトを 実現することができた
55. 参考記事 #microcms_meetup https://blog.microcms.io/7reasons-to- choose-headlesscms/ https://blog.microcms.io/vs-wordpress/ なぜヘッドレスCMSを選ぶのか？ヘッドレス CMSが選定される7つの理由 ヘッドレスCMSって何？WordPressとの違 いや特徴、 DXで推進される要因を解説 https://blog.microcms.io/microcms-nuxt-jamstack- blog/ microCMS + Nuxtで Jamstackブログを作ってみよう https://blog.microcms.io/what-is-jamstack Jamstackとは何を指すのか今一度考えてみる
56. 実例紹介 #microcms_meetup microCMS Online Meetup Session #1 — 5 / 6
57. API設計例 実例紹介 #microcms_meetup
58. 本サイトの構成 #microcms_meetup TOP MOVIE {project} {project} PHOTOGRAPH REEL ABOUT オブジェクト形式API リスト形式API
59. APIのタイプ #microcms_meetup 固定ページ 実績ページ タグ meta (description / ogp) 1.
 2. 3. 4.
60. 固定ページ｜トップ #microcms_meetup 背景動画がアクセスの度に変わる
61. 繰り返しフィールド
 └カスタムフィールド 背景動画 固定ページ｜トップ #microcms_meetup フィールド名 スキーマ名 繰り返しフィールドで動画のURLを複数登録しておく
62. 固定ページ｜REEL #microcms_meetup リール動画を変更可能（映像ディレクターのリールは毎年変わる）
63. テキストフィールド リール動画（Vimeo） 固定ページ｜REEL #microcms_meetup フィールド名 スキーマ名 VimeoのビデオIDを入れるだけのフィールド
64. 固定ページ｜ABOUT #microcms_meetup アワードやメンバーの増減、求人リンクの表示有無などに耐えられる設計
65. テキストエリア カスタムフィールド カスタムフィールド テキストエリア テキストフィールド 繰り返しフィールド
 └カスタムフィールド 繰り返しフィールド
 └カスタムフィールド 繰り返しフィールド
 └カスタムフィールド ステートメント メンバー
 採用ページURL アワード
 社名 住所 メールアドレス SNS 固定ページ｜ABOUT #microcms_meetup フィールド名 スキーマ名 繰り返しフィールドを多用して実現
66. 記事ページ｜MOVIE #microcms_meetup 様々なボリュームのプロジェクトに耐えられ、同プロジェクトの写真ページとの紐付けも可能
67. テキストフィールド テキストフィールド セレクトフィールド テキストフィールド テキストエリア 真偽値 数字 繰り返しフィールド
 └カスタムフィールド コンテンツ参照 繰り返しフィールド
 └カスタムフィールド 複数コンテンツ参照 タイトル メイン映像（Vimeo ID） メイン映像（比率） サムネイル動画 説明文 目次を表示する セクション 
 セクション（Photograph） クレジット 
 年数 タグ 記事ページ｜MOVIE #microcms_meetup フィールド名 スキーマ名
68. 記事ページ｜PHOTOGRAPH #microcms_meetup 写真を見るだけではなく、ディスクリプションやタグなども完備。写真毎にユニークなURLを持つ
69. テキストフィールド テキストエリア 数字 繰り返しフィールド
 └カスタムフィールド 複数コンテンツ参照 タイトル 説明文 年数 写真
 タグ 記事ページ｜PHOTOGRAPH #microcms_meetup フィールド名 スキーマ名
70. 一覧ページ｜タグ #microcms_meetup MOVIEとPHOTOGRAPHページで共通のタグAPIを使用
71. テキストフィールド 真偽値 真偽値 タグ名 Photographで表示しない Movieで表示しない 一覧ページ｜タグ #microcms_meetup フィールド名 スキーマ名 各ページでの表示は真偽値で選択可
72. テキストエリア テキストエリア テキストエリア テキストエリア テキストエリア 画像 description（共通） description（Reel） description（About） description（Movie） description（Photograph） og meta (description / ogp) #microcms_meetup フィールド名 スキーマ名 カスタムフィールドを使用し、日英の入力が可能
73. スキーマの応用例 実例紹介 #microcms_meetup
74. 繰り返しフィールド （入れ子） 繰り返したいコンテンツの中に、更に繰り返しのコンテンツがある場合
75. クレジットの出力例 #microcms_meetup
76. 繰り返しフィールド （入れ子） によるクレジットの実装 #microcms_meetup 「担当者」の繰り返しフィールドに「氏名」のカスタムフィールドを入れ子にしている
77. 繰り返しフィールド （入れ子） によるクレジットの実装 #microcms_meetup カスタムフィールド（氏名）: credit_item カスタムフィールド（氏名）: credit_item 繰り返しフィールド 繰り返しフィールド カスタムフィールド（クレジット）: credit 「担当者」の繰り返しフィールドに「氏名」のカスタムフィールドを入れ子にしている
78. 繰り返しフィールド （入れ子） によるクレジットの実装 #microcms_meetup
79. Tips｜真偽値でハイライトを実現 #microcms_meetup
80. スキーマの応用例 その2 #microcms_meetup コンテンツ参照 API間でコンテンツを参照することができる機能
81. 別コンテンツの出力例 #microcms_meetup
82. コンテンツ参照に別ページのコンテンツの出力 #microcms_meetup 別ページ（Photograph）の投稿を参照し、MovieページにPhotographのコンテンツ（サムネイル）を表示
83. スキーマの応用例 その3 #microcms_meetup 複数コンテンツ参照 API間でコンテンツを 参照することができる機能 複数
84. タグの出力例 #microcms_meetup
85. 複数コンテンツ参照によるタグ付けの実装 #microcms_meetup タグ用のAPIを参照することにより、投稿の を行うことができる タグ付け
86. 参考記事 #microcms_meetup https://blog.microcms.io/update-repeater-field/ http://help.microcms.io/ja/knowledge/categories- and-tabs 繰り返しフィールドが追加されました カテゴリーやタグは作成できますか？
87. 多言語化 日英バイリンガルになっています 実例紹介 #microcms_meetup
88. 多言語を視野に入れた管理画面の設計例 #microcms_meetup カスタムフィールドを使うと、レイアウトを にできる 2カラム
89. カスタムフィールドのレイアウト設定画面 #microcms_meetup カスタムフィールドを使うと、レイアウトを にできる 2カラム
90. どう実現したか #microcms_meetup カスタムフィールドを日英ミラー状態にしておけば、nuxt-i18nにより実現可 https://i18n.nuxtjs.org/ Introduction - i18n-module
91. imgixの使用例 #microcms_meetup microCMS Online Meetup Session #1 — 6 / 6
92. imgixとは #microcms_meetup imgixはURLパラメータによって画像を リアルタイムで編集することができる画像向け CDNです。 microCMSでは、画像編集処理にimgixのAPIを ご利用いただけます。microCMSのご利用料金 にimgixのAPI利用料金が含まれていますので、 別途imgixの契約は不要でご利用可能です。 imgix.com
93. imgixでできること #microcms_meetup 画像の編集 コアウェブバイタル （Core Web Vital)対策 1.
 2.
94. 使い方 #microcms_meetup パラメータを画像のURLに付与するだけでOK とても簡単です
95. https://example.imgix.net/picture.jpg?h= &w= 1200 630 パラメータとは？ #microcms_meetup 1200 630 x pxのサイズの画像にリサイズするパラメータ例
96. 本実績で使用したもの #microcms_meetup 画像サイズ (w / h / fit) 解像度・画面サイズ (dpr) フォーマット (fm) 画像フォーマットの設定 ピクセル密度（Device Pixel Ratio）の設定 サイズ／クロップの設定 1.
 2. 3.
97. サムネイルの最適化 （レスポンシブ） #microcms_meetup Origin Image - format : jpg size : 6000x4000 ratio : 3:2 Smartphone - format : webp size : 350x350 dpr : 2x ratio : 1:1 ?w= &h= &dpr= &fm= 350 350 2 webp ?w= &h= &dpr= &fm= 1280 720 1 webp PC - format : webp size : 1280x720 dpr : 1x ratio : 16:9
98. 実例｜PHOTOGRAPH一覧ページ サムネイル #microcms_meetup
99. 実例｜PHOTOGRAPH個別ページ メイン画像 #microcms_meetup
100. OGPの最適化 #microcms_meetup format : jpg size : 1200x630 fit : fill bg-color : #E4BA7A format : jpg size : 1200x630 ?w= &h= &fit= &fill-color= 1200 630 fill E4BA7A ?w= &h= 1200 630 fitの設定なし fit／背景色の設定あり 元画像がシンプルに上下中央を基準にトリミングされる。 トリミングせず、画像部分は元の比率を維持する。 生まれた余白部分には背景色を設定することができる。
101. 実例｜動的OGP画像 #microcms_meetup SlackでのOGP画像の表示 TwitterでのOGP画像の表示 写真家の写真をクロップしたり、比率を変えることはNG（縦構図の写真も上記の方法でOK）
102. こんなメリットも #microcms_meetup コアウェブバイタルに最適化した画像を自動で配信 y 画像に関する評価項目を自動でクリ` y 次世代画像フォーマット（ 形式）での配信も可能 WebP https://blog.microcms.io/imgix-microcms-seminar/ 【イベントレポート】 サイト速度改善の完全攻略法セミナー
103. 参考記事 #microcms_meetup https://blog.microcms.io/imgix-ogp/ https://blog.microcms.io/imgix-microcms-seminar/ https://blog.microcms.io/microcms-with-image- editing/ https://blog.microcms.io/imgix-picture/ imgixで動的画像・OGPを作成する 【イベントレポート】 サイト速度改善の完全攻略法セミナー microCMSの画像編集機能 imgixによる画像サイズの出し分けを pictureタグで対応する
104. まとめ #microcms_meetup microCMSで運用コストを削減できる Jamstack開発で、 レスポンスが高く、 セキュアなサイトを実装できる imgixを使うことで、 コアウェブバイタルの項目に関する
 画像の最適化と、 高速な配信が可能 1. 2. 3. 今回のような特殊な案件においても、microCMSは大活躍します！
105. 告知 #microcms_meetup 日本デザインセンターは、 コードの力でデザインに命を吹き込みたい を募集しています。 フロントエンドエンジニア Wanted! Webデザイナー、Webディレクターも募集中です！
106. 株式会社日本デザインセンター／Webデザイナー 後藤健人 2022.4.21 #microcms_meetup microCMS Online Meetup Session #1 Thanks! @takehitogoto