ゼミやサークルでHPを作るとき、初心者が最低限気をつけたいポイント5選【2018年版】

学び

ゼミやサークル、趣味、事業などで、Webサイト・HP・ブログの制作をしなければならないこと、ありますよね。

そういうとき、適当な無料サービスで済ませてしまっていませんか?

もちろん、無料で作ることはちっとも悪くありません。

しかし、そういった無料HP作成サービスはサポートが少ない分、初心者が気をつけなくてはいけない点も多々あります

そこで、今回はサイト・HP制作をするとき、初心者が最低限気をつけたいポイントをご紹介します。

スポンサーリンク

HP制作の際に初心者が最低限気をつけたいポイント5選。

①スマホでもPCでもタブレットでもキレイに見れるか。

①スマホでもPCでもタブレットでもキレイに見れるか。

スマホユーザーが爆発的に増えた現在、この「レスポンシブデザイン (Responsive Design)」に対応していないとよろしくありません。

たとえば、スマホで見ているとたまに文字がメッチャ小さくて読みづらいサイトを見つけたりしますよね?

そういったサイトは「レスポンシブデザイン」に対応できていないわけです。

ユーザーの利用デバイスを示した円グラフ

上の円グラフは僕のサイトのユーザーごとの利用デバイスを示したものです。

青で塗られたスマートフォンユーザーの割合は80%ほど。15%はPC、のこりの5%はタブレット(iPadなど)でした。

HP制作サービスを利用する際は、まず真っ先に「レスポンシブ対応がされているか」をチェックしましょう(現在は多くのサービスでレスポンシブデザインに対応しています)。

レスポンシブ対応のHP制作サービス

など

②表示が遅くないか。

②表示が遅くないか。

サイトの表示に時間が掛かると、誰だってイライラしますよね。

特に速度制限にかかっているともはや表示できないこともあります。

そうならないためにも、ページの表示速度にはこだわりましょう。

速度はGoogleの提供しているPageSpeed Insightsで計ることができます。

ためしに当サイトも計測してみました。

PageSpeed Insights

見るべきはこの「最適化」のスコアです。

ここがMediumやLowになっている場合は要注意です。

では、どうすれば高速化できるでしょうか?

表示が遅くなる原因はいろいろあります。

  1. サイトを置いているサーバーの速度が遅い
  2. サイズの大きい画像を多用している
  3. アニメーションやスクリプトを多用している

1.の場合、無料サービスだと限界があります。

自分でサーバーを借りて(月額200~1,000円程度)、WordPressなどで作るなどするといいでしょう。

【初心者向け】有料ブログの作り方を3ステップで解説します!【最新版】 >>

2.の場合、TinyPNGなどの画像圧縮サービスで一度画像サイズを圧縮してからアップロードすると改善することがあります。

3.の場合、設定でいらない機能をオフにしてみてください(とくにWiXはアニメーション機能がふんだんなので重くなりがちです)。

ページの表示速度を速くすれば、GoogleやYahoo!の検索結果でも上位に表示されやすくなります。

必ず心がけましょう。

③URLは無駄に長くなっていないか。

③URLは無駄に長くなっていないか。

特に無料サービスを使用しているとURL(Webアドレス)が無駄に長くなってしまう場合があります。

SNSのプロフィールやチラシに記載する時に見た目が良くないことはもちろん、QRコードを生成する時もURLが長ければ長いほど読み取りづらく複雑になってしまいます

当サイトのQRコード

↑これは当サイトのQRコード。シンプルです。

Googleの検索結果URLのQRコード

↑これはGoogleの検索結果URLのQRコード。URLが長くなるとQRコードも複雑になります。

(短縮URLサービスを利用するという手もあります)

④訪れた人にとって不便じゃないか。

④訪れた人にとって不便じゃないか。

いわゆるUX(ユーザー・エクスペリエンス)デザインというものです。

平たく言うと、「ユーザーのかゆいところに手が届くか」。

訪れた人に「使いづらいなあ」と少しでも思われてしまったらそれは敗北です。

ちゃんと、見たいページにすぐリンクで飛べるようなデザインを心がけましょう。

⑤SNSシェアボタンはあるか。

⑤SNSシェアボタンはあるか。

SNSにワンタップでシェアできるボタンを設置することは不可欠です。

「この記事いいな~」とせっかく思えてもらえたのにシェアボタンがなければ拡散されるチャンスを逃すこととなります。

というわけで、SNSシェアボタンは必ず設置するようにしましょう。

(あ、ちなみにこの記事の末尾にもシェアボタンがあります。なにを、とは言いませんがよろしくおねがいします……!)

スポンサーリンク

いかがだったでしょうか?

では。

【初心者向け】有料ブログの作り方を3ステップで解説します!【最新版】
リスくんブログで広告収入を得たい! でもなにからすればいいやら……。そんなあなたにおくる、「有料ブログの作り方」徹底解説記事です。こんにちは、さいとう(@S41T0H)です。そもそも「有料ブログ」とはなんぞや?「有料ブログ」と「無料ブログ」