ホームページ制作に必要な作業10選
2021-7-5
mekoFaviconとタイトル
言わばホームページの顔と名前、これが無いと始まらないものです。
<!DOCTYPE html>
<html lang="ja">
<head>
<title>Signpost</title>
<link rel="icon" href="/favicon.png" />
</head>
</html>
Favicon
画像の準備
https://www.figma.com/
無料のデザインツールで作成する
アプリなら色々なサイズが必要
https://favicon-generator.mintsu-dev.com/
タイトル
レスポンシブ対応
PC,タブレット,スマートフォンなど見られる端末はさまざまなので、
ターゲット層を絞って作成するのがベスト。
でもターゲット層が分からないから全てに対応したい、それでもOK
便利なアプリ
複数の種類の端末を同時に出してくれる優れもの
Responsively
でも完璧かどうか本番環境で試すのを忘れずに
基準を決める
https://yesviz.com/viewport/ このサイトが便利そう
| 規格 | Viewport |
|---|---|
| iPhone12 Pro Max | 428 x 926 px |
| Macbook Pro | 1280 x 800 px |
| Macbook Pro Retina | 3840 x 2160 px |
大体この辺りに合わせておけば今のところは大丈夫そう
合わせる方法など
これからのやり方
サイトマップ
Google サイトマップの作成と送信
Sitemaps XML format
Wordpressなら
表示させたくないページがあれば
robot.txtで管理
Google による robots.txt の指定の解釈
Mozilla Robots.txt
PWA
Service Worker というブラウザ上ではなく、別に実行する仕組みを使ってプッシュ通知やバックグラウンド同期ができるように設定できる
アプリみたいに使えるブラウザの仕組み
Service Worker の紹介
サービスワーカー API
AMP（モバイル高速化）
AMPページが読み込まれるのと同じ速さでサイトを稼働させることができる
Webアプリ
RSS
チェッカー
HTML5が終了した後でもWHATWGで使われているよう
W3C Feed Validation Service
Twitterカード
Twitterにシェアする際にリンクを貼ると画像やタイトル、リンクなどカード形式で表示されるようになる仕組み
Googleアナリティクス
アクセスがどれくらいあったかどんな人が来たかなど分析できる仕組み
フォーム
お問い合わせフォームが無いとSNSなどで問い合わせが殺到するかもしれない
小規模で済むなら
Wordpressなら
最終チェック
https://whatwg.org/validator/
