2017年5月18日 デザイン

スマホヘッダーデザインのトレンドと気をつけるべき5つのポイント

こんにちは。デザイナーの武本です。
スマホサイトのヘッダーをデザインする時に気をつけているポイントをまとめてみました。
 

1. ヘッダーの縦幅 – だいたい44〜50pxが標準

ヘッダーには多くの場合、リンクが配置されます。その為、タップ可能な最小領域とされる「縦幅36px」は必ず取りましょう。有名サイトを幾つか見てみると、だいたい44〜50pxくらいが標準となるようです。

 
 

 
 

 
 
私は、48px or 大きめなら60pxにする事が多いです。60pxを超えるとちょっと邪魔に感じるかもしれません。ですが、ヘッダーの色をページ背景色と同じにする・あるいは透明にするなどすれば、70~80pxのヘッダーでも邪魔に感じなくなる事もあります。

 
 

 
 

2. 情報を入れすぎない – 2、3要素に絞る

モバイル端末では、ヘッダー領域はかなり限られてしまいます。多くの要素をヘッダーに詰め込む事は、見た目によくないだけでなく、ユーザビリティも損なってしまいます。ロゴ + メニューアイコン + 検索アイコン(+ ECサイトなら、カートアイコン) くらいまでに抑えましょう。
 
 

3. アイコンは理解しやすいものを使う

「情報を入れすぎない」という事とも通じますが、アイコンの下に「メニュー」「検索」などのテキストを入れてごちゃごちゃさせてしまうのは良くありません。メニューには三本線アイコン、検索には虫眼鏡アイコンなど、多くのユーザーに馴染みのあるアイコンを使って、不要な説明書きを極力減らしましょう。
 
YoutubeやChromeなど、マテリアルデザインに基づいているページでは、三本線アイコンの代わりに丸三つのアイコンを採用しています。これは今後広まっていきそうですが、現時点ではまだメニューと直感するのは難しいかもしれませんね。

 
 

4. ヘッダーのレイアウト – メニューの位置は右?左?

メニューはヘッダーのどちら側に置けばいいのでしょう?どっちも同じくらいある印象なので、デザイナーの好き嫌いと言ってしまえばそれまでなのですが・・・
 
僕は、メニューを開いた際のデザインによってくると考えています。
 
例えば、メニューを開いた時のテキストが左揃えの場合は、メニューアイコンも左側に配置した方がバランスが良くなると思います。

 
 

 
 
対して、テキストを中央揃えにするのであれば、右側に配置してもいでしょう。

 
 
別の観点からも見てみましょう。サイトロゴがアイコン+文字となる場合には、ヘッダー中央に配置するとバランスが悪くなる事が多いです。そうすると、必然的にロゴは左・メニューは右というレイアウトとなります。

 
 
レイアウトについては「これ!」という事はなかなかいいずらいです。様々な要素を考慮しながら、最適なレイアウトを作りましょう。
 
 

5. 追従をさせるか否か

これもサイトによってはしまうのですが、個人的にはできるだけ追従させた方が良いと思います。ヘッダーのメニュー・サイト内検索はユーザーがサイトを閲覧する大きな助けになるだけでなく、サイトロゴを常に見せる事で印象に残る効果も期待出来るからです。
 
読み物系のサイトだと、追従すると邪魔になるという事も考えられます。そうした場合は、下にスクロールしている時はヘッダーは隠し、上にスクロールした時に表示されるようにするといいでしょう。

 
 
ヘッダーはページの中でもかなり重要な要素となるので、しっかり考えてデザインできるといいですね。ぜひ、参考にしてみてください。
 
 
____________

in-Pocket is presented by i3DESIGN

i3DESIGN(アイスリーデザイン)は渋谷とウクライナに拠点を構えるIT企業です。

「デザイン思考」の手法を取り入れたクライアントワークと、Google対応の自社クラウドサービス「GOMOBILE」の提供を行っています。

ビジネスの創出に必要な”右脳”であるUX/UI分野と”左脳”の開発分野が融合した組織で、サービスデザイン・UI制作・プロジェクト管理・設計・開発・品質管理・システム運用を一貫してご提供できることが、i3DESIGNの強みです。

お問い合わせはこちらから

 
 

TakemotoTakuya

t.takemoto

UI/UXデザイナー 美術大学を卒業した後、居場所を探してヨーロッパに行くも、居場所は見つからず帰国。その後すぐにアイスリーデザインに拾われ、今に至る。

この記事をシェアする