刺激的なウェブデザイントレンド

デザイナーは、アートとしてのサイト、インタラクティブなプロジェクトとしてのサイト、そして単に遊びと喜びのために存在するサイトの作成を開始しました。これは、デザイナーが新しい技術を披露したり、自分のためにWebサイトを作成したりする方法を見つけたときのWebの始まりを思い起こさせます。

私たちは初期のウェブの少しのルネッサンス期にあるようです。それは理にかなっている。ファッションも90年代後半から初期の頃から大いに借りてきました。私たちの多くは、家でぼんやりとインターネットサーフィンをしていて、ウェブが最初に登場したときのように、流用したりエキサイティングなことを探していました。

視覚的には、Webのトレンドはその時代からヒントを得ています。デザイナーは、標準となった写真中心のレイアウト以外にも創造性を見出しています。代わりに、これらのデザインは、タイポグラフィ、グリッドとライン、および単純なナビゲーションを使用するための創造的な方法を見つけます。落ち着いた色、洗練されたテクスチャ、セリフフォントを多く備えた最新のスタイルにより、サイトがレトロになりすぎないようになっています。

Webデザインも、高度なインタラクションやアニメーションなどのエキサイティングな現代的な手法や、ガラスの形態や粒子などの視覚効果によって未来に向かって進んでいます。また、設計者はノーコードツールを使用して、これまでになく迅速かつ簡単にすべてを実行できるようにしています。

1.喜びのミニサイト

ユーモアにはさまざまな形があり、笑いを誘うWebサイトを構築するのはいつでも楽しいものです。ビルドを楽しんでみませんか？

ピクサーの初期の頃、スタジオはアニメーターに彼らが制作したすべての長編映画と一緒に短編映画を作る時間を与え始めました。これらのショートパンツは、長編映画にプレッシャーをかけることなく、アニメーターがよりルーズで遊び心のあるクリエイティブな時間でした。彼らはまた、アニメーションの分野を前進させる多くの新しい技術を生み出すことになりました。Web開発者は、Webサイトでも同じことができることを発見しています。

2010年のピクサーからの短編であるDay＆Nightは、 InsideOutやSoulなどの機能で使用されるアニメーションアプローチに影響を与えました。
楽しいミニサイトを作成することで、デザイナーは創造性を発揮し、テクニックを練習して実験し、プロのギグに乗り込むことを心配せずにすべてのデザインストップを引き出すことができます。時々、創造のための創造は、轍から抜け出すための素晴らしい方法です。

さまざまな方法で実験できます。意図的に遊び心のあるUXデザインを設定するか、意図的に期待を覆すことです（ただし、アクセスしやすい方法でビルドするようにしてください）。コピーや画像だけでなく、サイトのナビゲーション、メニュー、インタラクションにもユーモアを取り入れましょう。微妙であること。そうでないまでは、深刻なサイトのように見せてください。これは、予期しない方法で機能するサイトを作成する機会です。イースターエッグスタイルのプロ向けのマーケティングサイトは、うまく実行されれば機能します。

Guns 2 Swordsは、80年代のダンジョンズ＆ドラゴンズの栄光をたたえたミニサイト/エンタープライズで、「きみならどうする？」を味わえます。それは、実際のサービスとして、ハメ撮りアーティストと誇大広告アプリの作成者の間のどこかにあるグループであるMSCHFによって作成されました。訪問者は、世界クラスの鍛冶屋によって剣に鍛造されるために銃を送ることができました。本当に叙事詩。

Blue Check Homesは、完全に合法的に見える「深刻な」Webサイトを作成するという反対のアプローチを取りました。ダニエル・バスキンによるTwitterのジョークとして始まったものは、著名な個人の家に「ブルーチェック」メダリオン（検証済みのTwitterアカウントのものなど）を販売する本当のミニビジネスになる可能性があります。

‍2。Webベースのスカベンジャーハント

ウェブサイトの構造は実際にはパズルに役立ち、スカベンジャーハントは信じられないほどうまくいきます。ページをデイジーチェーン接続し、特定の部分をパスワードで保護して、訪問者に回答を提供したり、シリーズの次のページのロックを解除するための手がかりを見つけたりすることができます。

プロンプト、手がかり、および答えを隠して明らかにするためのあらゆる種類の創造的な方法があります。これは、Webデザインの腕前を使って、夢中にさせるパズルを作成できる場合です。

手がかりのためのいくつかのアイデア：

なぞなぞや手がかりに基づいて単語を提供する
メインサイトまたはスカベンジャーハントサイトに隠されている単語を見つけます
ページ上で非表示のクリック可能な要素を見つける
形を描く
暗号をデコードする
本当に全員が最後までやり遂げられるようにしたい場合は、視聴者に何らかのヒントや回避策を提供することを忘れないでください。スカベンジャーハントは、製品の発売を明らかにしたり、新しいビデオをリリースしたり、視聴者に隠された情報を提供したりするために使用できます。

マーケティングエージェンシーのThreeSixtyEightは、会社の撤退場所をチームに明らかにするためにスカベンジャーハントを行いました。それは、訪問者が手がかりを探している間にページの選択された部分を明らかにするために使用できる音楽とカーソルの周りの不透明度の調整で神秘的な雰囲気を作り出しました。

‍3。アプリのような体験

ThreeSixtyEightの共同創設者であるJeremyBeytは、この種の小規模で経験に焦点を合わせたサイトがWebデザインの未来であると強く信じています。彼は次のように説明しています。「デザインの観点からは本当に誇張されたフロントエンド主導のWebエクスペリエンスは、これまで存在しなかったWebを使用するまったく新しい方法です。それはアプリのような体験です。それは、私にとって、今のチャンスです。」世界は、インタラクション、アニメーション、ダイナミックな体験が標準となっているアプリに慣れてきました。論理的な次のステップは、そのエネルギーをWebサイトにもたらし、そこでよりユニークなエクスペリエンスを作成することです。

サイトが自己完結型で、秘教的で、好奇心旺盛だった時代に戻っていると想像する人もいます。しかし、ノーコードなどのサイト構築用の新しいツールを使用すると、動的で相互作用に焦点を合わせた設計を非常に簡単に構築できます。ThreeSixtyEightは、開発プロセスに完全なインタラクションデザインに焦点を当てたステップを追加しました。

4.1ページのWebサイト

最も効果的なサイトは、最も複雑でないサイトである場合があります。メニューやナビゲーションを廃止し、シンプルなスクロールナビゲーションを採用した1ページのWebサイトの人気が高まっています。1ページのサイトは、ポートフォリオや単一のアイデアのプレゼンテーションなど、主題が狭い場合に最適に機能します。

これらのサイトは、チラシを持ったり、ポスターを読んだりする感覚を呼び起こします。確認する必要のあるすべての情報は、ナビゲーションの邪魔になったり、複数のページを検索したりすることなく、1か所にまとめられています。

インディハリス（ジョーダンヒューズによって構築された）のためのこのウェブサイトはデジタル履歴書です。それはその主題を注目の的にさせます。これにより、必要なものはすべて前もってあるため、カジュアルな視聴者が履歴書全体を読む可能性が高くなります。

Joshua Kaplanのポートフォリオサイトはより複雑ですが、同様に効果的です。彼は一貫した構造を使用して、視聴者が迷子にならないようにし、気を散らす要素（背景、大きな画像、動きがない）を減らし、彼のサイトに線画と先祖返りの著作権記号のロゴを使って少しレトロなウェブを感じさせます。

5.場所感の強いサイト

たぶん私たちは皆、行方不明の旅行を補っているだけなのかもしれませんが、いくつかのウェブサイトはより場所の感覚を獲得しているようです。ホームページや、クリエイターが住む都市、町、自然の場所に注目を集めるセクションについての写真が掲載されています。

Webは、閲覧しているサイトがどこから来ているのかとのつながりがないことが多い、離れた場所である可能性があります。「 makewithlove in …」のようなメモを追加したり、お気に入りの近くのスポットの画像を掲載したりすると、訪問者はあなたがどこにいるかを写真に撮ることができ、実際の小さなつながりが生まれます。旅行が少なければ、少なくとも世界中でオンラインで接続していることを思い出すことができます。

‍グレイス・ポッターは、この美しい海の画像をランディングページとして使用していますが、彼女の作品とは直接関係ありません。この写真で、彼女は彼女のウェブサイトを彼女のニュージーランドのルーツに基づいて、訪問者を彼女の世界に連れて行きます。

6.アールデコモチーフ

結局のところ、私たちは再び20代になります！アールデコのモチーフは、過去数年にわたって流行している幾何学的なデザインとよく合います。アールデコスタイルとの最初の関係は、華やかなスピークイージーサイトやギャツビーをテーマにした結婚式の招待状かもしれませんが、美しくミニマリストなデザインにすることができます。

今年のトレンドは、アールデコのイラストや建築のすっきりとした曲線と反復的なグラフィックの形からインスピレーションを得ています。これらの要素は、美しいロゴ、フォント、スペーサーモチーフ、境界線、およびイラストを刺激することができます。このスタイルで効果的にデザインするには、オリジナルのアールデコ運動の背後にある哲学を理解するのに役立ちます。

アールデコは、自然界の要素と機械時代の現代性を組み合わせたものです。太い線、対称性、シンプルさ、要素の不変の繰り返しなどです。このトンボの羽の形が、古典的なアールデコ調のクライスラービルの規則的なパターンにどのように変換されるかをご覧ください。

2017年にBUCKがFacebook用にデザインしたアレグリアのアートスタイルは、アールデコの人物像から多くの手がかりを得ているようです。すっきりとした曲線、楕円形の顔、細部の縮小、誇張されたプロポーションはすべて、このアートスタイルを思い起こさせます。おそらく、イラストレーターのロドルフォ・レイエスによるこの見事な作品のような、新しいタイプのモダニストのフィギュアデザインは、このトレンドの更新版である可能性があります。

7.ヒーローの画像が少ない

今年、多くのデザイナーは、写真やイラストに頼るのではなく、デザインと話すヒーローセクションやランディングページを作成することを選択しています。ヒーロー画像はすぐに大きな視覚的インパクトを与えますが、派手な画像の気を散らすものを排除することで、スタイルとコンテンツに焦点を当てることができます。

Humain、SVZ、Heyday、RADARの4つのWebサイトは非常に異なりますが、それぞれがレイアウト、タイポグラフィ、色、形状を使用して、強力でユニークなブランドアイデンティティを伝えています。画像を忘れると、少し謎が生じ、訪問者はヒーローセクション以外に何があるのか​​を知るようになります。

8.特大のタイポグラフィ

珍しいサイズのタイポグラフィは、今年の新鮮で大胆なデザイントレンドです。特定のサイズでは、単語は単なるコピーの一部ではなく、グラフィック要素になります。これは、ミニマリストまたはマキシマリストのデザインで同じように効果的に使用でき、多くの異なるスタイルに適合することができる用途の広い手法です。

Eva Habermann （Daniel Spatzekによって作成された）のこのフィルムポートフォリオWebサイトは、移動するフィルムポートフォリオリールに大きなテキストをオーバーレイします。テキストは画像を部分的にブロックし、視聴者がもっと見たいと思うようにします。2色のサンセリフフォントは、判読不能または圧倒されることなく、適切な量のコントラストを提供します。

David Calleのポートフォリオサイトは、特大のテキストを使用して、洗練された超ミニマリストのデザインを作成しています。ニュートラルな背景色とセリフフォントは、視聴者がスクロールするときの微妙なアニメーションの動きと美しく組み合わされます。

9.インタラクティブフォント

テキストをさらに活用して、一部のデザイナーは、テキストを動かしてユーザーのマウスで遊ぶための創造的な方法を見つけています。テキストをインタラクティブにする簡単な方法は、ボタンの場合と同じようにホバー状態の変更を適用することです。これにより、これらのインタラクションを手作業で作成する場合よりも、最新のノーコードプラットフォームを使用してより複雑な効果を簡単に作成できるようになります。フォントにインタラクティブ機能を採用する場合、文字を動かすことに気を取られる人もいるため、読みやすさを覚えておくことが重要です。

DillingerのWebサイトでは、カーソルをテキストの上に置くと太さが変わるフォントを使用しています。黒い背景に対して縮小されるテキストは、選択されたテキストをより読みやすくし、使いやすさを向上させることに注意してください。誇張されたカーソルサイズはまた、サイトをより没入感のあるものにします。デザイナーのTimRicksは、効果がどのように作成されたかを確認したい人のために、このサイトのクローン可能なバージョンを作成してくれました。

10.責任あるモーションデザイン

双方向性について話しているので、今度は責任あるモーションデザインについて話します。これは、標準的な手法になり始めていると考えています。動きはウェブデザインの興味深い側面ですが、乗り物酔いを引き起こすだけでなく、乗り物酔いを引き起こすことによって人々に害を及ぼすことも簡単です。乗り物酔いは非常に一般的であり、マウスでトリガーされるスケーリング、視差効果、または平面シフトスクロール（スクロールジャックとも呼ばれます）などのアニメーションは避ける必要があります。

モーションは、微妙な方法で責任を持って使用できます。WebflowのシニアブランドデザイナーであるCoreyMoenは、MacOSの「モーションを減らす」設定を考慮しながらビルドする方法について詳しく説明しました。

それは重要ですが、これをキャッチオールとして使用し、あらゆる場所でモーションを使用するための言い訳として使用する必要があるという意味ではありません。過度の動きは、混乱を招くユーザーエクスペリエンスであり、多くの人にとって有害で​​あり、単に必要ではありません。

関連チュートリアル：モーションを好む人と好まない人のために構築する方法

11.コラージュイラスト

コラージュスタイルのグラフィックは、サイトのイラストに触感を与え、デザインの余白を広げ、デザイン全体を写真の周りに集中させることなく画像を組み込むことができます。コラージュ内で形、パターン、色を混ぜ合わせてください。写真にモノクロ効果、色合い、またはフィルターを追加して、全体的なデザインと調和させることができます。‍

Vantaのサイトでは、ランディングページとサイト全体でコラージュスタイルのイラストを使用しています。写真をコラージュのような外観に編集すると、グラフィックを不規則に軸外に配置して、サイトのグリッドを分割することができます。

ホームページウェブデザイン、ホームページ制作をされる場合は、各種デザインのトレンドや、ユーザーに合わせた成約率を高める為の事をどれくらい行えるかで効果が変わってきます。また、そのための予算の振り方でもかわります。ヴィジュアル重視のホームページなのか、成約率重視なのか、その間をとるのか、はたまた、継続した変更や修正なども含めて行うのか？という事になります。
そういった意味で、依頼されるホームページ制作業者は、しっかりやり取りしないと問題が起きてしまう事もあります。なので基本はしっかりとしたコンテンツが入ったホームページを持つ、ホームページ制作会社かつ、できれば、それなりに上位表示しているホームページ制作会社が望ましいと言えます。

例えば、北九州の会社であれば、ホームページ制作 北九州 というようなキーワードで上位表示しているサイトが特に望ましいと言えます。

その中で、しっかりとブログ記事も投稿されてあり、マーケティングとしてのブログ投稿への意味がしっかりされてあるとより良いという事が言えます。

できればそういう条件をクリアしているホームページ制作会社を選ばられる事をおすすめします。