Weekly Design #2（フォント強化期間）

サイトの印象を最も左右するのは配色だと思うが、フォントもサイトの印象を決定づける要素の一つではあると考えている。そのため今週は「知的・洗練された・専門性の高い」といった印象を打ち出すのに適したフォントについて考えながら、デザインを分析・制作してみた。

日本語フォントには大きく分けて、明朝体とゴシック体の２種類あるが、「知的なサイト」と言われると明朝体のイメージが強い。ただ「知的」なイメージを打ち出したいから明朝体を使うというのも安直な気がしたので、「①明朝体で知的なフォント」「②ゴシック体で知的なフォント」の２回に分けて、「知的な印象のサイトに合うフォントとは？」を考えていこうと思
う。今回は「①明朝体で知的なフォント」の回だ。

今週のデザイン

テーマ：架空の金属加工企業のコーポレートサイト

使用フォント
見出し：Noto Serif JP
本文：Noto Sans JP
英文字：URW DIN

コンセプト

「知的な」印象を感じるとき、同時に感じるのは「落ち着いた・洗練された・静かな」と言った「静」のイメージの言葉だろう。なので今回のデザインでは、ジャンプ率を低く、目立つあしらいや大胆なレイアウにしてはいない。その代わり、各要素をグリッドに揃えた配置にしたり、見出しの文字一つとっても下のラインを一列に揃えたりと、整理された印象かつ、デザインの意図が明確な配置にすることで、落ち着いた知的なイメージを打ち出している。

蛇足

明朝体のより知的なイメージを感じさせるフォントってどういったサイトに使われているかを分析してみると、製造や制作などを行う企業、大きな括りでまとめると何かを作り出している企業のサイトが多かった。加えて、デジタル的な表現というよりは、どちらかというとアナログ的な職人の手仕事的な技術力の高さを打ち出したデザインに使われていることが多い印象だった。

そのため、本来のデザインの考え方とは順序が逆転してしまうが、知的で、技術力の高さを打ち出すことをコンセプトとして今回は「架空の金属加工企業のコーポレートサイト」を作成してみた。

反省点

背景前面の写真と見出しの文字の見え方のバランス調整が難しかったように思う。できるだけあしらいなどの要素を少なく構成したかったため、グラデーションや乗算などを重ねて背景写真が見出しの文字の邪魔をしないように調整してみたが、まだごちゃごちゃした印象が拭えない。

また見出しのフォントサイズはもう少し小さいほうが、全体のバランスも良く、かつ「知的」なイメージを打ち出すことができたような気がするので、サイズ感については再度検討が必要だと感じている。

参考デザイン観察

①株式会社WORDS（WEBサイト）
https://words-inc.co.jp/

■フォントの種類
見出し：筑紫Aオールド明朝
本文：筑紫ゴシック

■デザインのイメージ
「編集」という仕事から連想される、紙媒体に書かれた記事のようなアナログ的なイメージと知的で優秀な人材のイメージを併せ持ったデザイン。

■気づいたこと
レイアウトはかなり個性的だが、配色をモノクロに限定していることにより、落ち着いた印象に収まっている。また見出しに関しても、横書き、縦書きの両方が使われており、web媒体というよりは紙面のようなデザインになっていると感じる。

フォントに関しては、見出しに「筑紫Aオールド明朝」、本文や小見出しに「筑紫ゴシック 」が使われており、特に見出しに使われている「筑紫Aオールド明朝」は文字が図形的ではなく文字らしく見えるという特徴を持った、広告や雑誌に適したフォントなので、このフォントをメインに使うことによって、より紙面的なイメージを打ち出すことに成功しているように感じた。

②株式会社山崎製作所（WEBサイト）
https://www.yamasaki-mfg.com/

■フォントの種類
見出し：見出し：Noto Serif JP
本文：遊ゴシック
英語：DIN

■デザインのイメージ
制作所が持つ技術力の高さの部分を強く打ち出したデザイン
配色や、写真の色味なども含めて全体的に明るい印象だが、軽くならずに「誠実な」印象に収まっている。

■気づいたこと
全体的に文字サイズは小さめで、見出しと本文のジャンプ率も低い。それゆえに全体的に落ち着いた印象に纏まっている。また写真を多く配置しているが、全体的に「高明度・低彩度」に統一していることによって、色味のごちゃついた雑多な印象になることを防いでいる。

見出しに「Noto Serif JP」使っているので、本文もその同系列のゴシック体「Noto Sans JP」でも良いのではと思ったが、「遊ゴシック」が使われている。同じ文字サイズで見たときに「遊ゴシック」の方が「Noto Sans JP」よりも小さく細い印象になるため、全体を知的で洗練された印象に統一するためにあえて「遊ゴシック」にしているのではと感じた。