確認のコツ! 実機でのブラウザー確認

ウェブサイト制作の発注後、構成案が決まり、ワイヤーフレームが決まり、デザインが確定したら、いよいよデザインを「HTMLというファイル形式に変換する作業」に移ります。それが完了して初めて、実際にブラウザーで完成品に近い形を見ることができるようになります。リンクをクリックできるようになったり、スライドショーが実際に動作したりと、ウェブサイトの公開が近づいているのを実感できます。

この段階で重要になるのが、PC・タブレット・スマートフォンなどでの実機の確認作業です。

PC、スマートフォンそれぞれ実機で確認

制作会社からテストサイトのURLが届いたら、是非スマートフォンでの見え方も実機で確認しましょう。

PCサイトはメールなどで届いたテストサイトのURLをクリックすれば、そのままブラウザーが立ち上がり、すぐに見ることができます。一方、スマートフォンサイトは、

・スマートフォンに制作会社からのメールを転送して文面のURLをクリックする
・文面のURLをスマートフォンのブラウザーに貼り付けて見る
・Slack、ChatworkなどのPC、スマートフォン共通のアプリで共有して、スマートフォンで開く

など、ひと手間必要です。

ブラウザーの幅を縮めれば、スマホの見た目になりますよね……?

確かにそうですが、スマートフォンで見ることと、PCで見ることでは本当の見え方が異なります。
例えばPCでは、PCに入っているフォントで文字が表現されます。
一方、スマートフォンでは、スマートフォンに入っているフォントが適用されます。
つまり、利用されるフォントが違うので、デザインの印象が想像よりも変わってしまうという現象があります。

他にも気をつけたい点

例えばスマートフォンはタッチデバイス(触ってアクションのあるデバイス)ですので、テキストリンクやボタンの大きさが、指で触りやすい面積になっていることが大切です。
デザイナーはそれを考慮してデザインしていますが、実際にウェブサイトのご担当者も実機でタッチしやすいか、試してみることをお勧めします。

誰かにも見てもらうことも大事

協力者がいれば、その人にテストサイトを触ってもらうことも効果的です。他人の視点でサイトに触れてもらうことで、気づかなかった問題点に出くわすこともあります。それを改善すれば、ウェブサイトの完成度が増すことにつながります。

自信をもってサイトの公開へ

手持ちのデバイスで一通りテストサイトを体験して、適宜制作会社にフィードバックを行いましょう。それが済んで、納得できたら最後は自信をもって一般公開に臨みましょう。ウェブサイトは作って終わりではないとよく言われます。制作時に気づかなかった問題点は、公開後にウェブサイトを見た方々からフィードバックをもらったり、アクセス解析の結果を受けて、よりよいウェブサイトにしていきましょう。

ウェブサイトリニューアルやシステム導入などのご相談は
下記よりお気軽にお問い合せください。

お問い合わせ

ウェブサイト・アプリケーション制作や、受験生・社会人向け広報など
クリックネットが展開する教育機関・研究者向けサービスを紹介します

クリックネットの大学向けサービス
Posted by CN編集部
他の記事を読む
デザインファイルとは? – Web担当者が理解しておきたい基本用語
YouTubeを使わずに動画を掲載できますか? – よくある質問にお答えします
ヘッダー・フッターとは? – Web担当者が理解しておきたい基本用語
写真の選び方(利用時の注意点について)
デザインプレビューとは? – Web担当者が理解しておきたい基本用語