第126回 キャリアセッション セミナー資料
新技術簡単せるホームページにする』


※青背景のタイトルをクリックすると記事を開いたり閉じたりできます。

本日のセミナー概要

年々、Web技術は進化し続けています。

ここで言う「進化」とは
「閲覧者がビックリするようなホームページができるようになった」
ということではありません。

実際のところ、表現できることは、10年前も今もそれほど変わっていません。
パソコンや携帯端末のディスプレイの中で表現できることというのは高が知れているのです。

…となると、必然的に「制作者にとって都合のよい進化」が行われることとなります。

つまり、専門知識を持ち合わせていなくても
見栄えが良く、操作性の高いホームページを
簡単に作ることができるようになったという訳です。

本日は、会社のホームページで使えそうなものを厳選し、
サンプルや導入事例などと共にお話していきます。

会社ホームページや自分のブログを既にお持ちの方は
ちょっとした時間にカスタマイズして
差別化を図ってみてはいかがでしょうか?

また、「何が簡単にできるのか」
ということを知って頂くことが主目的ですので、技術の中身に関するお話はしません。
専門用語も最低限しか使用しませんので、ホームページの知識が全く無い方でも大丈夫です。
今後、制作する機会があれば、選択肢が増えるので役に立ちますし、
これまでとは別の視点でホームページを見る楽しみが増えると思います。

どうぞ、最後までお付き合い下さい。

はじめに

ホームページは以下の3つから成り立っています。

HTML
(エイチティーエムエル)
主に文字・表・テキストボックスなどページの枠組みに関する規格
CSS
(シーエスエス)
主に色・サイズ・形などデザインに関する規格
JavaScript
(ジャバスクリプト)
主に計算・動きに関するプログラム

本日、お話するキーワードとしては、
  • HTML5
  • CSS3
  • jQuery
の3つとなります。
(こちらの用語は覚えなくても結構です。)

「HTML5」と「CSS3」は、それぞれの規格の新しいバージョンです。
それ以前のバージョンと比較して「できること」が増えていますので、 本日はその一部をご紹介します。

「jQuery」は「JavaScript」でのプログラム開発をサポートしてくれるものです。

これまでは、「ホームページが作れても高度なプログラムは作れない」という人が多くいました。
それだけ「JavaScript」というプログラムは、要求されるスキルが異質ということです。

「jQuery」の登場により、HTMLやCSSを知っている人であれば、
それなりに高度なプログラム開発ができるようになりました。


また、プラグインも充実していますので、
世界中のプログラマーが公開している「面白い動き」を
簡単に取り入れることができるようになっています。


ここで1つだけ補足しておきますが、
実は、いずれも5年以上前からありました。

「なんだ、新しくないじゃん」
というご意見はごもっともです。

しかし、ほぼすべてのユーザに普及したのはここ1、2年です。
(パソコンの買い替えやソフトのアップデートなどで知らず知らずのうちに普及しています。)

「最近になってホームページを閲覧する人の環境をほとんど気にせずに使えるようになった」
という意味で『新しい』という表現を使用しています。

その他、「分かりやすさ」を重視する為に、
正確性にやや欠ける表現を用いている場合もありますが、予めご了承下さい。

HTML5

HTML5は、OSやWebブラウザによって対応状況に大きくバラつきがあります。
対応済みの環境と未対応の環境では大きく動きが変わってしまう訳ですが、
「対応済みの環境ではより便利に動き、未対応の環境でも特に支障はない」
という規格を中心にご紹介していきます。

入力用アイテムのバリエーションが増えました。
入力をサポートしてくれたり、自動でチェックしてくれる機能が備わっています。
良い点プログラムを組むことなく、入力ミスを防ぐことができます。

使用例問い合わせフォーム、掲示板など

注意点ブラウザ毎にメッセージや動きが変わります。未対応のブラウザではテキストボックスになります。

以下の「クリックして確認」ボタンを押すと左側の入力値のチェック結果が確認できます。
正しい値を入力していれば何も起こりません。(送信もされません。)
誤った値を入力していればブラウザが用意しているエラーメッセージが出ます。
★メールアドレス入力用サンプル

★URL入力用サンプル

上記以外にも、日付、時刻、数値、色などを入力する為の専用アイテムがありますが、
対応状況が悪いので使用はお勧めしません。

必ず入力して欲しい項目をチェックすることができます。
良い点プログラムを組むことなく、入力漏れを防ぐことができます。

使用例問い合わせフォーム、掲示板など

注意点ブラウザ毎に未入力時のメッセージが変わります。未対応のブラウザではチェックされません。

以下の「クリックして確認」ボタンを押すと左側の入力値のチェック結果が確認できます。
何らかの値を入力していれば何も起こりません。(送信もされません。)
未入力の場合にブラウザが用意しているエラーメッセージが出ます。
★必須入力確認用サンプル


テキストボックスに説明文を薄く表示させることができます。
良い点何を入力すべきかが分かりやすくなります。

使用例問い合わせフォーム、掲示板など

注意点未対応のブラウザでは表示されません。

★説明文表示サンプル


動画を表示させることができます。
良い点YouTubeなどの外部サービスやFlashを利用せずに動画を表示することができます。

使用例会社紹介・商品紹介など

注意点ブラウザ毎に再生可能な動画形式が異なる為、複数の動画ファイルを用意する必要があります。
     基本的にはYouTubeなどの外部サービスを利用することをお勧めします。

★動画表示サンプル



CSS3

CSS3は、OSやWebブラウザによって対応状況にややバラつきがあります。
対応済みの環境と未対応の環境では大きく表示が変わってしまう訳ですが、
「対応済みの環境が非常に多い」
という規格を中心にご紹介していきます。

尚、パソコンと比較して、スマホやタブレット端末での対応は非常に進んでいます。
その為、PCサイトとスマホサイトを切り分けている場合、スマホサイトでは積極的に使用して構いません。

切り分けていない場合でも、以下に紹介する規格であれば使って構わないと思います。

グラデーションをかけることができます。
良い点デザイン性が向上し、特に見出しの文字を引き立たせることができます。

使用例見出しの背景など

グラデーション
単一色
キャリアセッション
キャリアセッション


色の透明度を指定することができます。
良い点薄い色にしたり、画像などを重ねていることを強調することができます。

使用例リンクにマウスカーソルを当てた時の色の変化など

透明度0%
透明度30%
透明度70%


四角い図形の角を丸くすることができます。
良い点形を変更することで注目されやすくなります。画像を作成する必要がありません。

使用例タイトルやポイントとなる表示など

角を丸くしています
楕円もできます


文字や図形に影を付けることができます。
良い点影を付けることで注目されやすくなります。画像を作成する必要がありません。

使用例タイトルやポイントとなる表示など

文字に影を表示
図形に影を表示
あいうえお


表示を回転させることができます。
良い点角度を付けることで注目されやすくなります。画像を作成する必要がありません。

使用例ちょっとした見出しや画像など

斜めに傾けて表示
傾斜を付けて表示
オススメ!
ポイント!


上記の規格は、いずれも画像を作ることで同じ表示をすることができます。
しかし、CSSで実現できることはなるべくCSSで実現することが望ましいです。
主な理由は以下の2つとなります。
  • 表示内容が変わるたびに、いちいち画像を作り直す必要がない。
  • 検索ロボットは画像に書いてある文字を読むことができない。
画像に文字を記載するメリットは「好きなフォントが使える」という点です。
その点を踏まえて、スタンダードなゴシック系・明朝系フォントでも構わない内容については
積極的にCSSを利用してみて下さい。
いずれの規格も数分で取り入れることができます。

CSSは環境ごとに違う書き方をしなければならないものも多数あります(方言のようなものです)。
その点には少し気を付けてご利用下さい。


jQuery

JavaScriptによるプログラム開発で1番悩ましいのは、
ホームページ閲覧者の環境が多岐に渡るということです。
それらを考慮したプログラム開発は至難の業です。

jQueryは、はじめから様々な環境を考慮してくれていますので、
積極的に使うことができます。

実際、世の中のホームページの過半数が、既にjQueryを導入していると言われています。
しかし、中小企業や個人のホームページではまだまだ浸透していません。
この機会に、是非、導入を検討してみて下さい。

表示や非表示の切り替えができ、アニメーションも追加することができます。
使用例画像表示など

注意点使いすぎると鬱陶しくなります。


左上から表示される
サンプル


上から下に表示される
サンプル


フェードインで表示される
サンプル

ページ内の移動をスムーズに行うことができます。
良い点ページ内のどこからどこへ移動したのかが視覚的に分かりやすくなります。

使用例目次やページトップへの移動など

第126回 キャリアセッション セミナー資料 目次(サンプル)

複数階層に対応したメニューを作成できます。
良い点ページ数が多い場合に、目的のページに辿り着きやすくなります。

使用例メニューなど


スライドパネルで表示・非表示を変更可能にできます。
良い点余計な部分を非表示にすることでスッキリします。

使用例メニュー・商品説明・Q&Aなど

初期表示について

任意のエリアの文章を予め表示しておくことができます。

開閉する箇所について

1つだけ開いた状態にもできますし、 開いたものは開いたままという設定にもできます。

開閉時間について

アニメーションの開閉時間も自由に指定できます。


タブ表示ができます。
良い点狭いスペースに多くの情報を記載することができます。

使用例メニューなど

美味しい居酒屋です。
営業時間:17:00~25:00

・枝豆
・ビール

・お会計から10%OFF
・お誕生日の方、ワインサービス


日付入力をカレンダーから選択できるようになります。
良い点非常に入力が簡単で、かつ、日付間違いが少なくなります。

使用例申込フォームなど

日付:


マウスカーソルを当てることで任意の項目に対して説明文を表示できるようになります。
良い点必要な時に必要な文章を表示できるので、スッキリとした見栄えのまま、注意を惹く事が出来ます。

使用例項目が多い画面や、間違えやすい項目など

以下の写真にマウスカーソルを当てて下さい。





以下のテキストボックスにマウスカーソルを当てて下さい。

住所:


指定範囲をドラッグすることができます。
良い点他の項目と重ねて表示させることで表示を目立たせることができます。

使用例注目してもらいたい見出しやリンクなど

注意点スマホ操作は考慮していない為、PCサイト向けになります。

ドラッグ
できます
ドラッグ
できます

画面前面に浮かび上がるように表示することができます。
良い点元のページから遷移することなく、画像・フォーム・別ページなどを表示できます。

使用例商品画像・説明画面表示など

注意点表示内容にJavaScriptが含まれると、上手く表示されない場合があります。



メニューや画像をスライド表示できます。
良い点狭いスペースで効果的に多くの情報を表示できます。大変流行っている手法でグッと魅力的になります。

使用例トップページのメニュー・商品画像表示など

注意点表示する項目が多すぎると逆に見てもらえなくなります。

スライドメニューの
サンプル
表示内容は自由に設定できます。
リンクも貼れます。

画面の一部だけ更新して、別ページ・別ファイルの表示をすることができます。
良い点画面全体のチラ付きなく、様々な情報を組み合わせて表示することができます。
     ページ全体の更新と比較して変化する情報量が少ない為、表示時間が早いです。

使用例投稿の多い掲示板、セットとなる画面(入力→確認→完了)など

見た目で違いが分かりづらいのですが、
FacebookやTwitterで、ページを更新していなくても最新投稿が自動表示されるのが一例です。

また、入力画面→確認画面→完了画面と遷移する親切な問い合わせフォーム・申込みフォームを
好きなページの好きな場所に埋め込むこともできます。


実際のjQuery活用事例
サイトニッセン

概 要階層メニュー・キャンペーンなどのスライド表示・カテゴリー分けのタブ表示を取り入れています。
     コンテンツが多いので探しやすさを重視した画面構成です。
    
     インターネットショッピングサイトで使われている標準的な技術を確認できます。

サイトパナソニック

概 要追随するメニューとスムーズスクロールを取り入れています。
     縦に長い画面でユーザが使いやすい構成です。
    
     パナソニックはjQueryを積極的に使用している印象があります。
     その他のページでも見やすく、面白い表示が目立ちます。

サイトキャリアセッション

概 要次回の開催日を別ファイルから表示し、また、点滅させて目立たせています。
     開催日の更新を1箇所するだけで、全ページで開催日の表示内容が変わるので
     メンテナンスが簡単になります。

サイト福井のブログ

概 要ドラッグや非表示を取り入れることで付箋のようなページを実現しています。
     また、記事の表示を前面に表示しているので、多くの記事を読んでもらいやすくなります。
    
     ちょっとした遊び心で作ってみたインパクト重視の画面です。

それぞれサンプルを載せていますが、
デザインや表示項目、挙動(動きの速度)など、かなり自由に設定できます
既存のデザイン性を壊すこともありませんので、積極的に取り入れてみて下さい。

作業時間について、jQueryの知識がない人が導入する場合に最初だけは数時間かかると思います。
しかし、1度やり方が分かれば、簡単なデザイン調整までして数分~数10分で済むと思います。
(もちろん、何時間もかけて作り込む道もあります。)

上記以外にもご紹介したい動きはたくさんあります。
ホームページ制作で面白い構想を考えた場合には、
インターネット検索で実現可能なプラグインがないか探してみて下さい。


さいごに

数多くの技術をご紹介してきましたが、如何だったでしょうか。

大手企業を中心としたホームページで見たことがある技術も多かったと思います。
一見、プロのWebデザイナーやプログラマーでなければ実現できなさそうなことが、
一般人でも意外と簡単にできてしまうことがお分かり頂けたと思います。

ホームページ制作には、他にも様々なスキルが要求されます。
当セミナーはそのうちのほんの一部でしかありませんが、少しでもお役に立てれば嬉しいです。



Copyright © 2007 交流会【キャリア セッション】. All Rights Reserved.