＜デモ制作＞Webサイト｜パッチワーク専門店Yuri

彩葉D&Wでは、ビジネスを始める際に必要となる、ロゴ・名刺・パンフレット・チラシ・Webサイトなどの、デザイン＆ライティングを丸ごと承っています。

ということで、ご依頼いただくとどんな感じのものができるのかをご紹介するため、

私の母（70代）がパッチワーク専門店のオンラインショップを始めた想定で、マルっと一式デモ制作をしております。

今回は、Webサイトのご紹介です。

デモ制作｜Webサイト WordPress Lightning

WordPressを使用し、下記のデモサイトを作りました。

Webサイト前提

• 無料テーマのLightningをベースにカスタマイズを施しています
• オンラインショップはBaseやShopifyなどを利用する想定にして、今回はホームページのみを作成しました

今回の想定はショップですので、作品の写真をスライドショーにすることで魅力の伝わるサイトになります。

WordPressでは、テーマの仕様に入っていなくてもプラグインで機能を追加することができます。

ただ、動作の関係上プラグインは必要最低限に抑えたほうが良いことと、プラグインとテーマが相互干渉を起こして不具合が出ることがあるため、、、

スライドショーを入れたい場合には、Lightningというスライドショー機能がついている無料テーマをお勧めしています。

ということで、今回はLightningを使ってカスタマイズしたホームページです。

Webサイト構成

このデモサイトは、ビジネス一般的に必要なページを含め、下記のサイト構成で作りました。

home（トップページ）

Point1. スライドショー

今回は事業内容を３つに分けて3枚設定し、それぞれの特徴をキャッチフレーズにして入れています。

画像と文字を重ねる際には画像にフィルターを掛けるか文字に背景色を加えて目立たせます。

Lightningではその両方を管理画面で設定できるようにはなっているのですが、それだけだとなかなか綺麗にいかないので、CSSによるカスタマイズを行なっています。

※スライドショーはパソコン表示の時とスマホ表示で画像のサイズを変えています。

Point２. 背景画像

スライドショーの画像を入れ替える時の動きは何種類かあります。

ページをめくるような動きにすると背景がチラ見えするので、今回は背景画像を設置して、スライド画像が変わるときに背景画像が見えるようにしました。

ただ、iPhoneやiPadなど、一部のデバイスでは背景画像の動きに対応していないものがあるため、下記の設定にしてあります。

• パソコンの大きな画面で見た時はスクロールしても背景画像が常に見える設定（背景固定）
• iPadで見たときは背景画像は中央にだけ見える設定
• スマホで見たときは背景画像は非表示

また、iPadを横にして見る場合を想定し、トップページにのみ背景画像を設置することでデザイン崩れを回避しました。

works（商品紹介ページ）

order（オーダーページ）

blog（ブログページ）

ホームページを作ったあと、宣伝や告知で利用したいのがブログ機能です。

パソコンなどの大画面で見た場合がこちら。

次に、スマホで見た場合はこんな感じになります。

contact（お問い合わせページ）

まとめ｜WordPress Lightningをカスタマイズしたデモサイト事例

今回は、WordPressの無料テーマLightningをカスタマイズし、ショップやカフェなどにお勧めのスライドショーを設置したデモサイトをご紹介しました。

ターゲット層が女性であることを鑑み、商品イメージに添いつつ、より魅力的に見えるデザインで、紙媒体からWebサイトまでをトータルコーディネートしてみました。

次回は、3つ折りパンフレットの別の種類のデザインをご紹介したいと思います。