• 0k
  • 0
デザイン インスピレーション \ 2014年7月17日

Webデザインを見習いたい優れたホームページ10選

Wixでは、ホームページ作成のプロセスをできる限りシンプルにしながらも、思い通りのオリジナルサイトが作れるよう、日々開発に取り組んでいます。それでも何か問題が起こったり、壁にぶち当たったりすることは誰にでもあることです。

そんなときは、Wixチームに様々な方法でご連絡いただくか、または他のWixユーザーのホームページを見ることで、「こんな風にデザインすればいいんだー」と、サイト作成の参考になる実例を学ぶことができます。その一例として、Webデザインを見習いたい優れたホームページ10選をご紹介します。工夫ひとつでウェブデザインが美しく大変身、その秘訣を学びましょう。

あなたのホームページにも活かせる技がきっと見つかるはずです。

製品がもたらすライフスタイル

ネットショップで販売している商品がたったの一つだけという場合、その一点だけを多様な形でアピールするのは、なかなか難しい問題です。しかし、ポーランドでバックを販売している「Borba」さんのWixサイトでは、それを見事にやり遂げています。

その秘訣は、「商品」ではなく、商品を使うことで手に入る「ライフスタイル」をアピールすることです。

製品がもたらすライフスタイルをアピール

テーマに沿ったレイアウト

フリーランスのイラストレーターとして活躍するAntoine Royerさんは、ビジネス用に「Arch Illustration」というホームページを立ち上げました。彼は仕事柄、コンピュータの前で過ごす時間が多く、その仕事風景をイラストにして、ホームページで表現しています。

彼の仕事場を垣間見たようて、どこか彼に対する親近感が沸いてきませんか?あなたも、そんなデザインを目指しましょう。

Arch Illustration

どこまでもクリエイティブに

業種やビジネスによっては、伝統的でどこか堅苦しいイメージが払拭しきれず、そんな業種のホームページは平凡でありきたりなデザインになってしまうことも。

しかし、塗装サービスを提供する「Chip Painting」のWixサイトは、そうではありません。企業情報と問合せページだけの典型的な企業サイトを作ってもよかったものを、この画期的な塗装会社は、まるで新しくペンキを塗ったばかりのような、エレガントな雰囲気が伝わるデザインをオンラインで実現しています。

Chip Paintingのウェブデザイン

メニュー部分で一工夫

小さなアイコンを追加して、現在開いているページがどれかを一目で分かるようにしましょう。これどんな業種のホームページでも実践できる、ちょっと面白い一工夫です。

とっても簡単な方法は次の通りです。エディタを開き、各ページに同じアイコンを追加して、それぞれのページメニューの近くに配置しましょう。ページを移動するたびに、まるでこのアイコンが動いているかのように見えます。Lily Hirasawaさんの素敵なアイディアに感謝です!

Lily Hirasawa さんのホームページ

知識は力なり

独特な世界観が特徴のファッションブランド「Spoiled Cherry」は、よくある質問ページを設けて、提供している商品やサービスについて、サイトを訪れてくれた顧客に詳しく説明しています。「よくある質問」ページは、顧客のニーズを理解していることを示し、彼らの不安を取り除くことができるため、オンラインビジネス経営者の強い見方です。

また、テキスト内にキーワードなどを含めることで、SEO対策としても効果的です。

Spoiled Cherryさんのホームページデザイン

ストーリーを伝える

結婚式やパーティ用に素敵なデザインの招待状を提供している「someday」では、商品の説明文を、まるで小説の一部分から抜き出したような文章で表現しています。こうすることで、招待状を選んでいるお客さんは、紙に印刷されたデザインを選ぶのではなく、まるで自分がその小説の主人公になったかのような気分で、商品を選ぶことができます。

somedayのWixサイト

マウスオーバーエフェクト

Webデザイン業界でマウスオーバーエフェクトは、決して新しいトレンドではありません。Wixサイトではありませんが「ベリーメイクスクール」さんのホームページでは、画像やボックスにマウスを置くと、楽しいエフェクトが登場します。マウスオーバーエフェクトを取り入れることで、訪問者の関心を保ち、クリックを促すことができます。

Wixサイトでこのエフェクトを実装するのも、とっても簡単!画像ボタンやギャラリーのスタイルを変更することで、マウスオーバーエフェクトを追加しましょう。

Very Make Lesson

写真は語る

写真家として活躍されているStephanie Whiteさんは、多くの美しい画像をホームページに掲載し、作品をオンラインで宣伝しています。写真家だからこそできること、と思う方も多いかもしれませんが、実は、業種を問わず、印象的な画像は、ホームページのデザインを数十倍も改善してくれる要素なのです。

レストランでも学校でも、法律事務所だって、写真の力を甘く見てはいけません。サイト訪問者は、無意識のうちに一瞬で画像を認識するため、サイトの第一印象を決定する重要なコンテンツなのです。

Stephanie Whiteさんのホームページ

サイトの目的は正確に

優れたウェブデザイン、プロに依頼した美しい写真、トラフィックを集めるためのマーケティング活動などに力をいれたとしても、サイト訪問者に期待する行動を明確に示せていないと、これらはあまり価値がありません。これは、コールトゥアクション(CTA)、つまり「行動喚起」と呼ばれています。

イベント会場を運営する「TheAviary」のWixサイトは、目立つ黄色で「BOOK ONLINE(オンライン予約)」ボタンを右上に配置することで、これを完璧にこなしています。まさに、「オンラインで予約してもらうこと」がこのサイトの目的だからです。

The Aviary のホームページ

面白いナビゲーションスタイル

Web Kiss」さんは、最近流行っているウェブデザインのトレンドである「縦長のスクロールページ」と「アンカーリンク」を2つ組み合わせて、美しいウェブデザインを実現しています。

縦に長いスクロールページを採用することで、少ないページ数で多くの情報を表示することができます。アンカーリンクを追加することで、ページ上部のメニュー、またはページ内のリンクから、目的のコンテンツへジャンプすることができます。

Web Kiss のウェブデザイン

まだホームページを持っていませんか?今すぐ無料で作成を始めよう >>

ライター: Wix Team
Wix

今すぐ Wixブログ を
無料購読しよう!

Wixブログを購読しよう 役立つ情報をいち早くゲット!

正しいメールアドレスを
入力して下さい

正しいメールアドレスを
入力して下さい Email already exists

正しいメールアドレスを
入力して下さい Invalid email

Wixブログを購読 \ 

WebデザインやWix新機能についての
最新情報を無料でお届けします!

正しいメールアドレスを
入力して下さい

正しいメールアドレスを
入力して下さい Email already exists

正しいメールアドレスを
入力して下さい Invalid email