インテリアショップのホームページを作ってみました。

 

Word Pressを使って 今回、comfort interiorというインテリアショップのホームページを作ってみました。



よりよいイメージに仕上げて見たかったので、最初の設定に時間をかけました。

レスポンシブデザイン( スマートフォン対応 )です。

 

トップページ画面

 

スマートフォンで表示
 
http://s-practice.sakura.ne.jp/furniturcom/

 



 

Word Pressでホームページを作成すると、サイドバーやブログがつきものですが、

左右に様々な情報があると、今回のイメージとは合わないため、

サイドバーやブログをなくして、シンプルにストレートにしました。

 

レイアウトについては、

プラグインのPage Builder (ページビルダー)を初めて使いました。



Page Builderを使うと、レイアウトが簡単にできるようになります。

 

ページビルダー

 

 



 

Topページの画面の遷移ですが、赤いボタンを追加したことで、MAPまで心地よく

移動できるようにしました。

 

赤いボタン

 



 

次にTopページにある、INTERIORSですが、



追加のプラグインで  「Foo Gallery」を使用しています。



「Foo Gallery」ではレスポンシブデザイン( スマートフォン対応 )で、

様々なギャラリーが使えます。



また、プラグイン 「FooBox Image Lightbox 」 を追加することで、

画像の拡大ができました。

 

インテリア一覧

 

拡大画像

 



 

conceptglobalnatureの各ページ(固定ページ)では

comfort interiorの各コンセプトの文章の下に、

ストレートのイメージ画像を表示しました。



伝わりづらい表現を写真で表示しました。

 

固定ページ

 

 



 

Interiorsのページでは、



Word Pressに付属のギャラリー機能を使っています。



ここでは、カタログ形式にしたかったので、追加のプラグインを設置しました。



各商品にリンクをつけて、詳細な別ページに移動ができるようにしました。

 

インテリアページ

 

移動した後の詳細ページでは、詳細な説明内容の他に、



「戻る」ボタンを追加しました。



「戻る」ボタンをクリックすると、より簡単に元の Interiors のページに戻ることができます。

 

レッドソファ

 

 



 

「contact」のページでは、メールフォームにお気に入りの「MW WP Form」を使用しています。



「MW WP Form」を使用することで、確認画面への移行や、メールアドレスの確認が行えます。



また、レスポンシブデザイン( スマートフォン対応 )ですので、iphoneやandroidでも通常通り使うことができます。



センターにメールフォームを表示しました。

 

メールフォーム

 

説明については以上です。



こちらのブログを見ていただいた方に、感謝致します。