Double Factory(ダブルファクトリー )がコーディング後にチェックすること

こんにちは、大阪の堀江にあるWeb制作会社、Double Factory(ダブルファクトリー )のプランナー丸山です。 以前、「Double Factory(ダブルファクトリー )のアフターサービス」について、記事を書きましたが、今回はコーディング後にチェックしていることについて述べたいと思います。 Web制作を依頼して、デザインも決まって後はコーディングのみ!!となったものの、コーディングって何??いったい何をチェックすればいいの??よく分からない用語もありそうだし大変そう…と、思われるかもしれませんが安心して下さい! Double Factory(ダブルファクトリー )がコーディング後にチェックすることを公開します! 分かりにくそうな用語は簡単に説明と、なぜやるのかポイントも以下にまとめておりますので、ぜひご覧下さい。 コーディングとは? Google CromeやInternet Explorerなどブラウザで、デザインしたWebサイトをHTMLなどの言語を使って見えるようにすることです。 プログラミング言語を使って組み立てていき、間違いがあるとページがうまく表示されないこともあるので、コーディング後にWebサイトをチェックすることは必須です。 以下で、どんなことを、なぜ、どんな風にDouble Factory(ダブルファクトリー )がチェックしているのか述べていきます。     コーディング後にチェックすること   動作 -レスポンシブデザイン PC、タブレット、スマートフォンでの表示・動作はスムーズか、レイアウト崩れはないか。 ★レスポンシブデザインとは、PCやタブレット、スマートフォンなど違うデバイスから見ても、幅や表示方法を変えることで同じURLとHTMLで表示できる手法です。 この手法が出来るまで、PC・スマートフォンを分けてWebサイトを制作していたので、時間や費用もかかっていました。デバイスによって表示を切り替えをしてくれる分、各デバイスでユーザーが使いやすくみやすい表示をしているか確認することは必須になります。   -リンク リンクのあるボタンやテキストをクリックして確認。 どのようにリンクを開くかもチェック(target_blankなど) リンク切れがないか、ページ内リンクも確認 ★リンク切れはユーザーにとってはもちろん、SEOの観点からも良くないのでしっかりチェックします。   -メニューやアコーディオン メニューやアコーディオンの開閉チェック。 ★動かないとユーザーが欲しい情報のページにたどり着けないこともあります。   -hover時の動き hovar時の設定と挙動があるか確認。 hover:リンク要素などに、マウスを乗せた時に色が半透明になったりする表現のこと ★リンクがある部分を分かりやすくするために重要なアクションになります。   -JavaScriptの挙動 正しい動きをしているか確認。 ★プログラミングに近いこともあるので、内容によってはJavaScriptの部分のテスト指示書を作成しております。   -Webサイトの重さ 遅い場合、画像が適正な大きさに圧縮されているか確認。 ★Webサイトが重いとページを開くのに時間がかかり、離脱率が高くなります。   -スクロールエフェクト スクロールに応じて画面が切り替わったり、そのアクションが動いているか検証。 ★アクションが動かないとユーザーに伝えたいことが伝わらないことも。… Continue reading Double Factory(ダブルファクトリー )がコーディング後にチェックすること