今やスマートフォン対応は欠かせないものとなってきています。

今回は、よりユーザーが使いやすくコンバージョン率もあがりやすいWebサイト制作のために読んでおきたい記事選を紹介します。

既存のパソコン用のWebサイトをスマートフォン対応する際はもちろん、いちからスマートフォン対応サイトを制作する際にも、今回紹介する記事に書かれていることを参考により成果を期待できるWebサイトを制作をしましょう。

加えて、参考になるスマートフォンサイトが紹介されているホームページもご紹介します。
制作時のポイントを念頭に置きつつ、デザイン等の参考にしましょう。

このニュースを読んだあなたにオススメ

スマートフォン(スマホ)EFOの最適化ポイント
ホームページをスマホ化する4つの方法
レスポンシブデザインの基礎と制作時の注意点を解説

スマートフォンサイトを制作するときに知っておきたいポイントまとめ記事7選

1.初めてスマホサイトをデザイン制作する時の注意点12項目

初めてスマホサイトをデザイン制作する時の注意点12項目.png
http://free-webdesigner.com/smartphone02

Webデザイナーの方が運営する、フリーランスWebデザイナーのリアルのブログ記事です。
スマートフォンサイトをデザインする際に最低限おさえておきたい、基本的なポイント12項目が分かりやすくまとめられています。

まずこの記事内で上げられているポイントに注意して制作を進めるようにしましょう。

2.初心者〜中級|スマホサイト作成の9ステップと大切にしたい事

初心者〜中級|スマホサイト作成の9ステップと大切にしたい事.png
http://minakul.jp/smartphone-site-creation-140

主にスマートフォンに関する情報が発信されている、ミナクルのブログ記事です。
スマートフォンサイト制作時の流れが、企画するところから公開まで細かく説明されています。

特に初めてスマートフォンサイトを制作する場合は、この記事内に記載されている流れに沿って制作するとよいでしょう。

3.ライバルを出し抜け!スマートフォンサイト制作でコンバージョン率を上げる7つのポイント

ライバルを出し抜け!スマートフォンサイト制作でコンバージョン率を上げる7つのポイント.png
http://lpo.gaprise.com/blog/smartphone-sites-1908/

Webマーケティングに関するさまざまな情報を発信している、LPO研究所のブログ記事です。
スマートフォンサイトでコンバージョン率が上がりやすくするためのポイントが、分かりやすく書かれています。

ユーザーWebサイトにパソコン、タブレット、スマートフォンとさまざまなデバイスでアクセスしてきますが、書くデバイスごとの特徴を活かしたWebサイトを心がけ、成果が期待できる仕上がりを目指しましょう。

4.初めてのスマホサイトデザインの前に押さえておきたいテキスト表示7つの基本

初めてのスマホサイトデザインの前に押さえておきたいテキスト表示7つの基本.png
http://touch-slide.jp/column/202/

スマートフォン対応サイト制作を主な業務としている、TOUCH&SLIDEのブログ記事です。
この記事では特にテキストに焦点を当て、読みやすい文字数やフォントなどについてまとめられています。

スマートフォンサイトでは、パソコンやタブレット以上に制限やルールなどがあるため、テキストで表現できることについて、正しい知識を持っておくことが必要です。
Webサイトの大枠だけではなく、細かい部分にも気を配ってユーザービリティの高いWebサイトにしましょう。

5.【スマートフォン】スキマ時間を捉える3つのポイント

【スマートフォン】スキマ時間を捉える3つのポイント.png
http://www.bebit.co.jp/memo/2010/08/3_1.html

Webサイトユーザービリティ向上に関する情報を発信している、beBitのブログ記事です。

この記事が書かれたのは2010年と古い記事ですが、内容としては現在も十分に参考になります。
スマートフォンを利用するシーンとして最も多いのが、隙間時間です。

『スマートフォン利用の格差世代は50代から』
スマートフォン利用に関する調査

この隙間時間に利用してもらえるようなWebサイト制作のために必要な視点が、シンプルに3つにまとめられています。

ここで書かれているポイントを取り入れるだけでも、ユーザーの利用頻度の高いWebサイトになりますので、念頭においておくようにしましょう。

6.スマホ対応に欠かせないツール類とサイト制作のポイント!モバイル検索に備えよう

スマホ対応に欠かせないツール類とサイト制作のポイント!モバイル検索に備えよう.png
http://wispyon.com/smartphone-friendly-wordpress/

Webサイト制作に関する情報から海外旅行についての情報など、自身の興味があることを中心に情報を発信している、ゆめぴょんさんのブログ記事です。

パソコンでのWebサイトをスマートフォン対応する際に使用したいツールがまとめられていますが、スマートフォンサイトを最初から制作する場合にも使えるものばかりです。
制作時のポイントも合わせてまとめられているので、参考にしてみてください。

7.たった1行!スマホサイトのコーディング時に役立つ小技8(サンプルあり)

たった1行!スマホサイトのコーディング時に役立つ小技8(サンプルあり).png
http://designcolor-web.com/2014/06/09/smartphone-site-tips8/

Webデザイナーをしている方が個人で運営している、Design Colorのブログ記事です。
スマートフォンサイトを制作する際に必要なコードがサンプルつきでまとめられています。

スマートフォンならではのコードで、知っていると非常に便利ですので、ブックマークしておくことをオススメします。

参考ギャラリーサイト

1.iPhoneDesignBox

iPhoneDesignBox.png
http://design.web-hon.com/

iPhone向けWebサイトのデザイン集です。
画像が大きくて見やすい他、種類も豊富で細かくカテゴリ分けされているため、制作したいWebサイトに近いものを見つけやすいです。
個別ページではパソコンで表示される画面との比較画像も閲覧することができます。

2.スマートフォンサイト集めました。

スマートフォンサイト集めました。.png
http://sp-web.jp/

スマートフォンサイトのデザイン集です。
種類が豊富でさまざまな業種のWebサイトを閲覧することができます。

姉妹サイトには、ランディングページの参考サイトとして有名な「ランディングページ集めました。」があります。

まとめ

ユーザーは、インターネットに触れる場を既にパソコンからスマホへ移行しています。
博報堂DYメディアパートナーズが2016年6月に発表した調査データによると、スマホ・タブレットの総接触時間は全メディアの3割を超えており、パソコンの接触時間は減少しています。

参考
博報堂DYメディアパートナーズ メディア環境研究所「メディア定点調査2016」時系列分析より|ニュースリリース|博報堂DYメディアパートナーズ

スマホの普及が進み、ユーザーの生活に溶け込んできている今、パソコンの接触時間が更に減少していくことは明らかです。
パソコンに比べて一度に表示できる情報が少ないスマホは、わかりやすさ、見やすさを実現するために様々な工夫をこらす必要があります。
既にスマホ対応をしていても、本当にユーザーにとって見やすいページになっているのかを繰り返し検証することも重要でしょう。

今回ご紹介した記事やギャラリーサイトを参考に、ユーザーにストレスを与えない、快適なスマホサイト制作を目指しましょう。

このニュースを読んだあなたにオススメ

スマートフォン(スマホ)EFOの最適化ポイント
ホームページをスマホ化する4つの方法
レスポンシブデザインの基礎と制作時の注意点を解説

このニュースに関連するカリキュラム

スマートフォン(スマホ)EFOの最適化ポイント

スマートフォン(スマホ)EFOの最適化ポイント

スマートフォンはパソコンと違い、どうしても画面が狭く操作しづらいという特徴があります。そこで、入力フォーム自体を大きくしたり、ページを分割したりなどど工夫が必要になります。また、トグルボタンやドラムなどスマートフォンならではのインターフェースも使うと良いです。