こんなスマホサイトを作りたかった!ハイクオリティデザインの4つのポイント

shunichi shiga
スマホのハイクオリティデザイン

デザイナーなら「より多くの人の目に触れるものをデザインしたい」と一度は思ったことがあるのではないでしょうか。今やスマートフォンは多くの人が所有しており、私たちの生活になくてはならないものとなりつつあります。優れたスマホサイトを作ることができれば、多数のアクセスを獲得できる可能性が高くなります。本記事では、多くの人の注目を集めるハイクオリティなデザインのための、スマホサイト作りの4つのポイントをご紹介します!

ユーザー目線を意識したレイアウト

ユーザー目線のレイアウト

まず、最も基本的なポイントがこちら。デザイナーとして必ず意識しておきたいのは、「ユーザー目線」ではないでしょうか。 スマホサイトの場合、ユーザーはスマートフォンからアクセスし、サイトを閲覧します。 では、そのユーザーはどういった環境、心情でそのサイトを閲覧するのでしょうか? 例えば通勤電車の中で閲覧されるサイトと、カフェでゆっくりと過ごしながら閲覧されるサイト。 ユーザーの求めているデザインは異なりそうですよね。 このように、デザイナーにはターゲットとなるユーザーを想像しながら、それぞれのニーズに合わせたデザインをつくることが求められます。

一目でテーマがわかるデザインにする

二つ目のポイントは、一目でテーマが伝わるデザインにすることです。 スマートフォンで閲覧できる画面は、PCや雑誌などよりも小さなサイズに限られてしまうため、そのサイトのテーマがひと目でわからないと、ユーザーは混乱してしまいます。「このサイトは何の情報をくれるのだろう」とひと目でわかるようなデザインであれば、 ユーザーが利用しやすいのでサイトのアクセス数は増加し、滞在時間も長くなるのではないでしょうか。

テーマが分かりやすいデザイン

画像とコピーのテーマは一致させる

三つ目のポイントは、コンテンツについてです。 スマホサイトをデザインするときには、多くの人が画像を使うのではないでしょうか。 ビジュアルによってユーザーの理解を助けるためにも、非常に効果的ですよね。 ここで大切なのが、画像とコピーのテーマをしっかりと一致させることです。画像とコピーとの間にテーマのズレがある場合、ユーザーには違和感や混乱が生じます。画像を使う場合、「コピーのテーマを的確に表現できているだろうか」という点から客観的に見直して、デザインに一貫性のあるサイトを作りましょう。

画像とコピーの一致

トレンドサイトはモジュール式で作る

最後は、トレンドサイトのデザインについてのポイントです。 スマホサイトは大きくいくつかに分類することができますが、最近注目されている中の1つが、トレンドサイトではないでしょうか。トレンドサイトを作る場合は、ブロックのようなグリッドで構成するモジュール式で作るのがオススメです。なぜなら、ユーザーが容易にコンテンツを理解できるようになるからです。トレンドサイトは頻繁に新しい情報が追加されていきます。これらの情報を追加する度にバラバラのフォーマットで掲載していては、ユーザーが1つ1つのコンテンツのテーマや内容を理解するのに時間がかかり、ストレスを感じてしまいます。 整理し、型を決めてデザインすることで、ユーザーはストレスなくコンテンツを選び、閲覧できるようになるのです。

トレンドサイトはモジュール式で

いかがでしたか。ハイクオリティなデザインのスマホサイトを作るために、知っておくべき4つのポイントをご紹介しました。これらをベースにそれぞれのデザイナーの好みや特徴を活かすことで、オリジナリティのあるスマホサイトになっていくでしょう。
これらのポイントをおさえ、よりハイクオリティなスマホサイトを目指して設計を考えてみましょう。

関連記事

印象に残るオシャレなヘッダーデザインとは

印象に残るオシャレなヘッダーデザインとは

webサイトの顔とも言えるヘッダーは、サイト訪問者の心をつかむデザインである必要があります。サイト訪問者の心をつかむような、インパクトがありながらも、オシャレでセンスのいいヘッダー。デザイナーになったばかりの人には少しハードルの高いテーマかもしれません。 ここではクライアントが喜んでくれるであろう、印象に残るオシャレなヘッダーの例を紹介しますので、是非参考にしてみてください。   アイキャッチを組み込んだオシャレなヘッダー アイキャッチとは見ている人の注意を引くためのものを指す言葉です。ヘッダーのアイキャッチの手法としてよく使われる3種類を紹介します。 インパクトによるアイキャッチ 色によるアイキャッチ アイコンやロゴによるアイキャッチ 最もアイキャッチとして強いのはインパクトのあるデザインですが、派手なヘッダーをオシャレに仕上げることはとても難易度が高いため、デザイナーとしての経験が短い人にはオススメできません。そこでデザイナーになりたての人の参考になる、色やアイコン、ロゴによるアイキャッチを得意としているのがGoogleです。Googleのヘッダーはとてもシンプルですが、サイト訪問者の印象に残るヘッダーの良い例です。飾るものをできるだけ少なくし、シンプルなアイキャッチだけで主張するのが最近の流行にもなっています。 デザイン by bearbrick デザイン by don-armagadon デザイン by KR Designs   ターゲットを意識して派手すぎないヘッダーを ヘッダーでターゲットになる人に注目してもらうことばかりを考えると、主張ばかりが強いヘッダーになりがちです。ヘッダーはあくまでも看板なので、そのサイトが何のサイトなのかを知ってもらうためにあります。最小限の装飾でサイト訪問者の心を掴むことができればよいのです。 派手なデザインのヘッダーは印象に残りやすく、わかりやすいことが多いため、デザイナーとしては採用したくなるのですが、サイト訪問者は何度もサイトを訪れるうちに、次第に派手なデザインを「うるさい」と感じてしまうでしょう。また、派手なヘッダーはサイト全体のイメージを崩してしまう可能性もあります。サイト全体のバランスを崩さない程度に、一番伝えたい内容だけを強調するようにしましょう。 デザイン by Janneke デザイン by ogorinac デザイン by Janneke   Webサイトとの調和がとれたデザイン どれだけオシャレなヘッダーを作ってもwebサイト全体のデザインに合っていなければ、クライアントに差し戻される可能性が高くなります。ヘッダーのデザインをするときは、配置するサイト全体を確認して、ページに馴染むデザインになるように心がけましょう。 サイト全体がフラットデザインで作られているのにヘッダーがリッチデザインになっている場合や、暖色系のサイトに寒色系のヘッダーを組み合わるなどでデザインを行うと、サイト全体がちぐはぐな印象になってしまいます。 サイトのカラーに近い色、近いトーンの色を使う サイトのコンセプトをしっかり聞き出して作成する 上記の2点を意識してヘッダーのデザインを行いましょう。自分が作りたいデザインのヘッダーを作るのではなく、サイト全体にどのようにフィットさせるかを考えてデザインしてください。 デザイン by milajones デザイン by MercClass デザイン by Slaviana   インパクトのある見出しを有効活用 ヘッダーにキャッチコピーのような見出しを使用することで、サイト訪問者の興味をより引き立てることができます。本屋に並ぶ本の多くには、思わず手にとってしまいたくなるような帯がついていますよね。あの帯だけで本の売上が10倍変わることもあるそうです。ヘッダーの見出しは本の帯のようなものだと考えてください。 例えば、「美味しい珈琲屋」という見出しはデザインによっては映えますが、インパクトが弱いためサイト訪問者の心に響かないでしょう。そこで、「創業20年 愛され続ける珈琲屋」と言葉を変えるだけでもイメージが大きく変わります。さらにイメージに合ったフォントに変更すればさらに効果は高まります。 ヘッダーを配置するサイトの強みやメリット、特徴からキーワードをいくつも選び出し、特に強調したいものを組み合わせてサイト訪問者の心をつかむ見出しを作りましょう。 デザイン by KR Designs デザイン by fortunefaded デザイン by Kristopher P. 印象に残るオシャレなヘッダーデザインは、サイトの特徴をしっかりと表現しつつも、サイト全体にうまく溶け込みます。見た目の奇抜さや装飾を出来るかぎり省きながらも、アイキャッチやキャッチコピーを効果的に使うことで、サイト訪問者の印象に残るデザインに仕上げることが可能です。ぜひ、この記事を参考に、ヘッダーデザインにチャレンジしてみてください。

クリック率をアップさせるオシャレなボタンデザインとは

クリック率をアップさせるオシャレなボタンデザインとは

クリック率やコンバージョン率が重要なサイトのボタンは、「購入する」「資料請求」「参加する」など、企業の収益や集客に直結することから、つい目立たせたくなってしまうかもしれません。しかし、いかにも「押してください」とアピールされたボタンデザインでは、逆にユーザーは引いてしまう傾向があります。ここでは、オシャレでかっこいい上にユーザーのアクションを促せるボタンのデザイン例を紹介します。 見慣れた記号で生み出すオシャレなボタン デザイン by JohanP インターネットが普及して年月が経った今では、ネットショッピングや情報収集をする際に、ボタンを瞬時に見つけたり、どう操作すればどうなるかすぐに理解できたりというような、「条件反射」でアクションをするようになってきました。 そのため、ユーザーが一目見て「このボタンを押せばこうなる」と理解できるようなボタンデザインである方が、ストレスなく利用できるでしょう。ボタンデザインの中でも、見慣れた記号やモチーフをベースにデザインされたボタンは、アレンジしても「このボタンを押せばこうなる」と伝わりやすくなります。 例えば、カートのマークをクリックすれば「購入する・カートに入れる」、三角を丸で囲んだマークは「動画が再生される」などが挙げられます。こうした一般的に使われている記号をオシャレにデザインすることで、ユーザーのアクション促進とビジュアルの良さを両立させたボタンになります。 デザイン by Secret99 次アクションが一目でわかるデザインを デザイン by DiegoIsCo ボタンであることがわかりやすい立体的なデザインは、高齢者に向けたサイトや親しみやすさを狙ったサイトには合っても、オシャレでクールな雰囲気のサイトにはあまり馴染まないかもしれません。 そんなときは、別の方法で「ボタンであること」がわかるようなデザインにするのがオススメです。代表的なデザインとして挙げられるのは、カーソルを乗せると色が反転するデザインや、ボタン内の写真が変化するロールオーバーです。 また、ユーザーがボタンを押した次のアクションを予測できるようなデザインにすることも大切です。ボタンをクリックしたら申込みフォームになるのか、購入画面になるのか、別のサイトへリンクしているのかなど、わかりやすいデザインにしましょう。 次の予測ができないサイトはユーザーにストレスを与えやすく離脱されやすいので、ボタンだけである程度次ページが予測できるナビゲーションにしたいものです。世界中で共通して広く使われているマークを利用する他、文字で表現する方法などもあります。その場合は、日本語よりも簡単な英語でのデザインの方が見やすいため、よく使われる傾向があります。 デザイン by thydesigns デザイン by TJCD フラットなデザインの中にでも映えるボタンのデザイン デザイン by IuliaG オシャレでかっこいいサイトで比較的使われているのがフラットなデザインのボタンです。フラットなボタンはシンプルなデザインのものが多く、ボタンとして目立たせるには難易度が高いかもしれませんが、そんなときには同系色を活用するテクニックがオススメです。 例えば、サイトのイメージカラーと同じフラットな単色ボタンを、ロールオーバーで彩度を変えた同系色に変化させることで、クールな印象をキープしながらも、ボタンとして認識させることが可能です。アイキャッチとなる写真をボタンとして使い、マウスポインタを乗せるとモノクロや反転になるデザインもオススメです。 デザイン by schabo ユーザーの目を奪うオシャレなボタン作りを デザイン by JhEign つい好奇心が湧いて押してしまうような、閲覧する人々の目を奪うオシャレなボタンを作るためには、オリジナリティのあるユニークなモチーフの追求と日々のデザイントレーニングが必要です。 イラストに自信があるなら、ボタンに使うモチーフを自分流のタッチで描くのもオススメですし、手軽にかっこいいボタンを作るなら、布や紙、マテリアルのテクスチャーを活用するのも良いでしょう。例えばジーンズショップのサイトなら、デニムのテクスチャーにステッチを施すだけでもオシャレなボタンになります。 このように、サイトが紹介しているものがイメージできるようなモチーフの研究は、ユーザーの購買意欲を刺激しやすく、本来の目的である「コンバージョン率」のアップにもつながるかもしれません。 デザイン by Grace Coote   デザイン by harsh.spy4 オシャレでかっこいいデザインは「引き算」が鉄則ですが、そこに「ボタン」とわかってもらうための工夫も取り入れる必要があるため、難易度が高いと感じるかもしれません。しかし、「サイトの商品やサービスに興味を持っているユーザーのアクションを促す」という目的を常に意識していれば、アイデアが浮かびやすくなります。ぜひかっこいいサイトの中でキラリと光るボタン作りを研究してみてください。

つい目を向けてしまうオシャレでかっこいいカタログデザイン例

つい目を向けてしまうオシャレでかっこいいカタログデザイン例

デザイナーなら挑戦したいであろう、オシャレでかっこいいカタログの制作。しかし、そういった類のカタログ制作に関わったことがないと、実際に制作するのはハードルが高く、難しいのではと思っていませんか? 実はオシャレでかっこいいカタログをデザインするのはそんなに難しくありません。これもデザインテクニックの一つですから、ある一定のルールが存在するものです。 今回は、そんなオシャレでかっこいいカタログが作成できる、ルールとテクニックをご紹介いたします。 なぜファッションカタログはオシャレでかっこいいのか? ファッションカタログがなぜオシャレなのでしょうか? そのカタログを構成したデザイナーがそう思ってもらえるようなデザインにできているからなのですが、その一方で、読者がオシャレだと思うファッションカタログを手に取っているからだと考えることも出来ます。つまり、そのカタログのデザインをオシャレだと思う読者の人々が引き寄せられているとも言えるのです。 オシャレでかっこいいデザインは、読者それぞれによって異なるのです。ただし、カタログのデザインは読者がオシャレでかっこいいと思う表現である必要があるということは大前提として理解しておく必要があります。 読者ターゲットを絞り込んだデザインを採用する カタログに掲載したい内容をよく理解し、どの層の読者をターゲットにするかを決めることは、とても重要なことです。なぜなら、ターゲットを絞り込むことで、どういったデザインを採用すればよいかをより明確に決めることができるからです。 例えばある楽器メーカーの商品カタログで、扱っている主力商品がDJ機材であれば、読者ターゲットは現役のクラブDJやミュージシャン、またはそれに憧れているクラブやフェス好きの顧客予備軍に絞り込むことができるでしょう。この例であれば最近流行している音楽イベントのフライヤーやホームページからヒントを参考にできます。 このようにターゲットを絞り込むことで、ターゲットの読者がオシャレでかっこいいと思っているデザインを採用しましょう。 主力のイメージは大きく配置してインパクトを与える ここでも商品カタログを例に話を進めます。 まず主力のイメージ画像を決めましょう。そして、カタログ構成の中に、その主力イメージを出来るだけ大きく(もしくは、はみ出してしまうくらい)配置した専用ページを作成します。 これは出来るだけ冒頭のページに見開きの形で採用することが好ましいです。なぜなら、そのヴィジュアルインパクトがそれ以降のページまで余韻を残して、全体的にオシャレでかっこいいカタログだったと思わせる効果を期待できるからです。 このテクニックはアパレルブランドの商品カタログでよく使われているので、もし手元にそういったカタログがあれば、そういう視点で観察してみるとデザイナーとしての感性を養う良い勉強になるのでオススメです。 現在のデザイントレンドを取り入れてみる 全体的なデザイン構成としてトレンドを取り入れているかどうかは、カタログの印象に大きく左右するため、絶対におさえておきたいポイントです。 例えば、現在のデザイントレンドのひとつがフラットデザインです。装飾やオブジェクトにグラデーションやドロップシャドウなどは多用せず、シンプルで落ち着いたものにしてあげることが好ましいデザインとされています。 また、フォントにもトレンドがありますので、色々なカタログやデザインを観察して常にトレンドは頭に入れておくようにしましょう。 以上がオシャレでかっこいいカタログデザインを製作するルールとテクニックになります。多くの消費者はトレンドに沿ったデザインを好む傾向があるため、最後にご紹介した「トレンドを知っておく」ということはカタログ製作だけに関わらず、デザイナーとして生きていくうえで絶対に欠かせないポイントです。ベースとなるルールとテクニックにトレンドというスパイスを効かせて、是非オシャレでかっこいいカタログをデザインしてみてください。

最新のデザインコンペ

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