パソコンからでもスマホからでも見やすいサイトを作る

基調となる色とデザインには統一感を持たせる

見やすいウェブサイトを制作するためにはどういったことに気を配ればいいのでしょうか。まず、ページの配色やデザインに統一性を持たせるようにしましょう。たとえば、トップページの配色は黒が基調になっているのに、その他のページは白という風に明度が異なる場合、閲覧者の目はチカチカしてしまいます。また、トップページのフォントの大きさとその他のページのフォントの大きさが異なると、閲覧者からするとまったく別のサイトに思えて戸惑ってしまうでしょう。

PC向けとスマホ向けのデザインは一緒にしない方がいい

ただ、デザインの統一性については例外もあります。それは、スマートフォン向けのデザインの場合です。もし、パソコン向けのデザインとスマホ向けのデザインをまったく一緒にした場合、スマホからだと見にくくなってしまう可能性があります。というのは、パソコンのモニターとスマホのモニターは画面の大きさがまったく異なるからです。パソコン向けのウェブデザインだと、メニュー部分とコンテンツ部分は縦二列、もしくは三列に並んでいることが多いですが、スマホ向けでも同じようにすると、メニュー部分もコンテンツ部分も面積がだいぶ狭くなってしまい、非常に見にくくなります。

HTMLは同じにしてCSSでデザインを分ける

スマホで閲覧した場合に見やすいデザインにするためには、メニューとコンテンツを縦一列に並べるようにしましょう。その際、パソコン向けのページとスマホ向けのページを同一のHTMLで表すようにして、CSSでデザインを分けるようにするとメンテナンスがやりやすくなります。ちなみに、このような形で作られるデザインはレスポンシブデザインと呼ばれます。

プログラミングは、プログラム全体の設計からコードの記述、テスト、デバッグ、リリースの全工程です。コーディングはそのうちコードの記述を表します。