2018年 3月 の投稿一覧

レスポンシブwebデザインで参考にしたい事例10選

レスポンシブのweb制作で参考になる秀逸なレスポンシブwebデザインのサイトをまとめました。

単にレスポンシブに対応しただけでなく、随所にwebデザインのトレンドが取り込まれたり、ユーザビリティに配慮されたUIなど、特にクオリティの高い10サイトを紹介します。

メーカー・ECサイトの事例

サーモマグ

サーモマグ
http://thermomug.com/

シンプルなデザインながら、パララックス効果を使ってストーリー性をもたせ製品の魅力を表現しています。表の見せ方や動きのある背景など、細部にわたって決め細やかに作りこまれ、洗練されたイメージが伝わってきます。

パックスナチュロン

パックスナチュロン
http://www.paxnaturon.com/

白と緑を基調としたナチュラルな色使いと丸みを帯びたデザインで、やさしく安心感のある印象が残ります。
アニメーションを用いた演出も心地よく、天然由来の安心・安全な製品の魅力が伝わるデザインです。

Ringly

Ringly
https://ringly.com/

リング型のウェアラブルデバイスの製品サイト。
女性向けのファッショナブルなガジェットが、簡潔な情報と洗練されたデザインにまとめられ、アクセサリーのおしゃれなイメージと便利なガジェット機能が自然に伝わってきます。

コーポレートサイト・採用サイトの事例

みずほFG:新卒採用情報

みずほFG:新卒採用情報
http://www.mizuho-fg.co.jp/saiyou/index.html

整然としたグリッドデザインで、情報がシンプルでわかりやすくまとまっています。
スマホの画面では、メニューの中からプレエントリーとマイページのボタンが優先的に配置されるなど、各デバイスに向けた配慮も見てとれます。

Yahoo!JAPAN 採用情報

Yahoo!JAPAN 採用情報
http://hr.yahoo.co.jp/

トップでは背景動画を用いたりカーソルをあてると回転する人物写真などの演出があり、WHAT IS THIS NYMBERのページではピクトグラムを使ったフラットデザイン、社長メッセージではメリハリの利いた個性的なグリッドデザインなど、各ページに凝らした演出も目を引きます。

観光・旅行サイトの事例

福岡市公式シティガイド よかなび

福岡市公式シティガイド よかなびhttps://yokanavi.com/

ユーザが訪問した時間帯に応じてトップページ画像やオススメガイドが変化したり、スマートフォンを利用する旅行者に向けて現在地を起点とした検索機能を設けるなど、利用シーンを想定した情報提供で満足度を高める工夫が各所に見られます。

箱根湯本温泉 あうら橘

箱根湯本温泉 あうら橘http://www.aura-tachibana.com/

動画や写真をふんだんに使用しビジュアルを中心とすることで、リゾート旅館のイメージを直感的に表現しています。
白・黒のなかにコーポレートカラーの紫をアクセントで取り入れ、無駄を省いた和風な日本らしさも感じられるデザインになっています。

制作・開発サービスサイトの事例

アクセス解析の人工知能「AIアナリスト」

アクセス解析の人工知能「AIアナリスト」
https://wacul-ai.com/

アクセス解析の人工知能という一見難しく感じるサービスを、ポップなカラーと大胆なグリッド使いでわかりやすくすっきりとまとめています。
ユーザの知りたい情報が簡潔にまとまり、利用登録までの流れも非常にスムーズです。

Case 3D

Case 3D
http://www.case-3d.com/

斜めのラインがうまく取り入れられ、パララックス効果を利用した奥行きのある表現が楽しめます。広い余白にシンプルにまとめられたコンテンツ、コーポレートカラーのエメラルドグリーンの使い方など、優雅で清涼感のあるデザインにまとまっています。

デザイン事務所 SAGA INC.

デザイン事務所 SAGA INC.
http://www.sagainc.co.jp/

直線的で男性的な印象になりがちなグリッドを利用したタイルデザインをパステル調でまとめ、明るく軽やかな印象が残ります。
すっきりと余裕のある余白の使い方や、ブラウザのサイズを変えたときのタイルの動きも軽快で目にも楽しいサイトです。

モバイルフレンドリーテストでwebサイトをチェック!【レスポンシブ】

2016年5月、Googleから新しい「モバイルフレンドリーテスト ツール」が発表されました。
(参考:新しいモバイル フレンドリー テスト ツール

モバイルフレンドリーとは、Googleがモバイルでの検索結果を評価する際に用いている評価基準です。Googleでモバイルフレンドリーなwebサイトと評価されることは、SEOランキングにも影響がでてきます。
レスポンシブでwebサイトをモバイル対応した際は、ぜひこのツールでモバイルフレンドリーかチェックしてみましょう!

新しいモバイルフレンドリーテストの使い方

チェックはいたって簡単な3ステップです。

Step1 テストツールにアクセス

まずはテストツールにアクセスします。
テストツールは https://search.google.com/search-console/mobile-friendly から利用することができます。

Step2 分析

URLを入力してエンターを押します。ロボットではないことの確認ダイアログが出るので、チェックして分析を開始します。分析はそれほど時間もかからずに終わります。
mft-01

Step3 分析結果と修正方法の確認

モバイルフレンドリーなページと評価されると緑色で表示されます。
mft-02

モバイルフレンドリーが未対応の場合は赤で表示され、エラー内容と修正方法の確認も行うことができます。
mft-03

「エラーの修正方法を確認」のページへ飛ぶと、エラー内容についての詳細と修正方法が掲載されているので、モバイルフレンドリーなサイトとなるよう対応してみるとよいでしょう。

今後さらに新機能が追加される予定との発表もあり、ますます便利になりそうです。「モバイルフレンドリーテスト」を活用して、モバイルユーザビリティ向上の参考になれば幸いです。

スマホサイトのUI/UX 6つの基本ポイント【レスポンシブwebデザイン】

9011116378_32e56983e3_b

レスポンシブwebデザインでは、「モバイルファースト」というモバイルを起点とした取り組みも主流になるなど、ますますモバイルの重要性が高まっています。
レスポンシブwebデザインを実装する際、スマホサイトでも快適に利用してもらうために、気をつけておきたいUI/UXの基本をまとめました。

【ポイント1】 シンプルにすること

外出中や移動中に利用することが多くなるモバイルサイトは、容量を最小限に抑えた表示速度の高速化が必須です。
また、限られた小さな画面サイズで必要な情報を伝えられるように、無駄を省きシンプルにすることが重要なポイントになります。
見出しや文章は簡潔にして読みやすくし、クオリティの高い画像やアイコンを厳選したシンプルでスマートなデザインが求められます。

【ポイント2】 押しやすいタップ領域の確保

ピンポイントを的確にクリックできるマウス操作とは異なり、スマートフォンは指で操作するために、押し間違いのない最低限必要なタップ領域の確保が必要です。
最低7ミリの「88px」を最小(画面解像度が 326 ppi の場合)とし、つめの長い女性や男性の大きな親指での操作を考慮すると、それ以上のサイズで作成するのがよいでしょう。
(参考:モバイルアプリの最小タップサイズを考える

【ポイント3】 頻繁に利用するボタンは画面の下部へ

ユーザがどのようにスマートフォンを持つのかという調査結果から、約半数のユーザが片手で持ち、親指でタップしやすい範囲は画面の下部に集中していることが分かりました。

HoldPhones_Figure-1

HoldPhones_Figure-2

このことから、頻繁に利用するボタンやナビゲーションは画面の下部にするなどの配慮があるとよさそうです。
(参考:How Do Users Really Hold Mobile Devices?

【ポイント4】 適切な余白

小さい画面にたくさんの情報を収めようと詰め込みすぎるのはよくありません。
タップできるボタン同士がくっつきすぎて誤操作を招いたり、情報が読み取りづらく、必要な情報にたどり着くのが困難になってしまいます。
誤操作の防止、読みやすさを考慮した適切な余白をとることも重要です。

【ポイント5】 フォントとフォントサイズ

iPhoneでは「ヒラギノ角ゴPro W3」と「ヒラギノ角ゴPro W6」の2つの日本語フォントが利用できますが、AndroidにはBoldがないため「ヒラギノ角ゴPro W3」のみで制作し、Boldを用いないデザインをする必要があります。
フォントサイズについては、本文では20px以下のフォントサイズでは読みづらく、24px以上で作成が望ましいでしょう。それにあわせて読みやすい行間の配慮も必要です。

【ポイント6】 フラットデザイン

スマートフォンのサイトでよく見られる「フラットデザイン」は、上記にあるような無駄の無いシンプルな要素と構成のデザインのため、見た目を柔軟に調整するレスポンシブwebデザインと非常に相性がよいといえます。
また、華美な装飾や画像を必要とせずページ容量も軽くなるというメリットもあり、レスポンシブと相性のよいフラットデザインの採用は、スマートフォンとの親和性も高く非常に合理的といえます。

最後に―スマホ表示はさらに重要に!

以上のようなポイントを踏まえ、最終的には実際に成果物を見て触って何度も検証することが、優れたUI/UXを達成するために不可欠です。
また、最後に2016年5月に新バージョンが公開された「モバイルフレンドリーテスト ツール」を利用して、Googleでどのような評価がされるかチェックしてみるのもよいでしょう。

このまとめが、ユーザ視点に立って良質なユーザ体験を提供できているかを確認する参考の一助になれば幸いです。