CodeRyoku's BLOG

プログラミング教育サービス「CodeRyoku」の公式ブログです。CodeRyokuの講師が、プログラミングの基本のTipsや講座の開講情報など、ゆるく綴っていきます。

公式サイトはこちら

2018-04-19

ユーザを離さないウェブサイト制作テクニック(後編)

written by: ARAKAWA

keywords: プログラミング, ウェブサイト

ユーザを離さないサイトをどのように作るのか、後編では「空間にゆとりのあるサイト」「ユーザの動線を意識したサイト」「読み込み速度が速いサイト」について掘り下げていきたいと思います。

 はじめに

ユーザ体験を高めることがサイトの価値を上げるための方法について、前編では、
・メリハリがあるサイト
・ほどよい情報量のサイト
について考えてみました。

関連記事
ユーザを離さないウェブサイト制作テクニック(前編)

後編では、
・空間にゆとりのあるサイト
・ユーザの動線を意識したサイト
・読み込み速度が速いサイト
の3点について見ていきたいと思います。

 空間にゆとりのあるサイト

空間にゆとりのあるサイトとはどういうことでしょうか。まず、以下の例を見てください。

Webプログラミングの専門家が、HTMLやCSS、JavaScriptの使い方まで丁寧に教えます。また、WebサービスにおけるAIの活用についても実例を紹介しながら解説していきます。

四角の枠の中に文字を記述していますが、文字と枠の間にゆとりがなく、行間も狭いため、大変見づらくなってしまっています。
では、以下はどうでしょうか。

Webプログラミングの専門家が、HTMLやCSS、JavaScriptの使い方まで丁寧に教えます。また、WebサービスにおけるAIの活用についても実例を紹介しながら解説していきます。

枠の内側に余白を設けることで余裕のあるレイアウトになりました。さらに、行間を広くとることで読みやすくなりました。

一見、余白は無駄のように思えるかもしれませんが、ある程度の余白にはサイトを見やすくする効果があります。スマホで見るとわかりやすいのですが、このブログでも、画面ぴったりのレイアウトではなく、左右に若干の余裕を持たせており、文字間隔も広めに設定しています。これは、画面レイアウト、ボタンのデザイン等、ウェブサイト全体に言えることだと思います。

 ユーザの動線を意識したサイト

次に、ユーザの動線を意識したサイトについて解説します。不動産関連では、家事動線を考えたキッチン..なんて言われたりしていますが、ウェブサイトにおいても、ユーザがスムーズに目的にたどり着くようにレイアウトすることが大切です。簡単な例でいくと、コンテンツの順番の設計が一番わかりやすいと思います。例えば、プログラミング教育のCodeRyokuのウェブサイトは、シングルページで以下のように構成しています。

  1. メイン画像(=サービスのキャッチコピー)
  2. コンセプト、特徴
  3. サービスメニュー
  4. 自己紹介
  5. お問い合わせ、予約

なぜこのような構成にしたのか。CodeRyokuは、広く知れ渡ったサービスではないので、まず、「CodeRyokuって何?おいしいの?」というユーザの疑問に対してアンサーを提供しなければなりません。何を提供できるのかをユーザに一通りインプットしていただいた上で、サービスの紹介、予約..といった流れとしています。2回目以降に訪問いただいた方については、サービス理念といった内容は既知であるため、手間なくサービスメニューにたどり着けるようにサイトの先頭にリンクボタンを設置しています。また、シングルページとすることで無駄な画面遷移をなくし、ページ内リンクを張り巡らすことを意識しています。
もし、誰もが知っているメジャーなサービスであれば、構成は全く異なると思っています。自分のサービスが客観的にどのような立場に置かれているかを認識し、ユーザのニーズをイメージしてサイトを構成することで、分かりやすいサイトにすることができるでしょう。また、サービスが置かれる立場は一定ではないため、サイトの構成も状況に応じて変化させていかなければならないと思っています。

 読み込み速度の速いサイト

最後に、読み込み速度の速いサイトについて解説します。私自身、ウェブサイトがなかなか開かないと「遅い。もう別のサイトでいいや」と思ってしまいます。みなさんもそういった経験があるのではないでしょうか。サイトの読み込み速度が遅くなってしまう原因は様々なことが考えられますが、いくつか例を挙げてみましょう。
・画像のファイルサイズが大きい。大量にアップロードしている。
・無条件に再生される動画を組み込んでいる。
・データベースへのアクセスが頻繁に行われる。
対策としては、例えば以下のようなことが挙げられます。
・アップロードする画像のサイズを小さくする。
・必要以上に画像をアップロードしない。
・遅延読み込みを実装する。(JavaScript)
・静的ウェブサイトとする。(HTML&CSS&JavaScript、DBアクセスなし)
また、ユーザのネットワーク環境が良好であることを前提としないことも重要です。

 終わりに

いかがでしたでしょうか。後編は「空間にゆとりのあるサイト」「ユーザの動線を意識したサイト」「読み込み速度が速いサイト」について解説してきました。前回の繰り返しになりますが、こうすれは必ずしもユーザビリティがあがる、ということではありません。ターゲットとしているユーザのことを考えてウェブサイトを設計・制作しましょう。最後までお付き合いいただき、ありがとうございました。

プログラミングを学びたいですか?
CodeRyokuではプロのITエンジニアによるプログラミング講座、ワークショップを東京、博多、仙台、オンラインで開講しています。オンラインセミナーは全国各地から受講可能です。詳しくは、こちらのページをご覧ください。また、子ども向けプログラミング教室を東京、博多、仙台、大分、オンラインで開講しています。詳しくは、こちらのページをご覧ください。

ブログトップへ戻る

 PROFILE

Kohei ARAKAWA
- System Engineer

宮城県出身のITエンジニア。国内大手IT企業にてシステム開発プロジェクトのプロジェクトマネジメント、複数のWebサイト構築実績。「HTML5レベル1」認定プロフェッショナル等。


 KEYWORDS


 ARCHIVE