最終更新日:2017年2月16日Googleの「スマートフォンに対応してないホームページは検索順位を下げますよ」や「スマートフォンからの検索利用者数がパソコンからの利用者数を超えた」などの発表もあり、ホームページはモバイルファーストにシフトしてきています。ホームページ作成に携わる方々は構築の仕方や、ひいてはボタン用の画像ひとつとってもスマホ表示時のデザインを意識して作成しているかと思います。以前はパソコン用のデザインカンプを作成して、その延長でレスポンシブ時のスマホ用のデザインカンプを作成しておりましたが案件によってはスマホ用のデザインカンプを作成して、その延長上、または別物としてパソコン用のデザインカンプを作成する案件も増えてきました。イラレなどでスマホ用のデザインカンプを作成するとき、皆さんは、どのようなことを意識されて作成されていますか?デバイスが多様化してきた現在、スマホ用のデザインカンプを作るときには、ある程度のガイドラインを決めておかないと、コーディングに入った時に、とんでもなく時間がかかってしまったり、カンプ上ではうまく表現できるものの、Web上ではレイアウト崩れたり、画像が荒かったりと、トラブルの原因を作ってしまうことがあります。今回はスマホデザインの各部サイジングについて取り上げます。最良の作成の仕方は人によって違いますし、もちろん案件によって変わりますので一例として、参考にしていただければと思います。※イラレはピクセルグリッド設定、単位はピクセルを使用するのが前提です。1アートボードの全体幅を決める。使用する画像は偶数値をとる。スマートフォンのデザインカンプ、アートボードの全体幅は例外を除き、640pxで作ります。この640pxというサイズはiPhoneのレティナディスプレイの横幅の最小解像度に合わしているもので、実際に表示されるviewport(device-width)は320pxです。画像は、実際のサイズの2分の1のサイズでレンダリングされますので、デザインカンプ上では偶数値で作られていることが望ましいです。理由として320pxで作ったものは160pxで表示ということになりますが、319pxで作ったものは159pxで表すか、160pxで表すかコーディングする際に悩んでしまうからです。自分でデザインカンプを作成して、自分でコーディングするのであれば、まだ良いですが、チームで動いている場合コーディングする人にこのような悩みを発生させるのは宜しくないですね。元々のデザインカンプの全体のレイアウトや余白が1pxずれてしまうことになりますね。写真などはまだよいですが、アイコンやボタンなどは著しくバランスが崩れます。このようなことを繰り返してしまうと顧客からOKの出たデザインカンプと比べ、実際に作成されるホームページ上ではどんどん違うデザインになっていってしまいますので気を付けましょう。2余白や線なども偶数値をとる。余白・線なども偶数値を意識します。5.5pxなど小数点以下を設定出来なくはないですが、このような値を指定しまうと、表示するブラウザによってレンダリングが変わってしまうため、予定していたデザインと差異が出てしまいます。※ブラウザによって表現できる限界値があったりします。marginやpaddingなどの余白、borderなどについて・・・640pxの幅で作られたアートボード上で、例えば6pxの線は、CSSでは3pxで表現します。デザイン上5pxの線はどう表現しますか?2pxや3px?ひいては2.5pxで表現しないといけない為、web上ではレイアウトが変わってきてしいまいます。画像同様に余白、線も偶数値を意識してデザインしていきましょう。3最小フォントサイズ、最小ボタンサイズを決める。なるとフォントサイズ、ボタンの大きさ、これも当然意識しなければなりませんね。アートボード上で16pxや15pxのフォントサイズによるデザインは危険です。16pxはweb上で8pxで表現しようと思っても、10pxより低い値はブラウザによって表示のされ方が変わってしまい、デザインカンプでは範囲内で収まっていたテキストも、web上ではレイアウト崩れを起こしてしまいます。15pxなどの奇数値のフォントサイズも前述のように、2分の1にしたときにレイアウトが変わってしまうため避けるべきでしょう。最小フォントサイズは22px、できれば24px以上を意識してテキストはデザインされるべきです。ボタンサイズに関しても、最低ラインを決めておいた方が良いでしょう。これは、スマホ使用者のユーザビリティを意識した配慮です。Googleのモバイルフレンドリーテストなどでチェックできますが、一般的な男女の指のサイズでタップ出来るボタンの大きさを考えます。ボタンとボタンの間の余白はスマホユーザーのために最も意識しなければいけない箇所ではないでしょうか。ボタン最小サイズはデザイン上では幅・高さ88px以上、web上では幅・高さ44px以上を意識しましょう。これを満たしたうえで、偶数値作ることもお忘れなく。以上を具体的な数値を含めてまとめてみると1スマホデザインのアートボードの全体幅は640px。2スマホデザインの余白や線などは偶数値で作る。3スマホデザインのフォントサイズは24px以上、最小ボタンサイズは88×88以上で作る。Vol.44」フライヤーVol.43からフライヤーを任されました。その意味は言葉にはされなかったけど、僕に伝わってる。Saltホームページ公開スタート!KrazySaltが歌い続けるなら、僕だってその支援のため創りつづけるさ。ホームページリニューアル2015年~16年にかけての5期生オーディション開催に合わせての大規模リニューアルでした。使用CMSはwordpress。今某マイミクさんのMyspaceの配置やデザイン編集を研究中なんです。Vol.09」フライヤークール且つ情熱的なイベントのフライヤーを作るに当たって、そのまんまクール且つ情熱的に描いた。その1見て損はないと思うので気になった方はアクセスしてみてください。DAYS」「君想歌~キミオモイウタウウタ~」クレソル時代にループで聴いてました。カトリノ」ホームページ制作カトリノでは、増え続ける空き家のリノベーション再販事業にも取り組んでいます。僕らが誘ったんじゃなくて鳴海くんが、僕らを誘ってくれたのよね。物怖じせずどんどん前に来る感じ、行動力あってとても刺激的!若いのに大したもんです。グフカスタム視点に併せて相方フォビドゥン視点もどうぞ。キャラ対なりの参考になれば幸いです。メンキャリは働いただけ残業代出るから良いよね。グフカスタム視点に併せて相方フォビドゥン視点もどうぞ。キャラ対なりの参考になれば幸いです。最近毎日アップできてる!フォビの格CS怪しい。前マキブオン家庭版の件、アーカイブで観ました。需要は確実に高いと思いますし。ぼくは相方がゲーセンにいる限り、横に座って一緒にゲームやりますね。楽しみ方は人それぞれ。グフカスタム視点に併せて相方フォビドゥン視点もどうぞ。キャラ対なりの参考になれば幸いです。グフカスタム視点に併せて相方フォビドゥン視点もどうぞ。キャラ対なりの参考になれば幸いです。グフと本気で向き合ってくれる相方に感謝です。#EXVS2乙街道の管理人はホームページとか作る仕事をしています。制作依頼やご相談もお気軽にどうぞ。僕らが誘ったんじゃなくて鳴海くんが、僕らを誘ってくれたのよね。物怖じせずどんどん前に来る感じ、行動力あってとても刺激的!若いのに大したもんです。グフカスタム視点に併せて相方フォビドゥン視点もどうぞ。キャラ対なりの参考になれば幸いです。メンキャリは働いただけ残業代出るから良いよね。グフカスタム視点に併せて相方フォビドゥン視点もどうぞ。キャラ対なりの参考になれば幸いです。最近毎日アップできてる!フォビの格CS怪しい。前マキブオン家庭版の件、アーカイブで観ました。需要は確実に高いと思いますし。ぼくは相方がゲーセンにいる限り、横に座って一緒にゲームやりますね。楽しみ方は人それぞれ。グフカスタム視点に併せて相方フォビドゥン視点もどうぞ。キャラ対なりの参考になれば幸いです。グフカスタム視点に併せて相方フォビドゥン視点もどうぞ。キャラ対なりの参考になれば幸いです。グフと本気で向き合ってくれる相方に感謝です。希光デザイン事務所.。