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

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

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

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

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

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

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

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

フラットデザイン

フラットデザインとは？

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

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

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

ヘアーサロンのホームページ制作を考える

現在弊社では新宿にある話題のヘアーサロンのサイト構築に関わっています。そこでヘアーサロンホームページ制作を考えてみました。どんなビジネスであってもSEO対策は大切となりますが、ヘアーサロンホームページ制作それ以上に気を使わなければいけないのが画像の使い方とその画像の質となります。まず、そのヘアーサロンでどんなスタイリングをしてくれるのかを判断するのはカット例の画像とウェブデザインとなります。

次にはローカルSEO対策が必要になります。
都内の有名ヘアーサロンであれば、地方からの集客も望めますが、一般的にはエリア対応のビジネスになります。

「どんなカットをしてくれるヘアーサロンなの？」それがホームページの役割

入店したことのないヘアーサロンであれば、話題性や口コミ・紹介などが入店のきっかけになるのでしょう。次の要素としてはホームページを見て興味が湧いたから入店するというケースです。また、題性や口コミ・紹介などであってもウェブをチャックすると予想されます。その時、ユーザーは「どんなカットをしてくれるヘアーサロンなの？」が一番興味が湧くのではないでしょうか？その次に「どんな人がカットしてくれるの？」・金額・システムと次々に興味が湧いてくるのではないだろうか？そのために必要なのがカット例のやカット実績の画像となります。

ワードプレスのアーカイブをカスタマイズして、カテゴリーごとにカット例やカット実績をまとめる必要があります。

スマーフォン対応でなければ意味が全く無いヘアーサロンホームページ

まず、通常のヘアーサロンホームページをチャックする層では、９０％近くがスマホを利用すると考えた方がいいでしょう。であるならばスマホ表示を優先したヘアーサロンホームページを制作するべきです。お店のイメージをしっかりとスマホデザインで訴求してください。しかし、これらのタイプのホームページを制作するには多くのスタッフを掛けているヘアーサロンや他店舗展開しているヘアーサロンに限定されます。それは費用対効果の問題となるからです。

弊社では費用対効果が得られないと予測されるホームページ制作は受注しないからです。

小さなヘアーサロンのホームページ制作

無料で出来るスマホ対応のホームページ制作か？比較的費用の掛からないホームページ制作を選択必要があります。WEBDESIGN WIX ✕ ATFは無料ホームページ制作WiXのシステムで制作しました。このシステムを利用するれば費用も比較的少なくスマホ対応ホームページを制作できます。

まとめ

COOLなデザインのサイトを作ってもローカルSEO対策ができていないと、あなたのサロンをユーザーが探すことが出来ません。また、最近は無料の予約システムなどもあります。小さなサロンでは時間のあるときに手作りでサイトを作るのもいいでしょう。大型店舗や複数店あるサロンでは、それなりのウェブサイトを制作して、新規顧客の入店を即してください。ユーザーが自分のお気に入りのサロンをウェブで探しています。