【ウェブページのデザイン事情】

2011年7月

●法定速度　 2011.07.31
プロのドライバーは常に法定速度を守って運転していたのでは仕事にならない。時にはスピード違反で検挙される覚悟もあれば、速度をオーバーしても捕まらないギリギリの速度で走ったり、一斉取り締まりを行っている場所や時間の情報を集めたりしながら、その中で一番効率的な運転をしているはずである。HTMLのタグも似たようなもの。タグチェッカーなどというものはプロにとっては必要ない。例えタグを故意に省略したり誤ったりしてもクライアントには全く関係ない話だし増して違法でも何でもない。

●HTML5のタグ(15) 　 2011.07.30
HTML5の中で最も話題になっているのがcanvasタグではないだろうか。Adobe Illustratorのようにベクタダータによる描画でできてしまうというもの。つまりブラウザが簡単なペイントソフト（ベクタデータなので正確には描画ソフト）も兼ね備えるということだ。もちろんIllustratorのような高度で複雑なものは無理だが、JavaScriptを工夫することでかなりのことができそうである。そしてアニメーションやゲーム、ブラウザの利用者側からの描画もできる。なるほどスティーブ・ジョブズがFlashを否定した理由も感覚的に理解できたような気もする。

●twitterとFacebook 　 2011.07.29
twitterは無責任な呟きでありレスや対話を期待するものではない。Facebookの基本はコミュニケーションであり、プロフィールページは名刺代わりともなりビジネスとしても大いに活用できるものだ。しかし国内では多くのユーザーがtwitterの呟きを自動でFacebookに投稿している。これではFacebookは文字数制限のないtwitterではないか。従ってFacebookをビジネスに使おうとしても、何となく友だちの輪の中で、今日食べた美味しいもの写真とか、公園で撮ったきらいなお花の写真とかが散りばめられていて、そこにはビジネスに繋がる緊張感がない。

●HTML5のタグ(14) 　 2011.07.28
フォームコントロールで<input name="date" type="date"> と書くとOperaではカレンダーが表示されると書いたが、同じタグでChromeだと入力窓右側に▼▲が表示され、▼でその日の一日前、▲で一日後の日付が入力窓に2011-07-20というように出てくる。パソコン内のカレンダーと連動しているのはいいのだが、ズバリその日の日付を出すには▲→▼、又は▼→▲と2クリック必要になるのはちょいと不便。これが改善されるのか、Operaの小さな月ごとのカレンダーになるなか、どっちかに統一してほしいものだ。ちなみにIEとFireFoxとSafariでは普通の入力窓だけ。MacのSafariでは▼▲は表示されるがトンチンカンな年月日が表示される。

●フォロワーと友だち　 2011.07.27
twitterのフォロワーの数が数万、Facebookのお友達が数千人。有名人著名人であれば自然とそうなってしまうのは分かるが、普通の人はどうするのだろうか？リストだけでも数百本とか、絶対に読んでいる時間はないはず。まあ一種のコレクターに近いのか。いざというときの集客、動員や宣伝には使えるのかもしれないが、有名人著名人でなければ相手もそうそう読んではいないような気もするのだが。どうすんだろ？

●HTML5のタグ(13) 　 2011.07.26
これはSafariとChromeのみの実装のようだがフォームのinputで値を自由に設定できるしスライダーが表示できるというもの。今まで同じようなものを作ろうとするとそれはそれはタイヘンだった。例えば<input name="level" type="range" min="0" max="10" value="0"><output name="result" onforminput="value=a.value">10</output>というように書く。min="0" max="10"の部分で値を設定。ユーザーがスライダーを動かした位置によって1〜10までの数字が送信されてくる。ビジュアル的にもちょっと面白いし、使う側もちょっと楽しい。

●電話. 　 2011.07.25
ノートPCを前に打合せ。片手にケータイを持って「えっと、PCがなかなかつながらない…。仕方ない、ケータイからメールしよう。」「メルアド分かる？」「一応過去の受信メールを捜せば出てくると思う。」「しかし大量にあるなぁ。検索してみれば？」「えーと、ナニで検索すればいいかなぁ」「会社名では？」「あ。社名最近変わったんだよな。」「古い会社名でもいいんじゃね？」「うーんと、あれ？出てこないなぁ…」「それより電話しちゃえば？今手に持ってるの電話だろ。」「あ。そうだな。」有りがちなことである。

●HTML5のタグ(12) 　 2011.07.24
Safari、Chrome、webkitでしか未だ対応していないようだが、CSSを使って背景にグラデーションを付けることが可能になった。線形、円形のどちらでも可能で色の割振りの細かな設定もできる。<style type ="text/css">body{width:300px;height:900px;background-image:-webkit-gradient(radial,100 100,15,100 100,250,from(#ca305f),to(#f594f2),color-stop(50%,#d53ea5));}</style>といった感じだ。これは円形のグラデーションだが、heightが900pxになっているのはブラウザ画面が大きくなると、次の同じパターンが下のほうに見えてこないため。ただしスマートフォンの縦使いではどうなるか？という意味でもとりあえず使うのであれば線形グラデーションのほうが無難か。

●感情-2 　 2011.07.23
首相まではいかないにしても、より我慢ができる人が一流であり、我慢できずにすぐに感情を露にするのが二流なのだろう。感情を露にするということは相手の感情を刺激するということ。それが喜びであれば害はないが、怒りであった場合は相手を怒らせることにもなる。双方が怒りの感情を持ったままでプロジェクトや事業はうまくいくはずもない。また「いじめ」の中で最も陰湿なのが「無視」である。この「無視」に相当することで怒りの感情を表そうとするのは最低だろう。子供であれば仕方がないが、大人になってもこの手段を行使するのは三流だ。

●HTML5のタグ(11) 　 2011.07.22
現在のところOpera限定だが、いずれ他のブラウザも対応するであろう優れもののフォームコントロール機能がdatalist。こんな感じである→<input type="text" name="sports" list="sports" ><datalist id="sports"><option value="Soocer"><option value="Baseball"><option value="Golf"><option value="Winter Sports"><option value="Combative Sport"><option value="Track and Field"><option value="Surfing"></datalist> 入力窓にカーソルを合わせるとopution valueの項目がプルダウンで現れ選択できるというもの。これは便利だ。そしてもう１つのOpera限定機能がこれ→<input name="date" type="date"> たったこれだけで小さなカレンダーが表れて日付が選択できるというもの。こんな短いタグでこれだけ出てくるのはお得である。

●感情-1 　 2011.07.21
人間誰しも喜怒哀楽があり常に色々な感情に左右されながら生活している。しかし人間が他の動物と違うところは、この感情を自らコントロールできるということ。怒りや悲しみを我慢して他人には見せないようにするという技だ。この技があってこそ人間のコミュニティーは円滑に運営されているの。どれだけ我慢して耐え続けることができるかが、より多くの信頼を得るための目安ともなる。よって地位の高い人間ほどこの技の完成度が高い。例えば総理大臣。国会であれだけ野党からえげつない質問をされても動じないわけだ。あのくらいの言いようをされれば普通の人であれば滅入ってしまうはずである。首相としての資質や能力は置いといても、なかなか普通の人ではできないことだ。

●HTML5のタグ(10) 　 2011.07.20
フォームコントロールに新たな属性が追加された。今まではCGI側で設定しないといけなかったメールアドレスの正しい形式がチェックできるようになったのだ。従来のtype="text"の代わりにtel、email、url、searchなどを使う。<input type="tel" name="tel">といったように使い、例えばメールアドレスの場合には@やドットが無いとエラーになりurlではhttp://が無いなどがとエラーになる。telはスマートフォンで数字入力用のキーボードが自動的に表示され、searchではMacOSのときに角が丸くなった一目で検索用と分かる入力窓の形状となる。

●しかしHTML5はSEO用？　 2011.07.19
HTML5は基本的にSEOを前提にしたはずの新たなタグがいくつか追加されている。ソース内の記述をその目的ごとに分けてソースだけを見てもその内容が分かるように推奨している。世界中のウェブページの数が膨大になり、その整理と分類を効率的にするためである。ただし間違ってはいけないのは、あくまでもコンテンツが有意義であった場合に整理整頓の対象となるということで、つまらないありきたりのコンテンツをいくらHTML5に正確に則ったところで検索結果の上位に来るというものではないということ。整理しやすくするのと、上位に表示されるというのは別物である。

●HTML5のタグ(9) 　 2011.07.18
出納帳や名簿に貼られているタグシール。このタグシールをボタンにしてデザインしているウェブページをよく見かけるが、今まではこれをCSSで作ろうとしても角丸で表現できなかったために画像データを使わざるを得なかった。しかしCSS3からはborder-radiusプロパティが加わり、画像データを使わずにこの表現が可能になった。例えば<style type="text/css">.tab{font-size:12px;background-color:#82e8d1;border-top-left-radius:10px;border-top-right-radius:10px;-moz-border-top-left-radius:10px;-moz-border-top-right-radius:10px;-webkit-border-top-left-radius:10px;-webkit-border-top-right-radius:10px;border:3px solid #08c092;padding:5px;color:#ffffff;}.tab:hover{background-color:#fbec6b;}</style>といった具合だ。hoverを使うことでJavaScriptを使わずにロールオーバーのリンクボタンにもなる。bodyのほうは例えば<div style="position:absolute;top:5px;left:5px"><a class="tab" href="xxx.html">PRODUCT</a><a class="tab" href="xxx.html">COMPANY</a><a class="tab" href="xxx.html">CONTACT</a></div>とする。

●そうは言ってもまだまだ分かってない人たち　 2011.07.17
あるクライアントの会社から社長が怒りの電話。「我が社の名前が検索しても出てこないじゃないか！いちいちアドレスを打ち込まないといけないいんじゃ誰も見てくれないしホームページを作った意味がない！」といった具合だ。そもそもGoogleやYahoo! Japanにあなたの会社はカネはらってるのか？リアルな店舗に例えればこちらは店を作っただけ。客が来ないのはあなたが何も広報活動をしないからである。「◯◯社はすぐにYahoo! Japanで出るようになっただろう！」って、◯◯社のホームページは1998年に公開したわけで、今とはホームページの数が3桁違うのだが。」と言ったところで社長は納得しない。会社が可愛いのは分かるが、世の中の変化を少しは理解して欲しいものだ。

●HTML5のタグ(8) 　 2011.07.16
tableの背景色を使って画面全体に色をつけたりする代わりにCSS3からboxという値が加わった。これを使うことで画面の一部、または全体をカラム状に分割して背景色を変えることができる。例えば<style type="text/css">#wrapper{width:100%;dispaly:box;display:-moz-box;display:-webkit-box;}#leftColumn{height:500px;background:#badb9d;box-ordinal-group:1;-moz-box-ordinal-group:1;-webkit-box-ordinal-group:1;box-flex:1;-moz-box-flex:1;-webkit-box-flex:1;}#centerColumn{width:500px;height:500px;background:#9ddbb2;box-ordinal-group:2;-moz-box-ordinal-group:2;-webkit-box-ordinal-group:2;}#rightColumn{width:200px;height:500px;background:#9ddadb;box-ordinal-group:3;-moz-box-ordinal-group:3;-webkit-box-ordinal-group:3;}</style>とすることで背景が縦に3色の帯で分割されることになる。box-flexはブラウザ画面の幅を変えたときに可変する部分だ。各カラムの中に入れる要素は<div id="wrapper"><div id="leftColumn"><article>LEFT</article></div><div id="centerColumn"><article>CENTER</article></div><div id="rightColumn"><article>RIGHT</article></div></div> というように書く。

●やっと気が付き始めたSEOの無意味さ　 2011.07.15
2003年ごろに流行ったSEO対策という言葉。2005年ごろからその効果の信憑性を疑う意見も出始めたが、多くの人がSEO対策を最重要課題と位置付けサイトを制作、または制作依頼をしてきた。それが今でも続いている。多少の聞きかじった知識があるクライアントがデザインはできないが自称セミプロというようなクライアントの依頼事項の中には今でも必ずSEOという言葉が含まれる。しかしここ1年ぐらいで明らかに「SEO対策は意味がないのでは？」という話が出るようになった。実際にSEOを売りにしている制作業者に依頼したところが一時期は上位に表示されるものの、すぐに順位が落ちてしまい、あとは毎月ウェブ管理料とやらをとられる割に効果がどんどんと薄くなっていく。そんな経験をしたクライアントから出る話である。

●HTML5のタグ(7) 　 2011.07.14
画像データを背景に指定することで、上からテキストを重ねることもできるし、閲覧する側から簡単にコピーができなくなる。この背景画像がHTML5からは4枚まで指定できるようになった。<style type="text/css">body{background-image:url(01.jpg),url(02.jpg),url(02.jpg),url(01.jpg);background-repeat:no-repeat;background-attachment:fixed;background-position:top left,top right,bottom left,bottom right;}</style>といった具合だ。しかし画像データなのだから元から2〜4枚を合体させた画像を使えばいいじゃないか？と思うかもしれないが、ブラウザ画面のサイズにかかわらず4コーナーのそれぞれ角にくっついるということろがデザインの可能性を高めているようだ。ブラウザの画面サイズを小さくしていくと、先に記述したものから順に前面に表示されるようである。

●安泰　 2011.07.13
ウェブサイトが一定のアクセスを確保しながら安定させることが難しくなっている。国内でのインターネットユーザー数が微減に対してサイトの数は増え続けているのだから当然である。その中でアクセスや売上げを一定レベルに保つのは並大抵のことではない。同じカテゴリーでの新たな商品やサービスが登場し、成功して市場を凌駕するものもあれば一瞬で消えていくものもある。いずれにしても常に前進していないといけない。えらいこっちゃ。

●HTML5のタグ(6) 　 2011.07.12
今まではPhotoshopのフォルターで行っていたテキストのドロップシャドーがCSS3で可能になった。これもデザイナにとっては有り難いこと。<style type="text/css">.shadow1{font -family:"Verdana", "ヒラギノ角ゴ Pro W3", "ＭＳゴシック", "Osaka‐等幅";font-size:14px;color:#780a0a;text-shadow:2px 2px 2px #8e6c6c;}</style>とヘッダー内に書いておき、該当するテキストのところは<p class="shadow1">この文字にドロップシャドー</p>となる。2px 2px 2px #8e6c6cのところがX軸オフセット、Y軸オフセット、ぼかしの範囲、色、という順になる。Photoshopのレイヤー効果のドロップシャドーの設定をそのまま移植した感じだ。ただし角度という概念はなく、Y軸とX軸だけの設定だ。Photoshopの場合は１つの画像ファイル内で複数のドロップシャドーやベベルとエンボス、シャドーなど、全ての光の方向を統一するために角度という設定が必要になったわけだで、これはデザインの基本。従ってCSS3でドロップシャドーを設定する場合でもY軸とX軸の比率は同じサイト内で統一することが望ましい。

●選択肢　 2011.07.11
auのis06の場合、使えるメーラは4種類。Eメール、Cメール、PCメール、Gmailだ。Cメールは置いておいて、残る3種類のうちどれを使うかは悩みどころ。Eメールはスパムが多く、フィルタを強化するとPCからの転送メールが受けられなくなるので実際にはかなり使いづらい。Gmailは基本設定がGmailのサーバを利用するため、時間帯によっては遅延することがある。転送元のメールサーバを使えばいいのだが、こちらはサーバによって設定できない場合もある。PCメールはGmailと同様に他のメールサーバから情報を持ってきて動かすわけだが、問題は一括削除ができないため、溜まったメールを1件ずつ消すのが面倒。GmailはPCで一括削除できるので、とりあえずはGmailがいちばん問題が無さそうである。どっちにしろ選択肢が多いのは困る。一通り使ってみないと分からないからだ。1つしかなければ、なんだかんだと文句を言いつつも、それを使うしかないから悩む必要がない。

●HTML5のタグ(5) 　 2011.07.10
CSS3の新機能は膨大だが、その中でも入力フォームのデザインにバリエーションが増えたことはデザイナにとっては朗報だろう。今まではファンシーで可愛いデザインで統一したいと思っても入力窓だけは角がとんがった四角になってしまい、なかなか馴染まなかった。しかしCSS3からはborder-radiusでコーナーRを指定できるようになった。 <style type="text/css">input[type="text"]{border-radius:6px;-moz-border-radius:6px;-webkit-border-radius:6px;border:1px solid blue;</style>という具合だ。-moz-はMozilla用、-webkit-はスマートフォン用ということになるだろう。

●世界の人口　 2011.07.09
国連の発表によると2100年に世界の人口が100億に達するとのこと。1804年に10億人に達するまでに20万年かかってきたものが、その後の約300年で10倍になるというのだから凄まじい勢いで増えるということだ。元々地球上に生息できうる人間の数は10億という説もあり、その10倍がひしめく中で、食料、エネルギー、環境が問題になるのは当たり前のこと。むしろ「よくこの程度で済んでいるな…」という見方もある。ではこの人口爆発を抑制するには？と言えば出生率を下げるしかない。中国では一人っ子政策が続けば2100年には現在の13億から9億まで人口が減少するという予測もある。では世界中が一人っ子政策をすれば良いのか？と言うとそれはそれで問題。人口が減少方向に転じれば次に待ち受けているのが少子高齢化だ。労働人口の割合が急激に減って、働かないで福祉を受ける高齢者が増えることで全体での生産効率が悪化し、みんなが貧乏になる。いすれにしても我々には「隠居」とか「悠々自適」などという言葉は夢物語のようでもある。きっと身体が動かなくなるまで馬車馬のように働き続けることになるのだろう。

●HTML5のタグ(4) 　 2011.07.08
CSS3はHTML5の一部ではなく独立した規格だが、ブラウザのバージョンによる対応レベルを見るとHTML5とセットで使われることも多いようだ。またHTML5の基本デザインではCSSは必須とも言えるので、この中で紹介していくことにする。まずはnth-child(odd)とnth-child(even)というものが加わった。よく一覧表のデザインで1行置きに背景色を変える場合があるのだが、これをCSSで指定することができる。例えば<style type="text/css">tr:nth-child(odd){background-color:pink;}tr:nth-child(even){background-color:skyblue;}</style>とすることで奇数行(odd)はピンク、偶数行(even)は水色になる。

●タッチパネル　 2011.07.07
スマートフォンの普及でタッチパネルを使うことが多くなった。しかし使い慣れていないと、誤って違うところを押したり、押したつもりはないのに触って反応したりと、けっこう使いづらいものだ。「あ〜もう〜くそ！」と思ってはいけない。要は慣れだ。高齢者パソコン教室の生徒がマウスを思うように使えないのと同じことだろう。また一日中スマートフォンをいじった後にPCを立ち上げた時に、ついついモニターの表面を触ってしまいそうにもなるものだ。

●HTML5のタグ(3) 　 2011.07.06
HTML5ではコンテンツのブロックを判別するためのタグがいくつかある。人間の体で言えば「ここは顔」「ここは胴体」「ここは足」といったような部品の置き場所をタグで指定することができるようになった。<header></header>はヘッダー部分、<nav></nav>はヘッダー下のサブタイトルの部分、<section></section>はここで大きなくくりで本の中の「章」のような意味、<article></article>はsectionの中の小さなグループで本の中の「節」のような意味、<footer></footer>はフッター。<aside></aside>はメインコンテンツではサブ的な要素で、ページ上でのサイドバーに掲載されるような参考情報という感じ。そしてこれらは全てheader{margin:2px;background-color:black;width:900px;height:50px;}というようにCSSで個別に装飾できる。

●ブログは続けよう-2. 　 2011.07.05
ブログは定期的に更新を繰り返していけなければアクセス数はほぼ間違いなく減少していく。如実である。ガソリンを送り続けなければエンジンは止まってしまうのと同じだ。書くほうとしては毎回一生懸命書いたものでも読むほうは一瞬である。そう考えると労力対効果という意味では非常にエネルギー効率が悪いものでもある。ではなぜ書くのか？ということだが、多くの場合、自己満足、ストレス解消、といったことのようである。

●HTML5のタグ(2) 　 2011.07.04
JavaScriptの記述も省略できる。今までは<script type="text/JavaScript" src="xxx.js"></script>と書いていたものが<script src="xxx.js"></script>となる。また Stylesheetでは<link rel="stylesheet" type="text/css" href="xxx.css">は<link rel="stylesheet" href="xxx.css">となる。またframe、framesetは廃止される。フレームは使い勝手が悪いということだ。なのでフレームがどうしても必要な場合はiframeで対応するか、Flashで作るしかないようだ。ん？FlashはHTML5と同居できるのか？ま、それはさておき、その他centerやfontはCSSに完全移行だそうだ。

●ブログは続けよう-1. 　 2011.07.03
ブログは確実に定期的に更新を繰り返していけば、そのうちにアクセス数は増えてくる。1ヶ月経っても誰も見てくれないからとサービスを乗り換えたりテンプレートを差換えたりしても効果は期待できない。半年〜数年という長いスパンで考えたほうが良い。継続することが一番の力になる。といっても書いている内容がそれなりに読んで面白いものでなければならないが。「それなり」「そこそこ」で良いのだ。

●HTML5のタグ(1) 　 2011.07.02
HTML5のタグを1回おきに少しずつ（最終的に何回になるか分からないが）説明しいく。まずDOCTYPE。HTML5では非常にシンプルになった<!doctype html>←これだけで良い。もう１つ文字コードも<meta charest="UTF-8">←これだけで良い。それから終了タグが省略できるものも増えた</li>、</p>、</tr>、</th>などだ。まだある。"（ダブルコーテーション）の省略だ。つまり<a href=index.html>TOP PAGE</a>という具合だ。今まで「何で必要あるんだろ？」と思っていたものが必要なくなったようだ。

●ブログに馴れると　 2011.07.01
ブログの書き方が判らない…。手慣れた人にとっては「何で？」なのだが、パソコンが苦手な人にとっては意外にもハードルが高いことのようだ。しかし「やる気」さえあれば何とかなるもの。画像の挿入や本文中のリンクの設定ができるようになると、今まで苦労したが故に楽しさも倍増！のようだ。しかしこの楽しさが病み付きになり、本来の目的とは違った記事をどんどんと投稿してしまうことにもなる。食品を売るサイトへの顧客誘導が目的だったはずが、自分の子供の自慢話から自分の幼少時代の物語まで、読んでる人が必要としない情報の割合がどんどんと増えてきてしまうのだ。

.