イケてるWebデザイン、サヨナラデザイン

Index

1. Webデザインの開発
2. Webデザインの原則
3. Webデザイン成功例
4. Webデザインのトレンド

1. Webデザインの開発

“美とは見る人の目の中にある”(アメリカのことわざ)
Webサイトの見た目は、過去30年間で進化してきました。 90年代後半から2000年代初期のホームページがどうだったか覚えていますか？最新ニュースを読んだり、Myspaceにログインしたりするために、インターネットにダイヤル接続していた時代は終わりました。角ばったボクシーなデザイン、目を引く派手な色、限られたフォント、そしてテキストもきちんとした配置ができず、これらの初期のサイトは、ピンボードに貼り付けられたWord文書や写真のコラージュのようでした。

初期のWebデザイン

1991年、CERN（欧州原子核研究機構）の聖なる門の中で、 最初のホームページが誕生しました。まっ白い背景にプレーンテキストといういでたちで、私たちを迎え入れてくれたのです。90年代初頭のWebサイトは機能に基づいたものでしたが、他の何かが出現する機会も与えてくれました。それがWebデザインです。

Webデザインには、訪問者がWebサイト上で見たり関わったりするものが含まれます。 2000年代初頭に戻ると、Webサイトの主要な要素には、サブページへのタブ、ページの見出しやロゴを備えたナビゲーションバーが含まれていました。スタートページは、メインページにアクセスした訪問者を表示するため、よくフロントページと呼ばれていました。初期のWebデザインは、表がベースで、説明的、テキストに重点を置いていました。これは、Web1.0として知られる「読み取り専用Web」です。

過去14年間、私たちはまだWeb3.0とWeb4.0の中にいながら、見ること、読むこと、書くことに集中するWeb2.0も使用しています。

ワールドワイドウェブ(www)の変遷

Web 3.0はさらに一歩進んで、実行を伴うものになります。これは、プログラムやアプリケーションを介して、訪問者がWebサイトを関われることを意味します。現在Webは、ユーザーとWebサイト、アプリ、およびプラットフォームとのカスタマイズされた自己学習対話を可能にする共生Web（W 4.0）に移行しています。 また、Web 2.0やモバイルデバイスの使用の増加に伴い、レスポンシブWebデザインが登場しました。

レスポンシブWebデザイン

ウェブサイトの見た目をすべてのデバイスのすべての画面サイズに自動的に適応させる、それがレスポンシブウェブデザインになります。レスポンシブウェブデザインでは、レイアウトなどの設定とテキストの流し込みを、改行の少ないワイドスクリーンから、改行の多いせまいスクリーンのテキストに変更することができます。横向きの写真は、品質や意味を失うことなく縦向きに調整されます。

Webnodeでは、すべてのWebサイトテンプレートが自動的にレスポンシブとしてプログラムされています。 このおかげで、Webサイトエディター（編集画面）は、余分な改行をしなくても、テキストが正しく流れるように自動的にフォーマットすることができるのです。

モバイルファーストデザイン

モバイルファーストデザインは、レスポンシブデザインと密接に関連しています。従来のWebサイトの設計は、デスクトップとノートパソコン用のサイトが最初に設計されていましたが、モバイルファースト設計Webサイトは、スマホやタブレットなどのモバイル版の作成後にデスクトップとノートのバージョンに適合されます。モバイル端末を使用してWebサイトにアクセスする人は、2020年10月に世界で43億人に達し、その数は増え続けています。

検索エンジンのGoogleは、すでにモバイル端末に対応しているモバイルフレンドリーなWebデザインを優遇しています。モバイルファーストデザインは、レスポンシブデザインであるだけでなく、簡単な構造とナビゲーション、そして高速の読み込み速度も組み込んでいます。後者は、最新のWebデザインの最も重要な要素の1つです。これについては、次のセクションで詳しく説明します。

2. Webデザインの原則

スタイル

ウェブサイトのスタイルは原則的で、ウェブサイトの構造をになっています。 Webサイトの要素が相互にどのように配置されているかを示していて、中でもスタイルを構成する最も重要な要素は以下のようになります。

• ナビゲーションバー
• ヘッダー（見出しとロゴが付けられる）
• フッター
• セクション（必要に応じて）

Webサイトの主要な要素、上部のナビゲーションバー、ヘッダー、フッターの例

これらの要素はいわゆる標準スタイルで、ナビゲーションバーを基準にして配置されます。 標準スタイルには4種類あります。 上部または左側のナビゲーションバーが最も一般的です。 Webnodeのテンプレートは、すべての標準スタイルを兼ね備えています。

左上から右下へ：ハンバーガーボタン、上部ナビゲーションバー、下部ナビゲーションバー、左側のナビゲーションバー

選択したテンプレートに関係なく、後でこれらの標準スタイルをいつでも変更することができます。

ナビゲーションバーは依然としてすべてのWebサイトの80％以上の上部に配置されていますが、いろいろなタイプも登場してきています。すっきり配置のハンバーガーボタン（3本の太い横線）は右上にあり、ドロップダウンメニューで他のすべてのページを開くようになっています。このやり方は、ナビゲーションをページの中央より下に配置することとともに、比較的新しいアプローチです。

通常、Webサイトのフッターは、法的な文言、免責事項、ソーシャルメディアやその他のリンク用として使われています。世界の半分では、ナビゲーションバーの右側に連絡先情報を表示します。このため、Webサイトテンプレートでは。問合せページのナビゲーションメニューにスペースを確保しています。

私たちの目が左から右に動くにつれて、右側に置かれているものはより注目を集めるようになります。初期の頃と同じように、今日では、ロゴについては左上の位置か、少なくとも上部中央のセクションあるかがほとんどのケースとなっています。

標準スタイルの背後にある考え方は、訪問者に全体的な概要を表示することです。ページ上のすべての要素には専用のスペースがあり、パッチワークパターンに似た初期のWebサイトデザインで使用されていたスタイルからは離れています。

レイアウト

レイアウトは、Webサイトの主要な要素が、画面上で占める必要のあるスペースを示しています。

境界線のある中央に配置することも、画面全体を占めることもできます。Word文書のように、ことば同志の間のスペースを広くしたり、狭くしたり、またスペース自体が中央や左寄せに配置されているなど、レイアウトによって与える影響もずいぶんと異なります。

シングルカラムデザイン

ページのコンテンツが、画面の大部分を占める単一の列に配置されます。そのシンプルさで、このデザインが最も一般的に使用されるタイプのレイアウトです。

特に、モバイル端末でコンテンツを表示するのに適しているため、現代のWebデザインで非常に人気があります。

シングルカラムデザイン

スプリットスクリーン（画面分割）デザイン

場合によっては、複数の同じくらい重要なコンテンツを並べて表示する必要があります。

このレイアウトが人気が高いのは、テキストボックスを画像で補完したり、テキストを列に分割することができるからです。画面を分割するのに、上または下にテキストボックスがある2つの画像を同時にうまく機能させることもできます。

このタイプのレイアウトのバリエーションとして、画面をさまざまな比率（たとえば、50：50）に分割したりといったこともできます。

このレイアウトは、商品画像自体自体と同じくらい商品情報が重要であるネットショップでよく見られます。

スプリットスクリーンデザイン

カードグリッドデザイン

このタイプのデザインは、Pinterest、Facebook、Twitterなどのサイトにより人気が出てきました。

カードグリッドデザインは、テーブルに並べられたカードに似ています。カードは、短い説明が付いている画像や記号で、クリックするだけで読者をより詳細なページに導くことができます。

この画像を使用すると、ページのさまざまなコンテンツを簡単に識別できます。そのため、情報の閲覧と選択がよりしやすく楽しいものになります。

カードグリッドデザインの例

2種類のグリッドレイアウトがあります:

• 正方形のグリッド（格子）と同じサイズのカードに基づくもの
• さまざまなサイズのカードに基づき、グリッドの行の高さが異なるもの

“Above the fold” 「折り目の上」と “below the fold”「折り目の下」

画面上でWebサイトを開くと、ナビゲーションバー、主要なヘッダー画像、見出し、それからいくつかの紹介文が表示されます。もっと見たい場合は、下にスクロールする必要があります。

下にスクロールせずにWebサイトから見えるものは、”折り目の上”「スクロールせずに見える範囲」と呼ばれます。

他のすべては「折り目の下」にあります。現代のウェブデザインは、最も重要な要素をこの「折り目の上」であるスクロールせずに見える範囲に配置します。 訪問者の注意を引くには、各Webサイトのページの最重要項目を上部に配置して、スクロールせずに表示できるようにします。

標準のスタイルとレイアウトはウェブサイトの見た目を決めますが、本当のデザインも実用的である必要があります。私たちは、求めているものをすばやく見つけて、すばやく簡単に表示できるようにしたいと考えています。したがって、優れたWebデザインは機能性とも同意義です。 Webデザインを改善する主な要因は次のとおりです。

SEO 押上要素

以下は、Webサイトエディターの項目で、検索エンジン関連の用語です。

• メタディスクリプション
• ページ名
• WebアドレスまたはURL
• テキストとタイトルでのキーワードの使用

Googleは、Webサイトのテキストの中で見出しを優先し、特にH1として分類された主要な見出しを最優先します。

最近のWebサイトクリエーターは、コードの中での見出しの種類の機能をすでに搭載しています。もちろんWebnodeも同様です。

ということは、すべての見出しは自動的にH1としてコード化されるため、あなたは使うキーワードに神経を注げばOKです。

スピード

T使いやすさと関連があり、Googleは2021年1月にアルゴリズムを変更して、読み込み速度が最適化されたWebサイトを読み込み速度が遅いWebサイトよりも高くランク付けしています。

Webnodeのホームページはシンプル。すべての端末で、自動的に最大読み込み速度に達するようにコーディングされています、そのため、アップロードされた画像サイズが制限内であればスピードに関しては問題なしです。

使いやすさ

目に優しいガイダンスとも呼ばれ、Webサイト内でのページの構造と、ナビゲーションの直感性に関連しています。

Webnodeのテンプレートは、タブの数が制限されている明確で簡潔なナビゲーションを強調しています。すべてのページとそのコンテンツにすばやく到達できるように、サブページは最大3つに制限されています。

さらに、サブページのパスは、Webアドレスを読みやすく、覚えやすいように短く構成されています。ブラウザのアドレスバーを埋めるダッシュがいくつかある長いパスはうすでに時代遅れとなっています。

No matter iページがサブページのサブページであるかどうかに関係なく、ギャラリーのWebアドレスは「mysite.com/gallery」として表示されます。最小限のクリックで読者を目的のコンテンツに導くためです。

3. Webデザイン成功例

ウェブサイトビルダーのテンプレートは、ウェブサイトのデザイン構造や機能を決めます。事前に選択された画像、フォント、色は、ビジネスWebサイトの外観にインスピレーションを与えます。テンプレートは基本的なものですが、それが優れたWebサイトである理由は何でしょうか。

あなたのウェブサイトを自分仕様に変えることはあなたの手中にあります。ここでは、デザインを向上させるためにWebサイトを構築する方法をご紹介します。

ブランディングとウェブデザイン

これは天国で行われた試合です。

あなたのブランド、ミッション、会社の目標や今後の展望について考えてみてください。何となぜは、あなたのデザインによって広がります。こうすると、あなた自身がほかになく、自分自身に忠実で、本物になれます。ちょっと抽象的ですね。例えば、キャンディーを売っているなら、あえて色を使ってみてください。色は文化に依存したメッセージや感情に与える影響があるため、色の力を勉強することには価値があります。あなたのブランドと合ったの色と質感を見つけて、それを使ってみてください。

質感

ページの背景やテキスト要素を決めます。白である必要はありません。モノクロである必要もありません。風景の画像、アニメーション化された流れる水や模様なども使えます。 WebnodeのCMSには、背景から選択できるさまざまな質感の素材コンテンツがありそこから選べるほか、自分の画像をアップロードすることもできます。

構造とガイダンス

イタリアンのコースを例にとってみます。前菜ではなく、パスタをスタートページにしましょう。階層の主要なページにある情報を減らしていきます。詳細情報のあるページを非表示にして、階層のさらに上のページにリンクします。

各メインページはポスターとして視覚化できます。関心を高めるために短くしましょう。サイトにより多くの構造持たせたい場合、カードグリッドデザインに従って画像のグリッドを追加することがおすすめです。各画像には、より詳細なページにリンクするトピックまたはサービスが表示されます。このようにして、訪問者の道すじを自分が思うようにデザインし、ページをインタラクティブにします。

項目分け

各セクションで訪問者を案内します。あなたの運営するカフェのスタッフを紹介するより詳細ページの最初のセクションは、たとえば、カフェの始まった経緯などをストーリー仕立てで紹介する文章にします。ちょっと興味を持ってもらったところで、その後、読者をより詳細な情報（会社のマイルストーン、主要な従業員の紹介など）にガイドすることができます。

「少ない方がより豊かである。」これは、テキストの長さ、背景のバリエーション数、フォント、色など、1ページのすべてのコンテンツに関連しています。見出しはページのヘッダーに必須ではなくなりました。画像にもっと自分を語ってもらいましょう。

読者に少し余裕をあげてください。情報や画像がぎっしり詰まっているのではなく、余白やスペースを使います。ページ上の空白や白い部分（ネガティブスペースとも呼ばれます）は、目を休ませます。このスペースは、ページのセクション間のスペースである、白または微妙な色のフレームとして発生します。このようにして今日5杯目のコーヒーを飲みに行くために立ち上がってストレッチするときのように、脳はメッセージを受け取ります。ネガティブスペースを活用しましょう。白である必要はありません。質感や動きのある背景でもOKです。

幾何学的にコンテンツを入れて、訪問者を混乱させたり圧倒したりしないようにします。

三分割法

このルールは美術から来ていて、特徴がスケッチされるスペースの比率を表しています。各面をページの3分の1に分割します。交差する線は、目が従うべきガイドラインであり、オブジェクトを戦略的に配置する場所となります。

モネの「プールヴィルの断崖の上の散歩」は、ノルマンディーの海を見渡す2人の女性を示しています。二人は画面真ん中の少し右側に立っており、絵の上3分の1はくもと空になっている構図です。

クロードモネ（シカゴ美術館）による プールヴィルの断崖の上の散歩 （1882）は、三分割法がどのように適用されるかを示す完璧な例です

このような芸術作品のバランスが取れていてわかりやすいのは決して偶然ではありません。

ページの3分の1に一番重要な情報を入れることに集中し、反対側においたそれほど重要でないけれど補完的なものとのバランスを取っているのです。

三分割法の例では、グリッド線はオブジェクトを配置できる9つの可能な領域を示しています

なんと幸いなことに、Webnodeエディターでは、三分割法を適用するときに9つの配置可能なセクターを選択できるようにしています！重要なコンテンツを入れる1つのセクションを、この3分割法を使って配置するのに役立ちます。

一貫性が鍵

一貫性は、選択した色、質感、フォント、表示する情報の量、トピックなど、すべての側面に関連しています。できるだけシンプルに、そして1ページに1つのトピックを入れましょう。 欲張らずにね。

たとえば、建築会社を経営していて、大工関連の話や家づくりのポイントなどをコンテンツとして入れようとしたとします。 誰も最会社忘年会の写真を見ようとは思っていませんよね。その代わりに、実際に家を建てた顧客の動画や大工さんの腕が分かる映像など、その会社にしかない内容を含めてみてください。 独自性を出してクリエイティブに行きましょう！でも一貫性を忘れずに。

避けるべき悪いウェブデザイン

悪いことや醜いことなく良いこととは何でしょうか？ 以下は数年前は流行っていましたが、最近では家事のように避けられる傾向にあるデザインです。

• スライダー
• スライドショー
• バナー
• カルーセル
• (多すぎる）スクロールが必要な下のコンテンツ

どうしてこのようなデザインは避けられるようになったのでしょうか？最近の傾向として、シンプル、ミニマム、わかりやすさが世界的に好まれるようになっていることがあります。スタートページの導入スライドショーやギャラリーを表示するスライダーは、サイトの訪問者におなか一杯の印象を与えることも。バナーは、オンライン広告の手段が限られているときにはよく使われましたが、最近は広告はソーシャルメディアプラットフォームで動画広告とともに行われることが多くなっています。

過去数十年の間に、私たちが利用できる情報の量は飛躍的に増加しました。私たちは、検索エンジン、ウェブサイト、ソーシャルメディア、アプリを閲覧、スライド、スクロール、クリックしています。 消化しきれないほどたくさんのインプットがあります。 負荷を減らしましょう。メッセージが届きにくくなっているのです。

成功例を念頭に置いて、次の6つのやってはいけないことをご紹介します。

• てんこ盛りの文章
• 目の動きを考えていないガイド
• 粗い画像
• ページ間の関連がなく混沌とした構造
• モノトーン、要素のコントラストなし
• 不調和な背景、フォント、色

ウェブサイトのデザインを改善するための基本が手元にありますので、2021年以降に続くウェブデザインのトレンドに取り掛かりましょう。ウェブサイトの訪問者にもっと喜んでもらえるはずです。

4. ウェブデザインのトレンド

今日のWebデザインには次の目的があります。

魅力的で、楽しく、インタラクティブなWebサイト体験を作りましょう。

それ以上に、ページを閲覧するときにはほしい情報のページにちゃんと導かれ、同時に有益な価値を得たり見つけたりできることが望まれています。

シンプルさ

何と言ってもこれが一番大事。 フラットデザインはウェブデザインのミニマリズムの一つであり、各要素により多くのスペースと背景を与えます。

すべてがクリアで調和のとれた色で表示されます。 テキストのフォント、線、背景の強度は、より明るく、より鮮明で、きちんと決められています。 ドイツ出身の建築家、ミース・ファン・デル・ローエと1920年代から30年代のオープンで広くて軽いバウハウススタイルの建築について考えてみてください。

3D

シンプルなフォルムに加えて、3D効果が登場しました。 ニューモーフィズムは、ボタンやアイコンなどの形状に陰影を付けて輪郭を強調するデザインの一種です。 背景に対して形状を高くするレリーフを作成します。その逆も同様です。

ニューモーフィズム の例

Webnodeは、セクションに装飾的な境界線を追加する機能があるため、このようなニュアンスを取り入れています。コンテンツを際立たせたり、シェード効果をボタンに入れることも可能です。

装飾的なボーダーの例とシェード効果

ダークとグラデーション

背景に関しては、暗いデザインがグラデーションカラーとともに支配的になります。 明るい色から暗い色、コントラストまたは補色、暗い背景に変化する柔らかな色合いは、私たちの目にはより優しく、増え続ける画面時間をより耐えられるものにします。

ストーリーテリングウェブデザイン

サイトを面白くするのは、サイトのビジュアルな要素だけではありません。画像の背後にある物語でもあります。ウェブサイトの作成者は、イラスト、マイム、ミームを使用してストーリーを伝えます。

あなたのビジネスストーリー、どうしてシェフや大工、美容師、職人、整備士になったか、ライフストーリーを遊び心のある画像と一緒に使ってみませんか？

もしかしたら、すでにWebnodeのウェブページやソーシャルメディアで、色や顔の見えない人たちが新しい特徴や機能にについての投稿をしているのを見たことがあるかもしれませんね。 ミームや絵文字は、ソーシャルメディアとチャットで制限されなくなりました。このようなものを使うと、ユーモアのセンスをプラスしたり、物事をもっと軽く見させ、ポイントを伝えることができます。そのため、Webサイトは、ソーシャルメディアに表示されるものと協力しあっています。

プレーンテキストだけのセクションやうるさい配色はもう時代の共有を満たしません。私たちは、お気に入りのマンガや昔話の絵本をめくったときに、子供時代に戻ってしまうことが時々あるでしょう。 チラシや雑誌は楽しく、アイデアをくれます。ウェブサイトはゲーテの書ではありません。楽しさは最優先事項です。

人間ボット

ボットはあなたのサイトが訪問者とリアルタイムで交わるためのいわば小さなヘルパー。 自分がサイトでチャットボットバブルを見て、このような自動化は非人格的だなと懐疑的に思っているかもしれません。

ただ、これらのボットは人間によってプログラムされています。 長く電話で待たされるよりも、ボットはあなたの心配事や質問に即時に答えてくれることがあります。 さらに、チャットボットプログラムでは、事前にプログラムされた特定の数の質問のみが自動的に実行されます。 残りのやり取りは、人間のカスタマーケアスタッフによって指示され、即座に返信しやガイドをしたり、あなたにとって一番の選択肢を選ぶサポートをしてくれます。

インタラクティブなウェブデザイン

訪問者とのやり取りを作成するWebサイトのことで、 ボット、投票、クイズ、フォームなど、いずれを使用する場合でも、インタラクティブなWebデザインを使用します。本当のインタラクティブは、訪問者に力を与え、自分でやっていると感じさせることで、さらに一歩進んでいます。 直感的なナビゲーションがどこで入手できるか知っていて、いつでも質問したり、フィードバックをしたりすることができます。

このデザインの目的は、サイトとの対話をよりスムーズにすると同時に、より高度にすることです。 これは、訪問者がランディングページを開いてから、SmartlookやHotjarなどのプログラムを使用して製品を購入するまでの経路の分析から、人間のボットやアプリのような機能の使用をサイトに含めることまで多岐にわたります。

マーケティングの観点から、インタラクティブなWebデザインは、行動を呼びかけ、コンバージョンを達成することを唯一の目的としています。 コールトゥアクションによりコンバージョン（成約）が容易になったので、特定のページにアクセスし、フォームを開いて登録するためのボタンもクリックされやすくなります。

型破りなスタイル

広い意味で、インタラクティブなWebデザインは、取り組むのが難しい一面もあります。サイトの標準スタイルの型にはまらない新しい側面があるからです。 前にスクロールと境界線ついて触れましたが、新しいWebデザインは、従来とは異なるスクロールを使用してWebサイトを作成する可能性を秘めています。 例えば、スワイプのような動きは上から下ではなく、横向きになっています。

斜めのウェブデザインも、人気上昇中でユーザーを左から右にガイドしたり、関心のあるポイントまで下にスクロールしたりするために、背景に斜めの形状を組み込んだものです。 たとえば、対角線は、行動を促すための目的のボタンに導きます。

さあ、ここまでウェブデザインの基本をご紹介し、あなた自身のウェブサイトのデザインを盛り上げるために何ができるかに触れてきました。 また、今後の予定を確認できるように、今後の傾向についてもご説明しました。

ここで上げた原則をすでに実装している方もいるかもしれません。どのデザインをやってみたいですか？どのトレンドがしっくりきますか？ぜひシェアしてください。