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

shunichi shiga
シンプルなスマホサイト

現在スマホサイトのトレンドはシンプルなデザインに流れており、ウェブ系デザイナーにとっては押さえておくべき基本だと言えるのではないでしょうか。
シンプルなデザインはユーザビリティに優れており、利用者にとって好感度の持てるデザインだとされています。本記事では、そんなデザイナーとして絶対に習得しておきたい、シンプルなスマホサイトを作成するコツをご紹介します。

ユーザーはシンプルなものを求めている

ユーザーはシンプルさを求める

現在シンプルなのがトレンドだということもありますが、一般的にシンプルなデザインのスマホサイトはユーザーにとっても操作がしやすく、親しみやすいものだと言えます。操作がしやすく、親しみやすければ自然とそのサイトに好感が生まれます。その結果、訪問者数が増えリピート率も高まるのではないでしょうか。
アーティスティックで色々な仕掛けを施した、独創的なスマホサイトもとても魅力的ですが、ユーザーのニーズに応えたシンプルなデザインに仕上げることが必要なのではないでしょうか。

わかりやすいデザインのコツはユーザーの立場に立つこと

わかりやすいデザイン

スマホサイトを作成するに当たり、絶対に押さえておきたいポイントが、ユーザーが操作しやすいものを作り上げるということです。もちろんデザインも重要なのですが、サイトの目的はユーザーに情報を提供することなので、操作性の良さが一番重要だと言えます。そういった、ユーザーが操作しやすく、わかりやすいデザインにするには、ユーザーの立場に立って考えてみる必要があります。
「デザインを作った本人がわかりやすいサイト」=「ユーザーがわかりやすいサイト」ではないことを念頭に置いて、一度デザインができた後に、家族や友人などの出来るだけデザインの知識がない人に一度見てもらうのがよいでしょう。制作側が見落としがちなユーザー目線の意見を聞くことができるので、とてもオススメの方法です。

気をつけたいのはフォントのサイズとボタンの配置

気をつけたいフォント

シンプルでわかりやすいスマホサイトを目指すのであれば、フォントのサイズとボタンの配置に気を付けなければいけません。そのために必要なのは、他のシンプルでわかりやすい優れたスマホサイトを観察し、どのようなフォントを採用していて、それぞれの要素の配置はどうなっているのか、ある一定の規則が存在しているはずです。つまりルールを設けて、それにそって制作することが大切なのです。
フォントのサイズやボタンの配置はもちろんのこと、その他のオブジェクトのマージンやパディングなどについても、一定のルールを作るのがよいでしょう。

シンプルで使いやすいスマホサイト参考例

シンプルで使いやすいスマホサイトを作る上で大切なことは、優れたデザインのスマホサイトをよく研究することです。
では、どういったスマホサイトを研究すればいいのでしょうか。優良な参考資料として、ITサービスや大手機器メーカーなどのスマホサイトが挙げられます。こういった業界はシンプルでわかりやすいスマホサイトを積極的に採用している傾向があります。前述で触れたように、しっかりと要素ごとのルール決めがされているので、細かい部分までよく観察してみてください。
参考企業
GMOインターネット株式会社:https://www.gmo.jp/

また、デザイン会社のサイトも見てみるといいでしょう。デザイン会社のサイトは、それ自体がポートフォリオのような役割を果たしているため、各社かなり力を入れて制作しています。よって自然とクオリティの高いものが多く、とても参考になります。
参考企業
Cuna Design:http://www.cuna-design.com/

参考例

いかがでしたか?以上がシンプルでわかりやすいスマホサイトを作るコツになります。
ユーザー目線でデザインを決めていき、要素ごとにルールを決めることが大切です。積極的に色々なスマホサイトを観察し、是非わかりやすく利用者からの好感度が高いスマホサイトを作ってみてください。

関連記事

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

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

スマホサイトをデザインするにあたり、見やすく使いやすいサイトにすることはとても大切です。しかし、そういうスマホサイトを作るのは難しいと思っている方もいるのではないでしょうか? 実は、見やすく使いやすいスマホサイトを作るコツは存在します。そんなユーザビリティの優れたスマホサイト作成のルールとテクニックをご紹介します。 ユーザエクスペリエンス(UX)を意識する 昨今、使いやすいスマホサイトを作る上で、UI(ユーザーインタフェース)デザインと同じく、UX(ユーザエクスペリエンス)デザインが重要視されています。 UXデザインとはどういう意味かご存知でしょうか?UXデザインとは、ユーザーがサービスを使用した時にポジティブな体験・満足を得られるよう、サービスの使い勝手を良くすることです。つまり、視覚的なデザインだけではなく、サービスを利用したときにユーザーが受ける印象(気持ち)まで考える必要があります。 難しそうに思えるかもしれませんが、UXにもトレンドがあります。トレンドを探るには現在人気のスマホサイトを観察することがとても大切です。人気のサイトをたくさん訪問して、流行っているUXデザインとはどういうものなのかを研究してみてください。   スマホの画面にコンテンツを最適化する スマホの画面はPCに比べると小さく、PCと同じ情報量を一度に表示させると見にくくなってしまいます。したがって、見やすく使いやすいスマホサイトを作るには、スマホの画面に最適化したデザインにすることが重要になります。 ではスマホの画面に最適化するとはどういうことでしょうか? それは、縦長であるスマホの画面に合わせ、それぞれの要素を縦に積み上げたデザインにすることです。こうすることで内容がわかりやすく、小さくて縦長の画面にぴったりのレイアウトになります。 これはスマホサイトをデザインするうえで基本的なテクニックになりますので、縦に積んでいくことを意識して最適化を試みてください。 表示スピードが速く、軽いスマホサイトに 使いやすいスマホサイトの条件の1つに、表示スピードが速く、軽いスマホサイトということがあります。軽いスマホサイトに仕上げるには、配置する画像素材は必要十分なサイズまで圧縮してすることが重要です。 また、動的なスクリプトを組み込みすぎても読み込みが遅くなる原因になるので、そういった演出は必要最低限に留めるのが得策といえます。どんなに面白い構造のスマホサイトをデザインしても、読み込みに時間がかかってしまっては、ユーザーにストレスがかかり本末転倒です。 やりたいことをすべて組み込むのではなく、不必要な要素は出来る限り省いて、表示スピードが速く、軽いサイトに仕上げることが、結果的にユーザーを満足させる使いやすいスマホサイトになるということは理解しておきたいポイントです。   ボタンの影は1ptに設定して浮き立たせる スマホサイトを見やすく使いやすいものにするデザイン手法として、ボタンには1ptのドロップシャドウを入れるのがオススメです。これにより、ユーザーはボタンの判別がつきやすくなります。スマホサイトでも他のオブジェクトとボタンにあまり大きな区別を付けず、出来る限りシンプルな見た目にするのが最近のトレンドのようですが、それぞれの要素を差別化してサイトの構造を見やすくすることはとても大切です。 トレンドを押さえるのも重要ですが、それに流されるばかりではなく、ユーザー目線でデザインすることを心がけていきましょう。 以上が見やすく使いやすいスマホサイトを作る方法になります。その時その時のトレンドばかりを追いかけるのではなく、操作性を良くすることこそがユーザーの満足度を向上させる近道になるので、今回ご紹介したルールとテクニックを日々意識して活用してみてください。

思わず目が奪われるシンプルデザインの看板を作ろう!

思わず目が奪われるシンプルデザインの看板を作ろう!

街の中にはさまざまな看板があふれていて、どれも色や形、素材など、さまざまな工夫が施されています。カラフルな看板が立てられている賑やかな街では、逆にシンプルなデザインの看板の方が、その中で人目につきやすいこともあります。では、シンプルな看板をデザインするためのポイントを紹介します。   どうしてシンプルデザインの方が目立つのか? 看板は人や建物が集まっている場所に設置されていることが多く、そのデザインは様々です。看板がたくさん設置されている場所では、「カラフルな看板がたくさんあるな」とひとまとめに認識されてしまい、どれも同じような看板だと思われやすくなってしまうので、結果カラフルなのに目立たないということになりかねません。 一方シンプルなデザインの看板は、内容が明確に表現されていることもあり、周囲の看板と差をつけることによって人々の目を引き、注意をひきやすくなります。ただ単に「シンプルであればいい」というわけではなく、掲載されている内容や色使いなど伝えたいことが明確なデザインであることが大事です。   一目で内容がわかる看板づくりを心がける 人が看板を見る時間は、車の運転中で約3〜5秒と言われています。また、歩行者は自分にとって必要な情報しか見ないという調査結果も出ており、ほとんどの人は視界に看板が入ってもその内容までを見てはいないとされているのです。 そんな状態の中では、いかに情報をキャッチしてもらうかが重要となるので、一目見ただけでその看板がどのような内容なのかわかるようにデザインする必要があります。 わかりやすいシンプルなデザインにするためには、内容を1つに絞り込むことがポイントです。例えば企業の認知度を上げたいという依頼ならば、極端なことを言えば、その企業の会社名やロゴを掲載するだけでも十分です。ただし、ロゴだけとは言っても、ロゴの色やフォント、余白のバランスなどを考えながら、より広告として効果的なデザインにする必要があります。   ムダなものを省いて必要最低限の情報を載せる 看板にはたくさんの情報は必要ありません。前述したように、人が看板の内容を捉えるのはほんの一瞬です。たくさんの情報を載せたところで、そのすべてを捉え切れるはずもなく、それどころか一体何を伝えたい看板なのかさえわからなくなってしまいます。 看板というメディアの役割は、人により詳しい情報を伝えるためにあるのではなく、見た人にインパクトを与えることで興味をひくためのツールとして使われることが多いです。クライアントから得た多くの情報の中から「絶対に必要」と判断した情報以外を削除していき、内容や見た目をよりシンプルにすることで、効果的で印象に残る看板に仕上げていくことができるでしょう。   街の景観に配慮した色使いで印象づける 看板や屋外広告を制作したことがある方なら、少なからず「マンセル値の制約」を受けたことがあるのではないでしょうか?1905年にアルバート・ヘンリー・マンセルさんによって考案された「マンセル・カラー・システム」では色を、色相、明度、彩度の三属性に分類しています。現在日本国内で、景観を損なわないために、看板デザインに対してこの三属性に規定を設けている自治体が増えてきています。 「目立つ色を使いたい」とデザイナーが思っていても、看板を設置する場所によってはその色が使えないことがありますので、事前に各自治体のホームページなどで調べておくのがオススメです。 シンプルな看板は、「看板を見る人の立場や心情を想像しながら、より効果的にデザインする」ことが大切なポイントとなります。また、「いかに多くの情報をわかりやすく簡潔にまとめられるか」という面でデザインの訓練にもなるので、ぜひ積極的に挑戦していきましょう。

シンプルに仕上げたLPのデザイン参考例

シンプルに仕上げたLPのデザイン参考例

元々はユーザーが最初にアクセスしたウェブページの事を意味したランディングページ(LP)ですが、インターネット広告業界では専ら、バナー広告などのリンク先にある、長めの1ページにまとめた商品やサービスの売り込みを指しています。 その大抵のページにはキャッチコピーや口説き文句があふれていますが、最近ではシンプルに決めたものも登場してきました。そんな時代を先取りするLPをご紹介しましょう。 こんな依頼ならシンプルなデザインに キャッチコピー、ベネフィットフレーズ、利用者の声といった、LPのお決まりの言葉を盛り込んで、極太ゴシックや補色などを使って派手に作ってほしいという従来のLPを要望されたら、それに従うしかありませんが、そのようなLPも飽和状態なので、シンプルデザインが合う内容であれば、違った提案をするのも一つの手です。 例えば、銀行や証券会社のような信用第一の業種なら、あまり美辞麗句を書き立てるのも逆効果なので、簡潔かつ的確にまとめたいものです。 また、サービスに絶対的な自信があるものは、それをさりげなく披露すると、必ずや説得力を持つ事でしょう。 シンプルなデザインで気を付けたい点は? いくらシンプルにすると言っても、文章や画像を単調に並べただけではデザインに失敗していると考えざるを得ません。フォントはベーシックなものが良いですが、その大きさや太さでメリハリを付けましょう。 また、画像も1枚をベタッと貼り付けるのではなく、説明で欲しい所に貼るという必要性を熟慮するべきです。 そして、それらの配置は、「これはこんな事ができて、その成果はこんなふうで、こんな感想が届いています」といった物語を感じるものにすると、読み進める気を起こさせるでしょう。 シンプルなデザインのLP例 成功例を見ると、シンプルデザインがより良く理解できると思います。 ドローンを使って、空撮を行ったり環境をモニタリングする会社のLPです。サービスを簡潔にまとめ、一番の関心事である写真の出来を明確に提示しています。 また、使用するドローンは、良く知られているDJIのファントムではなく、上位機種のインスパイアである事を強調したデザインです。 イギリスの不動産業者向けにデジタルマーケティングを伝授する会社のLPです。信頼を感じさせる緑色を取り入れ、スタイリッシュに仕上げています。 SNSなどと連動して街に出ている友人を探す事ができるアプリのLPです。一目で理解できるアイコンを作って、このアプリが何の役に立つのか、どんな動作をするのかを端的に説明しています。 企業や個人投資家向けのベンチャーキャピタルファンドのLPです。要望した色はブラック、そして、プラチナとホワイトでしたが、ブラックはそのまま使うと信頼感を損なうため、グラデーションにしています。 オランダを中心とした求人広告会社のLPです。企業の人事向けに、優秀な人材を集める方法を解説する教材を、分かりやすいインフォグラフィックで説明しています。 ペットと死別した人のために、その遺骨を収める壺を販売するデザイナーのLPです。最小限の言葉が説得力を増しています。 持ち家、借家に関わらず、省エネを目指す人に指南する電子書籍のLPです。白熱球や蛍光灯よりもLEDという誰でも知っている省エネの方法を提示しているので、見ただけで内容を理解できます。 WordPressを使ったサイトを最適化するサービスのLPです。大きく描いたバロメーターが、あっと言う間に心配事を解決してくれるような印象を与えます。 デザイン by Infinity デザイン どんなに口説き文句を並べるよりも、簡素な言葉や単純な画像のほうが力を持つ時があります。それらはもちろん、人々の関心を引くものでなくてはなりません。 依頼内容からその核心となる部分を見出し、是非シンプルなデザインへと昇華してください。

最新のデザインコンペ

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