2017年3月4日読了時間: 4分

今日から使える、トップページデザインテクニック7選

ホームページを作成する時、訪問者に使いやすいデザインにするのはもちろんですが、同時に見ている人に「驚き」を与えるようなサイトを作ることが重要になってきます。その驚きがあなたのホームページの個性にもなりますし、トップページで見ている人の心をつかむことができれば、他のページも真剣に見てもらえる可能性が高くなるからです。

アニメーションからパララックススクロールまで、Wixには訪問者を驚かせ、楽しませることができる機能であふれています。パワーポイント感覚で簡単にホームページを作成できるのがWixの強みの一つ。隅々までデザインをカスタマイズすることができ、デザインの変更も簡単です。

今日は、作業をする前にデザインのヒントが欲しいという方のために、『キラリと光るWebデザイン』の例をご紹介します。ここで紹介するホームページは全てWixで作られたものですので、同じザインをあなたのホームページにも取れ入れて頂くことができますよ。

さあ、早速みていきましょう！

一味工夫したアニメーション

シューズデザイナーのTamar Shalemは、アニメーション効果を使って、楽しいトップページを作り上げました。アニメーションを活かしたヘッダー、動くSALEのメッセージが、サイトを可愛らしく演出しています。

アニメーションをホームページに追加したい方は以下のスレッドをご覧ください>> アニメーション効果をパーツに追加する方法アニメーション効果をカスタマイズする方法

動画を上手に取り入れたトップページ

こちらは建設業者のホームページです。工事の様子の動画をファーストビューにもってくることで、どのような会社か訪問者が一目で分かる作りになっています。

画像より印象に残りやすい動画をトップページにもってくるのは良いアイデアですが、今回の例のように掲載する動画はあなたのビジネスを端的に表したものである必要があります。動画選びは慎重に行いましょう。

動画をホームページに追加したい方は以下のスレッドをご覧ください>> 独自の動画をサイトの背景にアップロードする方法サイトに動画を追加する方法

見ている人の心を奪うパララックススクロール

Wixでホームページを作っている方は、パララックススクロール等の３D効果を取り入れている方が多いのではないでしょうか？

パララックススクロールを追加すると、レイヤーになった背景が上と下、別々の速度で動き、ダイナミックな印象を与えることができます。こちらのファッション写真家のホームページをご覧頂ければ、その効果は一目瞭然のはずです。

パララックススクロールをホームページに追加したい方は以下のスレッドをご覧ください>> 背景画像のパララックススクロールを有効にする方法ストリップにパララックススクロールを追加する方法

アーティスト、デザイナー、写真家にぴったりのWixプロギャラリー

アーティストから写真家まで、様々なニーズに対応できる美しいプロギャラリーをホームページに追加してみませんか？簡単に写真をアップロードでき、解像度の調節やシャープ補正も行うことができます。ギャラリーを活かしたサイトデザイン例として、写真家であるJoerenさんやDoryさんのポートフォリオサイトをご覧ください。

Doryさんのポートフォリオサイトは、固定ヘッダーが使われている点も特徴です。画像がたくさん入ったホームページはページが長くなりがちですが、ヘッダーを固定することで、訪問者が別の頁に移動する際、先頭までスクロールする必要がなくなります。

Wixプロギャラリーを追加したい方は以下のスレッドをご覧ください>> Wixプロギャラリーを追加・設定する方法 Wixプロギャラリーのレイアウトを変更する方法