モバイルファーストな2014年を振り返ってみる

いつもモバイルファーストマーケティングラボをご覧いただき、ありがとうございます。

2014年も残り僅かとなりました。ECサイト運営をされておられる方は年末商戦のまっただ中でお忙しいとは思います。

さて、この1年を振り返りますとモバイルシフトがより大きく進んだ1年となりました。

参考：スマートフォン利用が3割増、PC利用は2ケタ減でモバイルシフトが鮮明に

今回はそんな2014年を振り返り、総括としてモバイルファーストマーケティングラボにて最も読まれた記事ベスト10を発表したいと思います。

10位　レスポンシブな背景画像にコンテンツを重ねて表示させる３つの方法

https://www.aiship.jp/knowhow/archives/16956

フルスクリーン画像を使ったサイトデザインの人気が高まるにつれ、背景画像上にコンテンツを配置するサイトが増えてきました。

この配置でレスポンシブ化する際に幾分かの調整が必要になりますので、その方法をメリット・デメリット交えてご紹介しています。

9位　レスポンシブ化で見えた数値の効果改善！「三愛水着楽園」リニューアル直後の検証レポート

https://www.aiship.jp/knowhow/archives/17606

今春、レスポンシブなECサイトへとリニューアルを遂げた「三愛水着」様。そのリニューアル前後の数字で見えてきた、数値の効果や改善箇所についてまとめてみました。

8位　レスポンシブ対応JQueryプラグインでスライダー入門！

https://www.aiship.jp/knowhow/archives/16358

html/CSS/JavascriptやjQueryを勉強し始めた方でも使える、Flexslider2を使ってレスポンシブWebデザインに対応した画像スライダーを作る方法をご紹介しました。

7位　多デバイス化で考えるレスポンシブWebデザインのブレイクポイント

https://www.aiship.jp/knowhow/archives/13899

考えれば考えるほど、デバイス別のブレイクポイントは複雑化しがちです。

そこでブレイクポイントを『メジャーブレイクポイント』と『マイナーブレイクポイント』とに分け、より分かりやすく簡単にブレイクポイントの設定ができる考え方について記事にしています。

6位　【保存版】レスポンシブWEBデザインのディレクションワークフロー

https://www.aiship.jp/knowhow/archives/14539

レスポンシブなECサイトを手がけてきたディレクターが、実体験を元にレスポンシブECサイトのディレクションワークフローを大公開。

アジャイル型で作りながら変化させる方法はレスポンシブではよく採用されていますが、ウォーターフローでワイヤーフレームをきっちりと作った上で後工程に入ることで後々の出戻り作業も少なくて済みます。

5位　bxsliderのサムネイル画像枚数を自由に変更できるようにする方法

https://www.aiship.jp/knowhow/archives/15580

bxsliderといえば、カスタマイズ性の非常に高いスライダー系プラグインで有名です。レスポンシブ対応やページャー・サムネイル画像のカスタマイズなどにも対応しており、「スライドショーが欲しい」と言われるとまず思い浮かぶプラグインになっています。

そんなbxsliderを使用したのサイト管理をより便利にする方法をご紹介。「サムネイル画像を使用していて、定期的にスライダー枚数を増減させたい」という方は必見です。

4位　レスポンシブWEBデザインの基本　max-widthで中央揃えレイアウト

https://www.aiship.jp/knowhow/archives/16724

レスポンシブWebデザインの基本的な見せ方として、サイト全体のレイアウトをセンタリング（中央寄せ）する方法をご紹介します。

3位　レスポンシブサイトでパララックス効果をCSSだけで実装する方法

https://www.aiship.jp/knowhow/archives/15843

最近、LP（ランディングページ）などでパララックス効果（視差効果）を取り入れたサイトを目にします。

Webサイトにパララックス効果を持たせるには、javascriptによる実装がよく使われますが、ご紹介する方法は、javascriptは一切使わずにCSSだけで、しかもレスポンシブサイトにおいても簡単にパララックス効果を実装できてしまう、そんな方法です。

2位　【サンプル有】レスポンシブなグローバルナビの作り方３選

https://www.aiship.jp/knowhow/archives/14535

レスポンシブサイトを構築する際、意外と引っかかるのが「グローバルナビ」

ページの横幅（キャンバス）いっぱいに表示させることが多い関係上、キャンバス幅が一定でなくなるレスポンシブWebデザインでは一筋縄ではいきません。

慣れない内は考えるのが面倒で「スマホ専用のナビゲーションを別途用意」したり、「グローバルナビをまるごと非表示にしてしまう」ということをされた方の少なくないのではないかと思います。

記事では「レスポンシブWebデザインで使えるグローバルナビ」をまとめています。

1位　レスポンシブWebデザインで成功するUI／UXのポイント5つ

https://www.aiship.jp/knowhow/archives/14719

レスポンシブWebデザインでサイト構築だけでなく、「モバイルファースト」が本格的に浸透してきた世界でのUI／UXを考えます。

今までのWeb構築で「当たり前」や「こうすべき」と思っていた感覚とは少し異なった設計でサイトを構築しなければなりません。

gunosyなどでバズったので、比較的多くのいいね！をいただくことができました。

いかがでしたでしょうか。

このブログのタイトルである「モバイルファースト」という言葉が出てきて早5年が経ちます。GoogleやAmazon、楽天などの大手サイトではPCのアクセスが大きく減少し、逆にスマートフォンのアクセスが3割り以上増えるなど市場のモバイル化は一層進みました。

ユーザーがよりモバイルで使いやすく、満足度の高いサイトを運営者様が提供できるように情報をお届けし、サポートをしていくのが私たちの役割だと考えています。

2015年もブログをお読みいただいているサイト運営者の方や経営者の方、クリエイターの方々に取って、より良い情報をお届け出来るよう今後も精進してまいります。

引き続き、よろしくお願いします。

上林