この記事のレベル

初心者	（3.5）
重要度	（3.0）
難しさ	（2.0）

こんにちは、編集長のカワウソです！

「フラットデザインのホームページを作りたいけど、どのようなポイントを意識すればよいのか分からない……」と悩んでいませんか？

たしかに、フラットデザインにはメリットもあれば、デメリットもあります。
デザイン性を重視し過ぎて、ユーザーにとって使いづらいホームページを作ってしまっては、本末転倒ですよね。

フラットデザインで作るにも、まずは他社のホームページを参考にしましょう。

そこで今回は、フラットデザインが魅力的な企業ホームページ7選を紹介します。

この記事を読むと、フラットデザインを採用するときのポイントや注意点も分かります。

記事の後半では、フラットデザインのホームページが効率的に探せる、「ギャラリーサイト」も紹介しているので、ぜひチェックしてみてください。

それではどうぞ！

フラットデザインとは

フラットデザインとは、立体感や光沢感などがない平面的なデザインのことです。

過去には、物質をそのまま表現したようなリアルな質感の「スキューモーフィズム（リッチデザイン）」が主流の時代もありました。

しかしiOSやWindowsなどのOSは、アップデートのなかでデザインを、スキューモーフィズムからフラットデザインに変えていったのです。

たとえば計算機アプリのデザインは、iOS6（iPhone5：発売2012年）とiOS7（iPhone5s：発売2013年）で大きく異なりますよ。

▲出典：Apple「iPhone ユーザガイド iOS 6 ソフトウェア用」

▲出典：Apple「iPhone ユーザガイド iOS 7.1 ソフトウェア用」

なお、2023年3月時点で最新バージョンであるiOS16でも、フラットデザインが採用されています。

▲出典：Apple「iPhone ユーザガイド iOS 16 ソフトウェア用」

フラットデザインとマテリアルデザインの違い

フラットデザインとよく比較されるものとして、「マテリアルデザイン」があります。

マテリアルデザインとは、Googleが2014年に提唱したデザインのこと。
分かりやすく言うと、現実世界の法則に則ったシンプルで操作性の高いデザインです。

※ガイドラインとなるGoogleの公式ホームページもあります。

ここでは簡潔に、フラットデザインとマテリアルデザインの違いを解説しますね。

フラットデザインは、シンプルかつファイル容量が少なく読み込みが早いため、アイコンやロゴに多く使用されています。

しかし、基本的には影などの装飾を付けないため、「ボタン」であることをユーザーに気付かれないおそれもあります。

一方で、マテリアルデザインのボタンは、影で立体感を演出しているため、ユーザーに気付いてもらえる可能性が高いと言えます。

さらに現実世界の法則に則っているため、アニメーションも直感的に操作することが可能です。

▲出典：Google「Material design」

しかしマテリアルデザインは、基本的にガイドラインに沿って作らないと、正しい効果を発揮することができません。

初心者の方であれば、アニメーションについては、実装のハードルが高いかもしれません。

またガイドラインに縛られず自由にデザインしたい方にとっては、少々窮屈と感じることもあるでしょう。

フラットデザインの企業ホームページ事例

ここからは、フラットデザインを用いた企業ホームページ事例を紹介します。

iDID

▲出典：iDID

『iDID（アイディ アイディ）』は、クリエイターの、クリエイターによる、クリエイターのためのさまざまな活動を行うサービス。

『iDID』のホームページには、フラットデザインのイラストがふんだんに使用されています。

▲出典：iDID

クリエイター向けのサービスということもあり、デザイン性が高いですよね。

それだけでなく、アニメーションも秀逸。
たとえば矢印のアニメーションは、ユーザーがページをどんどん下にスクロールしたくなるような誘導効果があると言えるでしょう。

▲出典：iDID

さらに、コンバージョンポイントであるメルマガ登録フォームは、レイヤー（層）により少し前に飛び出しているような演出で、注目されやすい仕組みになっています。

▲出典：iDID

My Assistant

▲出典：My Assistant

『My Assistant』は、幅広い業務を事務アシスタントが代行してくれるサービスです。

ホームページ全体にフラットデザインのイラストが使用されており、「どんなサービスなのか」がユーザーに伝わりやすいように、工夫されています。

たとえば対応業務一例では、それぞれの内容にあったイラストが使用されているため、イメージしやすいです。

▲出典：My Assistant

株式会社グローバルタッチ

▲出典：株式会社グローバルタッチ

『株式会社グローバルタッチ』は、グローバル人材の採用をサポートする企業です。

こちらのホームページにも、フラットデザインのイラストがふんだんに使用されています。

たとえば、「予算に合わせた様々なプランニング」のコンテンツを見てみましょう。

▲出典：株式会社グローバルタッチ

同じカラーのフラットデザインで、統一感がありますよね。
統一されていることにより、それぞれの内容に注目して見ることが可能です。

長岡技術科学大学 まなびスクエア

▲出典：長岡技術科学大学 まなびスクエア

『長岡技術科学大学 まなびスクエア』は、「学び直したい社会人などがいつでも学べるように」と、作られた学習サービスです。

▲出典：長岡技術科学大学 まなびスクエア

ホームページには、フラットデザインのボタンが使用されています。
ホームページの背景が白色ということもあり、黒色のボタンが映えますね。

また矢印「→」があるため、ボタンであることが明確に伝わります。

以下は、黒丸に矢印だけのボタン。

▲出典：長岡技術科学大学 まなびスクエア

このように変化があると、複数ボタンがあってもデザインが単調にならないですよね。

そのほか、コンバージョンポイントである「オンライン教室」と「ご利用登録」のボタンには、アイコンが付いています。

▲出典：長岡技術科学大学 まなびスクエア

ほかのボタンにはない要素にすることで、うまく優劣が付けられていますよね。

これらのように、「ホームページの配色」や「ボタンのデザイン」を工夫すれば、フラットデザインのデメリットは、解消されます。

フラットデザインのシンプルさを活かしたホームページを作ることができるでしょう。

一般社団法人 日本速脳速読協会

▲出典：一般社団法人 日本速脳速読協会

『一般社団法人 日本速脳速読協会』は、速読教育による学力・仕事力向上と読書支援を継続的に推進し、社会に貢献、活躍する人づくりを目指す団体です。

ホームページには、フラットデザインのボタンが使用されています。

ボタンの特徴は、マウスを乗せると影が付いて立体的になること。

▼通常時▼

▲出典：一般社団法人 日本速脳速読協会

▼オンマウス時▼

▲出典：一般社団法人 日本速脳速読協会

ボタンであることが明確に伝わるのはもちろん、ユーザーがクリックしたくなる効果があると言えます。

そのほか、メガメニューにあるボタンも、マウスを乗せると青い線の枠が付くため、どれを選択しているのかが明確です。

▲出典：一般社団法人 日本速脳速読協会

ユーザーにとって親切なホームページと言えるでしょう。

東京ソラマチ

▲出典：東京ソラマチ

『東京ソラマチ』は、東京スカイツリーとともに都心と東武沿線、日本と世界とを結ぶゲートシティを目指した商業施設です。

ホームページには、フラットデザインのアイコンが使用されています。

たとえば、「ショップニュース」のページを見てみましょう。

▲出典：東京ソラマチ

ショップのカテゴリに、フラットデザインのアイコンが使用されていますね。
一目でカテゴリが分かるので、ユーザーが目的のページを探しやすいと言えます。

「営業・施設案内」ページでも、フラットデザインのアイコンが効果的に活用されていますよ。

▲出典：東京ソラマチ

ガイドを見ているだけでも、楽しいですよね。
フラットデザインはシンプルなので、色数が多くても落ち着いたトーンを使用すれば、くどさは感じません。

▲出典：東京ソラマチ

このように、情報量が多いホームページは、ぜひアイコンの活用を検討してみてください。

文字を読まなくても、見るだけで内容が伝わるアイコンは、ユーザーにとって有益と言えます。

Xserverビジネス

参考：Xserverビジネス

弊社エックスサーバー株式会社が提供する、法人向けレンタルサーバーの『Xserverビジネス』でも、フラットデザインを採用しています。

参考：Xserverビジネス

レンタルサーバーのホームページは、専門用語などが原因で、なかには難しく感じてしまわれる方もいるかもしれません。

そのため、アイコンで少しでもイメージを持ってもらえるように、工夫しています。

参考：Xserverビジネス

参考：Xserverビジネス

見出し、ボタン、アイコンなど、すべてフラットに統一しているのもポイント。

ホームページのデザインを作るときは、トンマナを意識するのも重要です。

フラットデザインのホームページをもっと探したい方へ

フラットデザインのホームページをもっと探したい方は、「ギャラリーサイト」がおすすめです。

ギャラリーサイトなら、企業のホームページが一覧で表示されるため、効率的に探せます。

今回は数あるなかでも、「フラットデザイン」のカテゴリがある、ギャラリーサイトを紹介しますね。

MUUUUU.ORG

▲出典：MUUUUU.ORG

『MUUUUU.ORG（ムーオルグ）』は、クオリティが高い縦に長いサイトを厳選して集めたギャラリーサイトです。

カテゴリにはフラットデザインがあり、800以上登録されています。

▲出典：MUUUUU.ORG

S5-Style

▲出典：S5-Style

『S5-Style』は、「or」もしくは「and」条件で、絞り込みができるギャラリーサイトです。

たとえば、FilterのCreativeから「UI フラット」、Typeから「BtoB コーポレートサイト」を選んで絞り込めます。

▲出典：S5-Style

ぜひこの機能を活用して、自社に近いホームページを見つけてみてください。

ほかにも、以下の記事でギャラリーサイトを紹介しています。

まとめ

この記事では、フラットデザインが魅力的な企業ホームページ7選を紹介しました。

近年もフラットデザインを採用するホームページは少なくありません。

この記事で紹介したように、ユーザーにとって分かりやすいフラットデザインのホームページを参考にするとよいでしょう。

それでは、素敵なホームぺージの完成を願っております。

以上、最後まで読んでいただき、ありがとうございました。

ホームページの開設を検討している方へ

※ 2023年10月時点、W3Techs調べ。

当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！

これから始める方はこちらのホームページの作り方をぜひご覧ください！

ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！