カテゴリー: ホームページ制作

カテゴリー: ホームページ制作

2018.02.16

• 広告を置くpageは収益の前に読者が本文と操作へ進める状態を確認する

• 広告を置くpageでは、収益の前に読者が本文と操作へ進めることを確認します。Chromeの広告filterをきっかけに、広告枠、popup、外部script、本文の順を見直す方法を解説します。

2018.02.04

• PageSpeed InsightsのFCPとDCLは最初に読める表示とpageの準備完了を分けて見る

• PageSpeed InsightsのFCPとDCLは、どちらもpageの速さに関わりますが示す場面が違います。最初に本文を読める状態とpageの準備完了を分け、読者の導線から改善を決める方法を解説します。

2018.02.01

• PageSpeed Insightsは実測の速さと改善余地のscoreを分けて読む

• PageSpeed Insightsのspeed scoreとoptimization scoreは同じ数字ではありません。実際の利用者の速度、改善余地、表示を保つ条件を分け、対象pageから改善を決める方法を解説します。

2018.01.19

• モバイルpageの表示速度は順位だけで決めず読者が待つ画面から直す

• モバイルpageの表示速度は、順位だけを狙って直すものではありません。読者が最初に開くpage、待たせる要素、問い合わせまでの導線を分け、PageSpeed Insightsなどで確認する方法を解説します。

2017.11.10

• WordPress 4.9のtheme選択は見た目を比べる前にmenuとwidgetが残る条件を確認する

• WordPress 4.9のCustomizerではthemeを探してpreviewできます。見た目だけで選ばず、menu、widget、画像、問い合わせ先が切替後も読めるかを確認する方法を解説します。

2017.11.04

• WordPress 4.9のGallery widgetは写真を増やす前に読者が比べる対象を決める

• WordPress 4.9のGallery widgetは、複数の画像をsidebarなどへまとめて出せます。写真の数を増やす前に、読者が比較する対象、画像の順序、link先、alt属性、画面幅を決める方法を解説します。

2017.10.22

• OpenType variable fontsは書体を増やす前に本文と見出しの使う太さを決める

• OpenType variable fontsは、一つのfont fileで太さや幅などの連続したvariationを扱える書体です。見出しの演出だけで決めず、本文、button、fallback、対象browser、font licenseを分けて確認する方法を解説します。

2017.10.16

• IntersectionObserverは遅延読み込みを足す前に読者が最初に見る内容を分ける

• IntersectionObserverは、要素がviewportや指定したrootへ入る状態を非同期で受け取るAPIです。遅延読み込みを始める前に、最初に見せる内容、対象要素、読めない環境での表示、確認する画面を分ける方法を解説します。

2017.10.07

• Chrome 62のHTTP入力画面は警告文より先にHTTPSで送る範囲を確認する

• Chrome 62では、HTTPページで入力するとNot secureの警告が表示される予定です。問い合わせフォームやサイト内検索をHTTPSへ移すときは、警告文の見た目だけでなく送信先、完了画面、HTTPからHTTPSへの移転を確認します。

2017.10.01

• HTTP 308は恒久移転でもrequest methodを変えたくないURLへ使う

• HTTP 308 Permanent Redirectは、target resourceが恒久的に新しいURIへ移ったことを示します。301との違いはrequest methodをPOSTからGETへ変えない点です。formやAPIの移転で確認すべき範囲を解説します。

2017.08.25

• Payment Request APIは決済画面を出す前に注文の正本と支払い完了の確認を分ける

• Payment Request APIはbrowserが決済画面を仲介する仕組みです。注文を正本として保存する処理と、支払い完了の確認を分け、失敗時の案内を先に決める方法を解説します。

2017.08.10

• CSSのwriting-modeは縦書きの飾りにせず読ませる範囲と横書きへ戻す条件を決める

• CSSのwriting-modeは縦書きを見せるためだけに使いません。読者に読ませる範囲を決め、英数字、link、mobile画面、横書きへ戻す条件を確認する方法を解説します。

2017.08.07

• 外部linkを別tabで開くときはnoopenerを付ける前に読者が残る理由を決める

• 外部linkを別tabで開くときは、読者を現在のpageに残す理由を先に決めます。target=_blankとnoopener、noreferrerを混同せず、link先と公開後の確認を分ける方法を解説します。

2017.08.04

• WordPress 4.8.1のCustom HTML widgetはcodeを貼る前に置く目的と更新する人を決める

• WordPress 4.8.1のCustom HTML widgetは、codeを貼る場所です。sidebarへ置く目的、更新する人、表示確認を先に決め、text widgetと混同しない使い方を解説します。

2017.07.25

• WordPressのsite iconは画像を作る前にtabで見分ける印と変更後の確認を決める

• WordPressのsite iconは、会社ロゴをそのまま縮小する前に小さなtabで見分けられる印を決めます。theme変更後の表示と元画像の管理を分けて確認する方法を解説します。

2017.07.22

• SNS share buttonは記事の末尾へ置く前に共有したいURLと外部scriptの管理を決める

• SNS share buttonは、数を増やす前に共有するURL、表示するtitleと画像、外部scriptの管理、計測の目的を決めます。記事と会社ページで置き方を分ける方法を解説します。