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

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

美しさは大事です

ふわふわ

フォントとその配置

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

フォントサイズの印象

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

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

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

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

ふわふわ

ナビゲーションUI

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

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

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

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

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

実現できる人材は充分か

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

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

ふわふわ

挑戦したいこと

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

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


関連記事
2014年に一世を風靡した(...私の中で)あのNAVERまとめがついに終了するそうです。残念とか悲しいとかではなく、なんとなく感傷的な気分になりましたのでご紹介しておきます。あの1件以来まるで目立たなくなってしまいましたが...それでも私はユーザーとして普通に見ていたんですけどね...。 終了の通 ...(続きを読む)
昔はマスメディアのことをAbove The Lineと呼び、インターネット周りをBelow The Lineと呼んでいた時代もありましたが...ついに2019年の日本の広告費の中でテレビCMをインターネット広告が上回ったようです。電通の「2019年 日本の広告費」により明らかになりました。マス系広告 ...(続きを読む)
Amazonのレビューが海外中心に荒れていることは皆さん結構ご存知の状況かと思います。競合他社による嫌がらせレビュー(わざと悪くコメントする)や自作自演(わざと良くコメントする)等、この専用事業者もいるほど横行しており、かなり問題視されている事象です。そこで今回は、既に有名なツールかと思いますが「サ ...(続きを読む)
私は頻繁にYahoo!メールを活用しているのですが、そのYahoo!メールにおいて、先日Yahoo! JAPAN側から「ブランドアイコン表示企業が増えました」という発表がございましたので、ご紹介したいと思います。 どんな内容? Yahoo!メールに届く送信元表示部分にファビコンのようなアイコンを付け ...(続きを読む)

コメントを書く

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