• 0k
  • 0
ウェブデザイン \ 2013年6月16日

ホームページ作成ツール:絶対に知っておきたい5つのWix機能

Wix のホームページ作成ツールには便利な機能がたくさんありますが、そのすべてを使いこなすには、それなりの努力と時間が必要です。そこで、今回はWix を使って HTML5 サイトを作る際にこれだけは「絶対に知っておきたい5つの機能」をご紹介します。さあ、あなたもプロのウェブデザイナーを目指そう!

ページの変換

ページの変換スタイルに変化をつけることでウェブサイトがより洗練された印象になります。スタンダードなページ変換の代わりに、「アウト・イン」や「クロスフェイド」、「スワイプ」など、お好みのスタイルを選びましょう。

  1. HTML5 エディタにて「ページ」をクリックします
  2. ページ設定画面の下から変換スタイルを選びます

ホームページ作成ツール: Wixエディタのページ設定方法

  1. ウェブサイトを確認して完了です!

 

ボタンに影をつける

サイト上のボタンに影をつけて目立たせましょう。

  1. エディタの左側にある「追加」アイコンをクリックして[ボタン&メニュー]をクリックします

ホームページ作成ツール: Wixエディタのボタンとメニューの設定画面

  1. デフォルト、大きなボタン、強調ボタンのいずれかを選択します

ホームページ作成ツール: Wixエディタのボタンとメニューから強調ボタンを選択

  1. サイト上に現れたボタンをクリックして「スタイルの変更」を選択します

ホームページ作成ツール: Wixエディタでボタンのスタイルを変更する方法

  1. 表示された画面で「スタイルの編集」をクリックします

ホームページ作成ツール: Wixエディタでボタンのスタイルを変更する方法2

  1. スタイルの詳細画面が開くので、影付きのスタイル(左下)を選びます

ホームページ作成ツール: Wixエディタのボタンに影を付ける方法

グリッドアニメーションを使った画像ギャラリー

グリッドアニメーションを使って、画像を美しく、分かりやすく表示しましょう。画像にマウスを合わせると、画像のタイトルと説明が表示されます。画像をクリックすると、その画像が拡大表示されます。

  1. 「追加」メニューの中からギャラリーを選択します

ホームページ作成ツール: Wixエディタでギャラリーを追加する方法

  1. グリッドアニメーションギャラリーを選択します

ホームページ作成ツール: Wixエディタのギャラリーからグリッドアニメーションギャラリーを選択

  1. オリジナルの画像を追加しましょう

ホームページ作成ツール: Wixエディタのグリッドアニメーションギャラリーにオリジナル画像を追加

カラーパレットのカスタマイズ

HTML5 エディタ内の配色は Wix デザイナーによって厳選されたものばかりです。しかし、自分だけのオリジナルカラーを設定したい場合は「パレットのカスタマイズ」から設定することができます。

  1. 「デザイン」アイコンをクリックして、「色」を選択します

ホームページ作成ツール: Wixエディタのデザインから色を選択

  1. 表示された「カラー」の下にある「パレットのカスタマイズ」をクリックします

ホームページ作成ツール: Wixエディタの色を変えるにはカラーパレットを利用します

  1. メインカラーの中から好きな色を選んで自由にカスタマイズしましょう

ホームページ作成ツール: Wixエディタのカラーパレットを自由にカスタマイズしよう

 

Facebook のサムネイルを設定する

Facebookで HTML5 サイトをシェアすると、サイトの概要と小さな画像(サムネイル)が表示されます。この画像を上手く設定することで、クリック数のアップにも繋がります。既存の Wix 画像を使うかオリジナルの画像をアップロードしましょう。ウェブサイトを思わず覗いてみたくなるような画像を選ぶのがコツです。

  1. 「設定」アイコンをクリックして「ソーシャル」をクリックします

ホームページ作成ツール: WixエディタでFacebookのサムネイルを設定する方法

  1. 「サムネイルをアップロード」をクリックします

ホームページ作成ツール: Wixエディタのソーシャル設定でオリジナルサムネイルをアップロード

  1. 画像を選択して OK をクリックします

ホームページ作成ツール: Wixエディタから希望のサムネイルを選択します

  1. サムネイルが適用されたことを確認し「完了」をクリックすれば完了です!

ホームページ作成ツール: Wixエディタのソーシャル設定でサムネイルを確認して完了

他にも多くの機能や裏ワザをどんどんご紹介していきます。お楽しみに!


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

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

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

Wixブログを購読 \ 

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

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