Leapy

岐阜県のWeb制作企業です。

本日岐阜駅で行われた説明会に参加させていただきました。

非常に面白そうな会社でした。

• 使用フォント：秀英角ゴ 銀 B Outfit
• フォントカラー：見出し#0d1e28 　文章#000000
• ベースカラー：#FFFFFF
• メインカラー：F5F0EC

トップページ

line-heightは1.6〜1.8
左右の余白は14%です。

背景のオブジェクトや文字など、動きの多いサイトです。

セクション間の余白を今まであまり見てこなかったので、そこを見ていきます。

ファーストビューからメイン部分の見出しまでの距離は17.83vw。
私はMacBook Air (M2)なので、ざっくりピクセル換算すると140px程度空けられています。

見出しから内容までの距離は80pxでした。

インタビューセクションの下部ですが、ここも80pxです。

大体１週間くらいサイトの余白を見てきて、大体140pxと80pxを使用しているケースが多いなと感じます。

お知らせのセクションです。第一印象「見やす！」と思いました。
お知らせのタイトルの上下の余白は70pxです。

この余白の広さはぜひ自分の進級展の作品に取り入れてやろうと思います。

制作実績紹介ページ

3分の2が実績、3分の1がメニューなどサイドバーとなっています。

さすが地方創生をメインに行う企業なだけあって、地方のホームページ制作実績が大量です。
見たくなる気持ちを抑えつつ、余白のチェックをします。

事例ごとの距離は90pxです。

事例のサイズはページの縦横共に大体3分の1のサイズのようです。

分けられるサイズってのがいいんだなと学びます。

スマートフォン版ページ

極力スマートフォン版とPC版でのデザインは同じで、並べ方を変えている印象です。
それくらい自然な方が使っている側としては非常に見やすいしわかりやすいですよね。

開いているタブが多いのはすいません。

余談

なんとなく余白について少しずつですがわかってきたような気がします（まだまだ甘い）

見出しと文章で色を若干変えるのっていいですね。今までやろうとすら思わなかったです。変えるとしたら大胆に変えてしまっていました。

これで一旦余白の分析は終わりです。
明日からはアニメーションについてちょっと掘ってみようと思います。