スマートフォンサイトのデザインと発見

コミュニケーションを取る際に必須となっている携帯電話。自分が中学生時代から普及し出し、今や小さなPCと思えるほど便利なアプリや機能が盛り込まれています。本当に「スマートなフォン」という名が相応しく思えるレベルまで来ているのではないでしょうか。

そのような「スマートなフォン」の画面をデザインする中で、私はこのデバイスが表情をくるくる変えることに気づきました。その変化に対応することで沢山の発見があり、それらを踏まえた上でデザインができあがるように思います。

発見はデザインする上で新鮮で楽しくもあり、悩ましい部分もあります。今回のコラムではその発見の中の3つを取り上げたいと思います。

縦長と横長の画面

スマートフォンでは、画面の向きを変えてページを見ることができます。

縦向きにも横向きにもできるので、ヘッダー、タイトルの部分のデザインは横長になったときのことを想定したデザインでなければなりません。対応するかしないか、という所はお客さまと決めるのですが、最近ではどちらにも対応した画面を作成するケースが多くなっています。

PCのモニター上で作成していると、縦長の画面ばかりを想定して作成してしまいがちですが、横長の画面も頭の片隅にでもいいので、残しておく必要があります。

縦長では見えなかった部分が横長になると見える、そんな考え方でデザインすると楽しくなることを最近発見しました。

色

モバイルは持ち運びができるので、屋外でも見られる可能性があります。よって、外で使用されることを考えたとき、配色にも気をつける必要が出てきます。

PC上で作成した色をスマートフォンで見ると、薄く見えたりくすんで見えたり、同じ色でも見る端末が違えば異なって見えてきます。

外で見ることを想定するなら、コントラストの強い配色をして文字を読みやすくしたり、彩度を上げて作成したりと、工夫が必要になってきます。

例えば、asahi.comなどのスマートフォン向けのニュースサイトでは、背景色に黒を使用し、文字を白抜きにしています。コントラストが強めのデザインにすることで、文章を中心とする画面の読みやすさを確保しているのです。この例から、小さな画面であれば、黒い背景などのチャレンジングな色合いが逆に読みやすさに繋がることが分かります。

また、PC向けには暖色を中心とした色味で作成されているサイトで、スマートフォン向けには寒色を中心としたサイトを制作した例がありました。PCサイトと見た目が違っていても、寒色系の色でまとめたことで、小さな画面でもスッキリと見やすくなりました。

このように環境によって最適な色のパターンが異なっており、スマートフォン向けのサイトを作成する上では、自分が考えていなかったような配色が正解になることもあるかもしれません。

細かい画面でもきれいに見せる

iPhone 4や最近のスマートフォンの画面は、あのような小さな端末なのに、PCよりもずっと細かく表示されるようにできています。そのような画面でデザインをきれいに見せるために、実際のデザイン作成時には大きく作ります。

しかし、PC上で大きく見たときと実機で見たときにやっぱり感覚が違うので、「確認作業」が必須です。このときに客観的に画面を見ることで、修正すべき点が見えてきます。

例えば、ボタンの押し間違えがないくらいの間隔、読みやすい文字の行間、そういった点をチェックしつつ、Try ＆ Errorで、デザインを修正していきます。

感覚は常にPowers of ten^※、拡大して細かい所を合わせて、縮小して全体を見る作業の繰り返しでデザインを洗練させていきます。

まとめ

今回触れた発見は3つですが、他にも沢山の発見があり、日々スマートフォンの画面を試行錯誤して作成しております。

小さい画面におさめるとこんなに見た目や、掲載する内容が変わることに毎日驚きがあり、くるくる変わるデバイスの画面に今後はどうなっていくのか、近い未来が楽しみです。