スマホのデザインを考える

最近スマートフォンでのUI設計やデザインを考える上で、私自身の引き出しが枯渇してきていると嘆く一方、素敵なデザインが増えてきているのも事実です。MFIに向けてということもありますが、スマホでのリーダビリティ(読みやすさ)を勉強していきたいと思います。今回はそんな私の独り言です。

美しさは大事です

ふわふわ

フォントとその配置

フォントに関しては、以前も述べたことはありますが、最近私が設計しているのは15~16px(11.25~12pt)が多いです。但し、デザイン上格好つけたい場合は小さめのフォントにします。やはりスマホサイズは横幅が狭いため、文字そのものを世界観演出したい場合は、極力横に文字数が多い方が格好良いです。

フォントサイズの印象

ちなみに、フォントに関しては様々な方々が追求されていると思います。特に以下に記載されているのような(読みやすさを追求されている方の)記事は大変勉強になります。

行間
ウェブの長文記事のライン高は、150%〜200%が良いと思います。。グリッド的なデザインの整合性を考えた場合、150%あるいは200%での設計がもっとも汎用性があるのではないかと考えています。

引用)読みやすさのデザイン備忘録

もちろん、行間だけでなく、<div>内の天地左右の余白や書体等によっても雰囲気や読みやすさは変わりますので、読者層とガバナンスに合わせて追求していくと良いでしょう。また、こういったものを感覚に依存してデザインしようとすると、ブレちゃっていつまでも決められないので、A/Bテストやアンケート等で検証しながら決定すると良いです。

ふわふわ

ナビゲーションUI

最近は、感動的な動きをするナビゲーションや展開も多く、単純なハンバーガーメニューというのも少なくなってきています。以下のサイトページをご覧ください。

こういったデザインは何も考えずに見ると「ふーん」と思う程度かもしれませんが、UIやデザインを考えたりする人ほど、見ると感動するのではないでしょうか。

是非、こういうデザイン展開を真似てみたいと思いますが、実際に導入するには2つの要素が不可欠だと思われます。

そのデザインが必要なのか

サイトデザインを設計する上では、UIを設計しなければなりません。UIを設計するにはサイト構造(ディレクトリ&内部リンク構造)と情報構造(サイトページの広がり方)が決定していなければなりません。つまり、一見格好良いデザインでも使い勝手が良くないと、サイト本来の目的である集客と滞留には繋がらないはずです。ですので、ただ真似るのではなく、構築するサイトに必要なデザインかどうかを考えなくてはならないでしょう。
ただのブログなのに、大袈裟なデザイン展開があっても鬱陶しいだけですからね(笑)。

実現できる人材は充分か

さらに、デザイナーだけでなくプログラマーの能力も問われます。こういった滑らかな挙動を実現するには相当なプログラミングスキルを要すはずです。中途半端な経験でプログラミングすると、挙動がカクカクして、変な感じになってしまうこともしばしば…(笑)。したがって、(社内でも社外でも)どういうスキルのプログラマーが実装担当なのかも考え、具現性を確認してから実装を検討したほうが良いと思います。

そう考えますと、やはり情報設計に合わせたUIやデザインを行った上で、優秀なプログラマーに出会えるかどうかがポイントですね。

ふわふわ

挑戦したいこと

以上のように、色々な方法論は分かっていても、自分のサイト制作を行っていく上でスマホUIを設計するのは本当に難しいです。特にレスポンシブウェブデザインを想定してデスクトップの設計から入るとなおさら難しいでしょう。
でも、だからこそスマホファーストなデザインとナビゲーション、感動的な挙動展開に挑戦してみたいですね。

以上、独り言でした(笑)。


関連記事

グリッドデザインについて

近々本ブログをリニューアル予定です。目的としては私個人の仕事に対する向き合い方が変わってきたことと、仕事自体がニューノーマルになることで改めて気合を入れて仕事に取り組んでいこうと思ったこと、後は気分転換です(笑)。イメージとしてはNeumorphism(ニューモーフィズム)デザインで全体を形成しつつ ...(続きを読む)

フィッシングメールが増え始めてる?

最近、大手企業を名乗ったフィッシングメール(なりすまして個人情報を取得しようとしている)が多いようです。かなり巧妙で、しかもそれらしいことが記載されているので、皆様も充分にご注意ください。 フィッシングメール例 年明けの心の隙を狙ったなりすましメールが多いです。まずは以下のメールをご覧ください。 三 ...(続きを読む)

有益情報を発信するツイート紹介

最近、色々なサービス展開上、Webページデザインの勉強をしている私です。とはいえ技術的なコーディングやプログラミングではなく、市場参入視点やユーザーへのコンバージョンやエンゲージメント視点での勉強です。これに関しても終わりがなく、且つ伝えたい内容によってUIデザインは変化するので、常にインプットが必 ...(続きを読む)

PDRがしっくりくる

先日、SEOや新規ビジネスを考えている中、「やっぱりPDCAだとうまくいかないなぁ」と思いまして...PDRにしてみたところうまく回りだしたので、そんなPDRをご紹介してみたいと思います。 PDRとは PDRとは2011年頃にハーバードビジネススクール(HBS)のLinda Annette Hill ...(続きを読む)

コメントを書く

コメントは承認から反映までしばらく時間がかかる場合がございます。メールアドレスが公開されることはございません。