vol.37 ホームページのリニューアルあたっての改善点とプログラム制作秘話

2004年以来3年振りにホームページをリニューアルしました。リニューアル期間は準備期間も入れると1年以上もかけて夜な夜な作業を行ってきました。やっとたどり着いたリニューアルオープンの日にふと考えていました。頑張って製作したサイトですが、アラ・カワが頑張ってきた最大の理由は使いやすいサイトにするためです。さらにはお問い合わせいただきやすくするため、最終目標はAZUMAのイス張り替えサイトよりご注文いただいたお客様の椅子達が新品以上に活躍して、10年以上後に「東加工所で椅子を張り替えて良かった」と語っていただけるお客様を一人でも多く増やしていくことです。海外のように「椅子の張り替え」がスタンダードになっていく時代を日本でも築いていきたいと強く願います。話しが大きくなってしまいましたが結局のところこの1年の頑張りが評価されるのはこれからで、やっとそのスタートラインに立てたという気持ちに切り替わりました。

ホームページのリニューアルあたっての改善点

今回のリニューアルにあたってアラ・カワが取り組んだ改善点は主に以下の通りです。以降詳細をそれ以降に記載しますのでご一読いただけましたら光栄です。

 1.実績カタログで同じ(類似した)形状を探してそのまま見積もり

 2.画像を添付していただく方法として計5通りを用意

 3.オンラインサンプル帳の充実と複合検索

1.実績カタログで同じ(類似した)形状を探してそのまま見積もり

以前のバージョンでは「張り替え実績の紹介」という意味で今までの加工実績を紹介しているだけでした。お問い合わせの中に「E○○○」と同じ椅子を持っているんだけど…というお問い合わせをいただくことが多くなってきたところでした。よく考えれば、同じ椅子を発見しても見積もりフォームから問い合わせをするときには一からイスの形状を選択しなければならない億劫さがあったように思えます。
 

←← ● 張り替え加工実績カタログ 詳細ページ

● 同形状でお見積もりフォーム →→ 
 

今回のリニューアルでは「張り替え実績カタログ」とその役割を進化させていこうと考えました。実績カタログで表示される各椅子の実績詳細ページの中で「同タイプでお見積」というボタンを用意して表示されている椅子の場合での見積もり依頼を容易に見積もりフォームへ進むように工夫をしました。この方法での見積もりフォームを選択した場合、既にイスの形状が確定できているので質問内容もそのイスの形状によって自動でその他にうかがいたい質問のみが表示されるようになっているので見積もりフォームの入力も従来より簡素化されました。

この方法を取り入れたことで良いことは、お持ちの椅子と同じ(類似した)椅子の加工実績や場合によってお寄せいただいたご感想などをご覧いただいた上でお見積もりに移れることや、アラ・カワのほうでイスの形状を概ね把握できることです。イスの形状を口頭や文章で説明するのは難しいですのでこういった情報があれば一目瞭然なので見積もりの信憑性も高まります。また、見積もりまでのスピードも速まると考えています。

たとえば、左画像の実績詳細ページ内の「同タイプでお見積」をクリックすると右画像の「同形状で見積もりフォーム」が表示されますが、このとき既に以下の内容の質問内容が省略されています。

 Q1-5 現在張られている生地は、鋲で止められていますか
 Q2-1 ソファのタイプを分かる範囲で選択してください

実はソファやダイイングチェアの形状についてはアラ・カワがタイプを分類したものが多いので一般的に分かりにくい場合もあるため多くの方はここで困惑されていたようです。イスの形状が決まっているということはそういった煩わしい質問に答えることなく見積もり依頼が容易になります。その他には椅子の大きさと数量などをご返答いただいております。また右画像のソファの場合はイスの種類もソファだということが明確なのでダイニングチェアやソファ、その他のイスということで形状をお選びいただく必要がないので、質問内容のSTEP1とSTEP2を同時に表示し、ご回答いただけるようになりました。
 

【プログラム制作秘話】
 この見積もりシステムは非常に困難を強いられました。何度も壁にぶつかり、一度あきらめ、期間をおいて再チャレンジし、それでも思うようにできず、何度もあきらめました…。リニューアル期間は1年に及びその間、他のプログラムを作ったりしながら経験を積み、最後の最後に今度こそはと取りかかりやっと出来上がった見積もりシステムです。多くの方のお役に立てるAZUMAのイス張り替えサイトオリジナルの便利なシステムだと自画自賛しておりますので椅子の張り替えをご希望の方はまずは「実績カタログ」より張り替えたいイスの形状に似た椅子を探して「同タイプでお見積」よりお見積もりのご依頼をお試しください。

2.画像を添付していただく方法として計5通りを用意

今までは写真をご提供いただく場合は以下の方法がありました。

 ●お見積もりフォーム送信後の自動返信メールに添付して返信

 ●E-mail:info@azuma-kako.co.jp へ添付して送信

 ●郵送にて送付

今回のリニューアルで上記に加え、お見積もりフォーム送信後の画面で新たに以下の2通りの方法を追加しました。

 ●携帯電話用のQRコードを表示し携帯電話からの写真添付メール

ここ数年で携帯電話で写真を撮影できる便利な時代になりました。携帯電話で撮影した写真を添付しようと、携帯電話にE-Mailアドレスを入力するのはなかなか大変です。だからこそ携帯用QRコードは必要不可欠だと考えました。

 ●PCに保存されているデジカメ写真などを3枚ずつ送信

そして、予め椅子の写真などの用意のある方にとっては便利な機能がホームページ上から写真を送信できるシステムです。フォーム送信後なのでお名前などのご記入は不要でパソコン内の画像を選択し、必要に応じて写真のコメントを付けていただければOKです。1ページ目では3つのファイルまで送信可能です。1ページ目を送信すると2ページ目に切り替わり4枚目?6枚目までを送信することができます。この調子で上限なく何十枚でも続けて送信することが可能です。適度にご利用いただきたいと思います。このシステムのもう一つの特徴は写真の場合はどんなに大きなサイズの写真を送信してもサーバー側で640x480ピクセルにサイズを変更してE-mailに添付してアラ・カワと送信者へ送信してくれることです。たとえは2MBのサイズの写真を送信しても自動でサイズを調整して40KB(0.04MB)程度にサイズを変更してくれることです。これで写真のサイズ変更など苦手な方でも手軽に画像を送信していただくことができます。

【プログラム制作秘話】
写真をホームページ上から送信しサーバーへデータを保存することはホームページ実績の更新などで経験があったのですが、送信した画像をE-mailに添付してE-mailでデータを受け取るという試みは初めてでしたので苦労しました。やはり1月ほどいろいろと試して何とか添付できるようになりました。そのE-mailを受信するアラ・カワと送信者(お客様)のためにたとえば2MBx3枚などの画像添付があったときに受信できない可能性があるので、ここで工夫が必要となりました。アラ・カワが考えたのが画像をアップロードした先のサーバー側でサイズを指定のサイズ(640x480ピクセル)よりも大きいものはサイズを小さく編集し軽くしてE-mailに添付してしまおうということでした。考えついたまでは良かったのですがそのプログラムを書き上げることはさらなる困難への挑戦でした。そんな強い思いでアラ・カワが作り上げたシステムです。どうぞご活用ください。

3.オンラインサンプル帳の充実と複合検索

オンラインサンプル帳は椅子生地メーカー「シンコール」の2000年当時の椅子生地サンプル帳と一緒に販売された設計者用CDにて「シンコール」さんの許可を得て画像をひとつひとつ作成して作り上げました。その後3年ごとにサンプル帳が新しいものに切り替わり廃盤商品のみを削除してまいりました。その結果、オンラインサンプル帳で布地をご覧いただくと「これだけしかないのか」という誤解を招いてしまうこともありました。今回のリニューアルで「サンゲツ」さんの椅子生地画像の使用を許可していただけたので掲載点数が一気に増え見応えのオンラインサンプル帳となりました。

今までは検索方式にプルダウン形式をとっていたので1つしか条件を選択できませんでした。たとえば、色で「アイボリー」を選ぶとアイボリーしか見ることができませんでした。アラ・カワが生地の色を登録する際もアイボリーか白か悩んだ末にアイボリーにすることもありますので、できれば色についてもいくつか選択できるように選択の幅をもたせた方が絶対に便利だと考えました。たとえば「白」「アイボリー」「ベージュ」の3色を選んで検索をかけると「白」「アイボリー」「ベージュ」の生地が検索結果として表示されるようになりました。あわせて、材質や柄なども同様に複合検索が可能となりました。そのためご希望の生地まで容易にたどりつけるようになりました。

←← ● オンラインサンプル帳(種類別)
● オンラインサンプル帳(色別) →→ 

色を検索条件に色が選択されていない場合は種類別のオンラインサンプル帳表示(左画像)が表示されます。検索結果に色を選択した場合は右画像のように検索条件に沿った色での表示となります。ちなみに右画像の検索条件は「オレンジ」「ベージュ」「茶色」が選択された状態となります。

同様に工場在庫生地サンプル帳工場在庫生地販売においても複合検索ができるようにしました。便利なものは便利ですので応用しない手はないです。快適に検索できるようになったオンラインサンプル帳をご活用ください。

【プログラム制作秘話】
プルダウンでの選択は1つだったこともあり以前のアラ・カワのプログラムスキルでやっとこさ形にできていました。チェックボックスで複数選択できるようにすると選択されたデータを配列として渡さなければならず、その配列のデータをどのようにしても受け取ることができませんでした。2,3度配列での受け渡しをあきらめようと思いましたが急に活路が開けうまく配列データを受けとることに成功しました。データを受け取るだけでは検索結果として絞り込めないのでそのデータを活用して絞り込み検索できるようにデータとして分解して使えるように頑張ってみました。結果はGood!!表示速度なども思いの外、快適にサクサク動くので感無量です。

 

  • アラ・カワの独り言
  • アラ・カワの独り言
  • 1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48