何を考えながらデザインを作っているのか：後編（フォントの選び方など）

こんにちは、WebデザイナーのShimaDです！Daily cocoda!というサービスを使ってアプリのデザインを作る中で、ユーザーに意図した行動をとってもらうためにどうロジックを組み立てたかを記します。

そもそものコンセプトメイキングについては何を考えながらデザインを作っているのか：前編に記載しましたが、とても長いので「スキ」を押して保存しておき、暇な時に見ていただければ幸いです。

前回の記事にて読了することを挫折した人にもきちんと見てもらえるよう、今回は短めにし(前回と比べて約1/4)、ポイントをフォント関係について3つに絞ってお届けします。

作成したデザインはこちら↓

フォントの選定理由

デザイナーにとっては基本の一つであるヒラギノ角ゴをメインフォントに設定しました。理由として、今回のデザインがアプリ上で展開されるからです。このフォントは汎用性が高く、iOSやAndroidと言った異なる環境においても綺麗に表示される確率が高いです。

▼ヒラギノ角ゴ

本当はアプリのデザイン方向性的にマッチするヒラギノ丸ゴを使いたかったのですが、現在AndroidではNoto Sans CJKと言ってよりヒラギノ角ゴに近い見た目のフォントを使っているので、Androidユーザーが普段見慣れた、違和感のより少ないフォントを選びました。

▼ヒラギノ丸ゴ(角ゴと比べ角が丸い)

ちなみに2015以前に公開されたAndroid 6.0以前は「モトヤマルベリ」と言って丸みをおびたフォントを使用されていましたが、Android OSのシェア率を見ると数パーセント以下なので、現在はほとんどの人が使っていない前提です。

▼モトヤマリベルが適用された画面(文字が丸い)

適切なフォントサイズの選定

一般的なブラウザが最小と設定しているフォント数(文字の大きさ)は10ptです。(このお題はアプリデザインなので適用の賛否は認めます)
フォントの大きさについては、大きいほど元気な印象を与え、小さいほど静かで、大人な印象になる傾向にあります。(他にも与える印象はありますが、需要があれば別途まとめます)。今回のアプリのテーマが「可愛い・POP」にも関わらず設定したフォントサイズは10、12、14pt(名前だけ22pt)と限界まで小さくしています。理由は、メインカラーに黄色(#FFED78)を使っているので、フォントまで大きめにしてしまうと全体的な印象が子供っぽくなり過ぎしまうためです。(黄色は元気さの他に幼さも含みます)加えて、これらフォロワー数などは画像に比べて情報の優先順位が低かったので目立たせなくするための処置です。

テキストの置き方

フォントサイズを小さくした上に画像上にテキストを置いたので、デザイン上注意しなければならないポイントがいくつかあります。

例えばプロフィール画像に白い服を着たベトナム人女性を起用しました。(僕がベトナムで働いた経験があるので)。通常、白い物の上に白いテキストが重なるとリーダビリティ(可読性)が下がってしまいます。その対処法として今回はドロップシャドウ(文字にくっついている影)を適用しました。これにて、ない時よりも幾分見やすくなります。

また、その他リーダビリティを上げる手法として座布団を引くパターンもあります。(下記画像の黒い四角のこと)

画像引用元　https://hajimeteweb.jp/column/jimdo_technic/vol6.php

ドロップシャドウと比べて座布団を引くメリット・デメリットなども解説したいところですが、これも需要があればまた別の機会に解説しますね。

まとめ

以上、フォントにフォーカスをあててデザインを解説しました。次回以降で、余白の設定の仕方や、色の選定方法など解説したいと思っています。

普段からデザインのTipやトレンドについて呟いていますので、気になる方はTwitter上で繋がりましょう！僕のTwitterアカウントはこちらです。