ホームページビルダーでサイト作成したけど、不親切設計で初心者には難しい!

ホームページビルダーでサイト作成したけど、不親切設計で初心者には難しい!

シェア

今回、実家のフルーツトマトの直販サイトを作成するという2年越しの目的を果たしました。まぁずっと後回しにして手を付けていなかった時間が大半ですが。

それで、まぁこれが大変で大変で・・・。

WordPressでこれまでにブログを複数立ち上げて、Wordpressの新設設計に慣れていた自分は、「ホームページ作りも同じ要領でできるだろう!」と高をくくっていました。

何とか公開までにこぎつけましたが、完成するまでに何度パソコンの前でため息をついたことか。

方法をネット検索していて思うのは、Webデザイナーなどのホームページ作成のプロや上級者の人の説明って、素人には全然何がわからないのかもわからないレベルなんですよね。向こうも何でわからないのかわからないと思いますが。HTML、CGI、PHP・・・もうちんぷんかんぷんです。

それでわたしと同じように自分のホームページ作成を考えている初心者の方のために、何とか公開までに漕ぎつけたわたしの記録を残しておきたいと思います。

基本的にはホームページビルダーを購入すると参考書が付いてくるので、そちらを見ながら作成すると思いますが、わたしが気になった点と、その解決策、妥協点を箇条書き的にまとめます。

ショッピング(通販)サイトの作成

わたしがホームページ作成に使ったのはホームページビルダー19・SPです。

わたしが作った実家の通販サイトは商品数もほとんどないので、販売システムもメールなどによる簡素なものです。

ホームページビルダーのパーツにはショッピングカートがない?

ショッピングサイトを作ろうと思っている方で、一番先に考える機能がショッピングカートではないでしょうか?

ですが、テンプレートを選び、サイト作成画面のパーツ一覧を開きますが、パーツにはそのような機能はありません。

ショッピングカートを付けるにはこのような別のソフトを使うしかないようです。

ダヴィンチ・カート

わたしは商品数の関係から今回カート機能を実装していないので、今後実装することがあればまた投稿を追加します。

サイトのタイトルの大きさは変えられない

まずパーツ一覧の中から基本となるテンプレートを選択してドラッグドロップします。

サイトタイトルの編集は、ヘッダー(サイトタイトル)部分をクリックするとすみの方に歯車マーク(プロパティ)が出るので、クリックしてメニューの中から画像の編集→ウェブアートデザイナーを選択します。

するとこのような画面になります。

ちなみに目安線はツールバーの表示→グリッドの表示です。

LOGOというボタンをクリックして作ります。

わたしの付けたいサイトタイトルがけっこう長かったことと、ドーンと大きめのタイトルにしたかったこともあり、初め字を大きく入れたら、ほとんど切れてしまい表示されていませんでした。

色々調べたところ、「初心者でも作りやすいようになっている分自由度が少ないので、テンプレートに合わせるしかない」ということのようでした。つまりこういうところでは、白い枠の中に納めなければいけないということです。

結果、このように割と詰め詰めな感じの仕上がりになりました。

変更ができないのはしょうがないとしても、スペースがたくさん空いているのだから、高齢の方でも読めるようにもっと大きなタイトルを入れれるようにしておいてほしいものです・・・。

LOGOの中で好きなフォントや字のサイズ字間を調整して、枠に収まるようにしてください。

枠をクリックするとロゴの範囲が選択できるので白丸を引っぱって好きな範囲に合わせてください。わたしはタイトルが長いので目いっぱい開いてますが開き過ぎると端が切れます。

保存は一番上の画像の左上、ファイル→キャンバスを上書き保存です。再度調整が必要な時はまたウェブアートデザイナーを開いて調整します。保存したものは右下にあるのでクリックすると再編集できます

コンテンツの大きさやスペースの広さを調整する

調整するにはコンテンツをクリックした時現れる線のマークをドラッグドロップします。

コンテンツ同士のスペースを拡げたい時は赤い矢印の▼マークを動かすとスペースが調整できます。

一方青い矢印部分の白丸を動かすと、このようにコンテンツの大きさを変えることができます。こちらは右側に引っ張った状態です。(文字は中央寄せの状態になっています)

お問い合わせフォームが文字化け 解決できず!

この行程が一番苦労しました。ホームページにお問い合わせフォームは欠かせないものですし、特にわたしのサイトではお問い合わせフォームを注文フォームとして使う予定だったので、まさに肝心の部分です。

パーツ一覧の中からお問い合わせフォームを入れられるので作成の際、注文ページに入れたところ、実際にメールを送信するとひらがなが文字化けしていることに公開した後で気がつきました。

かなりあせって参考書を見ながら、文字コードを設定し直したり試行錯誤しましたが解決することはできませんでした。

ネット検索してもお問い合わせフォームの不具合は解決できませんでした。

とほほ・・・。

お問い合わせフォームにはプルダウンメニューがない

ついでに言うとお問い合わせフォームには、注文個数を入力する項目を作ることができません。プルダウンメニューなどが使えると便利なのですが、そういった機能はショッピングカートソフトなどを入れないと使えないようです。

問い合わせフォームの代わりにメールリンクで代用

とはいえ注文フォームやお問い合わせのための連絡機能はホームページに欠かせないので、考えた末、メールリンクで代用することに決めました。

お問い合わせフォームを使ったとしても送信をクリックした段階で、一旦利用している人の既定のメールソフトが立ち上がり、その後に送信と言う段階を踏むため、まったく変わりありません。

ネットで検索したところ、メールリンクをかんたんに設定できる方法を見つけました。

結論から書くと、このご注文ボタンをクリックすると、このように記入フォームが入力された状態のメールソフトが立ち上がる設定です。

ご注文ボタンはパーツ一覧の中にあります。

ボタンを設置したら歯車をクリックし、続いてリンクの設定をクリックします。

上のメールフォームはこのURL欄に以下のコードを記入したものです。


mailto:送信先メールアドレス?Subject=題名&body=お名前:%0D%0Aご住所:%0D%0ATEL:%0D%0Aご注文箱数:%0D%0Aご連絡先メールアドレス:%0D%0A備考:


ご利用の際は、送信先メールアドレス、題名、その他の入力項目を好きなものに書き換えます。入力欄が一列しかないので、メモ帳などを使って先に編集してコピーペーストします。

改行、または入力項目を増やすには、

%0D%0A

をさらに追加します。

OKをクリックしたら設定完了です。必ずプレビューなどで一度ご自分で送信して確認してみてください。

このメールリンクの作成については、https://ring-and-link.co.jp/dream2000/user/builder/builder-17/builder-17.htm#ラベル2 を参考にさせていただいてます。

・・・

以上、わたしがホームページビルダーによるサイト作成で苦労した点とその改善策です。

妥協になってしまった部分も多々ありますね。

ホームページビルダーは初心者向けでありながら、肝心の機能が使えなかったりと難点があるように感じました。ホームページを初めて作る人は「こういうデザインで、こんな機能があって・・・」と色々考えて作り始めると思うのですが、ホームページビルダーの場合上級者以外は決められた枠組みの中でレイアウトなどを決めていくしかありません。

WordPressってやっぱり素晴らしいんだな、と改めて感じました 笑

ホームページビルダーを使ってサイトを作ろうと考える多くの人は、恐らくサイトを作ることは手段であり目的ではないと思います。

ですから何ができて何ができないか、わたしが試行錯誤した道をあらかじめ知っておいていただければ、サイト完成までに悩む時間を少なくすることができるのではないかと思います。

特にわたしの場合は、お問い合わせフォームについて1日中パソコンとにらめっこして時間が過ぎてしまったので、この苦労を他の人がしなくて済むようにお役に立てていただければと思います。

今後また改善点などが出てきたらまた更新します!

スポンサーリンク




お役に立ちましたらクリックお願いします!下のコメント欄への書き込みもお気軽にどうぞ!
人気ブログランキング

 

シェア