WEB制作におけるポイント・Tips集①

「webデザイン必携。プロにまなぶ現場の制作ルール84」という本を毎週4〜5章ずつ読んでまとめています。

読んでいる本・はじめたきっかけなどは、こちらをご参考にどうぞ！

この本、全84章あるので4ヶ月間、週一更新目指しております（長い。。。！）気長にお付き合いいただけると嬉しいです。

---------------------------

という記事を12月に書きまして、半年かかってしまいましたが
やっと本をまとめおわりました。。。！
この本を読み始めたばかりのころはWebデザインの経験値が全然なかったのですが、今ではお仕事で少しづつ作れるようになってきました。。。！
基本的なことが丁寧に掲載されていたので、本当にWebデザインを始めたばかりの人は現場でかなり使えるかと思います。
今回はその本の中でも「これは勉強になったなー」や「便利・・・！」と思ったものを3回にわけてまとめました！
それに合わせて今まで更新してきた記事も整理しました。
毎週読んでくださった皆様ありがとうございました！
勉強しながら記事をまとめるのは引き続き継続していくので、今後もよろしくお願いいたしますm（_ _）m

---------------------------

DESIGN RULE 05
ボタンのサイズが小さすぎると使えない

タップできるボタンサイズを意識しようという章では、「タップエリアの最小サイズは44px 以上」というgoogle・Apple のデザインガイドがあるというのは非常に勉強になりました。
デザインする中で、上記のボタンのサイズより小さくしたい場合は、「隣のボタンとの間隔を十分に離して誤タップを減らす工夫」をした方が良いそうです。

■ Apple ／ iOS ヒューマンインターフェースガイドライン　https://developer.apple.com/design/tips/jp/

■ Google ／ Material Design
https://material.io/design/

---------------------------

DESIGN RULE 05
明朝体でのWebデザインのデメリット

フォントを画面に表示する時、デバイス上でアンチエイリアスという処理がされて表示されるのですが、
Windows などはアンチエイリアスが弱く、縁がギザギザになったりするので明朝体のように線の強弱を用いる書体は表示が美しくできないという話でした。
ゴシック体だとアンチエイリアスが弱くても線の強弱がある程度一定なので読みやすく表示されます。
デザインでどうしても明朝体を使用したい場合は、見出しや大きめの文字に絞り、画像やSVG で書き出して使用するのが無難そうです。

---------------------------

DESIGN RULE 18
10ピクセル以下のデバイスフォントは指定に注意が必要

10 ピクセル以下のデバイスフォントは表示できないブラウザがあるという話でした。クロームは10 ピクセル以下は表示できないようです。
ルビなどでどうしても10px 以下を使いたいときは、強制的にcss で表示させる方法もあるようなのでエンジニアに相談しましょう。

---------------------------

WEB制作におけるポイント・Tips集②に続きます→