失敗も後悔も振り返れば全てが成長。そんなグラフィックデザイナーがフリーランスになるまでのアウトプットブログ。0件2124Web以前の記事でも紹介していた無料ホームページ作成サービスの『Wix(ウィックス)』ですが、どんどん新機能が追加されているということで、久しぶりにいろいろと触ってみました。そのなかでも今回は『スクロールエフェクト』という機能を使って、簡単なLP(ランディングページ)を作ってみたので、使用感などをレビューしてみようと思います。パララックススクロールとは?まず今回使ってみるWixの新機能のひとつ『スクロールエフェクト』ですが、世間ではパララックススクロールとも言われていて、簡単にいうと表面(上部)に見えている画像やテキストと、その奥(下部)にある背景画像のスクロール速度に差をつけて、奥行きだったり立体感を演出する手法です。グラフィックデザイナーさんに分かりやすく説明すると、『Illustratorで上下に分けたレイヤーのオブジェクトが同時に別方向に動く』みたいな感じでしょうか。こんな感じです↓(スマホ未対応)パラックススクロールを使ったサイトこんなサイトを見るたびに「カッコいいな~」と感心しながらも、「難しいんだろうな~」と全く導入する気がなかったのですが、Wixのサービスを使えば簡単に出来てしまうとのこと。以前から『僕の本業であるデザインの仕事をお手伝いいただける提携クリエイター』を募集する簡単なランディングページを作ろうと考えていたので、早速使ってみようと思います。今回作るのはランディングページ。ちなみに、特定の商品などの販売に特化した縦に長いシングルページをランディングページと言いますが、視覚的な効果でストーリー性を生み出せるパララックススクロールは、ランディングページとも相性が良さそうです。会員登録がまだの方はこちらの記事をご覧ください。左下にある「サイトを編集」をクリック。今回はランディングページなので、余計なヘッダーやフッターは外します。新たに追加されたページの右の「設定」→「レイアウト」→「シンプル」を選択。左のメニューバーから「背景」→好きな画像を選びます。フリー素材などを選ぶことで、さらに何百種類もある写真の中から好きな画像を使うこともできるので、あまり難しいことは考えずに、まずはやってみましょう。スクロールエフェクトの「パララックス」を選択します。これだけで、スクロールエフェクトが使えるようになります。背景画像を薄くしたい場合は、不透明度を調整してください。左のメニューバーから「追加」→「テキスト」で必要なテキストを打ち込んでいきます。あとは必要な画像やテキストを追加しながら、文字の大きさや色などを調整していきます。Wixは文字やオブジェクトの整列もボタンひとつ。Illustratorのよう。背景画像の上に配置する写真は、多めの方がよりパララックススクロール感がでて、カッコいい仕上がりになるような気がします。あとは、問い合わせフォームを追加して終了。(これも簡単)下が実際に僕が作成したランディングページ↓(スマホ未対応)http://nociws.wixsite.com/portfolio/lpWixのページでもホームページの作り方を解説しているので、全体のフローを知りたい方は是非チェックしてみてください。久しぶりにWixを使ってみましたが、あいかわらず操作方法は簡単です。今回は2〜3時間で作ったので、上にあったような見本のサイトまでのクオリティには及びませんが、それも時間をかければ問題なくできると思います。文字の整列機能や大きさ・色などの変更も直感で操作できるので、Illustratorに慣れている人ならまったく問題ないと思います。それよりも、文章の内容を考えるほうが大変でした。それくらい、Wixでホームページを作るのは簡単なのです。言うなら、問い合わせフォームにデータを添付できる機能が標準で付いていれば嬉しかったのと、スクロールエフェクトがスマホ対応になっていないこと。それは今後に期待しましょう。(データ添付機能はオプション)まとめこのように、簡単にパラックススクロールを使ったサイトも作れるWix。HTMLやワードプレスを覚える時間がない、多少は知識があるけど手軽にもっと高度でオシャレなサイトが作りたい人には、おすすめのサービスです。企業やお店のロゴの著作権って、どうなってるのか調べてみた世界に一つだけ。