フラットデザインを採用したランディングページを目にする機会が多くなってきた。
もちろん当社のランディングページもいくつかの案件をこのデザイン手法を用いて制作している。今回はフラットデザインとは何か、そしてそれを踏まえた上でランディングページを制作する場合の注意点をお伝えしていこうと思う。

1-1 フラットデザインとは何か

フラットデザインを説明するにはマテリアルオネスティ（Material Honesty）という考え方を知る必要がある。 マテリアルオネスティとは元々、工業デザインにおける考え方だが、簡単に言うとその素材（マテリアル）を正直（オネスティ）に表現するというもの。
「デザインとは何かの模倣やディテールの誇張ではく、素材本来の姿であるべき」といったほうが伝わりやすいだろう。

例としてあげると、木材の特性や味を活かした椅子や机。
デザイナーズマンションに多い打ちっぱなしのコンクリートの壁もそれにあたる。

このマテリアルオネスティを採用し、成功したデザインには1つの共通点がある。 それは「流行に左右されずに、万人に愛され、長い間使われていく」という事だ。 アルミ削りだしで作られたアップル社製のノートパソコンの筐体が美しいのもマテリアルオネスティが根本にあるためだ。

そして、それをWEBデザインにも取り入れる事を目的とし、生まれたのがフラットデザインだ。

1-2 WEBにおけるマネリアルオネスティとは

マテリアルオネスティについて説明したが、なぜWEBでは「フラットデザイン」なのか、疑問に思っている方も少なくはないだろう。WEBの素材（マテリアル）が想像しにくいかもしれないが、ここではプログラム（特にWEBのための言語であるHTMLやCSS等）で描写されるモノだと考えて頂きたい。

HTMLやCSSを理解できる方には伝わりやすいと思うが、フラットデザインはそれだけで完結できそうな、極めてプレーンなデザインばかりではないだろうか？今あなたの目の前にはディスプレイがあるはずだ。そこに「写るモノ」に奥行きは無い。

もし、奥行きが感じられるのならば、それは作られた擬似的なモノなのだ。

上の画像のように、ディスプレイ上で表現される奥行き、立体感、光彩等は視覚のメカニズムを利用した、錯覚にすぎない。 以上のことから、フラット（平面）である事こそWEBにおけるマテリアルオネスティだといえるだろう。

2 フラットデザインのメリット・デメリット

フラットデザインによって与える印象はThe Usabilla Blogという海外のブログでWEB業界で働く人たちを対象に行ったアンケート結果が掲載されている。 その結果、フラットデザインの印象として挙げられたのが以下の5点。

• ・シンプル
• ・綺麗
• ・カラフル
• ・モダン
• ・退屈

メリットとして挙げられているのが

• ・明瞭
• ・簡単
• ・流行のデザイン
• ・レスポンシブデザインに効率的
• ・表示が速い

逆にデメリットとして

• ・慣れない
• ・アクションがとりにくい（クリック可能かわかりづらい）
• ・個性が無い
• ・退屈なデザイン

が挙げられている。

引用元：http://blog.usabilla.com/flat-web-design-is-here-to-stay/

では、フラットデザインが与える印象、メリット、デメリット全て理解した上で、ランディングページでの使い方と注意点を書いていこう。

3. フラットデザインでランディングページを制作する際の注意点

一昔前のランディングページでは、商材の情報をとにかく詰め込み、ストーリーを作って、結果的に購入ボタンを押させる手法が圧倒的に多かった。だが、これも近年のフラットデザインによって変化が伺える。

なぜなら、商品の特性を伝える事に特化したフラットデザインを上手く使えば、USPを最大限にユーザー伝える事ができ、さらに多くの反響を得る事が可能だからだ。

しかし、だからといって何にでもフラットデザインを採用するのは大きな間違いだ。 もし、あなたがフラットデザインでランディングページを制作しようと思っているのであれば以下の2点を注意していただきたい。

3-1. ターゲットの選定

フラットデザインの代表的な特徴として「シンプル」がある。
これにより、文字が読みやすく商品・サービスの説明も正確に伝わりやすい。 商品の本質をダイレクトに伝える事ができるフラットデザイン一番の強みだ。

しかし、文字が読みやすいからといって中高齢者など、普段あまりインターネットを利用しない人をターゲットとした商品には向かない。 なぜなら、フラットデザインのデメリットとして、「アクションがとりにくい（クリック可能かわかりづらい）」があるためだ。 インターネットの利用頻度の低い人にとっては、どこがクリックできるのか、そこをクリックするとどうなるかが想像できない場合が多い。 商品を売るためのランディグページにおいて、ユーザーがアクションを取りづらいのは致命的だ。

良いデザインで商品がどれだけ凄かったとしても「購入ボタン」の押されないランディングページに何の価値も無い。 ここをしっかりと踏まえた上で、ターゲットの確認が必要となる事を忘れてはいけない。

3-2. 商品の選定

私たちがランディングページでフラットデザインを採用することが多いのは商品が「サービス」や「コンピューターソフトウェア」の場合だ。むしろ、その場合だけと言い切っても良いかもしれない。 いわゆる「形の無い物」を取り扱う場合のみ、フラットデザインを採用する。

実際にやってみるとわかるが、現実に存在する商品、例えば食品や日用品等をフラットデザインに入れると不自然な感じになってしまう。 これは前項で述べたマテリアルオネスティと関係がある。 極端な事を言えば、「現実に形ある物をそのまま表現する」事自体がフラットデザインでは不可能なのだ。

そしてもうひとつ。
食品を売る場合、「美味しそうだ」とユーザーに思わせて購入ボタンをクリックさせる手法をとる事は多いが、フラットデザインは「人間の欲求」に訴えかける描写が表現しずらい。つまり、感情的、直感的な表現が難しい。

逆にサービスやソフトウェアの場合、ユーザーの判断基準は「その内容・性質」に重きが置かれる。ロジカルに、坦々と商品について綴る事ができ、理論的に理解しやすい、伝わりやすい表現にすることができる。そのため、フラットデザインが有効だということが、お解かりいただけるだろう。

4.まとめ

流行のフラットデザインだが、ランディングページに関しては、しっかりと意図を理解した上で採用した方が良さそうだ。条件さえ合えばその効果は計り知れない可能性をも秘めている。 あくまで1つの表現手段・テクニックとして覚えておいて損は無いだろう。