プロ直伝!Webデザインの最新トレンド

ドラッグ&ドロップで作業可能なホームページ作成ツール Wix を使えば、こんなにも個性豊かなホームページを自分で作ることができますが、作っている途中で「?」が出てくることも....。
そんな時は是非、Wix アンバサダーが各地で主催する無料イベントに参加してみてください。質問を直接することができたり、あまり知られていない新機能の情報を得ることができます。
今回は8月のイベントスケジュールをご案内するとともに、Wixアンバサダーとして東京で活躍する平川さんに最新Webデザイントレンドを教えて頂きました。
1. 8月のイベントスケジュール
2. プロ直伝!最新Webデザインの最新トレンド
Webデザインについて教えて頂く前に、自己紹介をお願いします
東京で、Wixアンバサダーを務めております平川と申します。
インターネットアカデミーを卒業後、制作会社でWebデザイナーとして勤務しておりました。その際、HTMLベースでホームページを作り、納品しても、お客様が更新や運用できない事に疑問を覚え、お客様自身で気軽に更新できるサービスを探し始めたのがきっかけで、Wixに出会いました。
Wix 認定デザイナー「Wix プロ」の資格を取得し、現在はWixに特化したホームページ制作会社WixerDesignの代表をしています。Wixは、その操作性はもちろん、デザインに幅を持たせることができるのが魅力だと思います。
今回、最新のWebデザイントレンドについてお話させて頂きますが、Webトレンドを専門の知識がなくても、すぐに自分のサイトに取り入れられるのが、まさにWixの良い点の一つです。

それでは早速、最新Webデザインについて教えて頂けますか?
Webデザインはその時のトレンドによって日々変わっていくものです。ひと昔だと、2カラム、3カラムと言った形が主流でしたが、今そういったデザインでホームページを作ると、少々野暮ったい感じになりがちです。
流行りをいち早く取り入れ、素敵なホームページにするために、今回は私がおすすめしたい、最新のWebデザイントレンドを3つご紹介させていただきます。
1.ヒーローヘッダー
1つ目は、数年前から人気の「ヒーローヘッダー」。
背景全体にフルスクリーンの画像や映像(動画)を使用し、見る人にインパクトを与えるデザインです。このレイアウトを採用することで、ファーストビューで見る人にインパクトを与えることができます。
Wixでは、サイトの背景に画像や動画を使うことができ、さらに色を重ねることが出来るのが特徴です。そこにキャッチコピー(文字)を加え、背景と文字色にコントラストをつけることで、見やすく、バランスのとれたページにすることができます。

2.フラットデザインとマテリアルデザイン
2つ目は、「フラットデザイン」と「マテリアルデザイン」。
フラットデザインは、数年前からWindowsやiphoneなどのUIデザインで取り入れられ、その後トレンドとして定着しました。
フラットは「平面」という意味ですが、その言葉の通り、フラットデザインは最低限のエフェクト効果(シャドウなど)や、グラデーションを使わないシンプルなレイアウトやタイポグラフィーが特徴です。
Wixのシェイプの中にあるアイコンにも、フラットデザインのアイコンがありますので上手に利用してみてください。

フラットデザインから派生したのが、マテリアルデザインと呼ばれるものです。マテリアルデザインは3次元で構成されていると言えば、分かりやすいかもしれません。フラットデザインにはなかったシャドウなども利用されます。
マテリアルデザインは、動き(モーション)も特徴の一つです。イメージを掴むために、以下のGoogleの動画をご覧ください。
3.スプリットスクリーン
最後に、画面を大きく分割するデザインの「スプリットスクリーン」。
画面を分け、右側に商品説明、左側に商品画像といった具合に使うことができます。画面を分割することで、左右両方の画面を引き立たせる事ができ、使い方次第でとてもお洒落なデザインにすることが可能です。
画面を分け、右側に商品説明、左側に商品画像といった具合に使うことができます。画面を分割することで、左右両方の画面を引き立たせる事ができ、使い方次第でとてもお洒落なデザインにすることが可能です。
4.最後に
デザインには「余白の美」というものが存在します。情報量ばかり多いホームページは見難いので、出来るだけシンプルに、伝えたいことを絞ってください。ユーザー視点で、ホームページを作るようにするとより一層素晴らしいものになると思います。
平川さん、お忙しいところありがとうございました!
Webデザイントレンドだけでなく、それをどのようにWixで取り入れられるか教えて頂き、勉強になりました!

ライター: Wix Team