2018年 2月 の投稿一覧

レスポンシブデザインに役立つCSSフレームワーク

マルチデバイスに対応するため時間のかかるレスポンシブwebデザインの制作ですが、開発コストを軽くするため「CSSフレームワーク」を導入するという選択があります。
レスポンシブ対応のweb制作を効率的に行うためのCSSフレームワークを紹介します。

Bootstrap

cssfw01

http://getbootstrap.com/
CSSフレームワークといえば「Bootstrap」といわれる代表的なフレームワークです。初心者でも導入しやすく利用ユーザも多いため、事例やカスタマイズ方法などを調べるのにも困りません。
機能も多く、簡単にレスポンシブ対応の見栄えのよいデザインができますが、デザインに強いこだわりがある場合には向いていません。

Pure

cssfw02

http://purecss.io/
米Yahoo!が開発したシンプルなインターフェイスのCSSフレームワークです。
非常に軽量ですが基本的な機能は十分そろっており、Bootstrapではオーバースペックという場合、Pureのような軽量タイプがよいでしょう。レスポンシブにも対応しています。

Foundation

cssfw03

http://foundation.zurb.com/
Bootstrapとならび多様な機能をそろえているフレームワークです。Bootstrapとの違いとしては、複雑なGridパターン(段組)が用意され、さまざまなレイアウト表現に柔軟性が高い点が魅力といえます。

Skeleton

cssfw04

http://getskeleton.com/
非常に軽量なフレームワークです。基本的な機能とグリッドレイアウトといった必要最低限の構成のため、Skeletonをベースに自分でコードを書いていくことになります。不必要なUIパーツや余剰機能がなく導入しやすいです。

Materialize

cssfw05

http://materializecss.com/
Googleが提唱する「マテリアルデザイン」を実現するCSSフレームワークです。さまざまなコンポーネントが用意されており、パララックスやボタンアクションのアニメーションも手軽に実装できます。

最後に

CSSフレームワークの代表といえる多機能な「Bootstrap」から軽量でシンプルなタイプまで、フレームワークの種類も年々さまざまなものが開発されています。
CSSフレームワークを選ぶ際は、多機能なものを求めるのか、またはシンプルで軽量なものを求めるのかなど、目的にあったタイプの選択を行うとよいでしょう。
また、目的に添っていても利用者が少なく情報が乏しいCSSフレームワークや、開発されたまま放置されているようなCSSフレームワークは思わぬトラブルにつながりかねません。
CSSフレームワークの選択で失敗しないためにも、最新のブラウザに対応するよう更新され、フレームワークに手を加える際にも情報が出回っているようなCSSフレームワークが望ましいといえます。

【UI改善】ファーストビューで抑えたいレスポンシブデザインのポイント

c9e42240

UIにおけるファーストビューの重要性

ファーストビューとは、ユーザがwebサイトに訪問した際、最初に表示されるページ領域のことです。
つまりユーザが訪問した際、必ず目にする領域になります。
このファーストビュー次第で離脱率やスクロールして表示される下部コンテンツの閲覧、滞在時間が大きく変わってくるため、ファーストビューをどのように設計するかは非常に重要なポイントとなります。
PC/スマートフォンそれぞれのファーストビューで抑えておきたいUIのポイントをご紹介します。

PCのファーストビューで抑える3つのUIポイント

【ポイント1】ユーザが欲する情報をファーストビューに収める

ファーストビューでユーザの求めている情報がないと判断した場合、ユーザはすぐにそのページを離れてしまいます。
「このサイトは求める情報がありそうだ」と判断してもらえるよう、ユーザの欲する情報がファーストビューに収まっていることが大切です。
ユーザが何を求めているのか、ユーザ視点に立って考えることが重要となります。

 【ポイント2】情報を詰め込みすぎず、興味をひく文言とビジュアルでひきつける

あれもこれもユーザに見て欲しいからといってファーストビューに多くの情報を詰め込みすぎると、ユーザが目的の情報にたどり着けずストレスを感じてしまいます。
ファーストビューでは、ユーザに「もっと見たい」と思わせる魅力的な「キャッチコピー」と「ビジュアル」で興味を引き、ページをスクロールしてもらうことが重要です。fv01

洋樽の有明産業株式会社のwebサイト
大きく配置したキャッチコピーとメインビジュアルでイメージを訴求し、ユーザの興味を惹いている

【ポイント3】ページがそこで終わっていると思わせない

最近はスクロールが前提のデザインも多くなってきましたが、ファーストビューで完結したような錯覚に陥るデザインのファーストビューは、情報がないと判断され離脱につながる可能性があります。
ページ下部にあるコンテンツもファーストビューの下部で見切れるように作ることでユーザの興味を引き、スクロールを促しましょう。

fv02

HORIEstyle(堀江スタイル)のwebサイト
地域の情報を発信するwebマガジン。記事にメリハリをつけ、トップ記事の下に新着記事が見切れるように作られてスクロールを促されるつくりになっている

スマホのファーストビューで抑える2つのUIポイント

レスポンシブwebデザインの場合、スマートフォンでも掲載する情報はPCと基本的に同じため、PCのファーストビューで抑えるポイントも基本的には同様になりますが、画面設計は一から考える必要があります。

【ポイント1】ナビゲーションはコンパクトに、コンテンツ領域を大きくする

小さな画面内に表示できる情報量を増やし、コンテンツが一番に見られることが重要になります。PCではすべて表示されていたナビゲーションも、スマホでは折りたたんでコンパクトにするなど、コンテンツ領域を大きくとる工夫をしましょう。

新卒採用2017 コーエーテクモ ホールディングス
PCサイトで一列に並んでいたグローバルナビゲーションは、スマホサイトではタップで開く形になり、メインコンテンツの領域が拡大されている

【ポイント2】無駄なものは省き、厳選された要素で構成する

PC同様、ファーストビューぴったりで終わるデザインは、ページ下部がないと判断されてしまいます。PCと比べてスマホではスクロールすることにそれほどストレスを感じないため、ファーストビューでは無駄なものを配置せず、ユーザを惹きつける要素を厳選して配置しスクロールを促すことが重要です。

株式会社ノハナ
大きく余白をとりゆったりとした雰囲気でキャッチコピーを見せることで、一番主張したい内容が目に飛び込んでくる。無駄をそぎ落としてシンプルに徹した構成が目をひく

UI改善に適したレスポンシブデザイン

レスポンシブwebデザインは、いろいろなデバイスに対応できる柔軟な表示が可能です。
ファーストビューの重要性を認識することで、それぞれのデバイスにあった最適なUIになるよう画面設計を行い、ユーザを惹きつける魅力的なwebサイト制作のヒントになれば幸いです。

参考にしたい!レスポンシブデザインのスマホメニューパターン7選

レスポンシブデザインでは、ブラウザの解像度によってナビゲーションメニューの表示も柔軟に変化させることが多く、デザイナーにとってはどのような表現がユーザに使いやすいか悩むポイントの一つです。
PCではデザイン領域が広いため、ナビゲーションに十分なスペースをとることができますが、スマホでは限られたスペースで見やすく使いやすいUIをデザインしなければいけません。
今回は、スマホのメニューデザインで悩んだ場合に参考にしたいナビゲーションパターンを事例とともにご紹介したいと思います。

ドロワーメニュー

ボタンを押すと右または左からスライドして現れるメニューです。
メニューの数が多い場合のほか、会員情報、閲覧履歴といった機能性を持たせた内容を入れるなど、リッチなメニュー表現の場合に向いています

menu_maxicosihttp://www.maxicosi.jp/

menu_meryhttp://mery.jp/

モーダルウィンドウ

メニューを開くとコンテンツに被さるかたちのオーバーレイ状で全画面表示されます。
メニューを選択するか閉じボタンを押す以外の選択肢がないため、ユーザを迷わせずに次の行動を促すことができます

menu_secondarygreehttp://secondary.gree.net/

アコーディオンメニュー

ボタンを押すとアコーディオンのようにメニューが上から展開されるドロップダウン形式のデザインです。非常にスタンダードな形で、一般的な横並びのメニュー項目を表現するのに適しています

menu_mybagelhttp://www.pasconet.co.jp/mybagel-special/

マルチトグル・多階層

メニューの内容が多階層にわかれ、ひとつの選択肢から複数の項目に派生するタイプになります。
複雑な階層構造のサイトで多く見られ、メニュー階層がひと目でわかるので目的の情報にたどり着くのがスムーズになります

menu_keihonavihttp://keihonavi.jp/

スプリングボード

それぞれのメニューがグリッドレイアウトで一覧表示されるデザインです。
各項目が同程度の内容の場合に適し、サイト全体の内容を把握しやすいため目的のコンテンツを探しやすい見せ方です。

menu_au
http://www.au.kddi.com/

フリップメソッド

メニューボタンを押すと、ページをめくるような動きでメニューが現れます。
ユニークな動きでエンターテインメント性を持たせ、サイトを魅力的に見せ楽しんでもらうUX(ユーザー体験)デザインといえます。

menu_susumetro
http://www.tokyometro.jp/susumetro/

配置換え

PCサイトのナビゲーションをそのままセンタリングや配置換えで表現するパターンです。
メニューデザインに違和感が出にくいため、普段PCサイトを利用しているユーザがスマホサイトに訪問して、デザインの違いでストレスを感じてしまうといったデメリットありません

menu_hokuohkurashi
http://hokuohkurashi.com/

menu_co-r
http://www.co-r.jp/

情報を整理し、ユーザに親切なデザインを

以上、レスポンシブで参考になるメニューデザインを7パターンご紹介しました。
メニューの数が多かったり、項目の内容に差があるなど、使いやすく見やすいメニューデザインを考えるのはデザイナーにとって頭を悩ませるポイントの一つです。
メニューの見せ方ひとつでサイトの使い勝手は大きく変わってくるため、コンテンツの情報を整理した上で、ユーザ視点に立って親切なメニューの見せ方を選択することが大切です。
ここで紹介したメニューパターンが、メニューデザインに悩んだ際の参考になれば幸いです。

レスポンシブデザインの作り方【基本の設定はたった2つ!】

レスポンシブデザインとは、パソコンやスマートフォン・タブレットなどの解像度の異なるデバイスに応じて、柔軟にデザインを切り替える手法のひとつです。
今回は、レスポンシブに対応するための設定を初心者にもわかりやすく解説したいと思います。

レスポンシブにするための2つの設定


レスポンシブに対応するための基本の設定は、「ビューポート(viewport)の設定」と「メディアクエリ(Media Queries)の設定」のたった2つです。
それではまず「ビューポート(viewport)の設定」から見て行きましょう。

1.ビューポート(viewport)の設定

ビューポート(viewport)とは、スマートフォン端末におけるwebページの表示領域の設定をするmeta要素です。
htmlの<head>内でviewportの設定を行うと、スマートフォンなどの端末で最適化された表示ができるようになります。
ビューポート(viewport)の設定を行わない場合、スマートフォンでページを表示してもPCと同じ画面が表示されてしまいます。

スマートフォンで適切な表示を行うため、以下の1行をhtmlのheader内に記述してビューポート(viewport)を設定しましょう。

<head>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
</head>


2.メディアクエリ(Media Queries)の設定

次に、端末の表示領域によってデザインを柔軟に切り替えるためにメディアクエリ(Media Queries)の設定を行います。
メディアクエリ(Media Queries)とは、CSS3の機能のひとつで、ブラウザの表示環境に応じてスタイルを切り替える機能です。

メディアクエリ(Media Queries)の設定方法は、
・ひとつのCSSファイル内で設定する方法
・htmlの<head>内のlink要素で設定する方法
の2つがあります。

ひとつのCSSファイル内で設定する場合
/*表示領域が767px以下*/
@media screen and (max-width: 767px) {
/*ここのスタイルを記述*/
}


表示領域が768px以上はメディアクエリ(Media Queries)が設定がないため、デフォルトの設定が適用されます。767px以下でメディアクエリが適用され、設定されたスタイルが表示されます。

htmlの<head>内のlink要素で設定する場合
<head>
<link rel=”stylesheet” type=”text/css” href=”common.css”>
<link rel=”stylesheet” type=”text/css” href=”767.css” media=”only screen and (max-width: 767px)”>
</head>


表示領域が768px以上の時はデフォルトとしてcommon.cssが適用され、767px以下の時はcommon.cssと767.cssの両方が適用されます。

対応デバイス(ブレイクポイント)の確認


ざっくりとした設定は、以上の2つで完了です!
レスポンシブデザインの作り方は、主要デバイスの設定によって変化します。
デザインの切り替えを行う表示領域の境目をブレイクポイントといいます。
ブレイクポイントをどこに設定するのかいつも悩みどころになりますが、最近の多くのレスポンシブwebデザインでは、768pxでデスクトップとスマートフォン&タブレット表示を切り替えているサイトが多いようです。
今回の例は、この768pxをブレイクポイントとして設定してみましたが、さらに大きいデスクトップにあわせて1200px以上で表示を切り替えるといった定義も追加するなど、対応デバイスに合わせて柔軟に設定しましょう!

最後に


「ビューポート(viewport)の設定」と「メディアクエリ(Media Queries)の設定」をするだけで、できてしまうレスポンシブ。
レスポンシブデザインの作り方は難しそうにみえて、意外と簡単だと感じたのではないでしょうか?
現在のwebサイト制作は、マルチデバイス対応が必須の流れになってきています。
レスポンシブを利用して、どのような環境で閲覧してもユーザにストレスなく利用してもらえるwebサイトが増えていくといいなと思います。

レスポンシブ対応のランディングページデザイン事例8選

レスポンシブ対応のwebサイトはいまや必須の流れになっていますが、ランディングページ(LP)ではデザインへのこだわりが高いページが多いため、通常のwebサイトよりも表現の自由度に制約があるレスポンシブの導入の割合は低くなっています。
とはいえ、ランディングページ(LP)にもレスポンシブの対応を求められるケースが増えていますので、今回は見栄えも使い勝手もよいレスポンシブ対応のランディングページ(LP)をご紹介したいと思います。

DojoCon Japan 2016

ss_dojocon
http://dojocon.coderdojo.jp/

プログラミングを学ぶ子供たちの集まるイベントサイトです。ハッキリとした色使いや斜めのモチーフを活かしたデザインを取り入れるなど、ポップでロジカルな印象を受けるデザインです。
子どもたちが集まる楽しいイベントの雰囲気がよく伝わってきます。

KICKPUSH

ss_kickpush
https://kickpush.co/

デジタル製品のデザイン設計のサイトです。コーポレートカラーの赤を基調に、スクロールで流れるように自社デザインのアプリや製品を紹介しています。
ところどころに製品に関連する小物もちりばめられ、見せ方にユーモアのある素敵なデザインです。

SOMA

ss_drinksoma 
https://www.drinksoma.com/

塩素や水銀を除去するSOMAフィルターのプロダクトサイトです。植物由来のフィルターで安全と環境に配慮された製品を印象付けるような清潔感のあるデザインです。
ボトルやピッチャーといったプロダクトのデザインもシンプルでスタイリッシュです。

朝と夜のお酢生活

ss_mn_vinegar 
http://tsuhan.otafuku.co.jp/lp/mn_vinegar/

朝と夜に飲むお酢の製品ページです。緑や木目調を利用したナチュラルで健康的なデザインになっています。ターゲットとなる女性に受け入れやすい、色や写真使いで商品のメリットを視覚的にも訴求しています。

ほぺたんポータルアプリ

ss_hopetan
http://hopetanportal.coopdeli.jp/

コープネットグループのアプリ紹介のページです。
メリットを箇条書き(ブレットポイント)で簡潔にまとめ、お客様の声も掲載するなど、アプリの魅力をイラストを交えて分かりやすく伝えています。アプリを利用する女性向けに、かわいらしさとわかりやすさが、よくまとまっているページです。

四国で介護・福祉業界へチャレンジしたい方のための転職サイト

ss_kaigokyujin
http://tenshoku.abi.co.jp/kaigokyujin/

介護・福祉への転職サイトのLPです。初めて転職を考えている人に向けて、大胆なグリッド使いや大きなビジュアル写真の利用で介護・福祉の職業をわかりやすく紹介し、求人までの流れが非常にスマートにまとめられています。

TUTU RESORT WEDDING FAIR

ss_resortwedding
http://www.resortwedding.net/lp/

リゾートウエディングのランディングページです。
リゾート感あふれるビジュアルをふんだんに利用し、リゾートウエディングの雰囲気を視覚的に訴求するデザインになっています。スマートフォンでは、常に下部に「お問い合わせ」「来店予約」のボタンを配置し、コンバージョンに対する施策も行っています。

ママのためのオフメガネ

ss_aiganmammy
http://www.aigan.co.jp/mammy/

忙しいママのためのメガネを提案するページです。ママの休日のリラックスした楽しい雰囲気を印象付けるナチュラルでやさしい色合いが特徴のデザインです。噴出しの形や商品紹介の円を楕円にするなど、細部にわたってしっかりとデザインされているのが分かります。

まとめ

今回はクオリティの高いレスポンシブ対応のランディングページを8つご紹介しました。
ランディングページは、コンバージョンを目標とした成果を上げる目的のページなため、製品・サービスのメリットやすばらしさを明確に訴求しなくてはいけません。
クリアしなければいけない制約が多い中、レスポンシブでもデザインの低下を感じさせないこだわりのあるランディングページを見ることで、レスポンシブ対応ランディングページ制作のヒントを掴めるように思います。
今後もレスポンシブ対応のランディングページデザインは増え続けていくでしょう。
皆様の制作の参考になりましたら幸いです。

レスポンシブwebデザインとは?特徴と注意点をまとめてみた

picjumbo.com_HNCK7801

タブレットやスマートフォンの普及によってマルチデバイスの重要性が高まり、webサイト制作にレスポンシブwebデザインの対応を求められることが多くなってきました。

とはいえ、「最近よく見るから」「とりあえずレスポンシブで」といった安易な理由での実装は、後々大きなトラブルを抱えることになりかねません。
そんな危険を回避するためにも、レスポンシブwebデザインの特徴を理解し、適切に実装するために必要な注意点をまとめました。

そもそもレスポンシブwebデザインとは?

レスポンシブwebデザインとは、「PC」「スマートフォン」「タブレット」といった各デバイスに応じて、柔軟にデザインを切り替える手法のひとつです。

それぞれの端末によって解像度やディスプレイサイズは多岐にわたり、同じページを表示しても見え方が異なってしまうという不都合が生じてしまい、制作サイドでは各デバイスへの対応が必須となっています。
そこで、以前はそれぞれのデバイスに対応するwebサイトを個別に制作していましたが、レスポンシブwebデザインという手法がでてきたことで、同じページを各デバイス毎に最適化して見た目を調整できるようになり、瞬く間にこの手法が浸透していったのです。

レスポンシブwebデザインの特徴

レスポンシブデザインの3つのメリット

【メリット1】 ワンソース化で更新管理運営が楽

ひとつのhtmlファイル(ワンソース)で各デバイスに対応できるため、今まで各デバイス向けにそれぞれページを用意していた場合と比べ更新管理作業が非常に楽になります。
1ファイルに手を入れるだけで済むため更新がスムーズになり、各デバイス向けにそれぞれ作成することで起こっていたミスも防ぐことができ、効率的に管理を行えるというのは非常に大きなメリットです。
更新が多いwebサイトで、モバイル/デスクトップ用とそれぞれ専用のwebサイトを用意していた場合と比べると、レスポンシブを実装することで運営にかかるコスト(費用・時間)が大きく削減されるのを実感できると思います。

【メリット2】 リダイレクトの必要がない共通URLでシェアやリンクが容易

次に、URLが1つになるというのもメリットとして上げられる大きな特徴になります。

各デバイスに向けて専用のサイトを設けていたり、ユーザエージェント毎にリダイレクトで別々のページへ振り分け表示させていた場合、同じ内容のURLが複数存在することになります。
このような状態でFacebookやTwitterといったSNSへのシェアを行うと、シェアをした人と見る人でデバイスが異なった場合、期待と異なる表示になり混乱や離脱を招く可能性があります。

その点レスポンシブwebデザインでは、同一のURLで各デバイスに向け表示を最適化するため、どの端末から閲覧しても見やすく、SNSへのシェアやリンクを容易に行うことができます

【メリット3】 モバイルフレンドリーなレスポンシブwebデザインはSEOでも有利

最後に、SEOの効果に直結するGoogleのモバイルガイドでも、レスポンシブデザインを推奨していることが上げられます。
(参考:モバイル設定を選択する

2015年2月には、Googleがモバイルフレンドリー・アルゴリズムを発表し、2015年4月21日から適用が実施されました。
そして2016年3月には、5月からさらにこのアルゴリズムの効果を高めるアップデートを段階的におこなっていく事を発表しています。
(参考:ウェブをさらにモバイル フレンドリーにするための取り組み

モバイルフレンドリーなwebサイトは、GoogleのモバイルSEOでのランキング評価に影響を及ぼし、レスポンシブデザインの実装はますます必須の流れになってきていると言えます。


レスポンシブwebデザインの3つのデメリット

【デメリット1】 設計・構築が複雑になり制作コスト(時間・費用)がかかる

ひとつのファイルでできるのだから制作も簡単になるだろうと思ったら大間違いです。
逆にひとつのファイルでマルチデバイスに対応させるため、サイト設計・構築はより複雑で大変なものになってきます。
また、設計・構築が複雑になるということは、サイト制作にかかる時間も費用も膨らみます。

【デメリット2】 表示速度が遅くなる傾向にある(容量が大きくなる)

ワンソース化することで、それぞれ専用に作成されたページよりどうしても容量が大きくなっていきます。
PC用では必要な表示もスマホでは非表示にしたり、またはその逆といったように、別のデバイスにとっては必要のないソースも同htmlファイルに記述することになります。
このため、表示する内容によっては表示速度が遅くなり、専用に作られたページと比較して読み込みに時間がかかってしまうケースがでてきます。

【デメリット3】 各デバイス毎に最適化されたUI/UXには劣る

ワンソースで一括管理がしやすくなる反面、それぞれのデバイスに特化したきめ細かなデザインへの対応が難しくなります。マルチデバイスで閲覧しやすく整合性のとれたデザインをクリアするため、どうしても細かな要望やデザインの妥協を求められる場面がでてきます。
レスポンシブwebデザインは汎用性はあるけれど最良というわけではありません。
各デバイス毎に最適化されたUI/UXには劣ることも把握しておくべき点になります。

レスポンシブWebデザインの向き不向きサイト

以上のような特徴から、レスポンシブwebデザインが効果的に働くのは、UIの変更が少なく情報メインのニュースサイト・ブログ・ECサイト、また会社案内やコーポレートサイトなどがあげられます。
情報が頻繁に更新され、SNSへのシェアも多いwebサイトでは、長期的な視野でみるとランニングコストの軽減と更新管理の手軽さから、満足のいく費用対効果が得られると言えるでしょう。

一方、レスポンシブwebデザインに不向きなのは、IE8以下の古いブラウザに対応が必要なサイトや1ページに情報量の多いサイト、UI/UXにこだわりがあるようなサイトになります。利用目的がはっきりとしていて専用の決め細やかなUI/UXの方が効果が得られるような場合は、レスポンシブに固執せず専用サイトやアプリを検討した方がよいでしょう。

レスポンシブwebデザインの実装で気をつけたい5つのポイント

レスポンシブwebデザインを実装すると決まったら、後になって大きなトラブルを抱えないため、目を通しておきたい注意点をまとめました。

【ポイント1】 ターゲットとするディスプレイサイズを決める(設計時)

PC、タブレット、スマホと端末は大きく分けて3つありますが、さらにそれぞれ解像度やディスプレイサイズが異なり、スマホでは縦置き画面と横置き画面もあります。
また、端末によるブラウザの種類やバージョンなども含めると、すべてのパターンに対応させるには非常に膨大な開発コストがかかってきます。
設計の段階でアクセス解析などをうまく利用し、ターゲットとするディスプレイサイズを適切に線引きすることで、無駄な開発工数とコストを抑えることがポイントになります。

【ポイント2】古いブラウザへの対応確認(設計時)

上記の注意点とも重複する部分がありますが、IE8以下への対応の有無は開発工数の大きな分岐点となります。
現在はIE8以下でレスポンシブを実現させるテクニックや方法など多く出回ってきましたが、いまだに予期せぬ不具合や表示の崩れなどが発生しやすく、問題解決に時間を要する場合があります。
アクセス解析でIE8以下の下位バージョンが切り捨てられないようなシェアを持っているか確認し、もし対応が必要と判断されれば、開発工数を考慮すべきでしょう。

【ポイント3】 PCとスマホの違いを理解したコンテンツの表示切り替え(設計時)

コンテンツの表示を単に見やすく調整したデザインにすることだけがレスポンシブではありません。
同じwebサイトでも、PCとスマートフォンでは使い方や利用シーンなど目的が異なります。
画面に掲載される情報を整理し、ファーストビューでユーザのニーズを優先的に提供するコンテンツの表示切り替え等、設計の段階から各デバイス向けにUI/UXを配慮することで、ユーザの満足度が大きく変わってきます。

【ポイント4】スマホやタブレットで「PCサイト」を見られるように配慮(設計時)

ユーザの中には、上記のコンテンツ切り替えを行うことで逆にストレスを感じ、PCサイトと同じ情報を得たいという欲求を抱えるケースがあります。
また、PCサイトを見慣れているユーザが、デバイスが変わったことで切り替わったデザインに馴染めず戸惑ってしまう場合もあります。
スマホやタブレットでも、ユーザに選択できる「PCサイト」の表示切り替えを用意しておくことで、このようなストレスを軽減することができます。

【注意点5】読み込み時間を考慮した施策(開発時)

デメリット3で上げたように、表示速度が遅くなると離脱率があがり、CVR(購入率)が大きく左右されます。
設計段階で不必要な情報の精査をおこない、さらにコーディングでも高速化に向けた施策を取り入れることで、このようなデメリットを極力減らすことできます。
高速化のテクニックやTipsは日々新しくなっています。
読み込み速度アップを実現し、より優れたユーザビリティへの配慮が成功の鍵となるでしょう。

最後に

多くのレスポンシブwebデザインのサイトが普及し、Googleもレスポンシブデザインを推奨している現在、レスポンシブwebデザインはもはやweb制作での常識となってきています。
ですが、なんでもレスポンシブを実装するのが正解とはいえません。
メリット/デメリットを理解したうえで、必ずしもレスポンシブに固執せず、専用サイトを設けたり別途アプリの検討が必要なケースも出てくるでしょう。
いざレスポンシブwebデザインを実装すると決定した場合でも、開発中に想定していなかった内容がでてきて制作コストが増加したりと、トラブルもよく目にします。
レスポンシブで失敗しないためにも、実装前に発生しそうなトラブルを想定し、回避の一助になれば幸いです。

レスポンシブ対応の無料で使える高品質テンプレートまとめ

今回は、レスポンシブ対応の海外の高品質なHTML5 CSS3テンプレートを集めました。
最新のUIデザインに加え軽快な動きのあるつくりなど、非常に高機能かつ高品質なレスポンシブデザインのテンプレートばかりですので、簡単にプロのようなwebサイトを立ち上げることが可能です。
ビジネスやコーポレートサイト、写真ギャラリー用サイト、個人ブログなど、いろいろな種類があるので、目的に合わせて選択することで大いに活躍すること間違いなしです。
皆様のお役に立ちましたら幸いです!
※ライセンスについては、それぞれのテンプレート詳細を確認のうえご利用ください。

ビジネス系

Timber – Free One Page Bootstrap Template

timber_template

Bootstrapの1ページテンプレートです。
木目調の背景画像がアクセントになったスマートでモダンなデザインです。
コーポレートサイトやビジネスサイトに最適な構成になっています。

デモ
ダウンロード

Oxygen – One Page HTML Template

oxygen_thumbnail

フラットデザインの1ページテンプレートです。
パララックスやアニメーションを効果的に使い、魅力的なwebサイトになっています。
ビジネスサイトをクールに演出してくれます。

デモ
ダウンロード

Starter Free Responsive Onepage WordPress Theme

starter-thumb

WordPressのフリーテンプレートです。
1ページテンプレートでビジネスに適した構成になっています。
レスポンシブ対応で非常に美しくスマートなデザインです。

デモ
詳細・ダウンロード

Mountain King

mountainking_template

Twitter Bootstrap3を使った無料テンプレートです。
CSS3アニメーションやTypiconsのアイコン、Masonryのギャラリーレイアウトなどで設計されたミニマルデザインが特徴です。
旅行ブログやポートフォリオなど、マルチで使えます。

デモ
ダウンロード

Spectral

spectral_template

とても美しい1ページのBootstrapテンプレートです。
スタイリッシュなUI、スムーズなCSS3アニメーション、フルスクリーンイメージの背景、自由なカスタマイズなど、個人のポートフォリオサイトからビジネスサイトまで対応できるテンプレートです。

デモ
ダウンロード

Free Corporate HTML5 Website Template

freecorporate_template

コーポレートサイトに適したレスポンシブ対応のテンプレートです。
「ABOUT US」や「CONTACT US」といったビジネスサイトに必要な構成がそろっています。
またPSDもダウンロードできます。

デモ
詳細・ダウンロード

ポートフォリオ系

Multiverse

multiverse_template

ポートフォリオ専用のhtmlテンプレートです。
写真をメインに敷きつめ、シンプルで美しいギャラリーサイトデザインです。

デモ
ダウンロード

Wooster – Free Bootstrap Onepage Theme

wooster_template

ポートフォリオに適した1ページレイアウトのBootstrapテンプレートです。
モノトーンを基調としたクールなデザインです。

デモ
詳細・ダウンロード

Lens

lens_template

デザイナーやカメラマンのためのポートフォリオ用テンプレートです。
メニューを閉じるとフルスクリーンで写真を表示することができ、シンプルで美しいテンプレートです。

デモ
ダウンロード

Box Portfolio

boxportfolio_template

フラットデザインのグリッドレイアウトが特徴のテンプレートです。
ポートフォリオはそれぞれの詳細ページに飛び、AboutやServiceのページもあるので、汎用性のある構成になっています。

デモ
ダウンロード

ブログ系

Spore – Free HTML5 Masonry Blog Template

spore_template

Masonryグリッドレイアウトを採用したブログ用テンプレートです。
シンプルで無駄がなく、写真と文章を載せるのに適したデザインになっています。

デモ
ダウンロード

Couture

couture_template

すっきりとしたデザインの無料Blogテンプレートです。
レスポンシブに対応したグリッドデザインで、SEO対策の機能も備えています。
色やフォントはダッシュボードからカスタマイズ可能です。

デモ
ダウンロード

Sora Article

sora_template

個人Blog用のテンプレートです。
画像のほかにオーディオや動画もサポートされています。SNSの共有やカテゴリフィルタもあり、SEOにも最適化された設計になっています。

デモ
ダウンロード

Minimalist – Clean & Responsive Blogger Template

minimalist_template

タイトル通り、ミニマルデザインの白を基調としたグリッドベースのテンプレートです。
クロスブラウザ対応で動きも軽快でスムーズです。
サムネイル写真の見せ方も美しいデザインになっています。

デモ
ダウンロード

Sugar

sugar_template

ミニマルなレスポンシブ対応の個人Blogテンプレートです。
PinterestやInstagramのウィジェット、SEO最適化など、Blog用の多くの機能を備え、エレガントで美しいデザインが特徴となっています。

デモ
ダウンロード

まとめ

今回は2016年最新レスポンシブ対応テンプレートをまとめました。
トレンドのUIデザインに加え、jQueryを利用したスライダーやアニメーションなど、軽快な動きのある素敵なサイトがそのまま利用可能なHTML5 CSS3テンプレート。
誰でも短時間で非常にクオリティの高いwebサイトを作ることができて、とても便利です。
デザインのクオリティも高く、みているだけでも刺激になりますね。
これからも皆様のお役に立てる情報をご紹介していきますのでご期待ください!

【5分でわかる!】「アクセス解析」でサイトを良くしよう

「Webサイトを作ってみたけどどう運営したらよいかわからない…」「会社の売り上げを上げるためにもっとWebサイトを有効に活用したい…」こんな悩みを抱いている方は多いのではないでしょうか?そんな場合はまず「アクセス解析」を始めてみましょう。これを行うことで自分のサイトが実際にどのように利用されているか知ることができ、改善点を探ることができます。今回はこのアクセス解析について基本から詳しく解説していきます。

 「アクセス解析」とは  

アクセス解析とは、コンピュータのアクセス履歴を分析することで、サイト内に訪れた人の傾向を客観的に知ることのできる手段のことです。「どのような経路で利用者はサイトに入ったのか」「実際に何人くらいの人がそのページを閲覧しているのか」など、様々な利用者の情報を得ることができます。つまり、アクセス解析には、自身のサイトやユーザについての貴重な情報がたくさん隠されているのです!

どうしてアクセス解析をするの?

アクセス解析を私たちが利用する理由を考える前に、まず私たちがWebページをより良くする目的について考えてみましょう。私たちは何のためにサイトを改善するのでしょうか。それはサイトでの「コンバージョン」を増やすためなのです。

コンバージョンとは、そのWebサイトが最終的に目標としている成果に訪問者が達することを指す、Webサイトの運営において非常に重要な用語です。例えば、商品販売サイトであれば利用者が商品を購入することですし、情報提供サイトであれば会員登録がそれにあたります。われわれはこのコンバージョンを出やすくするためにWebサイトを改善するのです。そして、「コンバージョンを多く出すサイト」にするための様々なヒントが隠されているのがアクセス解析なのです。

 お店の売り上げを改善するためには、どんな特徴のお客さんが多いのか、売れ筋の商品は何なのかを把握することが大事ですよね。同じように、サイトでコンバージョンを出やすくするためには、まず自身のサイトや利用者の特徴をつかむことが大事です。実際にどのような人がサイトを訪れ、どのように利用しているのでしょうか?サイト内のうち、どの部分が注目されており、逆にどの部分はあまり見られていないのでしょうか?アクセス解析で得られたデータを上手く活用すれば、サイト内のコンバージョンを上げるための利用者の傾向を知ることができるのです。

アクセス解析では何がわかるの?

先ほど述べたように、アクセス解析では自身のサイトのコンバージョンを上げ、より良いサイトにする際に参考となる、利用者の様々なデータを知ることができます。具体的には、以下のようなデータを収集することができます。                                              

[サイトへの入り方に関して]

・どんなサイトや広告から何人の人が訪れたか

・どの検索エンジンの、どんなキーワードから何人の人が訪れたか。

・どの端末からそのサイトに訪れたか。パソコンからなのか、スマートフォン、

 タブレットからなのか。

[サイトの利用者の動きに関して]

・どのような順番でページを見たか

・訪問者がどのページをよく見ているのか

・どのページから利用者がサイトから離脱したか。

[サイトの特徴に関して]

・総アクセス数の推移

・月や時間、曜日別のアクセス数の推移、何曜日のどの時間帯にアクセスが多い

 かなども知ることができる。 

このように、アクセス解析ではサイトの利用に関する実に多様な、そして詳細な情報を収集することができるのです!このように得た情報をしっかり分析に役立てて、問題点を見つけていくことが、サイト改善の足がかりになります。                                                                                                                                        

それでは、どのようにデータを活用するの?

それでは、実際にアクセス解析で得られたデータをどのようにサイトの改善に活かせば良いのでしょうか。幾つか活用例を挙げてみます。

 例えば、思ったよりスマートフォンからそのサイトを閲覧する人が多い場合、スマートフォン向けのサイトをより充実させると良いでしょう。また、利用者の閲覧する時間帯が偏っているサイトであればその時間帯に合わせてサイトの更新時間を変えることもできます。

また、利用者はそのWebサイトのトップページから入ってくるとは限りません。実際は多くの訪問者が検索エンジンを経由してトップページ以外のページから入ってきているのです。もしトップページから入る訪問者が多い場合は、サイト内のコンテンツの数を増やしたり、検索エンジンによりヒットするような工夫をすることが求められます。

 そのほかにも、商品販売サイトにおいて、商品購入ページのアクセスは多いが実際に購入に結びつかないことが多い場合、商品購入の手順をより簡潔にする工夫ができます。このように、コンバージョンを上げるためのより直接的な対策もとることができます。

いかがでしょう、実際に解析から得られたデータをどのようにサイトの運営に活かせばいいかのイメージは浮かんできたでしょうか。

さあ、アクセス解析をはじめてみよう!

アクセス解析を行うためにはまず自身のサイトにアクセス解析ツールを導入する必要があります。このアクセス解析ツールで最も利用されており、一般的なものが「Googleアナリティクス」です。

「Googleアナリティクス」とはGoogleが提供するアクセス解析ツールです。Googleアナリティクスには以下のような特徴があります。

・無料で使える!

Googleアカウントを取得すれば誰でも無料で利用することができます(ただし有料バージョンもあります)。手軽に利用することができるんですね。

・一つのアカウントで複数のサイトを管理できる

 Googleアナリティクスではひとつのアカウントで最大50個のサイトを登録することができます。また、複数アカウントを登録してデータの共有を行うことも可能です。

・とにかく高性能!

 Googleアナリティクスは無料アクセス解析ツールのなかでは最も機能が多いと言われています。利用者の数やアクセス端末の形態だけでなく、平均滞在時間、サイト内での行動を知ることができます。その他にも利用者の地域、使用言語までわかるんです!さらに自身でカスタマイズを加えることで基本機能にプラスした情報を取得したり解析をすることが可能です。

Googleアナリティクスをもっと有効に使うために

 先ほど述べたように、Googleアナリティクスは無料であるにも関わらず非常に高機能であることが特徴です。しかし、その高機能さゆえに使いこなすことに苦労することもしばしばです。「サイトの閲覧数の変化はわかるがなぜそれが起きているのかわからない…」「利用者の一つ一つのデータはわかるがそれを組み合わせた具体的な対策が見えてこない…」これはGoogleアナリティクスを使い始めた初心者によくある悩みの一つです。

そこで、Googleアナリティクスとその他のアクセス解析ツールを併用することをおすすめします。その一例が「AIアナリスト」。これはGoogleアナリティクスのデータと連動することで、自動で人工知能がデータを集計し、解析を行うツールです。「ページAを見せましょう」「Facebookから訪問する利用者をもっと増やしましょう」など、サイトの具体的な改善点を提案してくれます。 

サイトをより良くする「アクセス解析」、いかがでしたか?Webサイトを運営する方には必須の様々なヒントが詰まった方法ですので、みなさんぜひ積極的に活用していきましょう!

「アクセス解析を始めたい方はこちら」