フォント選びや配色に関して友人と話したらわりと目からウロコだった話2015-09-16フォント選びや配色に関して友人と話したらわりと目からウロコだった話Web制作スポンサーリンクだいぶブログもカスタマイズして、ほぼもういじるところが無いような感じになってきてしまったのですが、数日前にフォントを変更してみたんです。したら美大に通っている友人から軽いバッシングを受けて、フォントについていろいろと教えてもらったので共有したいと思います。フォント自分がここまでしてきたカスタマイズって、デザインと言うよりかは機能を追加するような感じなんですよね。フォトショとかイラレとか触ったこともないですし、ヘッダーの背景は青いまんまですし。Fonts」で変えてみたんですよ。特徴のあるタイトルにしたかったんです!デフォルトはこんな感じなのをGoogleフォントでこんな風にしてみました。?フォントのイメージも、どことなくアドベンチャー感が出て、男らしさと可愛さを何となく感じさせて特徴も出てるなあって思って自分的には満足していたんです。その友人は僕がカスタム記事をあげる度にいろいろ評価をしてくる習性があってですね、今回はどんな感想がくるのかなあと思って見せたんです。́)ってなってしまいそうでしたが、その友人曰く、「このフォントは全体的に見ると合ってないよ」とのこと。友人よ、そなたがこの無限にあるGoogleフォントから最適なものを選んでみよっ!」って聞いてとりあえず画面を見せてやったんです。705個あるから選んでみよ!そしたら「これっ」って「.........。お前普通そうなの選んでんじゃねえよ!!俺はもっと、個性を求めてるんだよ!!」と思わず声を大にして突っ込みました。僕としてはもっと特徴のあるものが欲しかったのですが...ちなみに友人の名誉のために言っておくと、友人は美大生ですがデザイン科ではなく油絵科なので、特に専門的なことは分からないけど、何となくこれなんだそうです。結局現在のトップ画面は友人が言ったやつにしてみました。なんでこのフォントを選んだのかを聞いてみたら、かなり話が長かったのですが、とりあえず要約すると、フォントって言うのはそこまで大きく変えなくとも、十分にオシャレだし個性を出すことができるものなんだということらしいです。いうことかというと、その友人は友人「シャネルのフォントってどんなんだったか覚えてる?」と聞いてきました。僕はシャネルのフォントが浮かばなかったのでググってみました。友人「そう、多分お前がやろうとしていたほど、特徴を出したりはしてないんだよ。友人「文字の太さだったり、文字の間隔を気をつけることによって、そのロゴのオンリーワンのものが出来上がるって訳。僕「ほへ〜」ということらしい。これらのことって知ってる人から見たら当然なのかもしれないけど、自分にとってはわりと目からウロコな事実でした。僕の頭の中には明朝体→堅苦しそうゴシック体→ちょっと柔らかい感じ丸字ゴシック→かわいい手書き風→かわいいぐらいの、ザックリとしたイメージしか持ってなかったんです。いった「ザックリとしたものの間をどう変化させるか」しか考えずにGoogleフォントを眺めることしかできなかったのですが、ゴシック体一つとってももの凄い量のフォントがあるらしくて、例えばさっきのだと、なんか、何となく分かります?矢印で指したところに若干の特徴があるの。「u」と「h」にくぼみがなかったり、「f」の左側が出てなかったり。いったほんのちょっとの部分が、パッと見たときに何となく脳裏に焼きつく印象になるんだそう。「へー」っと思いつつ、他にも長々と話していたのですが理にかなってるなあと感じることができ、友人のいう通りにしてみることにしました。「この本かなり面白いよ。フォントについていろいろ書いてあるから読んでみなよ」と一冊の本を渡してくれました。見るで、これを今日の午前中に読んでみたんです。文字は少ないのであっさりと読めました。したら友人が話していたことがほぼ書いてあって、「友よ、お前この本をそのまんま言っただけやんかっ!」と一人ツッコミをしていました。「シャネル」じゃなくって「ルイ・ヴィトン」だったけど。ルイ・ヴィトンのロゴは、Futura(フツラ)というフォントで組まれています。他にもいろいろなところで使われている有名フォントです。どこでも見かけるし、つかおうと思えばすぐ使える。そのフォントを使ってロゴにするとき、文字になにか付け加えたりしていない。それなのにこの落ち着き、高級感。してなんでしょう?一回友人の話を聞いた後だったので、すんなり受け入れることができました。この本にも書いてあるのですが、フォントを選ぶのに厳密なルールなんてものはなくって、もう直感で選んじゃって良いみたいです。言った意味では僕の最初の選び方も良かったのかもしれないですが、何か深まって良かったです。Kindle版この商品を含むブログを見るを読んでます。これ、もの凄く良いです。意識せずにやってたことも多いのですが、こういうふうにデザインを言語化してくれると、応用力が高まる気がします。Life」の文字、白じゃなくって若干黄色にしてるんです。これも実は友人が「タイトルはうっすらとした黄色にした方が良いよ」といってくれたのでそのままやってみたんです。したら、Webデザインは配色のルールというものがあることを最近知って、ブログをパッと見たときの配色が「7:2:1」に分けると綺麗にまとまるんだそう。自分は「7:2:1」が「白(背景色):青:黄」と自然になっている訳なんです。タイトルの黄色がないと、そのルールが適用されなくなるんですよね。ちなみに「7:2:1」の「1」の部分は、「2」の捕色を入れるといいらしくって、さっき青の補色って何なのかなあ?って調べてみたら見事に黄色でした。友人は補色については当然知ってての助言だったらしいのですが、いやあ、見直しちゃいました。言うことで最近気づいたフォントや色使いについて書いてみました。前回記事が、自分にとってけっこう大きいシェアをもらうことが...2015-08-04当ブログで行ってきたはてなブログデザインカスタマイズまとめ!PR:はてなブログのテーマ「Naked」を作成しました!デフォルト...2015-06-28はてなブログシェア数付きSNSボタンでさらにオシャレな吹き出しコードを追加です7/7追記:重大な不具合を修正しました。はてなブログPro都内に住む大学5年生だったのがこの春から社会人一年目になりました。データ分析職として働いております。Googleアナリティクス※メールでのブログカスタマイズのご依頼は現在受けておりません。@ftmaccho詳しいプロフィールはこちらから。広告依頼など重要っぽい連絡はこちらからお願いします。Lifeスターをつけました引用をストックしましたストック一覧を見る閉じる引用するにはまずログインしてくださいログイン閉じる引用をストックできませんでした。再度お試しください閉じる限定公開記事のため引用できません。