この記事について
この記事は、スマートフォン時代のWebデザインスクール や Web制作の基礎から学べる「Webコーディングスクール」 の資料制作をお手伝いして頂いているemiさんによる寄稿記事です。
emiと申します。USAGI DESIGN emi.というサイトでWebデザインやコーディング練習用のデザインデータを配布しています。普段はWebデザインやコーディング、メンターなどをしております。
初学者によくある共通点
Webデザインを学習中の方のレビュー（デザインのチェック）をしていて、いくつか共通のことがあることに気づいたのでまとめてみました。
- フォントの種類を使いすぎてしまう
- 最小フォントサイズは10px
- フォントの規約について
- ワイヤーフレームがあるとデザインがワイヤーフレームに寄ってしまう
- 余白はきちんとあるのに違和感がある
- ドロップシャドウやぼかしが濃いめ
- 写真素材の検索時のキーワードの選定がうまくできずに画像を探せない
フォントの種類を使いすぎてしまう
デザインを始められたばかりの方はフォントを探しているうちにどれもよく見えてくるので、たくさんのフォントを一緒に使いたくなります。
しかし、1つのデザインの中でフォントがたくさん使われているものは、全体を見たときに違和感の原因となります。
このように、1つのフォントで雰囲気のあるものは特に複数使用すると全体のまとまりがなくなってしまい、違和感の原因となってしまいます。
多くの種類を使用することを避けるため、次のようなルールで使用するフォントを決めていきます。
- 日本語と欧文フォントで1種類ずつ使用
- 複数のウエイト（太さ）が用意されたフォントを使用
この方法だと使用するフォントの数を減らすことができます。
また日本語フォントと欧文フォントで使い分ける場合は次のことに注意するとデザインがまとまりやすくなります。
- ゴシック体＋サンセリフ体
- 明朝体＋セリフ体
筆記体フォント（スクリプト体）を使用する場合はこのように選ぶと違和感のないデザインにすることができます。
最小フォントサイズは10px
Webサイトで使用するフォントサイズは小さすぎると表示できないブラウザがあります。
Chromeでは10px以下のフォントは表示することができません。
例えばCSSで8pxと指定しても実際のChromeでの表示は10pxとなります。
CSSで強制的に小さくできますが、縮小して表示するのでレイアウトに影響が出る場合もあります。
また小さいフォントサイズは読みづらくなるだけではなく、Googleサーチコンソールのモバイルユーザビリティレポートでエラーとなり「テキストが小さすぎて読めません」となってしまいます。
リンク: Google Search Consoleヘルプページ
フォントの規約について
Webデザインで使用する場合は、商用可能なフォントなのかだけではなくWebフォントとしても使用可能な規約かを確認します。
商用可能＝Webフォントでも使用可能ではないのできちんと確認することが大事です。
Adobe Fonts
Adobe Fonts はAdobeのCreative Cloudに登録していると利用できるので、簡単にたくさんの種類の中からフォントを選ぶことができます。
とても便利ですが、Webデザインで使用する場合には注意が必要です。
実装時にWebフォントとして使用する場合には、埋め込みコードを発行することになります。
このとき制作側ではなく顧客側の契約が必要になります。
Webフォントで使用する場合は顧客の同意を得られているかを確認しましょう。
画像で実装する場合は顧客側の契約は必要ありません。
Google Fonts
Google Fonts は、日本語フォントはそれほど種類はありませんが、欧文フォントの種類は豊富です。
画像で実装する場合、Webフォントで使用する場合どちらも顧客側の契約は必要がありません。
その他のフリーフォント
配布サイトやフォントによって利用規約が違うため、ダウンロード時、デザインで使用する時は必ず確認するようにしましょう。
Webフォント使用時の注意
Webサイト全体でWebフォントを使用するとなると読み込み速度にも影響が出る恐れがあるので、Webサイト全体ではなく見出しなどでポイント使いをするのがオススメです。
ワイヤーフレームがあるとデザインがワイヤーフレームに寄ってしまう
ワイヤーフレームとは
Webデザイン時にはワイヤーフレームというものが資料として用意されていることがあるかと思います。
ワイヤーフレームはデザインのレイアウト指示書ではなく、どのページにどのようなコンテンツが入るかを示したものとなります。
Webデザイン制作時はワイヤーフレームを確認して、作業を進めていくと思います。
きちんと確認しながら作業をしているので、どうしてもこのワイヤーフレームのレイアウトと似たような仕上がりになっていることが多いです。（ワイヤーフレームのレイアウトを踏襲してデザインしなければならない場合を除く）
ワイヤーフレームに寄っていくこと自体は悪いことではないのですが、そのワイヤーフレームはただそのページに必要なコンテンツを記載しているだけで、依頼した顧客の目的達成のための動線ではないかもしれません。
ワイヤーフレームに寄ったデザインにならないようにするために
提供されたワイヤーフレームによりすぎないデザインを制作するためには、自分でワイヤーフレームを作ってからデザインを進めていきます。
- いきなりデザインを進めず、ワイヤーフレーム内のコンテンツを確認
- 依頼側の目的を達成することができる動線を考える
- 自分でデザイン制作用のワイヤーフレームを手書きでもいいので作る
この手順で作業していくと、自分でワイヤーフレームを作成してからデザインに入るので、提供されたワイヤーフレームによりすぎることがなくなるかと思います。
自分でワイヤーフレームから制作することで、デザインのコンセプトも明確になり、制作しやすくなります。
余白はきちんとあるのに違和感がある
デザインは余白が大事だとよく言われますが、その余白も全体で統一感がなければ、違和感の原因となってしまいます。
Webサイト全体でセクションごとに余白が広かったり狭かったりすると、どうしてもバラバラ感が出てしまい見づらいWebサイトとなってしまいます。
余白は広ければよいというわけではありません。
余白のとり方はデザインの雰囲気にも影響するので、コンセプトに合った余白で制作します。
このように余白によって受けるイメージや全体の雰囲気が変わってきます。
Webサイト全体を見たときに、広すぎたり狭すぎたりしていないか、コンセプトに合った余白になっているかということに注意します。
濃いめのドロップシャドウやぼかし
ドロップシャドウやぼかしの部分が濃いめになっていることがよくあります。これらのレイヤースタイルは、ほんの少し適用されているだけでも効果としての働きをしてくれます。
PhotoshopやXDのツールで描画モードなどを変更できますが、実装時に反映させづらくなる場合もあるので、画像で書き出すことが想定される部分以外は、なるべく描画モードを使用せずに効果をつけるようにするとよいです。
写真素材の検索に時間がかかりうまく探せない
写真素材の提供がない場合は、自分で素材を探すという作業が必要になります。
素材を検索する時のキーワードの選定によっては、該当の画像が見つけられないとなってしまいます。
キーワードの選定
次のような写真素材が必要な場合、どのようなキーワードを使用して検索すればよいでしょうか。
- 建設会社のWebサイトで使用する「作業員」「建設車両」の写真素材
まず、ヒアリングシートやワイヤーフレームからその建設会社がどのような仕事をしているかを確認します。
その仕事内容から想像することのできる言葉で検索していくと、関連した素材にたどり着くことができます。
例えばその建設会社が主にビルの建築工事をしている会社であれば、
「ビル建築」「建築現場」「工事」「クレーン」「現場」「工事車両」「作業服」「作業員」
このように似たような言葉で検索すると、写真素材が探しやすくなります。
※素材サイトで写真素材を探す前には、必ず利用規約を確認しましょう。
まとめ
Webデザイン初学者のデザインレビューをしていて気づいた共通点をまとめてみました。
最終確認としてここで挙げたような違和感がないか確認してみるといいですね。
