あなたはフラットデザインが好きかもしれませんが、美しく魅力的なWebサイトを作るにはさらに良い方法があります。それは、ソフトモーションです。この方法は、ユーザーを一瞬で夢中にさせることができます。
数年前、フラットデザインがWebデザインにおける一番のトレンドになる以前のことです。私たちは腹を立てていました。なぜなら、その当時のWebサイトは見た目は似通ったものばかりで、どれもパッとしないものだったからです。もちろんその責任はデザイナーの私たちにありましたし、今もあり続けています。
その後、もう一度デザインで遊び始めたWebデザイナーが現れました。余白やグラデーション、マイクロインタラクション、モーションなどを求め続けるデザイナーもいました。私たちは、再び可能性を見つけたのです。
フラットデザインの問題点は、ミニマリズムの哲学に起因します。ミニマリズムは包括的に徹底されるべきです。実際、フラットデザインではたくさんの間違いが起こり得ます。
Nielsen Norman Groupの調査では、フラットなUI要素がユーザーの疑念や混乱を招く可能性があることがわかっています。さらにこの調査では、フラットデザインの原則に基づいて体験をデザインするときに私たちがおかしがちな間違いも分析されています。調査の焦点は、シグニファイアを無視してしまった結果、私たちはいかにデザインの中に感覚的なものを加え忘れているかということです。
スパイスとしてのソフトモーション
デザインで活用できる、もっとも魅力的なシグニファイアがモーションです。モーションはインタラクションの同義語ではありませんが、見ている者をメッセージに引き込む鍵になる要素です。もちろん、過度なアニメーションは悪影響を与えることを、私たちはよく知っています。
以上から、多くのデザイナーはWebデザインにソフトモーションを取り入れ始めています。ソフトモーションとは、で、現在人気が上昇しつつあります。
ソフトモーションとは、目立たないが生き生きとしたアニメーションで、現在人気となりつつある手法です。ソフトモーションは、ユーザーの注意を大事な要素からそらすことなく、Webサイトやアプリの見た目を際立たせることができるという特徴があります。
Webデザインにおけるモーションの利点は、魅力的でインタラクティブなデザインを描けることです。ソフトモーションはどんなWebサイトにも使え、またクライアントにも好まれます。そのため、コンテンツをより効果的に伝達するために、デザインが躍動しているWebサイトやアプリを考えている方は、以下の提案をご覧ください。
スクロール
私たちデザイナーは、スクロールすると現れる要素をWebサイトに使うことが大好きです。しかしこの要素は誰もが実装していて、もはやそんなに特別ではありません。むしろこのフローが間違ったコードで構築されていると、壊滅的な結果すら生じます。代わりに、ユーザーの動作に呼応するちょっとしたアニメーションを取り入れるのはどうでしょうか？
Wixの航空写真テンプレートをスクロールダウンしています
このサイトの場合、金色の線によって、ほかのWebサイトと差別化されています。ユーザーも必ずこれに気づくでしょう。
背景動画
これまでほとんどの背景動画はぼかされているか、関連性のないランダムな風景でした。このような背景は、きちんとトレンドを理解せずに従うような「平凡デザイナー」に典型的に見られます。たとえクライアントが背景動画に満足していても、ユーザーは満足しません。私たちデザイナーがすべきことは、アートを創作することです。必要なのは機能的なアートですが、アートであることに変わりはありません。
Wix Code LPを飛び回ります
上のサイトでは、動画がメッセージを追いかけます。スローモーションになっているコンポーネントがあることにお気づきでしょうか。これは、コンテンツ要素とユーザーとの間につながりを作ることに大きく貢献しています。モーションの速度を遅くすることで、動画とそれに付随する情報を理解しやすくしています。テキストと、それに共鳴するイメージとの間に滑らかな連続性が生まれているのです。
ランディングページのアニメーション
ローディング画面が好きな人なんていません。特に３秒以上続くなんてもってのほかです。
もし読み込み速度が遅くてサイトにローディング画面が必要だという場合は、かなり入念に検証をすべきです。ローディング画面は単なるごまかしであってはなりません。目的をもって使用すべきものです。もしその目的がロゴを表示することであれば、ユーザーの視点からそれを考える必要があります。代わりに、ワンタイムアニメーションのランディングページを用いるのはどうでしょうか？
アニメーションはランディングページだけに用いるべきではありません。動くイメージは、メニューやホームページなどさまざまな種類のコンテンツを補完するためにも使えます。アニメーションのおかけで、Webデザインのどんな部分にもモーションを簡単に追加できます。
上の例では、ランディングページが期待感を生み出しています。よって、次に来るものもまた、楽しいものでなければなりません。ユーザーがボタンをクリックすると、クッキーが追ってくるはずです。
シネマグラフ
アニメーション化されたGIFは良くありません。シネマグラフを代わりに使いましょう。一般的なGIFと違い、シネマグラフは一部の要素がアニメーション化された画像です。写真に命を吹き込む優れた技術であり、それに応じてメッセージも伝えられます。
シネマグラフが効果的なのは、写真がよりプロフェッショナルな印象になり、多くの場合、ユーザーにとって予期せぬサプライズがあるからです。静止画とアニメーションが溶け合うことで、大きなヒーローイメージとして際立った第一印象を与えたり、ユーザーの関心をモーションに集めたりできます。シネマグラフが効果的であるためには、無理やり動かされているのではなく、より自然に感じる動きで、完璧なタイミングで行うことがひつようです
多くの場合モーションは小さいので、フォーマットが大きいとき、シネマグラフは最適に作用します。そのため、シネマグラフがもっともよくみられるのは、トップページやランディングページにあるヒーローヘッダーです。
Wixのソーシャルフォームのテンプレートに夢中です
背景のエフェクト
典型的なパララックス効果のモーションに飽き飽きしている方は、パララックス効果を調整してコンセプトを追求してみてください。静止画にわずかにズームエフェクトを加えましょう。コーディングの点からは難しいことではありません。効果を発揮するのに使えるきわめて簡単な方法です。
実際には、コードを１行も書く必要はありません。 Wixのインスタンスを起動し、続くチュートリアルに従ってください。 このツールで可能になる細密な制御に驚くことでしょう。
実は、これまでのすべての事例はWixで作成されています。Wixはドラッグ＆ドロップで作成できるWebサイトビルダーです。これらの事例に共通しているのは、現代のWebデザインの潮流である、モバイルファースト思考を基にした構造の中で、アニメーションを活用していることです。そしてWixの何よりも素晴らしい点は、ユーザーはコーディングの知識がまったくなくても、Webサイトを構築できるところです。
Wixでクリエイティブを探す
私はflashの時代からWixを継続的に使用しています。コーディングが熟練するにつれて、自分でコーディングするほうが好きになってきました。しかし、プロジェクトの欠かせない部分では、体験を作成するツールとしても、インスピレーションを得るソースとしてもWixを活用しています。
WixのチームはWebデザインのトレンドを慎重に追っていて、複雑かつ多機能なツールを実装することに関する彼らの見解に、私は感銘を受けています。また、彼らはブログも配信しており、デザインやマーケティング戦略、写真などに関する貴重なヒントや技術を伝えています。このブログは利益目的だけのブログではありません。
Wixでデザインを行う
サイトビルダーについて考えるとき、最初に思い浮かべるのは既成のテンプレートです。確かに、Wixには既成のテンプレートはありません。Wixにあるのは、460個以上の刺激的でクリエイティブなデザインです。さらに驚くべきことに、すべてのテンプレートは同じブロックから設計されているにもかかわらず、似通ったものがほとんど見当たりません。
プロジェクトがどんな種類のものであっても、デザインを見つけられるでしょう。Wixには環境NGOやアートギャラリー、オンラインストア、写真撮影などのテーマ用のデザインがすべて揃っています。それぞれのテーマは、ユニークで機能的かつお洒落な見た目に調整したりカスタマイズしたりできます。また、各テンプレートは、インタラクティブで、印象的な見た目になるようにデザインされています。
テンプレートからスタートしたくない人は、AIがバックアップするデザイン、WixのADIを試してください。これはデザイナーでも愛好家でも、ユニークな体験を作れるようにデザインされたアルゴリズムです。
ユーザーのインプットに基づいて、特定のニーズに適合するようにAIが無数のデザインを生み出します。AIはデザインの生成に加えて、ニーズに合わせてWeb検索を行い、使えそうな関連するものを見つけます。これはAIがアシストするデザインの最先端に位置する印象的な技術です。
個々のページやサイト全体に対して、色やフォントサイズ、アニメーションをカスタマイズすることができます。どのようなデザインを選択しても、Webのアクセシビリティを考慮してくれます。ここが、ほかの似たようなツールとWixの大きく違うポイントです。Wixのチームは身体の不自由な人を含むどんな人でも、サイトを訪れたりサービスを使ったり、仕事を楽しんだりすることが可能であるように、ベストプラクティスをハードコーディングしてくれます。
画像や色、テキストを簡単に最適化できるだけではありません。Wixには、キーボード操作のためのキーボードアクセシビリティと、訪問者が画面上における現在の位置を確認できるビジュアルインジケーターの機能があります。
また、スクリーンリーダーに邪魔されるのを防ぐために自動再生を制限するなど、アクセシビリティをある程度調節することもできます。
Wixのアプリマーケット
240以上のアドオンはほとんどが無料です。さらにWixのWebサイトは、とても基本的なアプリから、楽しめる珠玉の作品まで、ニーズに合わせて正確に調整することが可できます。たとえばFlipbookは、私がいつもクライアントに見せているものです。そしていつもすぐに売れます。どのような特定のニーズにも、簡単にカスタマイズ、適用することができます。
360 Imagesも魅力的なアプリです。GoogleのVRエンジンを活用して、360度の画像を提供します。ビジュアルを追及したかったり、もちろん必要なコンテンツをもっていたりするような人には便利なアプリです。Googleのエンジン特有の制限もいくらかありますが、多くの場合秀逸な体験です。
必携のアプリとしては、Social Media Streamが挙げられます。これは非常に面白い方法でページにソーシャルアカウントを加えるアプリです。FacebookやTwitter、Instagram、YouTube、Pinterest、Tumblr、そしてロシアのSNSであるVKにいたるまで、ほとんどの人気SNSにカスタマイズでき、独創的に機能します。
企業向けのWix
Wixは企業にとっても素晴らしいプラットフォームです。クリエイティブな趣向をもったビジネス機能もいくつかあります。お客様の声やフォームのビルダー、ライブチャット、SNSやLinkedinの集約などの便利な機能に加えて、多くの用途にフィットするようにWixを拡張することができます。チケットをオンラインで販売したりホテル予約のシステムを管理したり、またクライアントの管理にWixを使うことまでも可能です。
またWixのECサイトシステムを活用して、製品をオンライン販売することもできます。社内デザインの一体型ECサイトのシステムは、ほとんどのニーズやケースシナリオに合わせられるでしょう。また取引手数料はかからないので、自分で稼いだものはすべて自分のものになります。
まとめ
2006年に公開されて以来、Wixは素晴らしいユーザーベースを構築してきました。視覚的に自分を表現することを追求するデザイナー向けのものであり、際立ったプロジェクトを構築するためのオプションが豊富にあります。視覚的な美しさや効率的なサイト作成のワークフロー、たくさんのカスタマイズオプション、AIによるデザイン、拡張機能、そして驚くべきオンボーディング体験という魅力がWixには詰まっています。また、わかりやすいサポートセンターと活発なコミュニティフォーラムによるバックアップもあります。
しかしもっとも重要なことは、Wixは今も革新を続けていることです。動的なWebサイトを作成するデータベースによるプラットフォーム、Wix Codeを用いて、Wixはサイトビルダーに共通する限界点に挑みつづけています。そうである一方で、彼らはやはりデザイン志向でもあります。つまり、すべてはモーション、ソフトモーションに関することなのです。
Wixには無料枠もあるので、その機能を探索することができます。無料のサイトは永遠にあなたのものです。月額4.50ドル払えば、ドメインを追加できます。サイトにWixの広告を表示させても良いという人は、これでばっちりです。しかし、広告が邪魔になる場合は、次の階層にアップグレードしましょう。もちろんホスティングはすべてのプランに含まれます。
またプレミアム層向けに、14日間のリスクフリートライアルがあります。Wixが自分の制作のワークフローに適合するかどうかを確認するには十分すぎる時間です。やってみましょう。もし良かったら私のお気に入りのテーマも使ってみてください。これらのテーマには、ソフトモーションWebデザインのトレンドの優れた点がすべて含まれています。
