創業66年「質屋おぢさん」のWebサイトを“デザイン素人”がBiNDでリニューアル! まさかの「今風オウンドメディア」に!?

» 2016年10月31日 10時00分 公開
[PR/ITmedia]
PR
photo 東京・日暮里に店を構える質屋おぢさん

 東京・日暮里に「質屋おぢさん」というちょっと変わった名前の質屋があるのをご存じだろうか。その名前から受ける印象とは裏腹に、創業66年の立派なお店。戦後間もない1950年にオープンして以来、厳しい目利きのもと、時計や宝飾品、ブランドバッグ、楽器まで幅広く取り扱ってきたという。

 なぜ「質屋おぢさん」なのか? おぢさんの由来は、英語の俗語で質屋を「Uncle Shop」(おじさんの店)ということから。表記が「じ」ではなく「ぢ」なのは、創業当時の仮名遣いを反映したものだそうだ。

 そんな店内ではある日、オーナーの“ぱぱ”と一人娘のトモミさんが激論を交わしていた。その様子をのぞいてみると……

トモミ ダサイ! これじゃあ、誰も見に来ないよ!


ぱぱ そんなにダサいかな……味があっていいと思うけどな。


photo 質屋おぢさんのWebサイト

 トモミさんが「ダサイ!」と言っているのは、質屋おぢさんのWebサイト。自慢の商品を店頭だけでなくネットでも販売しようと、ぱぱが十数年前に作ったものだ。ただ、その後は大きく改修することもなく、“放置状態”になっている。

トモミ お店のFacebookやTwitterは写真付きでよく更新しているのに、サイトの方は、ほとんどがテキストだし、最終更新日なんて……えっ、2013年!? とっくに『お彼岸セール』は終わってるよ!


ぱぱ だって、ちょっと更新するだけなのにWeb制作ソフトを立ち上げるのは面倒なんだもん。サイト自体のデザインも自分でなんとかするより、TwitterやFacebookみたいな外部サービスを利用したほうが 気軽だし、楽だし……。


トモミ それだけじゃないよ。今はスマホでWebを見る人が多いのに、スマホで見てもPCサイトと内容同じだし……。それぞれ見せ方を変えるとか工夫しないと!


ぱぱ スマホ専用のサイトを作るなんて無理だよ。PCサイトを作るだけでも精いっぱいなんだから。


photo 携帯用のページを見ると……

トモミ でも、このままだと、何のためにサイトがあるか分からないよ?


ぱぱ うーん、これはこれで愛着があるサイトなんだけど、やっぱり直さなきゃダメ? 立派なサイトなんて、素人の私に作れっこないよ。毎日忙しくて時間もないし、やっぱり高いお金を出してプロの人に作ってもらわないと無理なのかな……。


 そんなぱぱを見かねて、トモミさんが取り出したのは、デジタルステージのWeb制作ソフト「BiND for WebLiFE* 9」。このソフトを使えば、HTMLやCSSが分からなくても、本格的なデザインのスマホ対応サイトが作れる――というのだ。

トモミ この「BiND9」を使って、私がぱぱのサイトを“いま風”にしてみせるよ。


ぱぱ どうやって? トモミも素人のはずだけど……。


トモミ 任せといて!


“デザイン素人”でも大丈夫! バリエーション豊かなテンプレート

 BiND9を使ったサイト作りは、土台となるテンプレートを選ぶところからスタート。企業のコーポレートサイトをはじめ、ECサイトや飲食店など、目的に合わせて200種類以上のテンプレートを収録している。

photo バリエーション豊かなテンプレート

 テンプレートは、「ヘッダー」「ビルボード」「コンテンツ」などページを構成するエリアごとに「ブロック」に分かれている。このブロックの配置を入れ替えたり、サイズを変えたりして、ページ全体の構成を決められるのがBiNDの特徴だ。

 トモミさんは今回、ECサイト向けテンプレートを使用。そこから自分の好みや店の雰囲気に合わせて、ブロックを動かしたり大きさを変えたりしていった。「わっ、すごい。ここまで簡単にいじれるんだ!」と思った以上のカスタマイズの自由度にトモミさんは驚く。

 ブロック内の文字・写真の編集は、ブログの投稿フォームのような画面に入力する「穴埋め方式」なので、複雑なレイアウトでも崩れる心配なし。デザインセンスや細かい作業に自信がなくても、テンプレートにそのまま当てはめるだけで、きれいな仕上がりになるという。

photo ブロック内の文字・写真を編集していく「穴埋め方式」

スライドショー、Webフォントで“プロ顔負け”の仕上がりに

 Webサイトに“動き”を付けたければ、スライドショー機能「SHiFT」を使えばいい。この機能では、サイト上に掲載した複数の写真をスライドさせたり、ズームイン/ズームアウトで動画のように見せたり――といったことができる。動きのパターンは40種類以上から選べる上、スライドを切り替える時間調整なども細かく設定できる。

photo スライドショー機能「SHiFT」

 質屋おぢさんの場合は、室内の様子や取り扱い商品、店主であるぱぱの写真などをサイト上に配置。SHiFT機能で動きを付け、店に訪れたことのない人でも雰囲気をつかみやすいようにした。

photo スライドショーに「ぱぱの写真」を使ってみた(画像右上の部分)

 ここまで作ったところで、トモミさんのもとにぱぱが登場。

ぱぱ ほほー、だいぶいい感じになってきたね。もうそろそろ完成かな?


トモミ これからもっともっと“今風”になるよ!


 そんなトモミさんの奥の手が、スクロールの動きとともに変化する「ゴーストヘッダー」と「ブロックアニメーション」という機能だ。どちらも見ている側に自然とコンテンツをアピールできるので昨今のWebトレンドに欠かせない。

 ゴーストヘッダーは、Webページをスクロールしても、ヘッダー(メニューなど)を常に上部に表示させる機能。そしてブロックアニメーションでは、文字や画像などにスライド、フェードなどの動きを付けられ、コンテンツを引き立たせられる。「おしゃれなカフェのサイトみたいだね〜」とぱぱも驚きの様子。

photophoto ゴーストヘッダー(左)とブロックアニメーション(右)

 サイトの見た目を左右するフォントも、センスのいいものを多数選べる。プロのデザイナーも愛用するというFONTWORKS製の日本語Webフォント434書体のほか、Google Webフォントを703種類、日本語フリーフォント24種類も利用できる。

photo 日本語Webフォント434種類のほか、Google Webフォントを703種類、日本語フリーフォント24種類を用意
photophoto 筑紫明朝を使ってみた(赤枠の部分)

 「EC機能も付けたい」というぱぱの夢をかなえるために、トモミさんが注目した機能が「BiNDカート」。これはECサイトに欠かせない決済機能を埋め込めるもので、注文・出荷状況、日々の売上推移までWebブラウザ上でチェックできるほか、支払いはクレジットカード、コンビニ決済、PayPalに対応している。

ぱぱ まさかECサイトがこんなにあっという間にできるなんて……。


トモミ デザインはBiNDで作って、商品管理は専用画面から登録するだけだから簡単だったよ。意外と本格的なECサイトができたでしょ。


ぱぱ (トモミが立派に育ってくれて、ぱぱうれしいよ……)


PCもスマホもOK レスポンシブWebに対応

 「PC用サイトだけでなく、スマホ用サイトも別に作らなくてはいけないのでは?」――そう思う人もいるかもしれない。スマホ対応にしたくても、PCサイトとは別に作るとなると2倍以上に労力がかかる上に、その後の更新も大変だ。

 しかしBiNDなら、そんな心配は不要。PC/スマホを問わず、閲覧者のデバイスの画面サイズに合わせ、デザインを最適化するレスポンシブWebに対応しているからだ(現時点では19種類のテンプレートが対応 )。

 さらに、ブロック単位でPC版では表示、スマホ版では非表示にする――というように、表示項目をデバイスごとに設定することも可能。PCに比べて表示領域が少ないスマホでは、本文を隠して見出しだけ掲載するなど、細かいカスタマイズができる。

photo ブロック単位で表示・非表示を設定

ブログ機能「BiND Press」で読者が集まる「オウンドメディア」に

トモミ さて、これでサイトは完成! さすがに更新は、ぱぱが頑張ってね!


ぱぱ 自信ないなぁ……。


トモミ ぱぱ、いつもSNSを使えているじゃない。BiNDのブログ機能を使えば更新も同じように簡単だから大丈夫だよ。


 BiNDの最新バージョンでは、新たにブログ機能「BiND Press」を搭載。BiNDで作ったサイトの一部や全てを“ブログ化”し、記事を投稿するだけでページを自動生成。新しい記事を投稿すると、新着情報の見出しを自動で更新してくれる機能に加え、記事内のメイン画像をタイル状に並べて表示するインデックスを作れる機能も備えている。

photo ブログ機能「BiND Press」

ぱぱ でもブログだけなら、SNSを使うのと変わらないんじゃ?


トモミ それは違うよ、ぱぱ! SNSはリアルタイムの情報発信は得意だけど、ちょっと前の投稿は見るのが大変なんだよ。それにサイトにコンテンツを増やしていけば集客にもつながるし!


 ブログを作るだけなら外部のブログサービスを使う手もあるが、一般のブログサービスでは競合の広告が出てしまったり、意図通りにサイトへの導線が作れなかったりするのが難点。BiND Pressでは、オリジナルサイトにブログを自然と溶け込ませ、記事を読んだユーザーをそのまま購買ページへ誘導したり、集客を狙ったりできるのが特長。コンテンツの品質がSEOをも左右する今、コンテンツの充実は欠かせない。まさしく理に適った「オウンドメディア」を作れるというわけだ。

photo 「高い査定のワンポイントアドバイス!」などの記事を書いてみた

 質屋おぢさんの例だと「高い査定のワンポイントアドバイス!」「ブランド品のお手入れ方法」「バーゲンセールの告知」などの“お役立ち記事”を公開し、読者に興味を持ってもらう――というような使い方ができそうだ。

 BiND Pressのポイントは、記事を投稿するユーザーと、サイトの仕組みを構築するユーザーの役割分担ができることだ。ソフトの起動時に「記事を編集」と「サイトを編集」の機能が分かれていて選べるようになっている。

 質屋おぢさんの場合は、日頃のブログ更新は“ぱぱ”が務め、サイト自体のレイアウトを変えるときだけソフトの操作に慣れたトモミさんが担当することになった。「トモミと一緒にサイトが作れてうれしいな」とぱぱはご満悦の様子。

 さらに、ソフトを起動しなくても、Webブラウザ上からサイトを編集したり、スマホからブログ記事の投稿ができたりするオプションサービス「BiNDクラウド」も用意。BiNDクラウド側で作ったサイトの更新状況を常に同期させる機能「BiND BOX」を備えている。BiND9には、BiNDクラウドが1年間無料で使えるライセンスが付属している。

photo

 さまざまな機能を生かし、トモミさんがぱぱと相談しながらリニューアルしたサイトがこちら。ぱぱの要望を踏まえつつ、小さいながら立派なオウンドメディア風のサイトに大変身した。

photo クリックでサンプルページへ

トモミ サイトの仕上がりはどう?? ぱぱ。


ぱぱ なんということでしょう……。


photo スマホから見てもバッチリ

 デザインに自信がなくても、HTMLやCSSなどの知識がなくても、スマホ対応の本格的なサイトが作れる「BiND for WebLiFE* 9」。ブログ機能を使って、あなたの会社でも更新までを意識したお手軽サイトづくりにチャレンジしてみてはいかが?

BiND for WebLiFE* 9

パッケージ版、ダウンロード版

photo

デジタルステージオンラインストア価格

  • スタンダード版:1万8800円(税別)
  • プロフェッショナル版:2万7800円
  • クロスプラットフォーム版:3万4800円

BiNDクラウド

BiNDの機能をWebブラウザ上で。

photo
  • エントリーコース:初年度無料(2年目以降月480円)
  • プロコース:年間2万9760円(月額2480円)
  • ビジネスコース:年間9万8000円

Copyright © ITmedia, Inc. All Rights Reserved.


提供:株式会社デジタルステージ
アイティメディア営業企画/制作:ITmedia ニュース編集部/掲載内容有効期限:2016年11月30日

もっと詳しく知りたい方はこちら

新ブログ機能「BiND Press」を搭載! PC/スマホのブラウザ編集が可能に。

BiNDクラウドさえあれば、Webサイト作成から公開、運営まで全ておまかせ。別途レンタルサーバーや他のソフトも不要。まずは無料で始められます。