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

株式会社日本デザインセンター／Webデザイナー

後藤健人
2022.4.21 #microcms_meetup
microCMS Online Meetup Session #1
microCMS × imgixを活用して

画像の品質とレスポンスを両立した

ポートフォリオサイトを作成した話
@takehitogoto

View Slide

自己紹介 #microcms_meetup
株式会社日本デザインセンターに所属する

アートディレクター／Webデザイナー。

Webデザインを中心に、

映像・モーショングラフィックスなど、

横断的にオンスクリーンメディアの

デザインを手がけています。
後藤健人
@takehitogoto

View Slide

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

本質を見極め、
可視化する。
ndc.co.jp

View Slide

View Slide

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

View Slide

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

View Slide

ご注意 #microcms_meetup
詳しくは、
microCMSさん公式の

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

View Slide

今日お話すること
#microcms_meetup

View Slide

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

View Slide

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

View Slide

レスポンスの判断の基準になるもの #microcms_meetup
Core Web Vitals
コアウェブバイタル
Googleが2021年6月より導入している、

Web上で優れたUX（ユーザー体験）を

計測するための指標。 https://blog.microcms.io/imgix-microcms-seminar/
【イベントレポート】

サイト速度改善の完全攻略法セミナー

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

Jamstackとは？ #microcms_meetup
Webサーバーに依存しないな構成である

事前にビルドされたからJavaScript経由で 
APIをコールする

静的ファイルをしている
サーバーレス
静的なファイル
CDNから配信
1.

2. 

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

View Slide

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

View Slide

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

View Slide

作ったもの
#microcms_meetup

View Slide

作ったもの #microcms_meetup

View Slide

作ったもの #microcms_meetup
日本デザインセンター

深尾映像研究室
日本デザインセンター内にある、

映像ディレクター／写真家の深尾大樹が主宰
する、映像・写真の企画制作を行う部署の
ポートフォリオサイト。
fukao.ndc.co.jp

View Slide

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

View Slide

なぜ microCMS を導入したのか？
#microcms_meetup

View Slide

画像CDN
（imgix）
が統合されている

運用をスムーズにしたかった

Jamstack開発ができる
1. 
2. 
3.
なぜ microCMS を導入したのか？ #microcms_meetup

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

imgixとは？ #microcms_meetup
imgix.com
imgixはURLパラメータによって画像を

リアルタイムで編集することができる画像向け
CDNです。

microCMSでは、画像編集処理にimgixのAPIを
ご利用いただけます。microCMSのご利用料金
にimgixのAPI利用料金が含まれていますので、
別途imgixの契約は不要でご利用可能です。

View Slide

imgixとは？ #microcms_meetup
imgix.com

CDNです。

ご利用いただけます。microCMSの
ので、
でご利用可能です。
ご利用料金
にimgixのAPI利用料金が含まれています
別途imgixの契約は不要

View Slide

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

View Slide

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

View Slide

画像CDN
（imgix）


1. 
2. 
3.

View Slide

microCMSの管理画面 #microcms_meetup

View Slide

編集者も開発者も

幸せになれる

管理画面
microCMSの管理画面の特長 #microcms_meetup
r UI、表示項目がとてもシンプg
r 動作がサクサクしていe
r APIが作りやすい

View Slide

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

View Slide

microCMSを採用してよかったこと #microcms_meetup
レクチャーがとても簡単で

運用負荷を下げることができた
30分のオンラインMTGでレクチャー完了

View Slide

画像CDN
（imgix）


1. 
2. 
3.

View Slide

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

View Slide

本サイトの構成 #microcms_meetup
ヘッドレスCMS
画像CDN ブラウザ動画CDN
編集者
Webhook
コンテンツ

追加・更新
ビルド
画像の表示動画の表示
画像の

アップロード
HTML表示
アクセス
デプロイ
ホスティング/CDN SSG (静的サイトジェネレータ)
microCMS Vercel
imgix Vimeo
Nuxt.js

View Slide

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

View Slide

Jamstack開発を採用してよかったこと #microcms_meetup
CDN SSG
セキュアレスポンス
＋で

での高いサイトを

実現することができた

View Slide

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

View Slide

実例紹介
#microcms_meetup

View Slide

API設計例
実例紹介 #microcms_meetup

View Slide

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

View Slide

APIのタイプ #microcms_meetup
固定ページ

実績ページ

タグ

meta (description / ogp)
1. 
2.

3.

4.

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

テキストエリア

カスタムフィールド

カスタムフィールド





ステートメント

メンバー 

採用ページURL

アワード 

社名

住所

メールアドレス

SNS

固定ページ｜ABOUT #microcms_meetup
繰り返しフィールドを多用して実現

View Slide

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

View Slide



セレクトフィールド



真偽値

数字


コンテンツ参照


複数コンテンツ参照
タイトル

メイン映像（Vimeo ID）

メイン映像（比率）

サムネイル動画

説明文

目次を表示する

セクション  

セクション（Photograph）

クレジット  

年数

タグ

記事ページ｜MOVIE #microcms_meetup

View Slide

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

View Slide



数字


タイトル

説明文

年数

写真 

タグ

記事ページ｜PHOTOGRAPH #microcms_meetup

View Slide

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

View Slide


真偽値

真偽値
タグ名

Photographで表示しない

Movieで表示しない
一覧ページ｜タグ #microcms_meetup
各ページでの表示は真偽値で選択可

View Slide






画像
description（共通）

description（Reel）

description（About）

description（Movie）

description（Photograph）

og

meta (description / ogp) #microcms_meetup
カスタムフィールドを使用し、日英の入力が可能

View Slide

スキーマの応用例

View Slide

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

View Slide

クレジットの出力例 #microcms_meetup

View Slide

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

View Slide

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

View Slide

（入れ子）

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

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

View Slide

タグの出力例 #microcms_meetup

View Slide

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

View Slide

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

View Slide

多言語化
日英バイリンガルになっています

View Slide

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

View Slide

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

View Slide

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

View Slide

imgixの使用例
#microcms_meetup

View Slide

imgixとは #microcms_meetup

CDNです。

ご利用いただけます。microCMSのご利用料金
にimgixのAPI利用料金が含まれていますので、
別途imgixの契約は不要でご利用可能です。
imgix.com

View Slide

imgixでできること #microcms_meetup
画像の編集

コアウェブバイタル
（Core Web Vital)対策
1. 
2.

View Slide

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

View Slide

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

View Slide

本実績で使用したもの #microcms_meetup
画像サイズ (w / h / fit)

解像度・画面サイズ (dpr)

フォーマット (fm) 画像フォーマットの設定
ピクセル密度（Device Pixel Ratio）の設定
サイズ／クロップの設定
1. 
2.

3.

View Slide

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

View Slide

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

View Slide

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

View Slide

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

生まれた余白部分には背景色を設定することができる。

View Slide

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

View Slide

こんなメリットも #microcms_meetup
コアウェブバイタルに最適化した画像を自動で配信
y 画像に関する評価項目を自動でクリ`
y 次世代画像フォーマット（形式）での配信も可能
WebP https://blog.microcms.io/imgix-microcms-seminar/


View Slide

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タグで対応する

View Slide

まとめ #microcms_meetup
microCMSで運用コストを削減できる

Jamstack開発で、
レスポンスが高く、
セキュアなサイトを実装できる

imgixを使うことで、
コアウェブバイタルの項目に関する 
画像の最適化と、
高速な配信が可能
1.

2.

3.
今回のような特殊な案件においても、microCMSは大活躍します！

View Slide

告知 #microcms_meetup
日本デザインセンターは、

コードの力でデザインに命を吹き込みたい

を募集しています。
フロントエンドエンジニア
Wanted!
Webデザイナー、Webディレクターも募集中です！

View Slide

株式会社日本デザインセンター／Webデザイナー

後藤健人
2022.4.21 #microcms_meetup
microCMS Online Meetup Session #1
Thanks!
@takehitogoto

View Slide

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

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

Takehito Goto

Other Decks in Programming

Featured

Transcript