Web Designer Inspire Night 開催レポート
Vol.8 「ページの価値がワンランクアップするWebサイト制作術」千貫 りこ
Web Designer Inspire Night 第8回のゲストはフリーランスWebクリエイターの千貫りこ（センガン リコ）さんです。
今回の講演テーマは、「ページの価値がワンランクアップするWebサイト制作術」。
マークアップエンジニア出身のゲストからマークアップエンジニアの視点でページの価値をアップさせる方法についてお話いただきました。
千貫りこさん
フリーランス
Webクリエイター
※「クライアントに呉服店も多いことからイベント時は
着物姿で登壇される」と、のこと
- "KICKS"な Webを制作したい
- 千貫さんは12年前の1997年からWeb制作の仕事を派遣社員としてスタートされました。自社サイトの制作で派遣として4年間勤めた後、マークアップが好きだったのでそれを活かせる会社をということでWeb制作会社に今度は正社員として4年間勤めます。
そして、2005年からはフリーランスとしてお仕事を始められました。
現在の主な仕事内容は、小〜中規模サイトの企画・制作、大規模サイトの（X）HTMLコーディング、書籍・雑誌記事の執筆、ロクナナワークショップでのセミナー講師をされています。
KICKS Webというサイトも運営されています。"KICKS"には「楽しみ」「わくわくする喜び」「スリル」という意味があり、そんなWebサイト制作をできればいいな！と、の思いでこのサイトタイトルにされたとのことです。
- Webページの価値って？
- そもそも"webページの価値"とは何でしょうか。
「"見た目の美しさ"も大事な要素なのですが、さらに私の感じる価値は3つの"使える"がWebサイトに備わっているかどうか」と、千貫さんは仰います。
「どこでも使える」
いまやWebを使えるデバイスはPCにとどまらず、携帯やiphoneまた、wiiなどのゲーム機器でも使えるようになりました。
携帯などであれば機種などによってHTMLソースを変更する必要があり、例外もありますが、原理的にはHTMLソースをいくつものデバイスで共用することができます。
例えばこのソースをご覧ください。これは、HTMLにCSSを適用するためのソースです。
＜link rel="stylesheet"
type="text/css"
href="style.css"
media=" "＞
この空欄部分にprintを入れればプリンタ（印刷）、handheldと入れれば、携帯機器、tvと入れればテレビに適用されます。このように、デバイスごとに異なるCSSファイルを用意しておけば、それぞれのデバイスに適した表示を行うことが可能です。
「気軽に使える」
すこし古いデータとなりますが、2008年末時点で光ファイバー（高速回線）の利用者は100人中約4人であるというデータがあります。
また、ユーザーがwebページを利用した際に、クリックから応答があるまでの時間別での感じ方について下記のようなデータがあります。
| 0.1秒 |
：ユーザーは自分がシステムを「直接（能動的に）」操作していると感じる |
| 1秒 |
：反応に時間がかかっていることに気づき、使わされていると感じる |
| 10秒 |
：ユーザーが操作に集中できる限界であり、そのページから離れてしまう |
以上のデータから、多くの方は高負荷なwebサイトを見るのに適さない環境にある、といえます。たとえデザイン性が高くて見ごたえのあるwebサイトであっても、リンクボタンをクリックするたびに延々と待たされるようでは、ほとんどの方は気軽に次のページを開く気になれず、サイトから離脱してしまうのではないでしょうか。
「Web制作側者側としても高負荷サイトを極力減らさなければなりません。」と、千貫さんは仰います。
「高負荷の原因となるのは大きな画像や、Flashムービーの使用が原因であることがあります。
かつてはFlashでやっていたことも最近ではjavascriptで簡単にできるようになったこともあり、工夫次第で負荷を減らすことができます。
また他にもページのファイルサイズに気をかけましょう。
Firefoxのアドオン機能（YSlow）を使えばファイルサイズを簡単に調べることができますのでぜひご利用ください。」
一般的に、制作者は高速回線やハイスペックなパソコンを利用しているため高負荷なサイトにも対応できる環境にいますが、一般ユーザーへの思いやりが非常に重要です。
「誰でも使える」
いまは高齢者でもWebサイトを使用します。つまりは高齢者にも配慮したWebサイト制作を心がけなければいけません。そのためには文字サイズ（フォントの種類）に配慮してあげましょう。
また、視覚に障害がある人にも配慮したWebサイト制作を心がけていきましょう。
視覚障害者にはスクリーンリーダーを利用しての音声発信にてwebサイトの内容を紹介しますが、スクリーンリーダーは画像のAlt属性値を読み上げるよう設計されています。
そのため、画像のすぐそばにある文言と同じ文言がAltにも設定されていると、同じことを2回繰り返されてしまいます。
本来、画像のAltというのは画像が表示できない方のために表示する文言であるので、Alt属性値はよく考えて設定しましょう。こういった小さな気づかいが、ページの価値をあげるには重要な要素です。
このように、文字サイズやフォントの種類に影響されないデザインを心がけること、そしてAltにも気をつけましょう。
この3つの"使える"について、
「Webページは、ユーザーのニーズによって自由にカタチを変えられるかどうかが重要。つまり『Webページ＝データ』と考えるべきだ」と、千貫さんは仰います。
つまりはWebページの価値とはデータとしての価値です。
「Webページを作ることは、データをデザインすること」という意識を持ちましょう。
- 見出しレベルを意識したデザイン
- デザイナーが気をつけるべき、「見出しレベル」についてもお話していただきました。
「見出し」は文章を読み解く「かなめ」となる大切な要素です。そして、Webページはレベルの異なるいくつかの「見出し」で構成されていることがほとんどです。
まずページ全体の見出しとなる「レベル1の見出し」（h1）。これはどのページにもかならずひとつは設けられることになります。しかし「見出し」ひとつに対する「内容」がページ全体となると長すぎて読みづらいため、ページをいくつかのセクションに分ける場合があります。このセクションにつける「見出し」はh1より1段階小さな「レベル2の見出し」（h2）です。h2をつけた各セクションをさらに細かく分割するのであれば、分割したまとまりごとに「レベル3の見出し」（h3）を設けます。HTMLには「レベル6の見出し」（h6）まで用意されています。
このように、一口に「見出し」と言ってもそのレベルはまちまちなので、デザイン時に「見出しレベル」に合わせた装飾をほどこしておくことが重要になってきます。
「見出しレベル」と「見た目」が常に一致していれば、ユーザー（読み手）は「文章のまとまり」を自然と意識し、「読みやすい、理解しやすい文章」と感じることができるのです。
ところが、デザイナーが「見出しレベル」を深く意識せずにデザインしてしまうと、あるページでは「レベル2の見出し」に使われていた装飾が、別のページでは「レベル3の見出し」に使われる、といったことが起こります。
見出しに限らず、デザインと文書構造に矛盾があると、ユーザーはハッキリ意識しないまでも「何となく違和感があるなぁ」と感じるものです。気をつけましょう。
また、ユーザーだけでなくコーダーにとっても、ページごとに装飾のルールが異なるようなデザインは余計な工数を増やすことになり、喜ばしいものではありません。
ユーザーだけではなく、コーダーに対する思いやりも仕事を円滑に進めていく上で大切なことです。
- 最後に
- 最後に今回の講演のまとめとしては以下の通りです。
- Webページはデータである
- できるだけ多くの人にとって使いやすいものをつくろう
- ページサイズに気を配ろう
- Flashは本当に必要か
- 見出しは適切か
- Altはよく考えて
マークアップエンジニア出身のゲストにマークアップエンジニアの視点から、Webサイト事例などのご紹介をいただきながら丁寧にお話いただきました。参加者からは「改めてコーディングの大切さを学び、Webデザイン＝データデザインという部分にかなり共感を持てた。」や、「とてもわかりやすく、自分のサイト作りを改善するポイントがよくわかった。」等のご感想をいただきました。
※追記(2009/12/28)
記事の一部に表記の誤りがありました。
お詫びして訂正いたします。
 |
大手電力機器メーカーグループ企業でのお仕事です。
グループ向けヘルプデスク業務をご担当いただきます。
弊社スタッフ多数活躍中!環境良好です。
■担当業務
・グループ会社向けヘルプデスク業務(8割)
WindowsOS・周辺機器の問い合わせ対応(電話/メール/オンサイト)
障害対応(障害の再現、検証、解決まで対応)
・PCドメイン変更作業(1割)
グループ全体を対象にした、クライアントPCデータ移行、ドメイン変更
Active Directoryでのアクセス権設定作業
■業務補足
メールの障害対応やPC自体のトラブル対応が多い状況です。
まずはクライアント周りのヘルプデスクをご担当いただきますが
各種手順書や運用マニュアルの作成なども担当頂きます。
■環境
ヘルプデスク台数規模:
5000台(課の対応範囲)
25000台~30000台(部の対応範囲)
■チーム:社員5名+派遣3名
※弊社スタッフも活躍中です! | 【紹介予定派遣】
ECプラットフォームのプロバイダ事業を行っている会社でのお仕事です。
テクニカルグループにて、法人向けサービス基幹システムや管理画面の開発を行っていただきます。
■担当業務
・3つのEマーケットプレイス(法人向けサービス/ドロップシッピングサービス/消費者向けサービス)とバックヤードの商品管理、取引管理の基幹システムを担当
・担当フェーズ:要求定義/実装/テスト
・新規/改修:改修がメインですが、今後新規システムを開発する予定もございます
・開発は全て自社内で行っています
■開発環境
・プログラミング言語:PHP(ver.4)、Perl、Python
・Webサーバ:Apache
・DB:MySQL
■チーム構成
・3名体制(うちWebデザイナー1名)+今回募集ポジション
・平均年齢:30代半ば
・男女比:1:2 | 【紹介予定派遣】
・レジャー施設などの全国各所のゲームセンターに設置される業務用ゲーム機器の
機器全体のデザイン、機器の製品タイトルのロゴデザイン、法人向け印刷物(パン フレット)のデザイン及びディレクション業務を行っていただきます。
【システム環境】
Mac、Illustrator5.0、Photoshop7 |
 |
|
 |
 |
|
最新の技術セミナーやトレーニングの特別割引・新着求人など、パソナテックにはエンジニアのための情報がたくさん！
|
|
ページトップ
