Upgrade to Pro — share decks privately, control downloads, hide ads and more …

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

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/

Takehito Goto

April 28, 2022
Tweet

Other Decks in Programming

Transcript

  1. 株式会社日本デザインセンター/Webデザイナー 後藤健人 2022.4.21 #microcms_meetup microCMS Online Meetup Session #1 microCMS

    × imgixを活用して 画像の品質とレスポンスを両立した ポートフォリオサイトを作成した話 @takehitogoto
  2. コアウェブバイタルの3つの指標 #microcms_meetup ページ読み込み後の予期せぬレイアウト (画像やボタンなどの表示位置)のずれ。 視覚的な安定性を測る ページ内で一番大きなコンテンツ(テキス ト・画像・動画など)が表示されるまでの 時間 ページの を測る

    表示速度 ユーザーがページ内で最初のアクション (リンクのクリック、タップ、テキスト入力 など)をしてからブラウザがその操作に応答 するまでの時間。 ページの を測る 応答性 LCP Largest Contentful Paint FID First Input Delay CLS Clumlative Layout Shift
  3. Jamstackとは? #microcms_meetup Webサーバーに依存しない な構成である 事前にビルドされた からJavaScript経由で
 APIをコールする 静的ファイルを している サーバーレス

    静的なファイル CDNから配信 1. 2.
 3. https://blog.microcms.io/what-is-jamstack Jamstackとは何を指すのか今一度考えてみる
  4. 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 とは?
  5. 本サイトの構成 #microcms_meetup ヘッドレスCMS 画像CDN ブラウザ 動画CDN 編集者 Webhook コンテンツ 追加・更新

    ビルド 画像の表示 動画の表示 画像の アップロード HTML表示 アクセス デプロイ ホスティング/CDN SSG (静的サイトジェネレータ) microCMS Vercel imgix Vimeo Nuxt.js
  6. 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
  7. 参考記事 #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とは何を指すのか今一度考えてみる
  8. テキストエリア カスタムフィールド カスタムフィールド テキストエリア テキストフィールド 繰り返しフィールド
 └カスタムフィールド 繰り返しフィールド
 └カスタムフィールド 繰り返しフィールド


    └カスタムフィールド ステートメント メンバー
 採用ページURL アワード
 社名 住所 メールアドレス SNS 固定ページ|ABOUT #microcms_meetup フィールド名 スキーマ名 繰り返しフィールドを多用して実現
  9. テキストフィールド テキストフィールド セレクトフィールド テキストフィールド テキストエリア 真偽値 数字 繰り返しフィールド
 └カスタムフィールド コンテンツ参照

    繰り返しフィールド
 └カスタムフィールド 複数コンテンツ参照 タイトル メイン映像(Vimeo ID) メイン映像(比率) サムネイル動画 説明文 目次を表示する セクション 
 セクション(Photograph) クレジット 
 年数 タグ 記事ページ|MOVIE #microcms_meetup フィールド名 スキーマ名
  10. テキストエリア テキストエリア テキストエリア テキストエリア テキストエリア 画像 description(共通) description(Reel) description(About) description(Movie)

    description(Photograph) og meta (description / ogp) #microcms_meetup フィールド名 スキーマ名 カスタムフィールドを使用し、日英の入力が可能
  11. 繰り返しフィールド (入れ子) によるクレジットの実装 #microcms_meetup カスタムフィールド(氏名): credit_item カスタムフィールド(氏名): credit_item 繰り返しフィールド 繰り返しフィールド

    カスタムフィールド(クレジット): credit 「担当者」の繰り返しフィールドに「氏名」のカスタムフィールドを入れ子にしている
  12. 本実績で使用したもの #microcms_meetup 画像サイズ (w / h / fit) 解像度・画面サイズ (dpr)

    フォーマット (fm) 画像フォーマットの設定 ピクセル密度(Device Pixel Ratio)の設定 サイズ/クロップの設定 1.
 2. 3.
  13. サムネイルの最適化 (レスポンシブ) #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
  14. 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/背景色の設定あり 元画像がシンプルに上下中央を基準にトリミングされる。 トリミングせず、画像部分は元の比率を維持する。 生まれた余白部分には背景色を設定することができる。