ページの作成知識

ネットショップに求められるサイトは商品購入者の立場で考えたページデザインで配置する必要があります。複数の情報群から、選択し記憶する場合は最初に提示された情報の印象や刷り込みに強い影響を与える現象を初頭効果と言い、最後に提示された情報のそれを新近効果と言います。
1ページに掲載する商品は多ければ多いほど、最初と最後の商品が印象に残りやすい言うことです。つい、インパクトのある画像を多用しがちですが、最初と最後の画像は特に慎重さが望まれます。

ページの視点

サイト全体の構築はお店の理念に基づく統一的なデザインが必要であり、消費者目線との適合が不可欠です。

  • 訴求したい情報を明確にする
  • 情報を簡略し、要点を要領よくまとめる
  • 消費者の目と関心を引き付ける
  • 視線の流れに沿った配置を考える
  • 文字を使用しなくても理解できるように絵文字、アイコン、画像、動画などを利用する

ページデザインの具体例

消費者目線のデザインとは、具体的にどのようなものかを例示します。

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

デザインの雛形

一般的にページデザインは他店の通販サイトを参考にしますが、無料の雛形を提供するTempNateFree Templates Online JP、POP素材配布サイトの0円のWEB素材屋さんTADA ira、イメージ用フリー写真画像を配布するImage*AfterPIXTAや動画コンテンツも有料提供するFotoliaなどが利用可能です。
また、海外一流デザイナーのページ雛形を修正加工できるテンプレートモンスターは1万円以下で高品質のオリジナルページに編集できるサービスを提供していますが、一方で飲食店や美容院などのサービス業種に特化し、Webブラウザ上で容易に作成・更新できるグーペなどがあります。
ただし、サイトの信頼感や認知度を高める店名などのロゴ・シンボルマークはネット通販の小規模店舗では、重視される要素ではありません。ページデザイン上で必要と思えば、簡単なデザインで十分です。
ロゴの有無やデザインの良し悪しで売上やアクセスが増加するわけでないことは明白ですから、会社名よりショップ名がひと目で認知できるようにするべきで、社章などは全く無意味です。
これらの業者はロゴプロジェクトで紹介されていますが、例えばLogo Creatrはオンライン上でPING形式の簡単な英数のみのロゴ画像ファイルが生成できますし、フリーソフトのLogoShaderは質感のあるロゴが作成できます。

制作ソフト

サイトの構築は一般的にホームページ作成ソフトを利用しますが、例えば、広島市役所の公式サイトの一部にも使用される人気の高いホームページ・ビルダーに対し、W3C勧告のWeb標準に準拠し、XHTML/CSSで構成されたレイアウトの作成とサイト構築に特化したExpression Web 4はプロのWebデザイナーをはじめ、CSSレイアウトを効率的に簡単に作成したいユーザーにお勧めです。
プロ仕様で有名なDreamweaverでも表現やデザインの自由度に限界があります。多少のHTML知識があれば、テキストエディタとの併用で作業が軽減できます。HTMLで記述し、直接HTMLファイルを編集ができるソフトをテキストエディタと言い、定番的なフリーウェアはTeraPadが有名です。
また、Windows付属の「メモ帳」や「ワードパッド」なども利用できますが、文字コードの指定機能がないので、ソースの文字化けが生じることがあります。
市販のサイト作成ソフトの機能を実装するez-HTMLや無料版は500MBながら、管理画面から感覚的に編集できる多機能型のJimboなどがあります。このJimdoやhpb pad for WordPressはスマホ向けのサイト作成もできるアプリも提供しています。
サイトの構成デザインはテンプレートから選択し、必要なプラグインツールなども利用できるので、更新するコンテンツが自店で用意するテキスト記事と画像程度であれば、高度なHTML知識を必要としないフリーのCMSブログツールを利用する方法もあります。
商用サイトを体験したい場合は契約審査が必要ながら、決済システムを具備し、無料で簡単にYahoo!ショッピングに出店できるライト出店が利用できます。
また、Googleの提供するみんビズのサービスは業種ごとに最適化された雛形を無料で作成することができ、さらに1年間無料で独自ドメインが提供されます。
ユニークなソフトに国立情報学研究所がオープンソースで提供するNetCommons2.0公式サイトやこのツールに独自機能を追加し、SaaS形式でソフトを提供する有料サービスにNeXtCommonsがあります。
このCMSとLMSのグループウェアを統合したコミュニティウェアを利用し、簡単に構築できるサイトとして、次のようなものが1つのシステムに統合できます。
システム構築の環境条件はご利用のサーバーOSがLinuxかWindowsServer、ウェブサーバーがApache1.3以降、PHPがPHP4.3.9以降、データベースにMySQL4.1以降が必要です。

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

ウェブページ作成に必要なHTMLは仕組み自体が簡素なのでサイトデザインの模倣から始めるのが上達の近道です。これらの知識は検索キーワードを”初心者 ホームページ作成”で検索すれば多数ヒットします。
ただし、独自サイトの構築はこれらのソフトだけでは不十分で、HTMLとCSSの知識は最低限必要です。更に商用サイトはJavaScriptとCGIが不可欠で、基本知識がないと簡単なカスタマイズさえできません。

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

最初から満足できるサイトは無理だとお考えください。特にデザインや色使いは経験と研究が必要です。一般に人間工学的に縦横に並んだものを見る人の視線は自然と左から右、上から下へとZの形を描くように移動すると言われます。
一方、アクセスユーザーがウェブページを見る場合は「F」の字を描きながらページ全体を見ているという調査もあります。よく読まれた場所をビジュアル化するUserHeatは簡単なスクリプトをHTMLファイルに貼り付けるだけで利用できます。
構築は見映えより、ユーザビリティの優れたサイトを優先すべきですが、これらをチェックできるツールに高齢者や視覚障害のアクセシビリティを診断できる無償ソフトのAccessibility AssistanceWeb Acessibility Toolbar、ウェブ上で簡単にサイト診断のできるユーザビリティチェックツールなどがあります。
また、モバイル検索が主流となっていることから、スマホ対応のページ作成は必須となっていますので、現在のページがスマホに最適化されているかどうかはとても重要です。
例えば、スマホの画面からワンタッチで電話をする場合は<a href=”tel:0821234567″>082-123-4567</a>のタグを使用すれば、082-123-4567のように表示されます。
モバイルユーザーに快適なウェブサイトを提供するためのツールはMobile-Friendly Websitesが利用できますが、Googleからの評価はモバイルフレンドリーテストのチェックツールを使って調査できます。

モバイルフレンドリーテストの判定基準

  • テキストが小さすぎて読めない
    ホームページにアクセス者の役に立ちそうな情報が載っていても、文字が小さ過ぎて読めなければ、全く意味がありませんので、テキストサイズが適切かどうかが、判断基準の1つになります。
    スマートフォンはパソコンに比べ画面が小さいので、文字を少し大きくしないと、読みづらいことから、事前にスマホ用のレイアウトを作成しておき、閲覧時に最適化しておく必要があります。
  • モバイル用viewportが設定されていない
    パソコン用のページ設定だと、ぺージが画面の幅に収まるよう、自動的に縮小表示されるので、アクセスした場合に毎回拡大をしなければなりませんが、スマホ用のviewportを設定しておけば、スマホの横幅にあわせて表示されるようになります。

  • リンク同士が近すぎる
    スマホの画面は小さいため、設置されたリンクとリンクの間隔が狭いと、指タッチする場合に押し間違えることがありますので、リンクの設置は押しやすいように十分大きくした上で、リンク同士を近づけすぎず、間に十分なスペースを確保する必要があります。
  • コンテンツの幅が画面の幅を超えている
    画像サイズが大きすぎると、スマートフォンの画面からはみ出してしまうことがあります。画面からはみ出した場合、アクセス時は左右にスクロールしなければ閲覧できないことから、画像や文章などのコンテンツが画面の幅を超えないよう、適切なサイズ設定を行う必要があります。

使いやすさの基本は軽く、シンプルなことですが、ページを新規作成する場合は「画像をたくさん使いたい」とか「JavaScriptやcgiで見映えをよくしたい」などと考えがちです。一方、ほとんどの訪問者は落ち着いた、動きのないページに安心感を持つようです。
人は0.3秒以内に処理できれば、一瞬で処理されたと思い込み、時差のストレスを感じないと言われており、最初の画像や数文字の印象から自分に必要な情報か、興味ある情報かを一瞬で判断するとも言われます。
従って、その目線が瞬時に届く範囲内に情報を集約すると効果的ですが、サイト構築に留意すべき点を例示すると次のとおりです。

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

ブラウザ

インターネットを通じ、ウェブサイトのアクセスに必要なページ閲覧ソフトをブラウザと呼び、これによってHTMLファイルをウェブページに表示することができます。数多いブラウザの中でIEが圧倒していますが、Google ChromeFirefoxなどにも対応できるサイト構築が望まれます。
IE対策はIE5.5~IE10のバージョン別に同時確認できるIETesterを利用し、レイアウトの表示やJavascriptの作動状況をチェックされることをお奨めします。
また、Mozilla、Opera、Safariの略をMOSeと言い、ブラウザやCSSが旧バージョンの場合は互換性に多少の不具合があってもアクセシビリティに配慮しつつ、これらのブラウザで表現豊かな表示を優先させる考え方もあります。

FTP(File Transfer Protocol)

インターネット上でファイル転送を行う手順をFTPと言い、このFTPの手順でファイル転送を行うアプリケーションのことをFTPソフトと呼びます。
通常は作成したウェブページをプロバイダやレンタルサーバに転送する場合に使用しますが、CGIファイルのパーミッションを設定する場合にも利用されます。
パーミッションとは、ユーザとグループのファイルやディレクトリに対するアクセスを制御するために使用される属性で、このパーミッションがないと他のユーザのファイルやディレクトリにアクセスできません。
これは1台のシステムを複数ユーザで共有するための適切な設定を行なうセキュリティ上の仕組みで、一般にFTPはホームページ作成ソフトに付属しています。
ただし、FFFTPなど多くの代表的なファイル転送ソフトは通信が暗号化されず、パスワード漏洩などの危険を伴いますので、暗号化通信のFTPS接続が可能なWindows対応ソフトのNextFTPFileZillaWinSCPなどをお奨めします。
【FFFTPのパーミッション設定例】
属性の変更例現在の属性707は左側からオーナー権限、グループ権限、その他権限の状態を示します。呼出(読込)許可は4を、書込許可は2を、実行許可は1で表し、合計は7になります。3桁の数字以外はそれぞれの頭文字を使い、属性値をrwx—rwxなどに表示します。
UNIX系サーバーのパーミッションはディレクトリーやファイル別に設定します。 CGIの作者が指定するファイルのパーミッションはレンタルサーバーの環境により、そのままでは作動しないこともあります。


■平成30年版カレンダー

2018年10月
     
1234567
891011121314
15161718192021
22232425262728
293031  

■サイト内検索

■記事講読ランキング

■統計情報サイト

都道府県別統計
世界経済のネタ帳
■地方情報
地方公共団体情報システム機構
中国地域の中小企業支援施策
■ビジネス支援情報
exBuzzwords
ネット通販の構築支援別館
無料ビジネス相談会
1.対象者
☆起業をお考えの方
☆起業後間もない方
2.場所
広島市立中央図書館
3.開催日
☆毎月第2土曜12:00~17:00
4.1時間以内の予約制
☆先着順5名
5.申込先
中央図書館事業課
☆Tel:082-222-5542

■中小企業ビジネス支援サイト


Copy Protected by Chetan's WP-Copyprotect.