ネット通販の経営に役立つ情報とツールを紹介する初心者支援サイト
Web制作ツール
ウェブサイトの作成は一般的にホームページ作成ソフトを利用しますが、例えば、広島市役所の公式サイトの一部にも使用される人気の高いホームページ・ビルダーやプロ仕様で有名なDreamweaverでも表現やデザインの自由度に限界があります。
多少のHTML知識があれば、テキストエディタとの併用で作業が軽減できます。HTMLで記述し、直接HTMLファイルを編集ができるソフトをテキストエディタと言い、定番的なフリーウェアはTeraPadが有名です。
また、Windows付属の「メモ帳」や「ワードパッド」なども利用できますが、文字コードの指定機能がないので、ソースの文字化けが生じることがあります。
市販のサイト作成ソフトの機能を実装するez-HTMLや管理画面から感覚的に編集できる多機能型のJimboなどがあります。
サイトの全体デザインはテンプレートから選択し、最低限必要なモジュールや機能も用意され、更新するコンテンツは自店で用意する記事と画像程度であれば、ブログ制作で紹介するフリーのブログツールを利用する方法もあります。
ユニークなソフトに国立情報学研究所がオープンソースで提供するNetCommonsがあります。このCMSとLMSのグループウェアを統合したコミュニティウェアを利用し、簡単に構築できるサイトとして、次のようなものが１つのシステムに統合できます。
システム構築の環境条件はご利用のサーバーOSがLinuxかWindowsServer、ウェブサーバーがApache1.3以降、PHPがPHP4.3.9以降、データベースにMySQL4.1以降の必要があります。
また、NetCommonsに独自機能を追加し、SaaS形式でソフトを提供する有料サービスにNeXtCommonsがあります。
- パブリックスペース(外部公開の一般的なウェブサイト)
メルマガ配信、お知らせの掲示、宣伝広告などの機能- プライベートスペース(個人のみが閲覧可能なバーチャルオフィス)
ネット上で個人別にファイルの保存、予定表の管理、非公開ブログの作成- グループスペース(グループ内の情報共有)
e-ラーニング、共同研究、委員会、ミーティングなどに活用できます。ウェブページ作成に必要なHTMLは仕組み自体が簡素なのでサイトデザインの模倣から始めるのが上達の近道です。これらの知識は検索キーワードを”初心者 ホームページ作成”で検索すれば多数ヒットします。
ただし、独自の本格的なサイト構築はこれらのソフトだけでは不十分なので、HTMLとCSSの知識は必要です。商用サイト構築にホームページ作成ソフトだけでは限界があります。デザイン以外の仕掛けやユーザビリティーに優れたjavascriptやCGIが不可欠であり、知識がないと設置さえ難しいのが実情ですが、設置の経験を積めば、簡単な改造も可能です。
制作のポイント
最初から満足できるサイトは単なる自己満足に過ぎないとお考えください。特にデザインや色使いは経験と研究が必要です。一般に人間工学的に縦横に並んだものを見る人の視線は自然と左から右、上から下へとＺの形を描くように移動すると言われ、アクセスユーザーがウェブページを見る場合は「F」の字を描きながらページ全体を見ているという調査もあります。よく読まれた場所をビジュアル化するUserHeatは簡単なスクリプトをHTMLファイルに貼り付けるだけで利用できます。
構築は見映えより、ユーザビリティの優れたサイトを優先すべきですが、これらをチェックできる高齢者や視覚障害のアクセシビリティ診断ツールにみんなのアクセシビリティ評価ツールmiCheckerがあります。webセーフカラー216色の中から背景色と文字色を選択すると色覚障がい者の見え方が表示され、配色チェックのできるカラーコントラストチェッカーもあります。使いやすさの基本は軽く、シンプルなことですが、サイトページを新規作成する場合、どうしても「画像をたくさん使いたい」とか「JavaScriptやcgiで見映えをよくしたい」などと考えがちです。一方、ほとんどの訪問者は落ち着いた、動きのないページを好み、安心感を持つようです。
人は0.3秒以内に処理できれば、一瞬で処理されたと思い込み、時差のストレスを感じないと言われており、最初の画像や数文字の印象から自分に必要な情報か、興味ある情報かを一瞬で判断するとも言われます。従って、その目線が瞬時に届く範囲内に情報を集約すると効果的ですが、サイト構築に留意すべき点を例示すると次のとおりです。
- ページのファイル容量は125KB以内にする(参考:ある日のYahoo!サイト130.3KB)
- 表組みを作成し、その中に文章や画像を挿入する(初級者向け)
- 色使いは好みを優先するのではなく、サイトの内容に合うかどうかで決める
- 特殊なフォントは画像化し、イラスト的な使い方をする
- フォントやサイズは多用しない(必要な場合は画像化する)
- FLASHだけのトップページは作成しない
お急ぎの方はこちら、スキップなどのリンクも同様です。- トップページに音楽などの音声を自動的に鳴らさない
アクセスは自宅だけではありませんし、Windowsの標準音声ファイルWAVEは未圧縮のためファイル容量が大きくなる欠点があります。音楽ファイルは圧縮のできるMP3、WMA、ramや音声情報を数値化したMIDIがよく利用されます。- 同じ内容のページは安易に分割せず、縦スクロールのページ内リンクで対応する
このような場合は「パンくずリスト」にします。
サイトページの構築
ネットショップに求められるサイトは商品購入者の立場で考えたページデザインで配置する必要があります。複数の情報群から、選択し記憶する場合は最初に提示された情報の印象や刷り込みに強い影響を与える現象を初頭効果と言い、最後に提示された情報のそれを新近効果と言います。
1ページに掲載する商品は多ければ多いほど、最初と最後の商品が印象に残りやすい言うことです。つい、インパクトのある画像を多用し勝ちですが、最初と最後の画像は特に重視する必要があります。サイト構築の要点
サイト全体の構築はお店の理念に基づいた統一的なデザインが必要で、消費者目線との適合が不可欠です。
- 訴求したい情報を明確にする
- 情報を簡略し、要点を要領よくまとめる
- 消費者の目と関心を引き付ける
- 視線の流れに沿った配置を考える
- 文字を使用しなくても理解できるように絵文字、アイコン、画像、動画などを利用する
ページデザインの具体例
消費者目線のデザインとは、具体的にどのようなものかを例示します。
- トップページで全てのコンテンツを案内できるようサイトマップを設置する
- どのページを見ているのか分かるようにする
- 別窓で開いたページには「閉じる」ボタンを設置する
- サイト内のリンクページは前ページに「戻る」ボタンを設置する
- 全ての末端ページから直接トップページに戻れるようにする
- 各ページのナビゲーションボタンの配置位置を同じにする
- テキスト文字のリンク箇所を見つけやすくする
- １ページの縦スクロールは最小限にする
- １ページの情報量と容量はページの目的に合わせて考える
- イメージ画像は用途に応じて加工する
- サイトのイメージカラーを数色に限定する
- 背景画像やアイコンなどのイメージに統一性をもたせる
- テキスト文字フォントの種類や大きさに規則性をもたせる
空白文字の使用
余白の調整には、スタイルシートのmarginプロパティやpaddingプロパティを使うのが一般的ですが、特に空白文字を挿入し、文字間のバランスをとることがあります。この場合はスペースキーで連続して挿入しても1つの半角スペースと解釈され、1文字分の空白しか表示されません。
強制的に半角英数の空白文字を連続挿入する場合は「 」を利用します。この他にも「 」、「 」、「 」などがあります。空白文字を含め直接HTMLに記述できない記号を実体参照文字と言いますが、代表的なものに「<」、「>」、「"」がよく使用されますが、これらの文字を表示させるには先述の｢&キーワード；｣と｢&#番号；｣の記述方法があります。スパムメール簡易対策
メールアドレスを記載する場合はHTMLソースの@マーク部分を＆amp;#64;に変更します。この代替表示法はサイトページのメルアド情報を収集するロボット対策になります。半角英数の@を全角英数の＠で代替したり、アドレス自体を画像化する方法もありますが、コピー＆ペーストで動作しないので表示用に利用します。
メルアド暗号化ツールのjavascriptはEmail Riddler、lufttooisなどで公開されています。また、アドレス表示が不要なCGIを利用したフォームメールはスパム対策と利便性から広く普及し、ネットショップの必須ツールになっています。デザインの雛型
一般的にページデザインは他店の通販サイトを参考にしますが、無料の雛形を提供するTempNate、Free Templates Online JP、POP素材配布サイトの0円のWEB素材屋さん、TADA ira、イメージ用フリー写真画像を配布するゆんフリー写真素材集、PIXTAや動画コンテンツも有料提供するFotoliaなどが利用可能です。
また、海外一流デザイナーのページ雛形を修正加工できるテンプレートモンスターは1万円以下で高品質のオリジナルページに編集できるサービスを提供していますが、一方で飲食店や美容院などのサービス業種に特化し、Webブラウザ上で容易に作成・更新できるグーペなどがあります。
ただし、サイトの信頼感や認知度を高める店名などのロゴ・シンボルマークはネット通販の小規模店舗では、重視される要素ではありません。サイトのページデザイン上で必要と思えば、簡単なデザインで十分です。
ロゴの有無やデザインの良し悪しで売上やアクセスが増加するわけでないことは明白ですから、会社名よりショップ名や何を売っている店かがひと目で認知できるようにするべきです。
これらの制作業者はLOGO-projectで紹介されていますが、例えば立体ロゴはLogoShaderで作成し、Logo Creatrは英数のみの簡単なロゴはオンライン上でPING形式の画像ファイルに作成できます。ブラウザ
インターネットを通じ、ウェブサイトのアクセスに必要なページ閲覧ソフトをブラウザと呼び、これによってHTMLファイルをウェブページに表示することができます。数多いブラウザの中でIEが圧倒していましたが、近年ではIE11の後継ブラウザのEdge、ChromeやSafariなどにも対応できるサイト構築が必須です。
IE対策はIE5.5～IE11のバージョン別に同時確認できるIETesterを利用し、レイアウトの表示やJavascriptの作動状況をチェックされることをお奨めします。
また、Mozilla、Opera、Safariの略をMOSeと言い、ブラウザやCSSが旧バージョンの場合は互換性に多少の不具合があってもアクセシビリティに配慮しつつ、これらのブラウザで表現豊かな表示を優先させる考え方もあります。
サーバー転送ソフトFTP
FTP(File Transfer Protocol)
インターネット上でファイル転送を行う手順をFTPと言い、このFTPの手順でファイル転送を行うアプリケーションのことをFTPソフトと呼びます。
通常は作成したウェブページをプロバイダやレンタルサーバに転送する場合に使用しますが、CGIファイルのパーミッションを設定する場合にも利用されます。
パーミッションとは、ユーザとグループのファイルやディレクトリに対するアクセスを制御するために使用される属性で、このパーミッションがないと他のユーザのファイルやディレクトリにアクセスできません。
これは1台のシステムを複数ユーザで共有するための適切な設定を行なうセキュリティ上の仕組みで、一般にFTPはホームページ作成ソフトに付属しています。
ただし、FFFTPなど多くの代表的なファイル転送ソフトは通信が暗号化されず、パスワード漏洩などの危険を伴いますので、暗号化通信のFTPS接続が可能なWindows対応ソフトのNextFTPやFileZilla、WinSCPなどをお奨めします。
【FFFTPのパーミッション設定例】
現在の属性707は左側からオーナー権限、グループ権限、その他権限の状態を示します。呼出許可は4、書込許可は2、実行許可は1で表し、合計は7になります。
３桁の数字以外はそれぞれの頭文字を使い、属性値をrwx—rwxなどに表示します。
UNIX系サーバーのパーミッションはディレクトリーやファイル別に設定します。 CGIの作者が指定するファイルのパーミッションはレンタルサーバーの環境により、そのままでは作動しないこともあります。