ハンバーガーを捨てる。ウェブデザインのトレンドに影響を与えるもの

経験的証拠のCEOであるChrisLakeは、2016年のWebデザインのトレンドを1つの記事にまとめました。

均質化

クリスレイクによると、「ドリブル」デザインのトレンドは標準化に取って代わられています。 2016年のすべてのサイトは、ますます互いに類似するようになります。

ページの代わりにパターン

現代の設計チームはすでに新しい仕事の原則に切り替えています。最初にUIコンポーネントが開発され、次にそれらに基づいてWebサイトまたはサービスページが開発されます。 2016年には、世界中のほとんどのチームがこの原則を採用します。

アニメーション

Lakeによると、CSS、HTML5、およびjQueryを使用すると、Flashと同様に、本格的なアニメーション効果を作成できます。すべての設計者が、ユーザーエクスペリエンスを妨げないように、インターフェイスでアニメーションを使用する方法をまだ学習しているわけではありません。
ただし、2016年には、アニメーション効果のより良い例が増える予定です。

豊富な色とパレット

豊かな色とネオンパレットが2016年のトレンドになります。例はブルームバーグのウェブサイトです。

もう1つの例は、2015年にサービスチームによって提示されたMediumロゴの再設計です。デザイナーは明るい緑色のパレットを使用しました。

別の例はSpotifyです。

画像をぼかす

Facebookのエンジニアは、ページ画像を読み込むときにぼかしとズーム効果を使用します。したがって、ユーザーは、コンピューターに完全にダウンロードされる前でも、画像を見ることができます。 Facebookの開発者によると、これによりページの読み込み時間が30％高速化されます。

ページ構造の読み込み

Facebookは、サイトをロードするときに別のトリックを使用します。コンテンツが表示される前でも、ページの構造を表示します。ページの読み込み中、訪問者は白い画面やある種のAJAXインジケーターを見る代わりに、リソースのデザインに慣れます。

この手法は、2016年にさらに普及する予定です。

スクロールジャック

スクロールジャックは、マウスをスクロールするとコンテンツが変化する手法です。たとえば、AppleのWebサイトでは次のメカニズムが使用されています。

ただし、多くの設計者によると、コンテンツはマウススクロールの動きと同期して変化しないため、この手法はユーザーにとって必ずしも便利ではありません。これにより、インターフェイスの使用に不快感が生じる可能性があります。
Lakeはまた、2016年には、エフェクトやアニメーションが豊富なページがますます表示されるようになると述べています。このようなサイトでは、ユーザーがインターフェースを操作することがますます困難になるでしょう。

パッシブアグレッシブポップアップ

デザイナーやUXスペシャリストの不満にもかかわらず、ポップアップは再びインターネットを埋め尽くしました-電子メール購読の形式、会社のソーシャルネットワークへの購読の申し出、割引など。
レイクによれば、2016年には、状況は改善されません。マーケターは、依然としてこの手法を自分の目的に使用することがよくあります。

ハンバーガーを避ける

2016年には、デザイナーはメニュー項目を非表示にする「ハンバーガー」アイコンから「目に見える」要素を優先するようになります。
たとえば、Youtubeはすでに「ハンバーガー」から「タブ」付きの水平メニューに切り替えています。

重いページは重くなります

2010年の平均ページサイズは702KB、2015年の平均ページサイズは2219KBでした。 3倍以上。そして、誰もその成長を制限することを考えていないようです。たとえば、The DailyMailのホームページの重さは8.8MBです。
Lakeが書いているように、これはモバイルユーザーに悪影響を及ぼします。モバイルインターネットの速度によって、このような「重い」サイトを常に表示できるとは限りません。

ウェブデザインのいくつかの傾向は年ごとに変化しますが、他の傾向は長い間関連し続けます。今年のデザイントレンドの完全なリストと、使用に関する説明と推奨事項を示します。

あなたがあなたの時間より進んでいないならば、あなたは必然的に遅れています。

2016 Web Design Trends Guideへようこそ！

それぞれのトレンドを説明するときに、それが機能する理由と、それを個人的に習得する方法について説明します。また、Intercom、Google、Beoplay、Sennheiserなどの企業の40を超えるサイトの例を提供します。

レビューの概要は以下のとおりです。

1.はじめに

2.マイクロインタラクション

4.ミニマルなデザイン

5.フラットデザインとマテリアルデザインのハイブリッド

6.ジューシーなアニメーション

7.タイポグラフィ

8.鮮やかな色

9.長いスクロール

10.HDグラフィックス

11.イラスト

12.結論

小さなインタラクションがどのように訪問者に思い出に残る体験を生み出すことができるかを調べることからすぐに始めましょう。

マイクロインタラクション

モバイルアプリの設計にとって重要なのは、より深刻なアクションの流れにおけるマイクロインタラクションの設計です。それらは通常非常に取るに足らないように見えるので、ユーザーはまったくためらうことなくそれらを完了することにします。

通知の有効化/無効化、押されたときのボタンの色の変更、画像への新しいコメントの到着などを示す音声通知-これらすべての小さなことがユーザーの目には画像全体に追加され、印象を形成しますアプリケーションを使用する。

マイクロインタラクションの品質設計によるメリット

製品を操作するようにユーザーをすばやくトレーニングできます。
ステータス、変化、および特定の領域に注意を引く能力の関係。
完了したアクションの結果に関するフィードバックを提供する。
製品との対話の主な経験を妨げない快適な要素を追加します。
インターフェースの独占性でブランドの地位を強化する。
ユーザーの期待に応える（マイクロインタラクションは多くのサイトやアプリケーションの標準です）。確かに、それらはあなたの製品にも期待されます。

1.ユーザー間の習慣を形成します。

マイクロインタラクションは、訪問者の習慣を構築するための重要な要素です。このプロセスには3つの要素があります。

シグナル（マイクロインタラクション）-アクションを開始するトリガー。
繰り返しのアクションは、ユーザーにとってなじみのある手順です。
報酬は、アクションを完了した結果です。

たとえば、Facebookの赤い長方形と白いアイコン（トリガー）は、新しいメッセージを示します。ユーザーは、アイコンをクリックして通常のアクションを実行し、友人とチャットします（報酬）。しばらくすると、ユーザーはそのようなことを見て、必要なアクションを自動的に実行します。報酬（モチベーション）が高いほど、習慣が強くなります。

2.頻繁に使用するように設計されています。

製品を使う習慣をつけたいので、よく使う要素のデザインを考えていく必要があります。最初は面白くてかわいく見えるかもしれませんが、時間の経過とともに煩わしくなり、何百回もの繰り返しサイクルの後に時代遅れになる可能性があります。この効果の可能性をつぼみに挟んでみてください。

3.製品インターフェースを使用して、トリガーの共通のビジュアルを作成します。

共通のインターフェースを使用して、デザインが類似しているマイクロインタラクション要素を作成してみてください。たとえば、同じ色、同じアニメーション、形状などを使用します。デザインの一貫性により、ブランドの認知度が高まり、ブランドのアイデンティティが向上します。たとえば、New York Timesは、独自のロゴをブートアニメーションとして使用しています。他のものと混同することができない署名認識可能なスタイル。

4.アニメーションを使用します。

マイクロインタラクションは、デザインにカスタムの興奮を少し加えるための理想的な要素です。アニメーションはそれらをより生き生きと、より楽しくし、動き自体が注目を集めています。後者はしばしば私たちの主な目標です-興味を持ってください。試してみて、アニメーションを埋め込む前後の結果を比較してください。

5.不要な相互作用を避けます。

よくある間違いは、多くのマイクロインタラクションでインターフェイスが過負荷になることです。開始するには、基本的な機能のためだけにそれらのセットを開発し、ユーザーがどのように反応するかを確認します。設計における最も一般的なタッチポイントは次のとおりです。

画面の読み込み;
マウスホバーでアクティブになるアニメーションイラスト。

基本的な要素のアニメーション化に対するユーザーの肯定的な反応は、さらに追加するためのシグナルです。

6.あなたの文章にユーモアを使いましょう。

行動を促すフレーズのボタンやその他のインタラクティブ広告（たとえば、404エラーページ）などのマイクロインタラクションは、ユーモアを交えながらより効果的になります。いくつかの場所で人間の音声録音を使用することもできます。

カード

私たちは皆、デジタルデザイン（名刺、トランプなど）よりずっと前からカードの有効性を知っていました。アイデアは、1つのトピックに関する最も関連性の高い情報を1つの小さなコンテナーに詰め込むことです。

4.ブートアニメーションは待機を明るくします。

ページの読み込みバーを削除したり、待機時間を短縮したりする機会がない場合は、興味深いアニメーションがユーザーの目にこのプロセスを容易にするのに役立ちます。

読み込みの進行状況をパーセンテージで表示する従来の読み込みバーを使用する代わりに、視聴者にもっと美味しくてクリエイティブなものを提供してみてください。もちろん、状況から抜け出すための最良の方法は、ウェブサイトの最適化です。ブートバーの使用は極端なオプションです。それなしでは本当にできないのなら、日常のプロセスをアニメーションで飾るのが良いでしょう。

タイポグラフィ

より高いデバイス解像度、より高速なインターネット接続、新しいWebフォントライブラリへのアクセス（ Googleフォント、Adobe Typekitなど）は、私たちの時代をタイポグラフィの黄金時代にしています。

高品質のタイポグラフィの利点

画面の解像度が高いほど、興味深い活版印刷のアイデアのための余地が広がります。
ブランドの独自性を強調し、使用されているフォントによってブランドを認識できるようにする機能。
テキストコンテンツの影響力を強化する。
要素の視覚的な階層を構築するためのツール。これは、CTA（行動を促すフレーズ）ツールを強調するために特に重要です。

使用の原則

1.明快さが最も重要です。

「より良い」書体のために読みやすさを決して犠牲にしないでください-あなたが書いているものを読むことができない場合、活版印刷のスタイルは機能しません。

2.シンプルでありながら印象的なフォント。

シンプルなタイポグラフィは、ミニマリストスタイルに不可欠なことは言うまでもなく、読みやすく、読み込みも高速です。次の点に注意してください：

フォントサイズを大きくします。

フォントの色と周囲の背景を対比してください。

重要な領域では太字を使用してください。

「印象的」と「華やか」の概念を混同しないでください。プレーンフォントは、自信を持って明確にメッセージを伝えるのに役立ちます。

3.複雑で単純なフォント：SerifとSansSerif。

それらの1つが常に他よりも読みやすいという説得力のある証拠はありません。それはスタイルの問題であり、それ以上のものではありません。複雑なフォントはテキストをより豊かで、よりフォーマルで、シンプルなフォントはミニマリズムとうまく調和します。

人気のサンセリフフォント：

プロキシマノヴァ
フューチュラ
アベニール
オープンサンセリフ
Helvetica neue
人気のセリフフォント：
キャスロン
ギャラモン
貨物テキスト
ミニオン
FFメタセリフ

5.手書きフォントをオーバーレイします。

これらのフォントは、「ホーム」スタイルを作成しようとしている人に適しています。このようなタイポグラフィの読みやすさは非常に大きな問題であるため、画像に重ね合わせた大きなタイトルに限定して使用してください。

6.指定されたスペースを超えるテキスト。

テキストに注意を引くための最良の方法の1つは、範囲外の他の要素にテキストをオーバーレイすることです。単語の一部または単語全体を、たとえば画像の外側に配置して、隣接する領域に重ね合わせることができます。これにより、画面がまとまりのある全体に混ざり合い、見事に見え、時には衝撃的でさえあります。

7.デフォルトのフォント。

ほとんどの場合、3つ以上のフォントファミリを使用しないでください。コンテンツを多様化したい場合は、同じファミリ内のフォントのサイズとタイプを変更してください。

明るい色

2015年を通じて、明るい色の導入の傾向を認識しました。 2016年、この方向性は勢いを増し続けました。さらに、明るい色の人気は高まるばかりです。あなたがファッションに追いつきたいならば、より多くのパレットと色合いを使ってください。

鮮やかな色を使用する利点

さまざまな色合いと色のグラデーションは、それらが強調表示するコンテンツをよりよく区別するのに役立ちます。
視覚刺激の使用は、小さなサイトで特に役立ちます。

1.ダブルト\u200b\u200bーン。

2色スケールの使用はそれ自体がトレンドであり、明るい色の導入とともに引き続き人気があります。
ダブルトーンが2色の組み合わせであることは明らかです。これらは、同じ色の色合いでも、完全に反対の色調でもかまいません。
ウェブデザインでは、画像や写真をより適切に表現するためにダブルトーンがよく使用されます。エキサイティングでモダンに見えます。
次の点に注意してください。
共通のテーマが強いシンプルな写真を使用してください。要素（風景など）が豊富な画像は、特にモバイル画面では見づらい場合があります。
対照的なダブルトーンは、写真の詳細を区別しやすくします。
カラフルな境界線またはフルスクリーンスクロールを使用して、写真を他の表示領域から分離します。
オブジェクトの境界がはっきりと見える鮮明な画像を使用します。

同様に、次の例に示すように、写真をオーバーレイするためにダブルトーンがよく使用されます。

2.オーバーレイ。

明るい色の使用におけるもう1つの興味深い傾向は、写真にそれらを重ねることです。

重ね合わせた色は、画像の重要性、詳細を見たいという欲求を高めます。色は写真の解釈を変えるのに役立ちます。たとえば、赤いオーバーレイは写真をより生き生きと邪魔になり、青いオーバーレイはあなたが見るシーンから落ち着いた感じを作り出します。

3.壮大なグラデーション。

色を徐々に色あせた色調と混ぜることは、多くの現代のデザイナーに人気のある選択肢です。ミキシングに2色または3色以上を使用する必要はありません。これは不要です。

4.キーワードとボタンを強調表示します。

モノクロのテキストでは、明るい色を使用して「無料」、「今日」などの単語やフレーズを強調します。これにより、提案の力が増し、重みが増します。

同様に、一部のボタンを他のボタンよりも大きくして、カラフルな境界線または背景で強調表示することができます。これはうまくいきます。

5.ホバー時に要素の状態を変更します。

カードで述べたように、色は要素を区別するための完璧なツールです。マウスオーバーで色を変更することは、サイトまたはアプリケーションの対話性の程度を高める視覚的コミュニケーションの確実で簡単な方法です。

6.適切な色を使用して、目的の感情を呼び起こします。

さまざまな色がさまざまな感情を呼び起こします。これは、Webサイトで一般的に使用されるいくつかの色の簡単なチートシートです。

赤-情熱と注意を同時に伝えます。この色は血液循環の強度を高めます。
青-落ち着きと安定感を生み出すため、さまざまな金融機関のウェブサイトのデザインによく使用されます。
緑-暖かい色と冷たい色のバランスが良く、自然、純粋、繁栄の感覚を伝えます。
紫-歴史的に何か堂々としたものと関連付けられており、豪華さと神秘の感覚を生み出します。
白は理想的なニュートラルカラーであり、他の色と組み合わせると、優雅さを伝え、後者の効果を高めます。
黒は洗練された強力な色であり、あらゆるタイプのプロジェクトでの使用に常に関連しています。

長いスクロール

長いスクロールまたは無限のスクロールサイトは、Webデザインの常連としてすぐにその地位を獲得しました。

長いスクロールを使用する機能

モバイルデバイスに最適です。画面が小さいと頻繁にスクロールする必要があり、フォーマット自体はタッチコントロールでうまく機能します。
コンテンツがこのように没頭している便利な物語形式は、訪問者の興味を引くことができます。
ナビゲーションの簡素化。
無限スクロールは、ユーザーエクスペリエンスに驚きの要素を追加します。

1.視覚的な手がかりを使用します。

コンテンツ領域の外側をスクロールする方向を指す矢印のようなアイコンは、関連性があり、有益に見えます。ページの最後までスクロールするために残っている量を通知し、コンテンツの線形レイアウトについて通知します。

2.ページとしての画面。

スクロールはスムーズであるだけでなく、ページごとにもスムーズに行えます。スクロール-そして画面全体が変更されました。ファッショナブルで美しいです。

ページレイアウトの各画面を調整して、表示領域全体を埋めます。そのような各スクロールボックスの全体的なテーマに一致する個々のスタイルを作成します。各画面でCTA要素を複製すると便利な場合があります。このアプローチにより、ユーザーはサイト全体を認識し、サイトの作成者がどこをリードしているかをすばやく理解できます。

複数ページの小さなサイトでは、長いスクロールの代わりにナビゲーションスクロールを使用できます。つまり、ユーザーは、メニュー項目をクリックする必要がなく、マウスをスワイプすることで別のページに移動できます。以下のスクリーンショットに示すように、ページ間の遷移をアニメーション化して、ユーザーとの視覚的なコミュニケーションを強化できます。

3.スティッキーナビゲーションメニュー。

長いスクロールの最大のリスクの1つは、ユーザーの方向を変える可能性です。彼は途中で道に迷うかもしれません。最も簡単な解決策は、ページを下にスクロールしても画面上の1つの位置にとどまるスティッキーナビゲーションメニューです。

あなたの意見では、それが多くのスペースを占める場合は、少なくともメニューをジャンプする機能を有効にして、その人が別のセクションにすばやくジャンプできるようにすることができます。少なくとも、無限にスクロールするサイトがある場合は特に、[トップに戻る]ボタンを作成してください。

4.スクロールによってアクティブ化されるアニメーション。

アニメーションはスクロールをより楽しくし、サイトとのコミュニケーションの過程でユーザーを巻き込みます。アニメーション効果を使用して、スクロールをよりスムーズに、視覚的に面白くします。これにより、ユーザーは注意を向け、「次に何が起こるか」などの質問をする必要があります。有名なおとぎ話のパン粉のように一連のアニメーションを作成することで、ゲームの独自のルールを設定できます。それがうまく実行されれば、人はあなたのアイデアを最後まで見たいと思うでしょう。

視差スクロールは単純な解決策ですが、それだけではありません。あなたの創造性を呼び求めてください、あなたはあなたが以前に発明した効果シーケンスを繰り返す必要はありません。

5.長いスクロールページのSEOの欠点を軽減します。

無限スクロールWebサイトには、独自のSEO制限があります。しかし、それらは軽減することができます。 Neil Patelは、このトピックに関する役立つアドバイスを提供しています。

HDグラフィックス

高解像度デバイスは長い間標準であり、2016年はHDデザインの年です。魅惑的なビデオ、強力な写真、豊富なグラフィックが視覚品質の方向性を決定します。

高品質のグラフィックを使用する利点

HD画面を備えたデバイスのユーザーは、適切な品質のコンテンツを期待しています。
高品質のビデオは、訪問者がサイトで過ごす時間を大幅に増やす可能性があります。
創造性により、デザイナーは訪問者の気分をより細かく制御できます。

1.ストック写真とカスタム写真を組み合わせます。

確かに、ユニークな写真の方が優れていますが、すべての企業が写真家を雇う余裕があるわけではありません。妥協案として、ストック写真とオリジナル写真を組み合わせてユニークにすることができます。必要なテーマのストックフォトを見つけ、ロゴを追加し、必要に応じて色を変更すれば完了です。ブランディング資料については、Unsplash、Pixabay、またはPexelsにアクセスしてください。

2.高品質の画像を準備します。

フルスクリーンの背景画像とビデオは、ユーザーの注意を即座に引き付け、ミニマリストのWebサイトの完璧なプレゼンテーションとして機能します。

下のスクリーンショットに示すように、高コントラストの画像は、その上にオーバーレイされたテキストコンテンツに簡単に注意を引き付けます。ほとんどのデバイスはカメラの標準の1:15アスペクト比をサポートしていないため、さまざまな画面解像度に合わせて事前に画像をトリミングする必要があります。画像は、どのデバイスでも同じように鮮明で読みやすいように見える必要があります。

3. SVGまたはビットマップグラフィックス？

ビットマップグラフィックス形式（.jpg、.gif、.png）は、最初は特定のピクセル解像度を持っていますが、スカラーグラフィックスは、品質を損なうことなく画面に合わせて拡大または縮小できます。

独自のグラフィックスにはSVGを使用し、写真には、解像度が明らかに制限されたピクセル数のビットマップ形式が最適です。そのような目的のために、解像度の良い写真機器を購入することが重要です。

4.ヘッダーのビデオ背景。

インターネットの平均速度の向上に伴い、ビデオの背景が人気を集めています。それらを使用すると、人々があなたのサイトに費やす時間を延長することができます。次の点に注意してください。

10〜30秒のビデオクリップは、魅力的なコンテンツと高速なページ読み込み速度のバランスが取れています。

デフォルトで無効になっているビデオのサウンド-ほとんどの場合、ユーザーはサイトにアクセスした直後にサウンドが聞こえることを期待していません。これは多くの人にとって迷惑になる可能性があります。聞きたい人のために電源ボタンを残して、それをオフにする方が良いです。

ビデオは、サイトに入って最初の1秒からユーザーを引き付けます。これは、ビデオを使用する重大な理由になります。

イラスト

デザイナーは、通常のストックフォトよりもユニークな画像を取得するために、ますますイラストに目を向けています。それらは、さまざまなフォトバンクのソリューションの人気のある代替手段になっています。

イラストを使用するメリット

ユーザーの想像力に直接アピールし、サイトとの個人的なつながりを強化することができます。
画像のコンテンツとその詳細をより細かく制御できます。
これは通常、写真撮影を注文するよりも安価であり、より創造的な余裕があります。
イラストは、見慣れたビジュアルを通して複雑な概念を明確に伝えます。

1.イラストをレイアウトの全体的なテーマと一致させます。

ウェブデザインのイラストは、アイコンやその他の二次的な要素の形で生まれました。このスタイルを前面に押し出したい場合は、デザインとコンテンツの観点から、サイトのメインテーマと組み合わせる必要があります。

2.クリエイティブな効果を追加します。

イラストはデザイナーに創造的な効果を適用するためのより多くの自由を与えます、特にこれらの2つは人気があります：

アニメーション-それらは常にイラストと密接に関連しています。

レイヤー-汎用性があるため、イラストでは、レイヤーを導入して画像に奥行きを加えることで、効果を単純化できます。

3.説明書やマニュアルのイラストを使用します。

ユビキタスな描画スタイルのグラフィックを使用していないサイトでも、説明やガイドに含めることができます。画像は言葉よりもさらに多くを語り、人はそれをより速く習得します。さらに、漫画の画像による気楽なポジショニングは、ユーザーが学んでいることを忘れるのに役立ち、プロセスをより簡単で楽しいものにします。

4.イラストにはフラットなデザインを使用します。

もちろん、フラットなデザインは時間の経過とともに独自のチップの層で大きくなりすぎていますが、イラストの作成にも使用できます。最も重要な利点（作成と認識のしやすさ、そのようなグラフィックの読み込み速度）のほとんどを失っておらず、イラストのデザインにも使用されています。

調査結果

あなたは今日のウェブデザイン環境で人気のあるテクニックのいくつかを学びました。プロジェクトのコンテキストでそれらを適用します。実装自体が見栄えが良いという理由だけで、トレンドに盲目的に従わないでください。これらすべてのものを、選択的かつ有意義に、意味と利益を持って使用する必要があります。上記の中には、商業的な観点から効率的でユーザーに役立つプロジェクトを実装するのに役立つアイデアがあると確信しています。

サイト構築の傾向 2016年には、シンプルさと機能性を追求します。あなたがあなたのウェブサイトでできるたくさんのクールなことがあります。現代の技術がこれに貢献しています。ビジュアルコンテンツ、インタラクティブな要素、華やかなデザインのファンとして、サイトを劣化させる可能性があります。美しく機能的なウェブサイトの境界線を越える方法についての情報をお届けします。

形態は機能に従う

サイトの機能は、その美しさと視覚的な魅力よりも重要です。建築の分野では、「形態は機能に従う」という意見があります。サイトアーキテクチャもこの原則に従います。この意見には簡単な説明があります。形（外観）はオブジェクトの機能（目的）を果たす必要があります。デザインは関数のために存在し、フォームのためにのみ存在する必要があり、その逆はありません。

多くのWebデザイナーは、誤ってこのパラダイムをひっくり返しました。彼ら サイトの外観を変更したい 関数がそれ自体を処理することを期待しています。残念ながら、これは現実的ではありません。サイトでの作業を開始する前に、その目的と、ユーザーがサイトで作業する方法を定義する必要があります。

美しいサイトはユーザーの気を散らす可能性があります

あなたがただ素晴らしいウェブサイトを持っているとしましょう。しかし、ユーザーがそれを訪問し、それをどうするかわからない場合、あなたのサイトはあなたを傷つけ、あなたを助けていません。幸いなことに、経験豊富な専門家は、美しさと機能性を組み合わせる方法を知っています。

機能が不十分なWebサイトは直帰率が高い

ユーザーがサイトで何をすべきかわからない場合はどうなりますか？彼らは去ります。また、直帰率が高いと、プロモーションとサイト自体の両方に悪影響を及ぼします。同様の傾向は、何かがうまくいかなかったことを示しています。サイトの作業ですべてが考えられているわけではなく、あなたの仕事は正確に何を見つけることです。多くの場合、高い故障率は 思いがけないデザイン..。モバイルユーザーの直帰率を忘れないでください。サイトがモバイル向けに最適化されている場合は、見栄えだけではありません。

美しいサイトはしばしばゆっくりとロードされます

サイトは一見すばらしく見えるかもしれませんが、読み込みに時間がかかりすぎると、訪問者はそれを見ることができますか？おそらくそうではありません。コンバージョンはもちろん、プロモーションにとって読み込み時間は非常に重要です。あなたのサイトが速いほど、グーグルはそれをもっと好きになるでしょう。

デザインの視覚的な側面は、方程式のほんの一部です。

サイトは非常に複雑なものです。そして、そのデザインは一面に過ぎませんが、非常に重要です。この方程式では、ユーザーは常に最前線にいます。このため、ユーザーの目だけでなく、サイトを操作したいという欲求もターゲットにする必要があります。

黄金比

それは明らかです サイトの美しさと機能性 完全に調和して存在することができます。何千ものサイトがその一例です。同じ中庸を見つけるには、主なルールを覚えておいてください。

形態は機能に従う、最初にサイトの目的について考えます。
視覚的にも機能的にもシンプルさが優れています。
読み込み時間を追跡します。サイトの速度が低下する場合は、不要な機能を削除してください。
サイトの目的を明確にします。ユーザーは、サイトが存在する理由を正確に知る必要があります。
サイトを訪問者にとって便利にするために、彼は次に何をすべきかを正確に知っている必要があります。

出力

動作する美しいウェブサイトを作成します。しかし、機能性のために美しさを犠牲にする価値がある場合もあります。あなたがそれを正しく行えば、あなたのサイトはおそらく見栄えがするでしょう。

転送

ウェブデザインの世界は活気に満ち、多様です。ここでは毎年大きな変化は起こりません。これは、テクノロジーの急速な成長によって確認されています。これは、過去数年にわたって、近い将来のWebデザインの重要なトレンドが既存の開発の改善に焦点を当てることを示しています。

フラットなデザインはより質感が増し、「映画のような体験」がより一般的になり、JavaScriptライブラリを使用することでより多くの実験が可能になります。 WebGLとバーチャルリアリティの人気の高まりにより、私たちが知っているWebサイトが興味深い双方向性を備えた新しいものに変わると確信しています。

この記事では、今年予想される最大のWebデザイントレンドの11を見ていきます。だから、座って読み始めてください！

1. WebGL（Webグラフィックライブラリ）

最新の進歩の中には、注目すべきWebGL（Web Graphics Library）テクノロジがあります。最近出現した多くの素晴らしいサイトで使用されています。

簡単に言うと、WebGLは、プラグインを使用せずに、ハードウェアアクセラレーションを使用して、ブラウザーでインタラクティブな3Dおよび2Dグラフィックスをレンダリングする方法です。

1.1インタラクティブな3DWebGLアプリケーション

好奇心を体験する（NASAによるビット）

WebGLは、SIGGRAPH2015カンファレンスの中心的なトピックの1つでした。 3DグラフィックスとWebGLでプレゼンテーションを見ることができますこのチャンネルで YouTube。

1時間半のビデオでは、NASAの「ExperienceCuriosity」Webアプリケーションについて学習します。このアプリケーションは、火星探査車「Curiosity」が火星に着陸してから3周年を迎えました。このアプリケーションを使用すると、ユーザーは火星の表面で3D NASAローバーに「乗車」し、マニピュレーターアームを「制御」できます。

このリソースを作成するために、Blend4Web（ブラウザーベースの3Dアプリケーションを作成するためのフレームワーク）とBlender（3Dモデリングとアニメーションのパッケージ）が使用されました。

BeloolaのWebサイトはthree.js（JavaScriptライブラリ）を使用しています

SBS TV（オーストラリア）のプロジェクト「TheBoat」

オーストラリアのテレビSSBTVは、ベトナムからの脱出についての作家ナム・ル「ザ・ボート」のストーリーを作り直し、WebGLを使用してインタラクティブなビデオストーリーに変えました。このアプリは、優れたアニメーションと手描きのイラストを備えたいくつかのパーツで構成されています。また、前の例のようにthree.jsを使用します。

なぜなら想起

技術的に言えば、これは疑似3D空間で実行される連続2Dアニメーションです。とても印象的です！

2. VR（バーチャルリアリティ）

バーチャルリアリティ（VR）は、2016年にガジェットの世界を揺るがす可能性のある関連テクノロジーです。おそらく、物事はすぐにもっと面白くなるでしょう。

Timeshift165のWebサイト

タグ：タグを追加

2016年はもうすぐです。少し先を見据えて、予測を試みましょう。 ウェブデザインの新しいトレンドの出現 近い将来に。

2016年のWebデザイントレンド

今日の世界では、予測を行うことは少しありがたい仕事です。テクノロジーは急速に変化するため、瞬く間に別の予測が陳腐化する可能性があります。一方で、ウェブデザインに定着し、長年にわたって人気のピークを維持し、改善しているトレンドもあります。これに毎日対処する経験豊富な設計者は、起こりうる変化に事前に気付くことができます。

たとえば、Facebookのプロダクトデザインディレクターとして ジュリー・ジュオこれは最近、今後10年間のWebデザインのトレンドを予測しました。私たちの側ではこれまで見るのは大胆すぎるでしょうが、来年は間違いなく人気があるいくつかのトレンドの出現を予見することはかなり可能です。 2016年に見られる可能性のある最もクールなWebデザインのトレンドのいくつかを見てみましょう。

明るい色

配色は、インテリアデザイナーやファッションデザイナーを含む多くの専門家の監視下にある側面です。色の傾向は通常、視覚を強調するすべての領域で普遍的であることに注意してください。そのため、インテリアデザインや衣料品で人気のある色に注目することで、どの色合いがWebデザインで流行するかを予測できます。 2016年は使用するのに適切な時期のようです 明るい色と大胆な色の組み合わせ.

InJob

鮮やかな色は、デザイナーのポートフォリオや写真家の個人ページなどのクリエイティブなWebサイトの保存に常に使用されてきました。今日では、従来の控えめな白黒のビジネスサイトや金融サイトでさえ、さまざまなデザインで明るい色が使用されていることがわかります。

これは2016年にそれを意味するものではありません ミニマリズム 背景にフェードインします。まったく逆に、これは今後数年間で最もホットなデザイントレンドの1つであり続けるでしょう。鮮やかな色は、不要な要素や邪魔なデザインでそれらを乱雑にすることなく、ミニマリストのデザインをより魅力的にします。クリーンなデザインでは空白が多用されていることを忘れないでください。ただし、これは必ずしも白のみを使用することを意味するわけではありません。背景に純粋な明るい色を使用したり、グラデーションを追加したり、最も重要な要素を強調したりできます。

マテリアルデザイン

一部の設計者は、このスタイルを「ほぼフラット」と呼んでいます。これは、フラットな要素に少し奥行きを加えるためです。今年はウェブデザイナーの間で人気が高まっており、この傾向は来年も続くようです。

バルニメディア

マテリアルデザインは、クリック可能な要素または他のアクションの要素を強調するためにマテリアルがボリューム（Z軸と呼ばれる）を追加することを除いて、フラットデザインの基本的な利点をすべて保持します。美しさと使いやすさを兼ね備えているため、このトレンドはWebサイト開発にとって非常に魅力的です。アニメーションは、単なる装飾ではなく、使いやすさの向上として機能するため、デザインのハイライトになります。

グーグルは本当にクールなことをしました：彼らは作成しました推奨文書マテリアルデザインの原則を適用し、人々が仕事でそれらを使用することを奨励しました。彼らは、これまたはその結果を達成するために何をする必要があるかを彼らに推測させることなく、このスタイルをデザイナーにとってよりアクセスしやすいものにしました。

フォントに重点を置く

フォントはウェブサイトデザインのユニークな要素です。正しく使用すると、意味を伝えるだけでなく（何書かれた）、しかしまた役立つ 装飾的な要素 (なので それは書かれている）。最近、レタリングは装飾としてウェブデザインでますます使用されており、色を使用するのと同じタスクを実行します。

テナントブラウン

モバイルデバイスの使用の増加により、Webデザインで大きなフォントが使用されるようになりました。明らかに、小さな画面のテキストは、読みやすくするために大きく表示する必要があります。この傾向は、興味深いデザインを作成するために広く使用されるようになりました。

大きい さまざまなフリーフォント、特にGoogle Fontsは、レタリングを優れたデザイン要素にし、Webデザイナーに大きな可能性をもたらします。さらに、無料または安価な（ただしクールな）フォントを幅広く選択できるため、カジュアルなユーザーでもデザインを簡単に作成できます。明るい色を使用する前述の傾向に加えて、大きなレタリングもWebサイトのデザインに驚くべき効果を生み出すことができます。ただし、レタリングを使用するには、フォント、フォントのサイズ、組み合わせ、および周囲のデザイン要素との組み合わせについての深い知識が必要であることを考慮する価値があります。

1ページのデザイン

1ページのデザインは、数年前にWebに登場したほど新しいトレンドではありません。今後もデザイナーの注目を集めずに彼が残らないことを願っています。これはかなり物議を醸す傾向であり、まだ多くの反対者と多くの支持者がいます。

1ページのデザインはよく見られます ランディングページこの種のウェブサイトは複雑な構造を必要としないからです。この傾向は、モバイル中心のインターネットのおかげで現れました。サイトの使いやすさを重視することは、重要性の低い要素を排除し、サイトをナビゲートしやすくすることを意味しました。

もちろん、1ページのページがすべてのサイトに適しているわけではありません。このデザインでは、ナビゲーション機能について考える必要があります（メニューをページの上部に固定し、ユーザーがページの上部に簡単に戻ることができるように「上部」ボタンを追加します）。しかし、この傾向は来年も確実に焦点となるでしょう。

長いスクロール

この傾向は、1ページのWebサイトと密接に関連しています。モバイルデバイスが広く使用されているため、スクロールはクリックよりもユーザーフレンドリーになっています。 長いスクロール ブランドストーリーを伝え、ユーザーを引き付けるために、多くのWebサイトのデザインで使用されています。

カイポチェ

スクロール技術が「スクロールせずに見える範囲」の理論の出現に影響を与えたか、またはその逆であるかを判断するのは困難です。とにかく、今日のWebではスクロールはそれほど重要ではありません。多くのウェブサイトの所有者は、行動を促すフレーズのボタンなど、最も重要な要素を画面の上部に配置するという考えに今も固執しています。実際、それはさまざまな要因に依存します。訪問者を引き付けて購入場所までスクロールさせることは、画面の最初の600垂直ピクセル内に[今すぐ購入]ボタンを配置するよりもはるかに困難です。しかし、それはあなたのウェブサイトとその使いやすさにとってより有益です。

レスポンシブナビゲーション

インターネットサーフィンのためのモバイルデバイスの使用の増加に伴い、ますます多くの質問が発生し始めました モバイルデバイスのナビゲーション..。長い間おなじみのハンバーガーメニューアイコンは、現在、最良の解決策の1つです。

多くのウェブデザイナーが使用に反対しているという事実にもかかわらず ハンバーガーメニュー デスクトップ版のウェブサイトでは、この小さな3行のアイコンがレスポンシブデザインを引き継いでいるため、近い将来、ハンバーガーがますます増えるでしょう。

より良く描く

実際、ハンバーガーメニューに対する主な論拠はその認識の低さです。しかし、ますます多くのサイトがそれを使用しているので、私はこの問題がまだ関連しているとは思わない。このようなナビゲーションは、ページ上部の固定メニューバーや非表示メニューなど、他のタイプのレスポンシブナビゲーションよりもモバイルユーザーにとって便利です。

背景画像とビデオ

ビジュアルはどのWebサイトにとっても最も重要な側面のひとつであるため、たとえば、膨大な数の背景画像やビデオがWebサイトでより頻繁に使用されることは間違いありません。 HD画像 または本格的な背景写真は、ユーザーの注意を引くための最良の方法です。高度なテクノロジーにより、帯域幅が削減され、モバイルデバイスの画像が無損失で圧縮され、小さなサイズでの画質が最大化されます。したがって、大きな写真はユーザーエクスペリエンスやダウンロード速度に影響を与えません。

Proske

ビデオ また、ウェブサイトとそのコンテンツに注目を集めるための強力な方法です。ただし、サイトの読み込み速度は、Googleがリソースをランク付けするときに考慮する主要なパラメータの1つであるため、それらの重みに注意する必要があります。

レイアウト：カードデザイン、分割レイアウト、中央揃えのコンテンツ

優れたレイアウトを作成するということは、それを美しく、同時にユーザーフレンドリーにすることを意味します。現代のウェブデザインはこれらの側面に焦点を合わせているので、サイトの構造は最良の結果を得るために絶えず改善されています。

過去数年にわたって、私たちはの使用を見てきました カードデザイン..。それはすべてメトロスタイルから始まり、ソーシャルネットワークPinterestのデザインに登場しました。このタイプのレイアウトは、カードを可動ボックスにグループ化して小さな画面に合わせることができるため、レスポンシブWebサイトの作成に特に適しています。ブロックとカードは、コンテンツの創造的なプレゼンテーションのために空きスペースを使用します。

分割レイアウト 長い間人気がありました。このタイプのレイアウトはコンテンツをパーツに分割し、これらのパーツはグリッドよりもはるかに大きくなります。画面を2つの垂直セクションに分割し、それらの各セクション内にコンテンツを配置します。 Splitは、コンテンツごとに異なる色を使用することから、ナビゲーション用のアニメーション効果まで、Webデザイナーに多くの可能性を開きます。

中心のコンテンツ 分割レイアウトの反対の機能を実行します。レイアウトの中央にすべての重要な要素とコンテンツを集めて、ユーザーの注意を引き付けます。中央揃えのコンテンツは、単一ページのサイトやミニマリストのデザインに最適です。

技術：ブラウザでのプロトタイピング

近年の大きな変化は、デザイナーと開発者の仕事の境界線が曖昧になっていることです。最近、コーディングスキルのあるデザイナーに出会うことがよくあります。現代のデザイナーは、さまざまなプロトタイピングサービスを簡単に使用でき、後でコーディングする必要のあるモックアップの代わりに、動的コンテンツを使用して優れたレイアウトをすばやく構築できます。

インターネット上でレイアウトを作成するための膨大な数の異なるツールにより、設計者はプロジェクトがどのように実行されるかを確認する機会が増えます。オンラインツールを使用してブラウザで作業することは、多くの設計者や開発者にとって日常の雑用になりつつあります。 MotoCMS また、開発者がオンラインでWebサイトを作成できるオンラインツールでもあります。そのため、モバイルデバイスで直接ウェブサイトを開発できるアプリが間もなく増えると予想しています。

印刷