Tweet
Tweet

Slide 1

Slide 1 text

株式会社日本デザインセンター／Webデザイナー 後藤健人 2022.4.21 #microcms_meetup microCMS Online Meetup Session #1 microCMS × imgixを活用して 画像の品質とレスポンスを両立した ポートフォリオサイトを作成した話 @takehitogoto

Slide 2

Slide 2 text

自己紹介 #microcms_meetup 株式会社日本デザインセンターに所属する アートディレクター／Webデザイナー。 Webデザインを中心に、 映像・モーショングラフィックスなど、 横断的にオンスクリーンメディアの デザインを手がけています。 後藤健人 @takehitogoto

Slide 3

Slide 3 text

日本デザインセンターについて #microcms_meetup 1959年創業のデザインプロダクション。本質を見 極め、可視化する「VISUALIZE」を掲げ、Webサ イトやアプリケーションの開発、グラフィック、 サイン計画、展覧会のプロデュースなど多領域で デザイン活動を展開しています。 本質を見極め、 可視化する。 ndc.co.jp

Slide 4

Slide 4 text

No content

Slide 5

Slide 5 text

No content

Slide 6

Slide 6 text

No content

Slide 7

Slide 7 text

No content

Slide 8

Slide 8 text

No content

Slide 9

Slide 9 text

No content

Slide 10

Slide 10 text

No content

Slide 11

Slide 11 text

No content

Slide 12

Slide 12 text

No content

Slide 13

Slide 13 text

セッションのターゲット #microcms_meetup microCMS Online Meetup Session #1 — 1 / 6

Slide 14

Slide 14 text

セッションのターゲット #microcms_meetup H Webデザイナーの5 H Webディレクターの5 H（フロントエンドエンジニアの方） microCMSを使って、ポートフォリオサイトを作ろうと考えている 概念的な話や事例紹介が中心なので、コードは少なめです。

Slide 15

Slide 15 text

ご注意 #microcms_meetup 詳しくは、 microCMSさん公式の ドキュメント／チュートリアルをご覧ください 各トピックに関する参考記事をQRコードでご紹介します ご注意 #microcms_meetup

Slide 16

Slide 16 text

今日お話すること #microcms_meetup microCMS Online Meetup Session #1 — 2 / 6

Slide 17

Slide 17 text

今日お話すること #microcms_meetup 「画像の品質」 と 「レスポンス」 を両立した
 ポートフォリオサイトの事例紹介

Slide 18

Slide 18 text

今回のレスポンスの定義 #microcms_meetup レスポンス＝ページの表示速度・応答性

Slide 19

Slide 19 text

レスポンスの判断の基準になるもの #microcms_meetup Core Web Vitals コアウェブバイタル Googleが2021年6月より導入している、 Web上で優れたUX（ユーザー体験）を 計測するための指標。 https://blog.microcms.io/imgix-microcms-seminar/ 【イベントレポート】 サイト速度改善の完全攻略法セミナー

Slide 20

Slide 20 text

コアウェブバイタルの３つの指標 #microcms_meetup ページ読み込み後の予期せぬレイアウト （画像やボタンなどの表示位置）のずれ。 視覚的な安定性を測る ページ内で一番大きなコンテンツ（テキス ト・画像・動画など）が表示されるまでの 時間 ページの表示速度を測る ユーザーがページ内で最初のアクション （リンクのクリック、タップ、テキスト入力 など）をしてからブラウザがその操作に応答 するまでの時間。 ページの応答性を測る LCP Largest Contentful Paint FID First Input Delay CLS Clumlative Layout Shift

Slide 21

Slide 21 text

コアウェブバイタルの３つの指標 #microcms_meetup ページ読み込み後の予期せぬレイアウト （画像やボタンなどの表示位置）のずれ。 視覚的な安定性を測る ページ内で一番大きなコンテンツ（テキス ト・画像・動画など）が表示されるまでの 時間 ページの を測る 表示速度 ユーザーがページ内で最初のアクション （リンクのクリック、タップ、テキスト入力 など）をしてからブラウザがその操作に応答 するまでの時間。 ページの を測る 応答性 LCP Largest Contentful Paint FID First Input Delay CLS Clumlative Layout Shift

Slide 22

Slide 22 text

レスポンスを良くするには、 #microcms_meetup 表示速度 応答性 と を向上させる

Slide 23

Slide 23 text

しかし… #microcms_meetup 高画質とレスポンスはトレードオフ 可能な限り改善できる方法を探りました

Slide 24

Slide 24 text

今日のキーマン紹介 #microcms_meetup 0 なぜ導入したの2 0 API設計$ 0 スキーマの応用例 0 imgixとH 0 imgixのメリッF 0 imgixの使用例

Slide 25

Slide 25 text

レスポンス向上に効果的な方法 その１ #microcms_meetup Jamstack開発をする

Slide 26

Slide 26 text

Jamstackとは？ #microcms_meetup Webサーバーに依存しない な構成である 事前にビルドされた からJavaScript経由で
 APIをコールする 静的ファイルを している サーバーレス 静的なファイル CDNから配信 1. 2.
 3. https://blog.microcms.io/what-is-jamstack Jamstackとは何を指すのか今一度考えてみる

Slide 27

Slide 27 text

レスポンス向上に効果的な方法 その２ #microcms_meetup CDN (Content Delivery Network) を使う

Slide 28

Slide 28 text

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 とは？

Slide 29

Slide 29 text

作ったもの #microcms_meetup microCMS Online Meetup Session #1 — 3 / 6

Slide 30

Slide 30 text

作ったもの #microcms_meetup

Slide 31

Slide 31 text

作ったもの #microcms_meetup 日本デザインセンター 深尾映像研究室 日本デザインセンター内にある、 映像ディレクター／写真家の深尾大樹が主宰 する、映像・写真の企画制作を行う部署の ポートフォリオサイト。 fukao.ndc.co.jp

Slide 32

Slide 32 text

インタビュー記事があります #microcms_meetup https://blog.microcms.io/usecase-ndc/ 【株式会社日本デザインセンター様】 microCMSとimgixを活用して画像の品 質とレスポンスを両立したポートフォリオ サイトを実現 本セッションで取り上げる事例について microCMS様に取材いただきました。
 よろしければ併せてご覧くださいませ。

Slide 33

Slide 33 text

なぜ microCMS を導入したのか？ #microcms_meetup microCMS Online Meetup Session #1 — 4 / 6

Slide 34

Slide 34 text

画像CDN （imgix） が統合されている 運用をスムーズにしたかった Jamstack開発ができる 1.
 2.
 3. なぜ microCMS を導入したのか？ #microcms_meetup

Slide 35

Slide 35 text

画像CDN （imgix） が統合されている 運用をスムーズにしたかった Jamstack開発ができる 1.
 2.
 3. なぜ microCMS を導入したのか？ #microcms_meetup

Slide 36

Slide 36 text

今回つくったもの #microcms_meetup 映像ディレクター／写真家のポートフォリオサイト

Slide 37

Slide 37 text

立ちはだかる問題 #microcms_meetup 大量の を扱う ＆ である必要がある 画像・動画 高画質

Slide 38

Slide 38 text

高画質だと起こること #microcms_meetup 高画質＝ページの表示が なりがち 重く 高画質な映像や写真を、ユーザーにストレスなく見せる必要がある

Slide 39

Slide 39 text

実現にあたって #microcms_meetup アセットのホスティングについて考える必要があった CDNの事など、いろいろとリサーチしました

Slide 40

Slide 40 text

なんと #microcms_meetup microCMSには が統合されている！ imgix 画像CDNが統合されている国産CMSはmicroCMSだけ（！）

Slide 41

Slide 41 text

imgixとは？ #microcms_meetup imgix.com imgixはURLパラメータによって画像を リアルタイムで編集することができる画像向け CDNです。 microCMSでは、画像編集処理にimgixのAPIを ご利用いただけます。microCMSのご利用料金 にimgixのAPI利用料金が含まれていますので、 別途imgixの契約は不要でご利用可能です。

Slide 42

Slide 42 text

imgixとは？ #microcms_meetup imgix.com imgixはURLパラメータによって画像を リアルタイムで編集することができる画像向け CDNです。 microCMSでは、画像編集処理にimgixのAPIを ご利用いただけます。microCMSの ので、 でご利用可能です。 ご利用料金 にimgixのAPI利用料金が含まれています 別途imgixの契約は不要

Slide 43

Slide 43 text

HTMLとアセットのデリバリーを分ける #microcms_meetup 画像CDN ブラウザ 動画CDN 画像の表示 動画の表示 ホスティング/CDN Vercel imgix Vimeo HTML表示 アクセス

Slide 44

Slide 44 text

microCMSを採用してよかったこと #microcms_meetup 画像を専用のCDNから配信できるようになった 今までのレンタルサーバーでの運用では、HTMLも画像も同じサーバーに格納するしかなかった

Slide 45

Slide 45 text

画像CDN （imgix） が統合されている 運用をスムーズにしたかった Jamstack開発ができる 1.
 2.
 3. なぜ microCMS を導入したのか？ #microcms_meetup

Slide 46

Slide 46 text

microCMSの管理画面 #microcms_meetup

Slide 47

Slide 47 text

編集者も開発者も 幸せになれる 管理画面 microCMSの管理画面の特長 #microcms_meetup r UI、表示項目がとてもシンプg r 動作がサクサクしていe r APIが作りやすい

Slide 48

Slide 48 text

カスタムが簡単 スキーマの種類が豊& カスタムフィールドの設計が簡 繰り返しフィールドが無制限で利用可 microCMSの管理画面の特長 #microcms_meetup

Slide 49

Slide 49 text

microCMSを採用してよかったこと #microcms_meetup レクチャーがとても簡単で 運用負荷を下げることができた 30分のオンラインMTGでレクチャー完了

Slide 50

Slide 50 text

画像CDN （imgix） が統合されている 運用をスムーズにしたかった Jamstack開発ができる 1.
 2.
 3. なぜ microCMS を導入したのか？ #microcms_meetup

Slide 51

Slide 51 text

個人的な理由になりますが #microcms_meetup Jamstack開発の実績を作りたかった 高レスポンスを実現する、モダンなワークフローで開発したWebサイト

Slide 52

Slide 52 text

本サイトの構成 #microcms_meetup ヘッドレスCMS 画像CDN ブラウザ 動画CDN 編集者 Webhook コンテンツ 追加・更新 ビルド 画像の表示 動画の表示 画像の アップロード HTML表示 アクセス デプロイ ホスティング/CDN SSG (静的サイトジェネレータ) microCMS Vercel imgix Vimeo Nuxt.js

Slide 53

Slide 53 text

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

Slide 54

Slide 54 text

Jamstack開発を採用してよかったこと #microcms_meetup CDN SSG セキュア レスポンス ＋ で で の高いサイトを 実現することができた

Slide 55

Slide 55 text

参考記事 #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とは何を指すのか今一度考えてみる

Slide 56

Slide 56 text

実例紹介 #microcms_meetup microCMS Online Meetup Session #1 — 5 / 6

Slide 57

Slide 57 text

API設計例 実例紹介 #microcms_meetup

Slide 58

Slide 58 text

本サイトの構成 #microcms_meetup TOP MOVIE {project} {project} PHOTOGRAPH REEL ABOUT オブジェクト形式API リスト形式API

Slide 59

Slide 59 text

APIのタイプ #microcms_meetup 固定ページ 実績ページ タグ meta (description / ogp) 1.
 2. 3. 4.

Slide 60

Slide 60 text

固定ページ｜トップ #microcms_meetup 背景動画がアクセスの度に変わる

Slide 61

Slide 61 text

繰り返しフィールド
 └カスタムフィールド 背景動画 固定ページ｜トップ #microcms_meetup フィールド名 スキーマ名 繰り返しフィールドで動画のURLを複数登録しておく

Slide 62

Slide 62 text

固定ページ｜REEL #microcms_meetup リール動画を変更可能（映像ディレクターのリールは毎年変わる）

Slide 63

Slide 63 text

テキストフィールド リール動画（Vimeo） 固定ページ｜REEL #microcms_meetup フィールド名 スキーマ名 VimeoのビデオIDを入れるだけのフィールド

Slide 64

Slide 64 text

固定ページ｜ABOUT #microcms_meetup アワードやメンバーの増減、求人リンクの表示有無などに耐えられる設計

Slide 65

Slide 65 text

テキストエリア カスタムフィールド カスタムフィールド テキストエリア テキストフィールド 繰り返しフィールド
 └カスタムフィールド 繰り返しフィールド
 └カスタムフィールド 繰り返しフィールド
 └カスタムフィールド ステートメント メンバー
 採用ページURL アワード
 社名 住所 メールアドレス SNS 固定ページ｜ABOUT #microcms_meetup フィールド名 スキーマ名 繰り返しフィールドを多用して実現

Slide 66

Slide 66 text

記事ページ｜MOVIE #microcms_meetup 様々なボリュームのプロジェクトに耐えられ、同プロジェクトの写真ページとの紐付けも可能

Slide 67

Slide 67 text

テキストフィールド テキストフィールド セレクトフィールド テキストフィールド テキストエリア 真偽値 数字 繰り返しフィールド
 └カスタムフィールド コンテンツ参照 繰り返しフィールド
 └カスタムフィールド 複数コンテンツ参照 タイトル メイン映像（Vimeo ID） メイン映像（比率） サムネイル動画 説明文 目次を表示する セクション 
 セクション（Photograph） クレジット 
 年数 タグ 記事ページ｜MOVIE #microcms_meetup フィールド名 スキーマ名

Slide 68

Slide 68 text

記事ページ｜PHOTOGRAPH #microcms_meetup 写真を見るだけではなく、ディスクリプションやタグなども完備。写真毎にユニークなURLを持つ

Slide 69

Slide 69 text

テキストフィールド テキストエリア 数字 繰り返しフィールド
 └カスタムフィールド 複数コンテンツ参照 タイトル 説明文 年数 写真
 タグ 記事ページ｜PHOTOGRAPH #microcms_meetup フィールド名 スキーマ名

Slide 70

Slide 70 text

一覧ページ｜タグ #microcms_meetup MOVIEとPHOTOGRAPHページで共通のタグAPIを使用

Slide 71

Slide 71 text

テキストフィールド 真偽値 真偽値 タグ名 Photographで表示しない Movieで表示しない 一覧ページ｜タグ #microcms_meetup フィールド名 スキーマ名 各ページでの表示は真偽値で選択可

Slide 72

Slide 72 text

テキストエリア テキストエリア テキストエリア テキストエリア テキストエリア 画像 description（共通） description（Reel） description（About） description（Movie） description（Photograph） og meta (description / ogp) #microcms_meetup フィールド名 スキーマ名 カスタムフィールドを使用し、日英の入力が可能

Slide 73

Slide 73 text

スキーマの応用例 実例紹介 #microcms_meetup

Slide 74

Slide 74 text

繰り返しフィールド （入れ子） 繰り返したいコンテンツの中に、更に繰り返しのコンテンツがある場合

Slide 75

Slide 75 text

クレジットの出力例 #microcms_meetup

Slide 76

Slide 76 text

繰り返しフィールド （入れ子） によるクレジットの実装 #microcms_meetup 「担当者」の繰り返しフィールドに「氏名」のカスタムフィールドを入れ子にしている

Slide 77

Slide 77 text

繰り返しフィールド （入れ子） によるクレジットの実装 #microcms_meetup カスタムフィールド（氏名）: credit_item カスタムフィールド（氏名）: credit_item 繰り返しフィールド 繰り返しフィールド カスタムフィールド（クレジット）: credit 「担当者」の繰り返しフィールドに「氏名」のカスタムフィールドを入れ子にしている

Slide 78

Slide 78 text

繰り返しフィールド （入れ子） によるクレジットの実装 #microcms_meetup

Slide 79

Slide 79 text

Tips｜真偽値でハイライトを実現 #microcms_meetup

Slide 80

Slide 80 text

スキーマの応用例 その2 #microcms_meetup コンテンツ参照 API間でコンテンツを参照することができる機能

Slide 81

Slide 81 text

別コンテンツの出力例 #microcms_meetup

Slide 82

Slide 82 text

コンテンツ参照に別ページのコンテンツの出力 #microcms_meetup 別ページ（Photograph）の投稿を参照し、MovieページにPhotographのコンテンツ（サムネイル）を表示

Slide 83

Slide 83 text

スキーマの応用例 その3 #microcms_meetup 複数コンテンツ参照 API間でコンテンツを 参照することができる機能 複数

Slide 84

Slide 84 text

タグの出力例 #microcms_meetup

Slide 85

Slide 85 text

複数コンテンツ参照によるタグ付けの実装 #microcms_meetup タグ用のAPIを参照することにより、投稿の を行うことができる タグ付け

Slide 86

Slide 86 text

参考記事 #microcms_meetup https://blog.microcms.io/update-repeater-field/ http://help.microcms.io/ja/knowledge/categories- and-tabs 繰り返しフィールドが追加されました カテゴリーやタグは作成できますか？

Slide 87

Slide 87 text

多言語化 日英バイリンガルになっています 実例紹介 #microcms_meetup

Slide 88

Slide 88 text

多言語を視野に入れた管理画面の設計例 #microcms_meetup カスタムフィールドを使うと、レイアウトを にできる 2カラム

Slide 89

Slide 89 text

カスタムフィールドのレイアウト設定画面 #microcms_meetup カスタムフィールドを使うと、レイアウトを にできる 2カラム

Slide 90

Slide 90 text

どう実現したか #microcms_meetup カスタムフィールドを日英ミラー状態にしておけば、nuxt-i18nにより実現可 https://i18n.nuxtjs.org/ Introduction - i18n-module

Slide 91

Slide 91 text

imgixの使用例 #microcms_meetup microCMS Online Meetup Session #1 — 6 / 6

Slide 92

Slide 92 text

imgixとは #microcms_meetup imgixはURLパラメータによって画像を リアルタイムで編集することができる画像向け CDNです。 microCMSでは、画像編集処理にimgixのAPIを ご利用いただけます。microCMSのご利用料金 にimgixのAPI利用料金が含まれていますので、 別途imgixの契約は不要でご利用可能です。 imgix.com

Slide 93

Slide 93 text

imgixでできること #microcms_meetup 画像の編集 コアウェブバイタル （Core Web Vital)対策 1.
 2.

Slide 94

Slide 94 text

使い方 #microcms_meetup パラメータを画像のURLに付与するだけでOK とても簡単です

Slide 95

Slide 95 text

https://example.imgix.net/picture.jpg?h= &w= 1200 630 パラメータとは？ #microcms_meetup 1200 630 x pxのサイズの画像にリサイズするパラメータ例

Slide 96

Slide 96 text

本実績で使用したもの #microcms_meetup 画像サイズ (w / h / fit) 解像度・画面サイズ (dpr) フォーマット (fm) 画像フォーマットの設定 ピクセル密度（Device Pixel Ratio）の設定 サイズ／クロップの設定 1.
 2. 3.

Slide 97

Slide 97 text

サムネイルの最適化 （レスポンシブ） #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

Slide 98

Slide 98 text

実例｜PHOTOGRAPH一覧ページ サムネイル #microcms_meetup

Slide 99

Slide 99 text

実例｜PHOTOGRAPH個別ページ メイン画像 #microcms_meetup

Slide 100

Slide 100 text

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／背景色の設定あり 元画像がシンプルに上下中央を基準にトリミングされる。 トリミングせず、画像部分は元の比率を維持する。 生まれた余白部分には背景色を設定することができる。

Slide 101

Slide 101 text

実例｜動的OGP画像 #microcms_meetup SlackでのOGP画像の表示 TwitterでのOGP画像の表示 写真家の写真をクロップしたり、比率を変えることはNG（縦構図の写真も上記の方法でOK）

Slide 102

Slide 102 text

こんなメリットも #microcms_meetup コアウェブバイタルに最適化した画像を自動で配信 y 画像に関する評価項目を自動でクリ` y 次世代画像フォーマット（ 形式）での配信も可能 WebP https://blog.microcms.io/imgix-microcms-seminar/ 【イベントレポート】 サイト速度改善の完全攻略法セミナー

Slide 103

Slide 103 text

参考記事 #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タグで対応する

Slide 104

Slide 104 text

まとめ #microcms_meetup microCMSで運用コストを削減できる Jamstack開発で、 レスポンスが高く、 セキュアなサイトを実装できる imgixを使うことで、 コアウェブバイタルの項目に関する
 画像の最適化と、 高速な配信が可能 1. 2. 3. 今回のような特殊な案件においても、microCMSは大活躍します！

Slide 105

Slide 105 text

告知 #microcms_meetup 日本デザインセンターは、 コードの力でデザインに命を吹き込みたい を募集しています。 フロントエンドエンジニア Wanted! Webデザイナー、Webディレクターも募集中です！

Slide 106

Slide 106 text

株式会社日本デザインセンター／Webデザイナー 後藤健人 2022.4.21 #microcms_meetup microCMS Online Meetup Session #1 Thanks! @takehitogoto