【2017年スマホ全盛】シンプル&ミニマルなWebデザインで意識すること伝わるホームページ

ここ2ヶ月半取り組んできたスマホサイトが、もうすぐリリースされます(非公開実績なのでお見せできないのが残念ですが)

今日は、スマホ対応サイト(レスポンシブ)をデザインする際に

  • ブランディングする方法
  • 意識するところ
について、デザイナー目線で書いてみました。

というのも、スマホサイトは、
————————————
☑️ 容量制限
☑️ 表現の制限
☑️ 画面サイズの制限
————————————
様々な制限があるため、
簡素になりやすい傾向があります。
 
お客様からご依頼いただく際も、
何気につまづきやすい点が
デザインが「シンプル」になってしまうこと。
 
というのも、せっかくなら、

  • デザインで個性を出したい!
  • 世界観を出したい
と考えてくださる方が多いからです。

デザインの力を信じていただけて、とっても嬉しい反面……
時代の流れを感じる場面でもあります(;_;)

シンプルなスマホサイトでブランディングするには

シンプルな要素を組み合わせてブランディングする際は、色・アイコン・余白・使う画像の統一感でまかないます。

変わったインターフェイスを使う必要はありません。お客様を迷わせるだけだからです。

クリエイティビティ(創造性)を発揮するところは、アイコンくらいでしょうか。
とはいえ、アイコンにもトレンドがあります。
2017年現在は、ライン状のシンプルなアイコンが流行なので、合わせつつデザインすると、イマドキなデザインに見えてくるはず。

このように、Webデザインは年々ミニマルに、そぎ落とされています。
デザインの中では、ブックデザインの世界に近いのではないかと感じています。

要素が減ると、ごまかしがきかなくなる

背景のストライプ(木)で間をもたせてます笑

わたしはイラストを描くのですが、余白を活かすより、余白をモノで埋め尽くした方が、ぱっと見ごまかしがききます。

子どもの写真を、スクラップブッキングで整理していますが、こちらも然り。
エンバリッシュメントと呼ばれる飾りをデコデコ盛り付け、かわいらしい柄の紙をこれでもかというくらい盛り付けるます。
すると、なんとなく間が持ってしまいます。

さて「にぎやかし」を使えないときは、何を意識してデザインするのでしょう。

デザインは「コンテンツ(伝えたい文書や写真、サービス内容など)を引き立てるための額縁」。
そう、装うのではなく「整え」「魅力を引き出す」デザインを考えるのです。

スマホサイトをデザインする上で注意するのはUI/UX

何もないからシンプルに見える部屋と、意識して研ぎ澄ませたからこそシンプルなアウトプットになった部屋はまったく違うモノです。

なんとなくシンプルなデザイン。
シンプルで整っているデザイン。
の間には大きな違いがあります。

それは、デザインの設計です。

設計があるか、否か

デザインとは、英語では設計のことをいいます。

  • そのデザインには、しっかりとした軸がありますか。
  • その余白にした意味は。
  • その色を使った意味は。
  • そのレイアウト、メニュー、文字サイズを採用した意味は何ですか?

すべて説明できてこそ、ちょっとした「遊び心」
が生きるのではないでしょうか。

注意したいのはユーザーエクスペリエンス(UX)

使い古された言葉ではありますが、お客様がそのサイトを訪れ、どんな経験をするか。
「ユーザーエクスペリエンス」を設計者(デザイナー)が意識したかで、お客様の印象が変わります。

エクスペリエンスとは、経験のことをいいますが、良い経験もあれば、悪い経験もありますよね。
デザインで解決できるのは、言葉にするまでもない、ちょっとした不快感を軽減すること。

ユーザーエクスペリエンスを高めるために、ユーザーインターフェース(UI)を強く意識する

シンプルだからといって、単調になりすぎないこと。
繰り返しのデザインは、4つ打ちの音楽のように心地よいこと。
ユーザーが迷わないデザインになっていること。
タップしやすいサイズ感であること。
デザインが美しいこと。

これらを意識するかしないかで、お客様のユーザーエクスペリエンスは劇的に向上すると感じています。

お客様はWeb制作者ではありませんが、日々企業の運営している、しっかりと設計されたサイトを見ています。
要するに目が肥えています。
何が悪いのか、何が気持ち悪いのかを言葉にすることは出来なくても、確実に感じています。
(映画をつくることはできなくても、映画の良し悪しを感じることがあるように)

UI/UXを高めるために、デザイン初期から操作感を共有する

実際の操作感が大切なので、「Adobe Experience Design(XD)※」を使ってデザインすると、デザインがそのまま動的モックになります。
ブラウザ上で確認できるプロトタイプや、動画をお客様にシェアすることができるので、操作感や実際のイメージを共有しやすいです。
※LPなど凝ったデザインには不向きです


blanc note. siteのプロトタイプ例(表示されるまでに、時間がかかります)

関係者各位に動きを確認していただいた上で、コーディングし動的モックにします。
(今回はシステムが絡む案件でしたので、早い段階で検証したかったこともあり)

あとは、実機で確認しながら、上がってきた議題を修正し、リリースへの段階を踏む。
こんな制作の仕方をしています。

おわりに

10年前は、作りこんだリアルなデザインが主流でした。
Webの世界ではミニマルデザインが台頭し、わかりやすい意味で、デザイナーの腕を見せられる所は減ってきました。
作り手側としては、「あっという間に流行が変わるんだなぁ」と改めて感じます。

手を掛ける場所が減ったように感じる昨今、何を意識して、デザインは作られているのかを、少しでも垣間見ていただけたなら幸いです。

なぜ、スマホ対応サイトはシンプルになるのかが気になる方は、こちらの記事もどうぞ。

これからのホームページはスマホファーストになる?

WordPressではじめるWEBの仕組みづくり7日間メール講座

オトナ女子にピッタリ!ブログ運営に集中できるWordPressテーマプレゼント
  • 「@luelue.com」というドメインからメールが届きます。あらかじめフォルダ分け設定を行って頂きますようお願い致します。
      Yahoo、hotmailなどのフリーメールアドレスでは受信できない場合がありますので、プロバイダーメールアドレスを推奨いたします。
  • メールアドレスは個人情報の観点より、プライバシーを遵守しております。
  • 本メール講座及びメールマガジンは利益の保証や損失の補填を行うものではなく、効果には個人差があります。
  • いつでも解除可能です。

Pickup Article同じカテゴリーの記事

ブログ一覧へ戻る