構築講座.ネット通販の構築と運営に役立つ初心者支援講座
SWFObjectを使ったFlashの埋め込み方法
HTML基礎 字体基礎 動画基礎 画像基礎 文章基礎
ブログ基礎 メルマガ基礎 2次元コード HTML小技 携帯版制作
HTMLと制作ソフト.

ウェブサイトの作成は一般的にホームページ作成ソフトを利用しますが、例えば、広島市役所の公式サイトの一部にも使用される人気の高いホームページ・ビルダーやプロ仕様で有名なDreamweaverでも表現やデザインの自由度に限界があります。

多少のHTML知識があれば、テキストエディタとの併用で作業が軽減できます。HTMLで記述し、直接HTMLファイルを編集ができるソフトをテキストエディタと言い、定番的なフリーウェアはTeraPadが有名です。

また、Windows付属の「メモ帳」や「ワードパッド」なども利用できますが、文字コードの指定機能がないので、ソースの文字化けなどが生じることもあります。

市販ホームページ作成ソフトの機能を実装するez-HTML、通常のHTMLソース修正に加え、プレビュー画面に切り替えできるalphaEDIT、旧IE付属無料ソフトのFrontPage Expressなどもあります。

サイトの全体デザインはテンプレートから選択し、最低限必要なモジュールや機能も用意され、更新するコンテンツは自店で用意する記事と画像程度であれば、ブログ制作で紹介するフリーのブログツールを利用する方法もあります。

商用目的のサイトを体験したい場合はGoogleの提供するみんビズを利用する方法があります。このサービスは業種ごとに最適化された雛形を簡単に無料作成することができ、さらに1年間無料で独自ドメインが提供されます。

ユニークなソフトに国立情報学研究所がオープンソースで提供するNetCommonsがあります。このCMSとLMSのグループウェアを統合したコミュニティウェアを利用し、簡単に構築できるサイトとして、次のようなものが１つのシステムに統合できます。

システム構築の環境条件はご利用のサーバーOSがLinuxかWindowsServer、ウェブサーバーがApache1.3以降、PHPがPHP4.3.9以降、データベースにMySQL4.1以降の必要があります。

また、NetCommonsに独自機能を追加し、SaaS形式でソフトを提供する有料サービスとしてNeXtCommonsがあります。

  • パブリックスペース(外部公開の一般的なウェブサイト)
    メルマガ配信、お知らせの掲示、宣伝広告などの機能
  • プライベートスペース(個人のみが閲覧可能なバーチャルオフィス)
    ネット上で個人別にファイルの保存、予定表の管理、非公開ブログの作成
  • グループスペース(グループ内の情報共有)
    e-ラーニング、共同研究、委員会、ミーティングなどに活用できます。

ウェブページ作成に必要なHTMLは仕組み自体が簡素なのでサイトデザインの模倣から始めるのが上達の近道です。これらの知識は検索キーワードを"初心者 ホームページ作成"で検索すれば多数ヒットします。サンプルを参考に作成法を説明した超初心者のホームページ作成はお奨めの一つです。

ただし、独自の本格的なサイト構築はこれらのソフトだけでは不十分なので、HTMLとCSSの知識は必要です。商用サイトはJavaScriptとCGIが不可欠で、基本知識がないと簡単なカスタマイズさえできないからです。

制作のポイントとサーバー転送ソフトFTP.

最初から満足できるサイトは無理だとお考えください。特にデザインや色使いは経験と研究が必要です。一般に人間工学的に縦横に並んだものを見る人の視線は自然と左から右、上から下へとＺの形を描くように移動すると言われます。

一方、アクセスユーザーがウェブページを見る場合は「F」の字を描きながらページ全体を見ているという調査もあります。よく読まれた場所をビジュアル化するUserHeatは簡単なスクリプトをHTMLファイルに貼り付けるだけで利用できます。

構築は見映えより、ユーザビリティの優れたサイトを優先すべきですが、チェックできるツールに高齢者や視覚障害のアクセシビリティを診断できる無償ソフトのAccessibility Assistance、Web Acessibility Toolbar、ウェブ上で簡単にサイト診断のできるユーザビリティチェックツールなどがあります。

使いやすさの基本は軽く、シンプルなことですが、サイトページを新規作成する場合、どうしても「画像をたくさん使いたい」とか「JavaScriptやcgiで見映えをよくしたい」などと考えがちです。一方、ほとんどの訪問者は落ち着いた、動きのないページを好み、安心感を持つようです。

人は0.3秒以内に処理できれば、一瞬で処理されたと思い込み、時差のストレスを感じないと言われ、自分に必要な情報か、興味ある情報かを0.3秒で判断しているとも言われます。従って、その目線が瞬時に届く範囲内に情報を集約すると効果的です。

ネットショップに適した認定基準はグッドデザインショップの採点方法と評価項目で公開しており、これらの基準はサイトのレベル判断や外部委託の参考に役立ちます。

  1. ページのファイル容量は125KB以内にする(参考:ある日のYahoo!サイト130.3KB)
  2. 表組みを作成し、その中に文章や画像を挿入する(初級者向け)
  3. 色使いは好みを優先するのではなく、サイトの内容に合うかどうかで決める
  4. 特殊なフォントは画像化し、イラスト的な使い方をする
  5. フォントやサイズは多用しない(必要な場合は画像化する)
  6. FLASHだけのトップページは作成しない
    お急ぎの方はこちら、スキップなどのリンクも同様です。
  7. トップページに音楽などの音声を自動的に鳴らさない
    アクセスは自宅だけではありませんし、Windowsの標準音声ファイルWAVEは未圧縮のためファイル容量が大きくなる欠点があります。左側のメニューフレーム最下部にBGMをご参考までに設置しています。音楽ファイルは圧縮のできるMP3、WMA、ramや音声情報を数値化したMIDIがよく利用されます。
  8. 同じ内容のページは安易に分割せず、縦スクロールのページ内リンクで対応する
    このような場合は次の「パンくずリスト」にします。

|HTMLと制作ソフト|制作のポイントとFTP|ページデザインの考え方|

サイトページ構築の基礎知識

ネットショップに求められるサイトは商品購入者の立場で考えたページデザインで配置する必要があります。複数の情報群から、選択し記憶する場合は最初に提示された情報の印象や刷り込みに強い影響を与える現象を初頭効果と言い、最後に提示された情報のそれを新近効果と言います。

1ページに掲載する商品は多ければ多いほど、最初と最後の商品が印象に残りやすい言うことです。つい、インパクトのある画像を多用し勝ちですが、最初と最後の画像は特に重視する必要があります。

ページデザインの考え方.

お客様を迷わせないデザインとは、具体的にどのようなものかを例示します。

  1. トップページで全てのコンテンツを案内できるようサイトマップを設置する
  2. どのページを見ているのか分かるようにする
  3. 別窓で開いたページには「閉じる」ボタンを設置する
  4. サイト内のリンクページは前ページに「戻る」ボタンを設置する
  5. 全ての末端ページから直接トップページに戻れるようにする
  6. 各ページのナビゲーションボタンの配置位置を同じにする
  7. テキスト文字のリンク箇所を見つけやすくする
  8. １ページの縦スクロールは最小限にする
  9. １ページの情報量と容量はページの目的に合わせて考える
  10. イメージ画像は用途に応じて加工する
  11. サイトのイメージカラーを数色に限定する
  12. 背景画像やアイコンなどのイメージに統一性をもたせる
  13. テキスト文字フォントの種類や大きさに規則性をもたせる

デザインの雛形

一般的にページデザインは他店の通販サイトを参考にしますが、無料の雛形を提供するTempNate、Tmplate Shop、Free Templates Online JP、POP素材配布サイトの0円の無料素材屋さん、ECPOP、イメージ用フリー写真画像を配布するゆんフリー写真素材集や動画コンテンツも提供するFotoliaなども商用利用が可能です。

また、海外一流デザイナーのページ雛形を修正加工できるテンプレートモンスターは1万円以下で高品質のオリジナルページに編集できるサービスを提供していますが、一方で飲食店や美容院など業種に特化し、Webブラウザ上で容易に作成・更新できるグーペなどがあります。

ただし、サイトの信頼感や認知度を高める店名などのロゴ・シンボルマークはネット通販の小規模店舗では、重視される要素ではありません。サイトのページデザイン上で必要と思えば、簡単なデザインで十分です。

ロゴの有無やデザインの良し悪しで売上やアクセスが増加するわけでないことは明白ですから、会社名よりショップ名がひと目で認知できるようにするべきで、社章などは全くの無意味です。

これらの制作業者はロゴプロジェクトで紹介されていますが、例えばLogo Creatrは英数のみの簡単なロゴをオンライン上でPING形式の画像ファイルに作成できます。また、LogoShaderは質感のあるロゴが作成できます。

ブラウザ

インターネットを通じ、ウェブサイトのアクセスに必要なページ閲覧ソフトをブラウザと呼び、これによってHTMLファイルをウェブページに表示することができます。数多いブラウザの中でIEが圧倒していますが、Google ChromeやFirefoxなどにも対応できるサイト構築が望まれます。

IE対策はIE6、IE7、IE8などのバージョン別に同時確認できるIETesterを利用し、レイアウトの表示やJavascriptの作動状況をチェックされることをお奨めします。

また、Mozilla、Opera、Safariの略をMOSeと言い、ブラウザやCSSが旧バージョンの場合は互換性に多少の不具合があってもアクセシビリティに配慮しつつ、これらのブラウザで表現豊かな表示を優先させる考え方もあります。

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の作者が指定するファイルのパーミッションはレンタルサーバーの環境により、そのままでは作動しないこともあります。

　　 このページの先頭へ