Topics

タバコのパッケージをデザインする時ね。

例えばグラフィックデザイナーの方がタバコのパッケージのデザインを依頼されたとしますね。
まずタバコ買ってきて、パッケージをなるべくきれいにばらして構造を分析（って程おおげさじゃないですが）しますよね。
どんな作りになっているか確認しないと「折」とか「糊付け箇所」とかわからないですからね。

それはさておき、illustratorとかphotoshopでデザインして、カンプを出すでしょうけど、やっぱり展開図にデザインを落として、プリントしてカッターで切って、実際にタバコを包んでみて、「どうかな？」ってことやって自分で確認しますよね。
お客さまに確認していただくのもその状態のものを持っていきますよね。
きっとそうだと思います。

ボクがデザイナーならばそうするし、客だったらそれをお願いするか、やってくれないなら自分でやって確認します。
平面で見ていて実際のタバコのパッケージの雰囲気を想像するわけですが、自分のあるかないかわからない想像力の限界にチャレンジするよりもちょっと手を加えれば実物に近いものができますから。

さて、スマホサイトのデザインです。

スマホサイトのデザインをされるデザイナーさんは、少なくとも自分でデザインしたデータをスマホで実際に表示させて確認しましょうね。
特に、「全体的に無理なく読めるフォントサイズになっているか」「タップ可能なエリアが適切なサイズか」「隣接するタップできる要素の間隔は十分か」などは最低限チェックしましょうね。お客さまのデザイン確認もスマホで見てもらいましょう。

Apple（iOS）やGoogle（Android）などのモバイルのガイドライン（UI、デザイン）は熟読とは言わないまでも、せめて「目を通す」くらいのことはしましょう。アプリとウェブサイトにおける違いはありますが、サイズの取り方やナビゲーションなどは同じ考え方が使えます。

デザイン的に周囲の要素との余裕があればマークアップ時にタップできるエリアを表示されるエリアよりも大きめに取るなどの工夫はしています。ですが、弊社でマークアップするスマホサイトの8割以上がマークアップ終わってから「文字を全体的に大きくしてください」「タップしにくいのでボタンを大きくしてください（または間隔をあけてください）」といったオーダーが入ります。
8割以上は決して大げさな数字ではありません。

もひとつ。

スマホサイトのデザインの幅はほとんど640pxで作っていただいています。
これはiPhoneのRetinaディスプレイ（iPhone4以降）の横幅の解像度に合わせていただいているもので、実際に表示されるviewportは320pxです。
そのため、画像パーツなどは実際のサイズの2分の1でレンダリングされます。これは多くのデザイナーの方が意識して作られていると思います。
なので、画像パーツは本来的には縦横のサイズが偶数値を取ることが望ましいです。写真などはいいのですが特にアイコン等はご注意いただきたい。ですが、画像パーツは切り出す時に調整が可能です。

問題は、ボーダーやパディングやマージンがデザイン上奇数の値を取っていることが結構あるということです。
640px幅で作られたデザイン上4pxの線はCSSでは2pxと書きます。ですが、デザイン上5pxの指定を我々は2pxにするか3pxにするか、これは迷うんです。困るんです。CSSのサブピクセル（それが小数点以下のピクセル数値で記述されるにしても％といった相対サイズで計算されるにしても）はブラウザごとにレンダリングが変わります。

なので、CSSでサイジングする要素の大きさは原則的に偶数値を取るようにデザインしていただきたいわけです。

そんなこと当たり前じゃん

と多くのウェブデザイナーの方が思われると思いますが、実際にあることなんですよ。
しかもケースとして少なくないんです。

スマホが新しいデバイスというのは、まあ、パソコンに比べれば新しいデバイスには違いありませんが、スマホサイトのデザインやUIについては書籍やオンラインのドキュメントもかなり充実してきています（玉石混交ではあるんでしょうけど）。

これからスマホサイトのデザインをされるという方、まだ経験が浅い（という自覚がある）方は特にそういった書籍やドキュメントに目を通してくださいね。

おそらくは、こういったデザイナーの方もスマホユーザーではあることが多いのでしょう。
ですが、デザインされるときにそのデバイスの特性やサイズ、使い方なんかが置き去りにされてしまい、PCサイトと同じ感覚で画面に向かってデザインをしてしまっているのではないでしょうか？

例えば、頻繁に使うメニューボタンは親指の可動域に配置されていないと使いにくいですね。
極端にわかりやすい例ですが、こういったことは実際にスマホでデザインを確認すればすぐにわかることです。

「当たり前じゃん」って思った方は「マジかよ？」って思うかもしれませんが、ひどい人は「マウスオーバーで画像切り替えてください」とか指示書に書いてあったりします。

「このボタン左においてほしい」とか「文字サイズを小さくしてほしい」という指摘をお客さまから受けたとします。
それが、ペーパーでのデザイン確認やパソコンの画面上での確認でそう言っているとすると、その指摘自体の妥当性も考えなければいけません。
「スマホの画面ですとこのくらいがいいと思います」とか「スマホだとタップしにくくありませんか？」とか、そういった検討は、実際のスマホの画面で確認した上で行ってこそ、適切な落としどころに持って行けると思います。

スマホもタバコも近いサイズですよね。手に持って使うモノは手に持って確認し、手に持って検討する。これやっぱり大事なんじゃないですかね。

よろしくね～