こんにちは、編集長のカワウソです！
「フラットデザインのホームページを作りたいけど、どのようなポイントを意識すればよいのか分からない……」と悩んでいませんか？
たしかに、フラットデザインにはメリットもあれば、デメリットもあります。
デザイン性を重視し過ぎて、ユーザーにとって使いづらいホームページを作ってしまっては、本末転倒ですよね。
フラットデザインで作るにも、まずは他社のホームページを参考にしましょう。
そこで今回は、フラットデザインが魅力的な企業ホームページ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の公式ホームページもあります。
ここでは簡潔に、フラットデザインとマテリアルデザインの違いを解説しますね。
| メリット | デメリット | |
| フラットデザイン |
|
|
| マテリアルデザイン |
|
|
フラットデザインは、シンプルかつファイル容量が少なく読み込みが早いため、アイコンやロゴに多く使用されています。
しかし、基本的には影などの装飾を付けないため、「ボタン」であることをユーザーに気付かれないおそれもあります。
一方で、マテリアルデザインのボタンは、影で立体感を演出しているため、ユーザーに気付いてもらえる可能性が高いと言えます。
さらに現実世界の法則に則っているため、アニメーションも直感的に操作することが可能です。
しかしマテリアルデザインは、基本的にガイドラインに沿って作らないと、正しい効果を発揮することができません。
初心者の方であれば、アニメーションについては、実装のハードルが高いかもしれません。
またガイドラインに縛られず自由にデザインしたい方にとっては、少々窮屈と感じることもあるでしょう。
フラットデザインには、「フラットデザイン2.0」もあります。ボタンなど重要な箇所には、影など最低限の装飾を付けるといった考え方です。
カワウソ
フラットデザインの企業ホームページ事例
ここからは、フラットデザインを用いた企業ホームページ事例を紹介します。
iDID
▲出典：iDID
『iDID（アイディ アイディ）』は、クリエイターの、クリエイターによる、クリエイターのためのさまざまな活動を行うサービス。
『iDID』のホームページには、フラットデザインのイラストがふんだんに使用されています。
▲出典：iDID
クリエイター向けのサービスということもあり、デザイン性が高いですよね。
それだけでなく、アニメーションも秀逸。
たとえば矢印のアニメーションは、ユーザーがページをどんどん下にスクロールしたくなるような誘導効果があると言えるでしょう。
▲出典：iDID
さらに、コンバージョンポイントであるメルマガ登録フォームは、レイヤー（層）により少し前に飛び出しているような演出で、注目されやすい仕組みになっています。
▲出典：iDID
コンバージョンとは、ホームぺージの目標としている「特定のアクションをユーザーが起こしてくれた状態」を指します。分かりやすく言うと、ホームぺージ上の成果です。
コンバージョン（CV）とは？意味・種類・選び方など解説
My Assistant
▲出典：My Assistant
『My Assistant』は、幅広い業務を事務アシスタントが代行してくれるサービスです。
ホームページ全体にフラットデザインのイラストが使用されており、「どんなサービスなのか」がユーザーに伝わりやすいように、工夫されています。
たとえば対応業務一例では、それぞれの内容にあったイラストが使用されているため、イメージしやすいです。
▲出典：My Assistant
株式会社グローバルタッチ
▲出典：株式会社グローバルタッチ
『株式会社グローバルタッチ』は、グローバル人材の採用をサポートする企業です。
こちらのホームページにも、フラットデザインのイラストがふんだんに使用されています。
たとえば、「予算に合わせた様々なプランニング」のコンテンツを見てみましょう。
▲出典：株式会社グローバルタッチ
同じカラーのフラットデザインで、統一感がありますよね。
統一されていることにより、それぞれの内容に注目して見ることが可能です。
長岡技術科学大学 まなびスクエア
▲出典：長岡技術科学大学 まなびスクエア
『長岡技術科学大学 まなびスクエア』は、「学び直したい社会人などがいつでも学べるように」と、作られた学習サービスです。
▲出典：長岡技術科学大学 まなびスクエア
ホームページには、フラットデザインのボタンが使用されています。
ホームページの背景が白色ということもあり、黒色のボタンが映えますね。
また矢印「→」があるため、ボタンであることが明確に伝わります。
以下は、黒丸に矢印だけのボタン。
▲出典：長岡技術科学大学 まなびスクエア
このように変化があると、複数ボタンがあってもデザインが単調にならないですよね。
そのほか、コンバージョンポイントである「オンライン教室」と「ご利用登録」のボタンには、アイコンが付いています。
▲出典：長岡技術科学大学 まなびスクエア
ほかのボタンにはない要素にすることで、うまく優劣が付けられていますよね。
これらのように、「ホームページの配色」や「ボタンのデザイン」を工夫すれば、フラットデザインのデメリットは、解消されます。
フラットデザインのシンプルさを活かしたホームページを作ることができるでしょう。
一般社団法人 日本速脳速読協会
▲出典：一般社団法人 日本速脳速読協会
『一般社団法人 日本速脳速読協会』は、速読教育による学力・仕事力向上と読書支援を継続的に推進し、社会に貢献、活躍する人づくりを目指す団体です。
ホームページには、フラットデザインのボタンが使用されています。
ボタンの特徴は、マウスを乗せると影が付いて立体的になること。
▼通常時▼
▲出典：一般社団法人 日本速脳速読協会
▼オンマウス時▼
▲出典：一般社団法人 日本速脳速読協会
ボタンであることが明確に伝わるのはもちろん、ユーザーがクリックしたくなる効果があると言えます。
そのほか、メガメニューにあるボタンも、マウスを乗せると青い線の枠が付くため、どれを選択しているのかが明確です。
▲出典：一般社団法人 日本速脳速読協会
ナビゲーションの一種で、広い画面領域を持つドロップダウンメニュー（メニューに対してマウスを載せたり、クリックしたりすると、下に落としたように出てくるメニュー）のこと。
別名、「メガドロップダウン」「メガナビゲーションメニュー」とも呼ばれます。
ユーザーにとって親切なホームページと言えるでしょう。
東京ソラマチ
▲出典：東京ソラマチ
『東京ソラマチ』は、東京スカイツリーとともに都心と東武沿線、日本と世界とを結ぶゲートシティを目指した商業施設です。
ホームページには、フラットデザインのアイコンが使用されています。
たとえば、「ショップニュース」のページを見てみましょう。
▲出典：東京ソラマチ
ショップのカテゴリに、フラットデザインのアイコンが使用されていますね。
一目でカテゴリが分かるので、ユーザーが目的のページを探しやすいと言えます。
「営業・施設案内」ページでも、フラットデザインのアイコンが効果的に活用されていますよ。
▲出典：東京ソラマチ
ガイドを見ているだけでも、楽しいですよね。
フラットデザインはシンプルなので、色数が多くても落ち着いたトーンを使用すれば、くどさは感じません。
▲出典：東京ソラマチ
このように、情報量が多いホームページは、ぜひアイコンの活用を検討してみてください。
文字を読まなくても、見るだけで内容が伝わるアイコンは、ユーザーにとって有益と言えます。
Xserverビジネス
参考：Xserverビジネス
弊社エックスサーバー株式会社が提供する、法人向けレンタルサーバーの『Xserverビジネス』でも、フラットデザインを採用しています。
参考：Xserverビジネス
レンタルサーバーのホームページは、専門用語などが原因で、なかには難しく感じてしまわれる方もいるかもしれません。
そのため、アイコンで少しでもイメージを持ってもらえるように、工夫しています。
参考：Xserverビジネス
参考：Xserverビジネス
見出し、ボタン、アイコンなど、すべてフラットに統一しているのもポイント。
ホームページのデザインを作るときは、トンマナを意識するのも重要です。
トンマナとは、トーン（tone）＆マナー（manner）の略称。 広告やWeb制作のデザインにおいて、コンセプトや雰囲気に一貫性をもたせること。
フラットデザインのホームページをもっと探したい方へ
フラットデザインのホームページをもっと探したい方は、「ギャラリーサイト」がおすすめです。
ギャラリーサイトなら、企業のホームページが一覧で表示されるため、効率的に探せます。
今回は数あるなかでも、「フラットデザイン」のカテゴリがある、ギャラリーサイトを紹介しますね。
MUUUUU.ORG
▲出典：MUUUUU.ORG
『MUUUUU.ORG（ムーオルグ）』は、クオリティが高い縦に長いサイトを厳選して集めたギャラリーサイトです。
カテゴリにはフラットデザインがあり、800以上登録されています。
▲出典：MUUUUU.ORG
S5-Style
▲出典：S5-Style
『S5-Style』は、「or」もしくは「and」条件で、絞り込みができるギャラリーサイトです。
たとえば、FilterのCreativeから「UI フラット」、Typeから「BtoB コーポレートサイト」を選んで絞り込めます。
▲出典：S5-Style
ぜひこの機能を活用して、自社に近いホームページを見つけてみてください。
ほかにも、以下の記事でギャラリーサイトを紹介しています。
【2023年最新版】ホームページデザインの参考になるギャラリーサイト12選
まとめ
この記事では、フラットデザインが魅力的な企業ホームページ7選を紹介しました。
- フラットデザインとは、立体感や光沢感などがない「平面的なデザイン」
- フラットデザインは、「メリットとデメリット」がある
- フラットデザインを採用するときは、「分かりやすさ」も意識する
- フラットデザインのホームページ探しは、「ギャラリーサイト」がおすすめ
近年もフラットデザインを採用するホームページは少なくありません。
この記事で紹介したように、ユーザーにとって分かりやすいフラットデザインのホームページを参考にするとよいでしょう。
それでは、素敵なホームぺージの完成を願っております。
以上、最後まで読んでいただき、ありがとうございました。
ホームページの開設を検討している方へ
エックスサーバーは高速かつ高い安定性を誇る高性能レンタルサーバーです。
国内シェアNo.1※のレンタルサーバーであり、17万社の導入実績があります。
3月24日12時まで半額キャッシュバックキャンペーン開催中です！
.comや.netなど大人気ドメインも永久無料と過去最大級にお得です。
ぜひこのお得な機会にホームページ開設をご検討ください！
※ 2022年10月時点、hostadvice.com調べ。
法人向けレンタルサーバー「Xserverビジネス」なら、
「ホームページ無料制作サービス」が付いているため、
申し込むだけで2日でホームページが完成します！
Xserverビジネスだと「.com」以外にも「.co.jp」や「jp」などのドメインも無料になります。
当メディア「初心者のための会社ホームページ作り方講座」では、初心者の方にわかりやすく会社のホームページを始められる方法を紹介しています！
これから始める方はこちらのホームページの作り方をぜひご覧ください！
【初心者向け】会社ホームページの作り方を基礎から解説
ホームページの始め方・立ち上げに関する、ご質問・ご相談はツイッターDM( @kawauso_xsv )までお気軽にどうぞ！
