マテリアルデザイン

マテリアルデザインとフラットデザインとは?

マテリアルデザイン・フラットデザインが主流のウェブサイトデザイン

一般の方でもウェブデザインがこの1~2年で大きく代わったと感じていることでしょう。最近、フラットデザイスマホファースト・モバイルファーストという言葉がネット上でよく見られるようになった。この概念は、スマホを中心に考えたデザイン指向であるが、それに並行してマテリアルデザイン・フラットデザインと言われるデザイン指向もおおく見かけるようになりました。弊社では、錯塩リニューアルしたウェブサイトは、このフラットデザインによるスマホファーストで制作されております。

それ以降に弊社で制作される殆どのサイトが、ワードプレスによるスマホファーストでフラットデザイン・マテリアルデザインを採用しています。

ウェブデザイン

上記は、Googleのウェブデザインツールのサイトです。PHOTO SHOPがなくても無料で使えます。

マテリアルデザインとは?

Googleが推奨するマテリアルデザインとは、物質(マテリアル)は比喩(メタファー)という難しい言葉による概念です。フラットデザインとマテリアルデザインは似ているようですが、考え方が全く異なります。スマホでの操作性を重視しているのはどちらも同様で、フラットデザインにモーションを与えるという点では、どちらも似たようなモノになるかも知れません。

マテリアルデザインは「視覚」ではなく「触覚」に語りかけるようなグラフィックデザインで、実際に操作しているかのような効果を演出するデザインです。フラットにデザインされたものに意味のあるモーションを加えることで、ストレスなく操作方法等をガイドすることに長けています。影を利用するなど多少のリアリティがある表現もマテリアルデザインの範囲内で、Google社より制作ガイドラインが設けられているため、迷うことも少なく制作することができるでしょう。

3分でわかる!フラットデザインとマテリアルデザインの違い

フラットデザイン

フラットデザイン

フラットデザインとは?

フラットデザインでは、基本的にボタンなども画像を使わず、CSSで記述されます。それによってスマートフォンなどのモバイルの電波状況も考慮されています。また、このデザイン思考ではシンプルで、現代的なイメージが感じられます。ただ、PSDなどでデザインを表現する時にCSSなどを理解していないとなかなか制作が難しくなります。また、フォントなどもウェブフォントが活用されます。

フラットデザインとマテリアルデザインは一見似たようなグラフィックデザイン手法に思えますが、実は根本的な考え方、表現の仕方が異なります。それぞれにメリット・デメリットが存在し、シーンに合わせて使用していくことで、効果的に魅せることができます。

上記のように2つのウェブデザインの概念を有効に使いこなすことが大切になっている時代だということを一般の方もご理解ください。

モバイルファースの概念

モバイルファース・スマートフォンファーストの概念

モバイルファースト・スマートフォンファーストという概念が今のウェブ制作が行われています。
しかし、弊社はデスクトップからレスポンシブで制作を始めます。そして、スマホでの出来ることは、やはりデスクトップより少ないのも事実です。それは当然、デスクトップよりキャンパス自体が遥かにスマホの方が小さいからです。そこで、モバイルファースト・スマートフォンファーストは現実的にどのように考えて制作すればよいのかを私が行っている項目を一部紹介します。

ATFウェブTOP 

モバイルファースト・メールでのお問合せについて

メールでのお問合せ激減しているのもスマホユーザーが多くなったからでしょう。その代わりに、お問合せなどが電話に変わりました。電話しやすい仕組みを考える必要があります。

モバイルファースト・テキストコンテンツ

ウェブは、「サラッと見る」というテキストコンテンツも更にサラッと見ることになるスマホです。
適切なイメージ画像を使用して、コンテンツを短くする必要があります。その分コピーライトが更に重要になります。

モバイルファースト・マテリアルデザイン

フラットデザイン・マテリアルデザインでは、解説なしにランディングページにユーザーを引き込む必要があります。
一つ一つのボタンをどの位置に設置するのかを考える必要があります。まず、Googleのガイダンスを理解する必要があります。
Googleマテリアル デザインのガイドライン(日本語版)

弊社のこのTOPページでは、ファーストビューでランディングページに湯初するボタンだけを設置しています。つまりユーザーを誘導する必要があるからです。

まだまだ、あるスマホファースのユーザビリティ

まだまだ、あるスマホファースのユーザビリティの向上方法あります。大切なのは、ランディングページでユーザーの「これ欲しい!」「これ購入するとこんなことが出来る」などのユーザーの心を熱くさせる仕掛けです。

web 制作の10の掟。こうやってウェブサイト制作成功実績を上げている

ウェブ制作する時の起きて

私には、ウェブサイト・ホームページを制作する時の必ず考えることやっておくことがあります。そして、同じく運営サポートでも同様です。それらを今回書いてみようと思ってます。一般の方には理解しにくいかもしれませんが、プロはここまで考慮するということを知って頂ければ幸いです。また、ウェブディレクターを目指している方にも参考になればいいな〜と思っています。

web制作の掟

ウェブ制作前にすること

まずは、クライントのビジネスを知る必要があります。そのためにはアクティブスピーカーになる必要があります。クラントによっては、10時間ぐらいお話を伺うケースもあります。それだけではもちろんないのですが、以下にフェーズ1としてご説明させていただきます。

フェーズ1 ターゲットを考える

掟1.クライアントの話を十分すぎるほど聴く
掟2.ペルソナで勝手にターゲットを作り上げる
掟3.ペルソナをクライアントに提案して、承諾を得る

クラントにターゲットを絞り込めというお願いをしても、多くの小さな会社の経営者は絞り込めない。そこで殆どのマーケティングの材料(過去のクライアントの実績)は、長時間・複数回数のアクティンブリスナーとして、聴き込むしかありません。これを行わないと、マーケティングが効いたオンリーワンのサイトはできません。特に今はマテリアルデザインが主流となるので、画像やコンテンツで差別化するしかないのが現状なのです。

さらっと見るユーザーの特性を考えるウェブ制作

多くのユーザーが文字などあまり読まない。「さっと見る」のがウェブサイトです。もちろん、ネ申なユーザーは、重要だと感じるコンテンツなどはプリントアウトしてでも読むケースはある。しかし、ウェブサイトは、ファーストイメージで決まります。そのサイトが自分の求めている内容が記載されているのか?ひと目で判断される必要があります。そこで私は、フェーズ2の掟通り作業を実行する

フェーズ2 ビジュアルを考える

掟4.ターゲットの求める情報のあるサイトのビジュアルを考える
掟5.コピーライトを考える
掟6.スライドのアクションを考える

ファーストビューで、ユーザーが更に重要なコンテンツを読み進んでくれるように考えなければなりません。そして、マテリアルデザインでは、TOPのスライダーの動きが重要になります。

SEO対策をしなければウェブ制作はゴミを作るようなモノ

サイトの訪問数が、ユーザーをビジネスに巻き込む重要な要素です。また、サイト運営で、ユーザーの求めるKEYWORDを模索するにしても、サイト公開時からKEYWORDをしかりやっておきたいにです。無計画では、成果あるSEO対策はとても難しくなります。

フェーズ3 SEO対策を考える

掟5.ターゲットの求めるKEYWORDを仮説として設定する
掟6.ローカルサイトならローカルSEO対策を行う
掟7.各階層をしっかりと作るためのサイトマップを作成する。

売り方が下手ならん愛も売れないウェブでもリアル社会でも

ターゲットにどうのようにクライアントの商品を価値あるモノ・魅力的なモノに見せるのかがとても大切になります。ここで、イノベーション的な提案をするときもあります。これが結構成功率が高いのも事実です。商品を見直して売り方を変えて、新しい市場を開拓することも出来できます。

フェーズ4 SEO対策売り方を考える

掟8.売り方は、とても重要です。ビジュアルとコピーライトにフォーカスする
掟9.ユーザーが「欲しい!」という感情になるような演出を考える
掟10.信頼の築けるアプローチと誠実なコンテンツをシナリオを考える

まずは、お電話・メールで
ご相談ください。

「ホームページ制作成功の秘密」の
DVDと資料をお届けします。

Web制作に関する相談専用ダイヤル
メールアドレスだけでお問い合わせ