ページは構成する要素[a] とデザイン[b]、そして技術[c]でできている

およそ1年前にようやく意識することができるようになった情報を発信するということの意味とテクノロジーの関係。

Google AdSenseを中心としたGoogleが提供してくれる情報を読み解きながら進めてみると、そのテクノロジーの内容が

  • 素材 と
  • システム

の2つに分かれることが分かってきます。
言い換えれば、「何を目指して」「どのように表示するか」をはっきりとイメージすることが大切です。

たとえば1年前、投稿記事をより快適に読んでもらうために、表示にかかる時間を短くする技術

  • 画像圧縮を支援してくれる EWWW Image Optimizer
  • ページのキャッシングを支援してくれる WP Super Cache

を使えるようになりたいという意味合いの記事を書いたのですが、その時の

  • 画像の圧縮素材
  • ページのキャッシングシステム

ということです。

投稿ページを構成する要素は1年前と変わりませんから、頭の中のイメージも変わらないのですが、「何を目指して」「どのように表示するか」というそれぞれの要素の関係がはっきりしてきました。

WordPress_and_related_elements

ページを構成する基本要素は?

  • 画像のような素材
    効率的に表示できる形式で、容量を小さく して用意しておく
  • キャッシュレンダリング のような
    表示そのものをより効率的に処理する環境を整えておいて
  • 使いやすいページとして表示する
    • どれくらいのサイズの文字なら読みやすいか
    • 画面を回転させても表示がうまく連動するか
    • 検索やリンクの使い勝手は良いか
    • クリック要素の配置は適切か

 

要素 / デザイン / 技術 をつないで見せてくれるツール

この3つの要素の関係をよく理解すると、ツールの使い方もイメージしやすくなりますね。

PageSpeed InsightsのPCとモバイルそれぞれの見え方を教えてくれるページテストの機能や、
Google Search Consoleが提供してくれる[検索トラフィック|モバイルユーザビリティ]は、

スポンサードリンク
  • 表示速度を含めた見やすさと
  • クリック要素の位置関係

といった、記事を読んでくれる人のための、言ってみればページの使いやすさを確認させてくれる支援ツールです。

 

ようやく具体的にイメージできるようになってきたページをデザインするための要素や技術、そしてツール。

これからはもう少しスムーズに進めそうです。