見やすく使いやすいスマホサイトを作る方法とは?

shunichi shiga
見やすいスマホサイト

スマホサイトをデザインするにあたり、見やすく使いやすいサイトにすることはとても大切です。しかし、そういうスマホサイトを作るのは難しいと思っている方もいるのではないでしょうか?
実は、見やすく使いやすいスマホサイトを作るコツは存在します。そんなユーザビリティの優れたスマホサイト作成のルールとテクニックをご紹介します。

ユーザエクスペリエンス(UX)を意識する

昨今、使いやすいスマホサイトを作る上で、UI(ユーザーインタフェース)デザインと同じく、UX(ユーザエクスペリエンス)デザインが重要視されています。
UXデザインとはどういう意味かご存知でしょうか?UXデザインとは、ユーザーがサービスを使用した時にポジティブな体験・満足を得られるよう、サービスの使い勝手を良くすることです。つまり、視覚的なデザインだけではなく、サービスを利用したときにユーザーが受ける印象(気持ち)まで考える必要があります。
難しそうに思えるかもしれませんが、UXにもトレンドがあります。トレンドを探るには現在人気のスマホサイトを観察することがとても大切です。人気のサイトをたくさん訪問して、流行っているUXデザインとはどういうものなのかを研究してみてください。

スマホの画面にコンテンツを最適化する

コンテンツの最適化

スマホの画面はPCに比べると小さく、PCと同じ情報量を一度に表示させると見にくくなってしまいます。したがって、見やすく使いやすいスマホサイトを作るには、スマホの画面に最適化したデザインにすることが重要になります。
ではスマホの画面に最適化するとはどういうことでしょうか? それは、縦長であるスマホの画面に合わせ、それぞれの要素を縦に積み上げたデザインにすることです。こうすることで内容がわかりやすく、小さくて縦長の画面にぴったりのレイアウトになります。 これはスマホサイトをデザインするうえで基本的なテクニックになりますので、縦に積んでいくことを意識して最適化を試みてください。

表示スピードが速く、軽いスマホサイトに

表示速度の調整

使いやすいスマホサイトの条件の1つに、表示スピードが速く、軽いスマホサイトということがあります。軽いスマホサイトに仕上げるには、配置する画像素材は必要十分なサイズまで圧縮してすることが重要です。
また、動的なスクリプトを組み込みすぎても読み込みが遅くなる原因になるので、そういった演出は必要最低限に留めるのが得策といえます。どんなに面白い構造のスマホサイトをデザインしても、読み込みに時間がかかってしまっては、ユーザーにストレスがかかり本末転倒です。
やりたいことをすべて組み込むのではなく、不必要な要素は出来る限り省いて、表示スピードが速く、軽いサイトに仕上げることが、結果的にユーザーを満足させる使いやすいスマホサイトになるということは理解しておきたいポイントです。

ボタンの影は1ptに設定して浮き立たせる

スマホサイトを見やすく使いやすいものにするデザイン手法として、ボタンには1ptのドロップシャドウを入れるのがオススメです。これにより、ユーザーはボタンの判別がつきやすくなります。スマホサイトでも他のオブジェクトとボタンにあまり大きな区別を付けず、出来る限りシンプルな見た目にするのが最近のトレンドのようですが、それぞれの要素を差別化してサイトの構造を見やすくすることはとても大切です。
トレンドを押さえるのも重要ですが、それに流されるばかりではなく、ユーザー目線でデザインすることを心がけていきましょう。

ボタンの影は1ptに

以上が見やすく使いやすいスマホサイトを作る方法になります。その時その時のトレンドばかりを追いかけるのではなく、操作性を良くすることこそがユーザーの満足度を向上させる近道になるので、今回ご紹介したルールとテクニックを日々意識して活用してみてください。

関連記事

シンプルなスマホサイトを作って、ユーザビリティを高めよう!

シンプルなスマホサイトを作って、ユーザビリティを高めよう!

現在スマホサイトのトレンドはシンプルなデザインに流れており、ウェブ系デザイナーにとっては押さえておくべき基本だと言えるのではないでしょうか。 シンプルなデザインはユーザビリティに優れており、利用者にとって好感度の持てるデザインだとされています。本記事では、そんなデザイナーとして絶対に習得しておきたい、シンプルなスマホサイトを作成するコツをご紹介します。 ユーザーはシンプルなものを求めている 現在シンプルなのがトレンドだということもありますが、一般的にシンプルなデザインのスマホサイトはユーザーにとっても操作がしやすく、親しみやすいものだと言えます。操作がしやすく、親しみやすければ自然とそのサイトに好感が生まれます。その結果、訪問者数が増えリピート率も高まるのではないでしょうか。 アーティスティックで色々な仕掛けを施した、独創的なスマホサイトもとても魅力的ですが、ユーザーのニーズに応えたシンプルなデザインに仕上げることが必要なのではないでしょうか。   わかりやすいデザインのコツはユーザーの立場に立つこと スマホサイトを作成するに当たり、絶対に押さえておきたいポイントが、ユーザーが操作しやすいものを作り上げるということです。もちろんデザインも重要なのですが、サイトの目的はユーザーに情報を提供することなので、操作性の良さが一番重要だと言えます。そういった、ユーザーが操作しやすく、わかりやすいデザインにするには、ユーザーの立場に立って考えてみる必要があります。 「デザインを作った本人がわかりやすいサイト」=「ユーザーがわかりやすいサイト」ではないことを念頭に置いて、一度デザインができた後に、家族や友人などの出来るだけデザインの知識がない人に一度見てもらうのがよいでしょう。制作側が見落としがちなユーザー目線の意見を聞くことができるので、とてもオススメの方法です。 気をつけたいのはフォントのサイズとボタンの配置 シンプルでわかりやすいスマホサイトを目指すのであれば、フォントのサイズとボタンの配置に気を付けなければいけません。そのために必要なのは、他のシンプルでわかりやすい優れたスマホサイトを観察し、どのようなフォントを採用していて、それぞれの要素の配置はどうなっているのか、ある一定の規則が存在しているはずです。つまりルールを設けて、それにそって制作することが大切なのです。 フォントのサイズやボタンの配置はもちろんのこと、その他のオブジェクトのマージンやパディングなどについても、一定のルールを作るのがよいでしょう。   シンプルで使いやすいスマホサイト参考例 シンプルで使いやすいスマホサイトを作る上で大切なことは、優れたデザインのスマホサイトをよく研究することです。 では、どういったスマホサイトを研究すればいいのでしょうか。優良な参考資料として、ITサービスや大手機器メーカーなどのスマホサイトが挙げられます。こういった業界はシンプルでわかりやすいスマホサイトを積極的に採用している傾向があります。前述で触れたように、しっかりと要素ごとのルール決めがされているので、細かい部分までよく観察してみてください。 参考企業 GMOインターネット株式会社:https://www.gmo.jp/ また、デザイン会社のサイトも見てみるといいでしょう。デザイン会社のサイトは、それ自体がポートフォリオのような役割を果たしているため、各社かなり力を入れて制作しています。よって自然とクオリティの高いものが多く、とても参考になります。 参考企業 Cuna Design:http://www.cuna-design.com/ いかがでしたか?以上がシンプルでわかりやすいスマホサイトを作るコツになります。 ユーザー目線でデザインを決めていき、要素ごとにルールを決めることが大切です。積極的に色々なスマホサイトを観察し、是非わかりやすく利用者からの好感度が高いスマホサイトを作ってみてください。

最新のデザインコンペ

デザイナーとしてステップアップできるお仕事をご用意しています。