※青背景のタイトルをクリックすると記事を開いたり閉じたりできます。年々、Web技術は進化し続けています。ここで言う「進化」とは「閲覧者がビックリするようなホームページができるようになった」ということではありません。実際のところ、表現できることは、10年前も今もそれほど変わっていません。パソコンや携帯端末のディスプレイの中で表現できることというのは高が知れているのです。...となると、必然的に「制作者にとって都合のよい進化」が行われることとなります。専門知識を持ち合わせていなくても見栄えが良く、操作性の高いホームページを簡単に作ることができるようになったという訳です。本日は、会社のホームページで使えそうなものを厳選し、サンプルや導入事例などと共にお話していきます。会社ホームページや自分のブログを既にお持ちの方はちょっとした時間にカスタマイズして差別化を図ってみてはいかがでしょうか?また、「何が簡単にできるのか」ということを知って頂くことが主目的ですので、技術の中身に関するお話はしません。専門用語も最低限しか使用しませんので、ホームページの知識が全く無い方でも大丈夫です。今後、制作する機会があれば、選択肢が増えるので役に立ちますし、これまでとは別の視点でホームページを見る楽しみが増えると思います。最後までお付き合い下さい。はじめにホームページは以下の3つから成り立っています。HTML(エイチティーエムエル)主に文字・表・テキストボックスなどページの枠組みに関する規格CSS(シーエスエス)主に色・サイズ・形などデザインに関する規格JavaScript(ジャバスクリプト)主に計算・動きに関するプログラム本日、お話するキーワードとしては、HTML5CSS3jQueryの3つとなります。(こちらの用語は覚えなくても結構です。)「HTML5」と「CSS3」は、それぞれの規格の新しいバージョンです。本日はその一部をご紹介します。「jQuery」は「JavaScript」でのプログラム開発をサポートしてくれるものです。これまでは、「ホームページが作れても高度なプログラムは作れない」という人が多くいました。それだけ「JavaScript」というプログラムは、要求されるスキルが異質ということです。「jQuery」の登場により、HTMLやCSSを知っている人であれば、それなりに高度なプログラム開発ができるようになりました。世界中のプログラマーが公開している「面白い動き」を簡単に取り入れることができるようになっています。実は、いずれも5年以上前からありました。「なんだ、新しくないじゃん」というご意見はごもっともです。すべてのユーザに普及したのはここ1、2年です。(パソコンの買い替えやソフトのアップデートなどで知らず知らずのうちに普及しています。)「最近になってホームページを閲覧する人の環境をほとんど気にせずに使えるようになった」という意味で『新しい』という表現を使用しています。正確性にやや欠ける表現を用いている場合もありますが、予めご了承下さい。HTML5HTML5は、OSやWebブラウザによって対応状況に大きくバラつきがあります。「対応済みの環境ではより便利に動き、未対応の環境でも特に支障はない」という規格を中心にご紹介していきます。入力用アイテムのバリエーションが増えました。入力をサポートしてくれたり、自動でチェックしてくれる機能が備わっています。良い点プログラムを組むことなく、入力ミスを防ぐことができます。使用例問い合わせフォーム、掲示板など注意点ブラウザ毎にメッセージや動きが変わります。未対応のブラウザではテキストボックスになります。以下の「クリックして確認」ボタンを押すと左側の入力値のチェック結果が確認できます。正しい値を入力していれば何も起こりません。)誤った値を入力していればブラウザが用意しているエラーメッセージが出ます。対応状況が悪いので使用はお勧めしません。入力して欲しい項目をチェックすることができます。良い点プログラムを組むことなく、入力漏れを防ぐことができます。使用例問い合わせフォーム、掲示板など注意点ブラウザ毎に未入力時のメッセージが変わります。未対応のブラウザではチェックされません。以下の「クリックして確認」ボタンを押すと左側の入力値のチェック結果が確認できます。何らかの値を入力していれば何も起こりません。サンプルテキストボックスに説明文を薄く表示させることができます。良い点何を入力すべきかが分かりやすくなります。使用例問い合わせフォーム、掲示板など注意点未対応のブラウザでは表示されません。★説明文表示サンプル動画を表示させることができます。注意点ブラウザ毎に再生可能な動画形式が異なる為、複数の動画ファイルを用意する必要があります。基本的にはYouTubeなどの外部サービスを利用することをお勧めします。★動画表示サンプル動画を再生するには、videoタグをサポートしたブラウザが必要です。CSS3CSS3は、OSやWebブラウザによって対応状況にややバラつきがあります。「対応済みの環境が非常に多い」という規格を中心にご紹介していきます。パソコンと比較して、スマホやタブレット端末での対応は非常に進んでいます。その為、PCサイトとスマホサイトを切り分けている場合、スマホサイトでは積極的に使用して構いません。切り分けていない場合でも、以下に紹介する規格であれば使って構わないと思います。グラデーションをかけることができます。良い点デザイン性が向上し、特に見出しの文字を引き立たせることができます。使用例見出しの背景などグラデーション単一色キャリアセッションキャリアセッション色の透明度を指定することができます。良い点薄い色にしたり、画像などを重ねていることを強調することができます。使用例リンクにマウスカーソルを当てた時の色の変化など透明度0%透明度30%透明度70%四角い図形の角を丸くすることができます。良い点形を変更することで注目されやすくなります。画像を作成する必要がありません。使用例タイトルやポイントとなる表示など角を丸くしています楕円もできます文字や図形に影を付けることができます。良い点影を付けることで注目されやすくなります。画像を作成する必要がありません。図形に影を表示あいうえお表示を回転させることができます。良い点角度を付けることで注目されやすくなります。画像を作成する必要がありません。傾斜を付けて表示オススメ!ポイント!上記の規格は、いずれも画像を作ることで同じ表示をすることができます。CSSで実現できることはなるべくCSSで実現することが望ましいです。主な理由は以下の2つとなります。表示内容が変わるたびに、いちいち画像を作り直す必要がない。検索ロボットは画像に書いてある文字を読むことができない。画像に文字を記載するメリットは「好きなフォントが使える」という点です。その点を踏まえて、スタンダードなゴシック系・明朝系フォントでも構わない内容については積極的にCSSを利用してみて下さい。いずれの規格も数分で取り入れることができます。CSSは環境ごとに違う書き方をしなければならないものも多数あります(方言のようなものです)。その点には少し気を付けてご利用下さい。jQueryJavaScriptによるプログラム開発で1番悩ましいのは、ホームページ閲覧者の環境が多岐に渡るということです。それらを考慮したプログラム開発は至難の業です。積極的に使うことができます。実際、世の中のホームページの過半数が、既にjQueryを導入していると言われています。中小企業や個人のホームページではまだまだ浸透していません。この機会に、是非、導入を検討してみて下さい。表示や非表示の切り替えができ、アニメーションも追加することができます。使用例画像表示など注意点使いすぎると鬱陶しくなります。左上から表示されるサンプル上から下に表示されるサンプルフェードインで表示されるサンプルページ内の移動をスムーズに行うことができます。良い点ページ内のどこからどこへ移動したのかが視覚的に分かりやすくなります。目次(サンプル)ページトップHTML5CSS3jQuery複数階層に対応したメニューを作成できます。良い点ページ数が多い場合に、目的のページに辿り着きやすくなります。皆様へお問い合わせスライドパネルで表示・非表示を変更可能にできます。良い点余計な部分を非表示にすることでスッキリします。使用例メニュー・商品説明・Q&Aなど初期表示について任意のエリアの文章を予め表示しておくことができます。開いたものは開いたままという設定にもできます。開閉時間についてアニメーションの開閉時間も自由に指定できます。良い点狭いスペースに多くの情報を記載することができます。使用例メニューなど店舗概要メニュークーポン美味しい居酒屋です。・ビール・お会計から10%OFF・お誕生日の方、ワインサービス日付入力をカレンダーから選択できるようになります。良い点非常に入力が簡単で、かつ、日付間違いが少なくなります。使用例申込フォームなど日付:マウスカーソルを当てることで任意の項目に対して説明文を表示できるようになります。良い点必要な時に必要な文章を表示できるので、スッキリとした見栄えのまま、注意を惹く事が出来ます。使用例項目が多い画面や、間違えやすい項目など以下の写真にマウスカーソルを当てて下さい。以下のテキストボックスにマウスカーソルを当てて下さい。住所:指定範囲をドラッグすることができます。良い点他の項目と重ねて表示させることで表示を目立たせることができます。使用例注目してもらいたい見出しやリンクなど注意点スマホ操作は考慮していない為、PCサイト向けになります。ドラッグできますドラッグできます画面前面に浮かび上がるように表示することができます。注意点表示内容にJavaScriptが含まれると、上手く表示されない場合があります。クリックで100回記念の写真ページを表示します。メニューや画像をスライド表示できます。良い点狭いスペースで効果的に多くの情報を表示できます。流行っている手法でグッと魅力的になります。使用例トップページのメニュー・商品画像表示など注意点表示する項目が多すぎると逆に見てもらえなくなります。スライドメニューのサンプル表示内容は自由に設定できます。画面の一部だけ更新して、別ページ・別ファイルの表示をすることができます。良い点画面全体のチラ付きなく、様々な情報を組み合わせて表示することができます。ページ全体の更新と比較して変化する情報量が少ない為、表示時間が早いです。使用例投稿の多い掲示板、セットとなる画面(入力→確認→完了)など見た目で違いが分かりづらいのですが、FacebookやTwitterで、ページを更新していなくても最新投稿が自動表示されるのが一例です。遷移する親切な問い合わせフォーム・申込みフォームを好きなページの好きな場所に埋め込むこともできます。要階層メニュー・キャンペーンなどのスライド表示・カテゴリー分けのタブ表示を取り入れています。コンテンツが多いので探しやすさを重視した画面構成です。インターネットショッピングサイトで使われている標準的な技術を確認できます。要追随するメニューとスムーズスクロールを取り入れています。縦に長い画面でユーザが使いやすい構成です。パナソニックはjQueryを積極的に使用している印象があります。その他のページでも見やすく、面白い表示が目立ちます。要次回の開催日を別ファイルから表示し、また、点滅させて目立たせています。開催日の更新を1箇所するだけで、全ページで開催日の表示内容が変わるのでメンテナンスが簡単になります。要ドラッグや非表示を取り入れることで付箋のようなページを実現しています。記事の表示を前面に表示しているので、多くの記事を読んでもらいやすくなります。した遊び心で作ってみたインパクト重視の画面です。それぞれサンプルを載せていますが、デザインや表示項目、挙動(動きの速度)など、かなり自由に設定できます。既存のデザイン性を壊すこともありませんので、積極的に取り入れてみて下さい。作業時間について、jQueryの知識がない人が導入する場合に最初だけは数時間かかると思います。1度やり方が分かれば、簡単なデザイン調整までして数分~数10分で済むと思います。(もちろん、何時間もかけて作り込む道もあります。)上記以外にもご紹介したい動きはたくさんあります。ホームページ制作で面白い構想を考えた場合には、インターネット検索で実現可能なプラグインがないか探してみて下さい。さいごに数多くの技術をご紹介してきましたが、如何だったでしょうか。大手企業を中心としたホームページで見たことがある技術も多かったと思います。一般人でも意外と簡単にできてしまうことがお分かり頂けたと思います。ホームページ制作には、他にも様々なスキルが要求されます。当セミナーはそのうちのほんの一部でしかありませんが、少しでもお役に立てれば嬉しいです。