CodeRyoku's BLOG

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

公式サイトはこちら

2018-04-18

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

written by: ARAKAWA

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

世界中に様々なウェブサイトがある中、ユーザに見てもらえるウェブサイトをつくるのは簡単なことではありません。ユーザを離さないサイトをどのように作るのか考察します。

 はじめに

当たり前ですが、ユーザにとって有益なサイトをつくることが重要です。最近はUX(User Experience)という言葉がトレンドですが、ユーザ体験を高めることがサイトの価値を上げる結果に繋がります。では、ユーザにとって有益なサイトとはどういったものでしょうか。様々な要素がありますが、私は特に以下を意識することが重要であると考えています。
・メリハリがあるサイト
・ほどよい情報量のサイト
・空間にゆとりのあるサイト
・ユーザの動線を意識したサイト
・読み込み速度が速いサイト
前編では「メリハリがあるサイト」と「ほどよい情報量のサイト」について、もう少し掘り下げてみたいと思います。

 メリハリがあるサイト

ウェブサイトにメリハリをつけるとはどういうことでしょうか。例えば、見出しとその内容の書き方について見てみましょう。まず、以下の例を見てください。

AIプログラミング技術を学ぶ
AIの専門家がAIプログラミングの基礎から応用まで、最新の事例を交えて丁寧に教えます

見出しと内容の文字サイズが同じです。どこが見出しで、どこからが内容かも一目で分かりませんね。
では、以下はどうでしょうか。

AIプログラミング技術を学ぶ

AIの専門家がAIプログラミングの基礎から応用まで、最新の事例を交えて丁寧に教えます

見出しと内容の関係性が一目で分かるようになりました。
さらに、以下のようにするとどうでしょうか。

AIプログラミング技術を学ぶ

AIの専門家がAIプログラミングの基礎から応用まで、最新の事例を交えて丁寧に教えます

見出しと内容の文字色を分けることで、見出しと内容の主従関係がより一層強調されました。

このように主従関係をはっきりさせることで、メリハリのあるウェブサイトとすることができます。見出しは大きく目立つように記述し、内容は見出しに紐づいていることが分かるように記述します。それぞれの要素の意味や使い方を正しく理解すれば無駄なく実装することができます。
メリハリをつける、という考え方は見出しと内容に限らず、メインのコンテンツとその他のコンテンツの関係などについても同様です。

 ほどよい情報量のサイト

次に、ほどよい情報量のサイトについて解説します。先ほどと同様に、具体的な事例を見たいと思います。まずは、以下の例をご覧ください。

AIプログラミング技術を学ぶ

AIの専門家がAIプログラミングの基礎から応用まで、最新の事例を交えて丁寧に教えます。まず、プログラミングの基礎を丁寧に学びます。変数と定数、関数、条件分岐、繰り返し、オブジェクト指向、継承、カプセル化など様々な要素を学ぶ必要があります。一通りのプログラミングの基礎を学び終えたら、いよいよAIプログミングです。まず、多少の数学的な知識が必須となります...

情報量は豊富ですが、すこし見づらくなってしまいました。
では、以下はどうでしょうか。

AIプログラミング技術を学ぶ

AIの専門家がAIプログラミングの基礎から応用まで、最新の事例を交えて丁寧に教えます。
> 詳しく見る

最も重要な情報のみを表示し、もっと詳細を見たい人向けに追加情報を用意しておく、といった構成です。「詳しく見る」を折りたたみにして、その場に内容を展開するのもよし、モーダルウィンドウを表示するもよし、詳細ページに展開するもよし。ポイントは、情報を詰め込みすぎないということです。

 終わりに

いかがでしたでしょうか。前編は「メリハリがあるサイト」と「ほどよい情報量のサイト」について解説してきました。一つ断りを入れさせていただきたいのですが、こうすれは必ずしもユーザビリティがあがる、ということではありません。ターゲットとしているユーザのことを考えてウェブサイトを設計・制作しましょう。では、後編は「空間にゆとりのあるサイト」「ユーザの動線を意識したサイト」「読み込み速度が速いサイト」について見ていきたいと思います。

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

ブログトップへ戻る

 PROFILE

Kohei ARAKAWA
- System Engineer

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


 KEYWORDS


 ARCHIVE