みなさんこんにちは！
港区のホームページ制作会社HIHITIの代表、奥井です。

最近、サウナに行きたい欲求が高まっており社員やメンバー方を誘っているのですが、誰もきてくれません。
い、忙しいっていいことですね！笑

では、本題に入りたいと思います。
Webページを作成していて、デバイステストをみなさんやってますか？

レスポンシブに無料対応しているHIHITIはもちろん各デバイステストをしっかり行ってます。

PC画面で制作して、「このデザインカッコいーー！！」とテンションが上がってリリース！そんなこともあるかと思います。

そういう時に限ってレビュワーやお客様から「スマホで確認したら表示崩れてる」なんて突っ込まれること…よくありますよね笑

Webページを完成させるときにやらなきゃいけないことを紹介します。

誤字脱字の確認

はい。これは当然のことですね。

有名企業のホームページやドキュメント、ブログなどを読んでいて誤植を見つけることって滅多にないですよね？
ホームページは世の中に公開するものであり、企業の顔です。
そんな大事なものに誤植なんてアリエナイ！！！という感じですね。

うちの社員には、基本お客様から文言を連携していただいた際は「コピー&ペーストしましょう！」と口を酸っぱく伝えてます。
そうすることで、タイピングミスによる誤字・脱字を回避します。

中には、タイピングがめちゃめちゃ早い人もいますよね！
でもコピペが大事です。
人間誰しもミスはします。

タイピングの速さはカッコよさのためだけにあるものなので、客先常駐などした時に周りに見せつけてやりましょう！笑

俯瞰してデザインを確認

トップページなどを自分でデザインしながら作成することも時としてあります。
そんな時は、最後に一呼吸おいて一旦「全体のデザイン」を確認しましょう！

時として、気付いたら配色がバラバラだった…なんてこともあります。

私はデザインの方はめっきりなので、俯瞰してデザインを確認した後にもかかわらず、よくデザイナーの人からダサすぎと指摘を受けることもあります。笑

デザインが苦手な人は、一度ページ全体をAdobeXDなどでデザインしてから周りの人からアイディアを貰うのがいいかもしれませんね！

うちの相談役の橋本は「作成した次の日にページをチェックするまでリリースしない」という自分ルールを設けています。そういう風に期間を決めてから見直しするのもいいですね！

複数デバイスでの確認

本題はここです！

デバイスごとに表示崩れがないかどうかを確認する必要があります！
これが一番骨の折れる作業なんですよ……

PCで確認して、タブレットで確認して、スマホで確認して……あああああああ

時間が物凄い取られますよね…ちなみに港区のホームページ制作会社HIHITIはiPhone SEまでデバイステストします。

こんな面倒くさい作業を一発でできたら便利だと思いませんか！？

それを実現してくれるのがResponsively Appなんです

複数のスクリーンサイズで同時に確認できる無料ツールと謳われているアプリで、確認したいホームページのURLを叩くと複数デバイスの画面を一括で確認できます。

ダウンロードはコチラからできますよ！

実際にこのアプリを使用している画面がコチラになります。

小さいスマホからタブレット、PC画面まで全て検証してくれますねこれ！！
相談役の橋本に教えてもらいましたが、めっちゃ便利！！笑

しかし便利なResponsively Appですが、気をつけなければいけない事が一点あります。

JavaScriptなどでCSSプロパティを変更している仕様のホームページやWebアプリケーションはちゃんと実機テストした方がいいです！

以上、ホームページを完成させるにやらなければいけない事でした！

エンジニアって結構作るだけがお仕事ではなく、テストや確認も物凄い大事だということを再認識していただけたら！と思います。

それでは、サウナにいってまいります！