Web制作の学習は、作って終わりにしない。公開までに確かめること

Web制作が初めてで、ようやく画面にページが表示された。
うれしい瞬間です。ただ、その画面を見ただけでは、
使えるページになったかどうかはまだ分かりません。

文字が読めるか。ボタンを押したら想定した場所へ進むか。
スマホではどう見えるか。作る学習と一緒に、
確かめる学習も入れておきたいところです。

完成の基準を、自分で持ちます。

練習でも「見てもらう場面」を決める

例として、架空の読書会の紹介ページを作るとします。
目的は、初めて参加を検討する人が、会の内容と参加方法を把握することです。
開催実績を紹介するための実在サイトではなく、学習用の課題です。

このページなら、会の説明、日時、場所、参加方法が必要になります。
確認するときも、その四つが見つかるかを見ます。見た目が整ったかだけでなく、
目的に必要な情報へ進めるかを確かめるわけです。

最初に決めた目的が、確認の基準になります。

見た目・動作・内容を別々に見る

一度に全部を確認しようとすると、きれいな写真に目を奪われて、
リンク先の間違いを見落とすことがあります。
そこで、確認を三回に分けてみてください。

一回目は見た目です。
タイトルは読みやすいか、文章が途中で切れていないか、
画像が必要以上に引き伸ばされていないかを見ます。

二回目は動作。
メニューやボタンを実際に押し、想定した場所へ進むかを確かめます。

三回目は内容です。
開催日の表記、問い合わせ先、持ち物の説明などを、用意した原稿と
照らし合わせます。正しい場所へ移動できても、そこに書かれている
情報が古ければ、目的は果たせません。

自分が知っているから分かる、を外してみる

作った本人は、どこに何があるかを覚えています。
だから、初めて見る人の迷いを見つけにくい。練習では、いったん画面を閉じて
から「開催場所を探す」という一つの用事を決めて開き直してみましょう。

上から順に読むだけでなく、用事に沿って動かすと、説明の足りなさに気付きます。
例えば「こちら」というリンクだけでは、何のページが開くか分からないかもしれ
ません。「参加方法を確認する」なら、行き先を想像できます。

誰かに見てもらえる場合は、先に答えを教えずに「どこから参加方法を調べる？」と
聞いてみる方法もあります。迷った箇所は、本人の能力ではなく、ページ側で説明
できていない箇所として見直します。

公開前と公開後で、確認する場所が変わる

手元の画面で動いていても、公開したページで同じように表示されるかは、
公開後の画面を見ないと確認できません。公開する練習では、公開先のページを開き、
画像・リンク・文字を確かめる工程を入れます。

フォームを練習するなら、送信ボタンが押せるだけで終えないこと。
実際に受け取れるか、完了したことが利用者に伝わるかまで確認対象です。
実在の連絡先へ意図せず送信しないよう、練習用の設定と宛先を先に整理します。

公開ボタンを押した後にも、仕事があります。

練習用サイトなら、架空の内容であることを示し、個人情報や使う許可のない写真を
載せないことも確認します。作ったものを外に出す前に、何を公開してよいかを
判断する経験です。

確認した結果を三行残す

細かいチェック項目を最初から大量に作る必要はありません。
「見たところ」「気付いたこと」「直して確かめた結果」の三行から始められます。

例えば、「スマホで参加方法を確認」「ボタンが文章に埋もれていた」「見出しを付け、
もう一度探して見つけられた」。この記録なら、変更した理由まで残ります。後日
見直すときにも、何となく色を変えた状態になりません。

確認メモには、見た環境も残す

同じページでも、パソコンで確認したのか、手元のスマホで確認したのかによって、
分かった範囲が違います。「問題なし」とだけ書くより、「スマホで場所を探し、
地図へのリンクを開いた」と残すほうが正確です。

一台で確認できたから、すべての環境で大丈夫だと言い切る必要はありません。
練習では、どこまで見たかを区別することも学べます。別の環境で気になる点が出たら、
前に確認した条件と比べます。

修正した後は、前に動いていた場所も近くから確認しましょう。
ボタンを移動した結果、下にある持ち物の説明が読みにくくなっていないか。
直した箇所だけを見て終えず、周りとの関係も少し確かめます。

正直、完成したと思ったページを見直すのは面倒です。
でも、そこで一つの不具合を見つけて直す経験は、次の制作で先に気を付ける点を
増やしてくれます。

今ある練習ページを一つ開き、「初めて見る人が開催場所を見つける」などの用事を
決めて動かしてみてください。気付いた一箇所と、直した後の結果を三行で残す。
今日はそこまでで十分です。