自分のポートフォリオサイト作成に奮闘中でございます。yamayoshiです。

ポートフォリオサイトの作成にあたって、ワイヤフレームの作成をしていたんですが…

というわけで、世の中のおしゃれなWebサイトはどのくらいにしているのかを調べてみたんです。
折角なのでその結果をまとめてみたいと思います。

同じような疑問を持たれた人に参考になれば幸いです。

一応、目安を検索してみた

サイトを比較する前に、Webデザインのテンプレのようなものあるのか、ざっくりと調べてみました。

結論からいうと、特にお決まりのパターンのような情報は出てきませんでした。残念。

(もしあったらごめんなさい。そして私にも教えてください…m(_ _)m)

おしゃれなサイトのナビゲーションメニュー

お決まりのパターンが見つからなかったということで、現在Web上にある、

おしゃれなサイトたちを参考にしてみました。

ちなみに今回はこちらのギャラリーサイトで調査してます。参考までに。

「I/O3000」
https://io3000.com/

1.Mana’s portfolio website

ポートフォリオサイト作成中ということで、まず参考にさせていただいたページがこちらです。
Webデザイナーで有名なMana様のポートフォリオサイトですね。

シンプルでおしゃれ。こんなポートフォリオを目指して作成中です。

こちらページのナビゲーションメニューの高さは、「98px」でした。

2.株式会社サンハウス

I/O3000を巡回していたら発見しました。

某アーティストを連想するようなメイン画像が、建築系の堅苦しいイメージを感じさせず、
親近感が湧くような、素敵なファーストビューだと感じました！

左上に大きくロゴマークを使用しているのが印象的な、ナビゲーションメニューになっております。

こちらのナビゲーションメニューの高さは、「132px」でした。
(ロゴ分は入ってません。横の細い部分の高さですね。)

3.Apple

続いては、毎度お世話になってるAppleさんのWebサイトですね。

やはり白と黒の２種類を基調としていて、シンプルかつスタイリッシュな印象です。

このデザインは日本語のページだけでなく、海外サイトも同じデザインなので、
全世界の人々を考慮したデザインなのでしょう。

こちらのナビゲーションメニューの高さは、「44px」でした。
パッとみても分かる通り、かなり控えめな高さですよね。
大きくロゴを使わず、メイン画像のiPhoneを目立たせる意図があるのではと感じました。

4.沢井製薬株式会社

一見製薬会社のページとは思えない、自然を感じられるファーストビューですね。

自然の中に、少年少女の画像を使って、「自然と子供達のことを考えている」
というようなメッセージが込められているように感じました。

写真がカラフルなため、一見カラフルなページに見えますが、
ベースカラーはブランドカラー＋白黒で構成されていてシンプルです。

こちらのナビゲーションメニューの高さは、「100px」でした。
少し高めの印象ですが、上下の2列にメニューが分かれています。

5.株式会社はくばく

ナビゲーションメニューに注目していたら、直線じゃないことに気がつきました。
曲線を利用することによって、さらにファーストビューの印象が柔らかくなるなと感じました。

使用されているフォントも丸みを帯びた物を、
使用されている写真も角を取ってあり、全体で統一されていました。

こちらのナビゲーションメニューの高さは、「120px」でした。
曲線部分を含めるとさらに大きく確保されていることになります。
余白も多くなるので、全体の印象がスッキリするのでしょうか。

デザインによって高さは様々

いくつかWebサイトをご紹介しましたが、他にもWebサイトを検証してみた結果…

だいたい90~120pxの間には収まっているのかなぁ。

というざっくりとした検証結果になってしまいました笑

ナビゲーションメニューに大きめのロゴマークを入れてアピールする場合は、
それに合わせて高くなりますし、

メイン画像を目立たせたい場合は、低くスッキリさせるパターンもありますね。

現在、Webデザインの学習に力を入れているので、こういった学習メモになるような記事も増やしていきたいと思います。

それでは。今回はこの辺で。