WEBデザイン日記「裏方の裏技&裏話」

ブログ移行のご案内

2010-05-24T10:34:00.003+09:00

当ブログ、WEBデザイン日記「裏方の裏技&裏話」は、記事内容の重複を避けるため、同じくナチュラロジーが運営するブログ「デザインのサイン」へ移行しました。

つきましては、今後当ブログでの記事の更新は予定しておりませんので、その旨ご了承願います。

移行先ブログ「デザインのサイン」
http://design-no-sign.blogspot.com/

“Google Chrome”使用レポート

2008-09-16T13:42:00.000+09:00

米Googleは9月2日、ついに独自のオープンソースブラウザ「Google Chrome」のβ版を公開しました。日本語を含む40言語以上にデフォで対応してるそうです。

博多っ子でありGoogleっ子でもある私、もちろん早速試してみました。
　※ダウンロードページ → www.google.com/chrome

まず真っ先に感じること、それはなんと言ってもその起動の速さ。もちろんPC自体のスペックにもよりますが、アイコンをクリックして1秒と経たないうちにインターフェースが起動します。WEBページの表示速度も非常に速く、レンダリングエンジンにはApple社が中心となって開発している「WebKit」を使用しているそうです。Safariと一緒ですね。

面白い機能としては、「シークレットウィンドウ」なるものがあります。これは、このウィンドウで閲覧したページの履歴やCookieをブラウザに保存しないという、いわゆるプライベートモードです。使いますかね？

制作者として使えそうなのは、WEBページを右クリック「要素を検証」でFirebugライクなソースの検証ができるという機能。オンマウスしている部分をハイライトしてHTMLやCSSなどの構造を確認することができます。

私個人の総評としては、さすがGoogle、かなり良くできたブラウザだと思いますが、1つだけ残念なのは「Googleツールバーに対応してない」という点。とは言え、なにしろGoogleブランドなわけですから、そのうち標準化されるのではないでしょうか。そうなれば「既定のブラウザ」をFirefoxから変更しても良いかも…。

以上、かなり端折ってのレポですが、皆さんも是非お試しあれ。

　漫画によるChromeの紹介 → www.google.com/googlebooks/chrome/
　ウィキペディア → ja.wikipedia.org/wiki/Google_Chrome

全角英数アレルギー

2008-08-28T16:28:00.000+09:00

これは自分のコーダー気質に起因するものか、それとも英語使いであるためなのか、とにかく全角英数が嫌いでなりません。むしろアレルギーなのです。あの、だらしなく膨らんだ締まりのないシェイプ。アンチエイリアスなメイリオやヒラギノをもってしても一向にプロポーションが改善しません。この際、イタリック体にちなんで「メタボリック体」と呼ぶことにしましょう。どうして英数字が2バイト文字になりえましょう。

以前、どこかのサイトの登録フォームを記入していた時のこと。一通り情報を埋めて、いざ内容確認画面へと進めるも「エラー：記入内容をご確認下さい」とのダイアログが。―そうです、「住所はすべて全角で」との無理な注文です。ええ、無理なので、もちろん作業中止です。

ところで、先程Googleツールバーの検索ボックスに「全角英数」とまで入力した際、検索候補として「全角英数って必要なの？」というのが真っ先に出てきて、自分のGoogleに対する愛情を再確認いたしました。

ちなみに、私の旧来の友人であり、いわゆる「マイミク」でもある在日スウェーデン人の談によれば、彼女にもmixiを通じて“I want to be your friend.（※スペースも含めてすべて全角）”といった類のメッセージがたまに届くそうです。彼女曰く、「ダサいフォントだと思えば読めないことはない」とのこと。

mixi内の該当コミュニティや周囲の意見などを考えると、私まではないにしても、全角英数を不快に思う人の数はやはり多数に上ります。皆さん、くれぐれもご注意を。合言葉は「F8キー、F10キー」です。

タダで使える秀逸なフリーソフト5選

2008-08-21T11:01:00.000+09:00

今回は、一般的に高値で市場に出回っているソフトウェアの代替として使えるフリーウェア（オープンソース）を紹介します。

1. Microsoft Officeの代替スイート「OpenOffice.org」
以前から公言している通り、軽いAnti-Microsoftな私としては是非とも紹介したいスイート。その名の通り、いわゆるOffice系ソフトが詰まったパックです。
中でも特筆すべきは、Excelの代替となる“Calc”、そしてPowerPointの代替となる“Impress”。Calcは2003などのクラシックなExcelと視覚的にも似ていて、もともとのExcelユーザーであれば直感的な操作が可能になっています。もちろん、ほとんどのExcel関数とも互換性を持っています。一方、Impressに関しては、本家PowerPointをすでに超えているとの賛辞も多い、まさにキラーソフトと呼ぶに相応しい逸品です。これは中小企業にとっては救いの手となり得そうです。
　→　ダウンロードは http://ja.openoffice.org/

2. Adobe Illustratorの代替ソフト「Inkscape」
ベクトル画像の編集が可能なドローソフト。正直なところ、私のようにIllustratorを長年愛用しているデザイナーにとっては機能的な物足りなさを否めないのですが、とは言え、かなりのクオリティの高さです。
　→　ダウンロードは http://www.inkscape.org/

3. Adobe Photoshopの代替ソフト「GIMP」
これは有名どころですね。Photoshopライクなフォトレタッチソフトなのですが、単なる模倣の域をはるかに超えています。デフォルトのショートカットがPhotoshopとは違うのですが、設定ファイルを書き換えることで変更が可能。ただし、起動までの時間がやや長いです。特に、私のように大量のフォントをインストールしていると、その読み込みに時間がかかっているようです。
　→　ダウンロードは http://www.gimp.org/

4. Adobe Dreamweaverの代替ソフト「Nvu」
WYSIWYGなHTMLエディタです。Dreamweaver自体を「置換ソフト」としてしか使わない私が紹介するのもアレなので、詳細な説明は割愛しますｗ
　→　ダウンロードは http://www.nvu.com/

5. Adobe Acrobatの代替ソフト「PrimoPDF」
これはかなり使えます。Acrobatのような編集機能はありませんが、様々な形式のドキュメントをPDFに書き出すコンバーターとして非常に秀逸なソフトです。操作も簡単、誰でも手軽にPDFファイルを作成できます。
　→　ダウンロードは http://www.primopdf.com/

余計なスライスや画像読み込みを省くCSSの裏技

2008-03-12T01:40:00.001+09:00

今回は、表題の通り、WEB制作の際にスライス作業を減らして、しかもブラウザでファイルを開いた際に画像の読み込み処理を最小限にするという、ちょっと素敵なCSS（スタイルシート）の小技をお教えします。

まずは、実際の処理を見て頂くために、下のボタンにマウスを合わせてみて下さい。

CSS SPRITE

いかがですか？…まぁ何の変哲もないロールオーバーボタンですね。CSSで背景にアクションをつけています。

ただ、このロールオーバーが他と違う点は、画像1枚でオンマウス/オンマウスアウトの処理を行う点。
どういうことかと言うと、

↑このような1枚の画像を用意して、a:hoverの背景をbackground-positionでずらしているのです。

これ1点だけでは画像のローディング・スピードに大した変化は期待できませんが、もしこのスタイル指定をサイト全体の画像（ボタンやアイコンなど）に応用したらどうでしょうか。

実はこの手法、“CSS Sprite（CSSスプライト）”という呼び名がついているようで、有名どころで例を挙げれば、皆さんもよくご存知のYouTubeのサイトでも使われています。
しかも、サイト上のほとんどのボタン・アイコン・背景画像を1枚のGIFイメージで表示しています。
ちなみにその画像がこちら　→　master-vfl34196.gif

この手法を使いこなせば、前述の通り、デザイナーさんのスライスの手間を減らすこともできて、しかもローディングの負荷を最低限に抑えることができますね。

というわけで、今回のサンプル（XHTML/CSSのファイルと画像）を用意しておりますので、どうぞご自由に。

>> sprite.zip（2.51kb）

Microsoft社製品、ついにオープンソース化？

2008-03-02T01:19:00.000+09:00

Microsoftは米国時間2月21日、独占禁止法のために同社に課された法的必要条件を履行し、相互に連結したソフトウェアの世界でより調和を保つための具体策を明らかにした。

Microsoftは、サードパーティーがMicrosoft製品へとの連係をより容易にするため、自社通信プロトコルに関する大量の資料を公開する予定であることを明らかにした。

また同社は、Microsoftのプロトコルを利用して非商用ソフトウェアを作成するオープンソース開発者を告訴しないことも表明した。

　→　ソース：YOMIURI ONLINE

基本的にWindowsユーザーでありながら、長きにわたって“anti-Microsoft”を臭わせてきた私ですが、その理由の最たる要因こそ「マイクロソフト社の独占気質」にあります。

記事にもある通り、これまでマイクロソフト社は「知的財産権」を主張し、開発技術の公開（オープンソース化）に否定的な態度をとり続けてきたのですが、2007年9月の欧州第一審裁判所にて「独占禁止法に抵触する」との勧告を受けたこともあって、先日2/21、ついに今後の具体案を明らかにしたという形です。

私が贔屓にしているソフトウェア開発企業（GoogleやAppleなど）は、「時代の流れ」に柔軟な対応をし成長を続けています。それは、ある面では「世のディベロッパー（開発者）たちの未来性を尊重し、共存していくこと」の表れであり、まるで軍事開発でも行っているかのようなクローズド・サービスではありません。弊社が積極的に取り組んできた「オープンソース」という動きこそ、本当の意味でのディベロップメントではないでしょうか。

今回の発表では、正直どこまでマイクロソフト社がオープンソース化にポジティブなのかは微妙な気もしますが、万一、期待通りの情報公開がなされるのであれば、これはある種の革命かもしれません。

例えば、Windowsとの互換性を持つ無償のオペレーションシステムが開発可能となります（オープンソースのOS、略してOSOS？）。しかも、そういった新OSは複数生まれ、また派生を繰り返しながら進化していくことでしょう。もちろん最初のうちは本家Windowsよりも機能的には劣り、バグも多いはずなのでユーザーの急激な流動は起こらないと思いますが、そのうちショップで「OSなし」のPCを選ぶ人が増えてくることでしょう。WEBブラウザを選ぶ感覚で、OSもユーザー自身が幅広いバリエーションの中から選択する時代になるのです。

ただし、現状ではあまり期待できそうにもありません。

マイクロソフト社は、オープンソース開発者を提訴しないと誓約したが、その対象が非営利の開発者に限られている。

企業の社会的使命とは、時代の声に耳を傾け、時代のニーズに応えていくことではないでしょうか。
「革命」を望んでいるのは私だけではないはずです。

IEバグ対策「png画像の透過処理」

2008-02-18T01:17:00.000+09:00

WEB業界人のみならず「痛いブラウザ」との悪評が定着しているInternetExplorer（通称「IE」）ですが、特にIE6以前のバージョンに関しては、恐ろしいほどおバカな仕様（バグ）を含んでいることにより、私たちWEB制作者をしばしば悩ませます。

多くの致命的バグを修正したことでやや成長した感のあるIE7も、2006年11月に日本語版が正式リリースされたものの普及率は伸び悩んでいるようです。Windows Vista（IE7標準搭載）もあまり普及してないのでしょうがありません。

そんな数々のIE独自仕様、CSSのバグに関しては深い知識と発想力さえあれば「CSSハック」など使わずとも攻略できるものなのですが、私の中で一つだけ手を焼いていたバグがありました。
それが「IE6以前のバージョンでpng画像が透過されない」というもの。

デザイン上、ドロップシャドウや半透明などの特殊エフェクトやアンチエイリアス処理などによって、gifでは綺麗な透過処理を行うことができない場合があります。そのような場合、png書き出しを使えばほぼ忠実な透過処理を行うことが可能になります。
しかし、前述の通り、IE6を含む旧バージョンのIEではpngのアルファチャンネルに対応しておらず、知らずに使うと非常に残念なことになってしまいます。

この対応策としてはいくつかの方法が挙げられていますが、そのほとんどが面倒なものであったり、またCSSハックを使用しなければいけなかったりと、いろんな意味で難があります。

そんな中でも私が「これは使える」と思ったものがありますのでご紹介。
これは“pngfix”というJavaScriptを使用した対策なのですが、非常にシンプルで簡単です。

まず、http://homepage.ntlworld.com/bobosola/pnghowto.htmにアクセスして“pngfix.js”ファイルをダウンロード。
次に、そのjsファイルをサーバにアップロード。

あとは、該当HTMLファイルのhead内に

<!--[if lt IE 7.]>
<script defer type="text/javascript" src="pngfix.js"></script>
<![endif]-->

を記述しアップロード。

以上、これなら手軽に対策できますね。
ただし、もちろんJavaScriptをオフにしているブラウザでは残念なことに。

それはそうと、優れた拡張形式にもかかわらずこのpngがイマイチ一般に浸透してないのは、もしかしたらIEという強敵がいたこともその理由の一つなのかもしれませんね。

ウィキペディア通

2008-02-10T00:15:00.000+09:00

私は幼少の頃からやや人と違った感性を持っていたようで、周りが「ファミコンブーム」にあった時も私は楽器をいじったり外で泥だらけになって遊んだり、いろんな漫画やアニメが流行っても私は図鑑や百科事典を愛読するという、いくらかズレのある子供でした。今とほとんど変わらない趣向ですが、あまり成長してないのでしょうか（笑）。

そんな私にとって「ウィキペディア（Wikipedia）」は恰好の暇潰し＆読み物で、ROM（ただ閲覧すること）に留まらず、時には音楽関係や生物などの得意分野において記事編集まで行うほどです。なにしろ私の中で「検索」とはすなわちGoogleとWikipediaで片付くものだと思っています（笑）。

実は以前、弊社でも運営サイトの一つに「ティキウィキ（TikiWiki）」というwikiプログラムを組み込んでいたことがあり、CMSとしても面白みのある（実用性のある）システムだと思っています。最近では商品やサービスに関するFAQサイトとして利用されることも多くなってきました。「自社ウィキ運営してます」なんて、ちょっと素敵じゃないですか。

ただ、実際に運営・編纂に携わった立場からの個人的な感想は、やっぱり百科事典はROMる方が面白いということ。
仕事柄、お客様にいろんなWEBシステムを紹介できるよう常日頃から技術介入を行っていますが、やはり趣味と仕事にはいくらかの隔たりがあるようです。

とりあえず、この「ナチュラロジー」と私の名がウィキペディアに載るように頑張っていきたいと思います（笑）。

WEB制作の裏側

2008-01-30T02:00:00.000+09:00

「御社ではどのようなことをやっていらっしゃるんですか」という問いに対して、弊社では「WEB制作やってます」とか「WEBに特化した広告代理店です」とか、ある時は「英語のコーディネートを行ってます」とか、饒舌な時は「ホームページや広告・販促物に関してデザインやコンサルティング、ブランディングなどを行ってます（長）」などとお答えしてます。まあ、そこはTPOな感じで（笑）。

そういう場面でよく返ってくる言葉は「すごいですね」みたいなもの。以前、女性誌でも読んだことがありますが、どうやら一般的に「WEB」・「デザイン」・「広告代理」・「英語」などの単語に対して華やかなイメージがあるようです。恐らく「電通」さんのような大手広告代理店や「GMO」さんのようなモンスターIT企業の影響でしょう。

しかし、WEB制作や広告関係の業界に携わった経験のある方々なら皆さん同意して頂けると思いますが、実際は非常にタフな業界なのです。常に納期との闘いを繰り広げ、時には不可能に近いタイトなスケジュールもこなさなければなりません。打ち合わせやディレクションのため遠方への出張（ほぼ日帰り）もあります。また、弊社のように海外との取引きもあるとなれば、時差の関係で真夜中に商談を行わなければならないこともあります（深夜の英語はなかなかハードですよ）。まあ、これは特殊な例ですが。

おかげで基本的に患いモノは絶えず、特に肩・腰・眼の疲労、睡眠不足、脳の酷使による疲労などなど、我々は大塚製薬さんなしでは生きていけません（笑）。本当に地味で涙ぐましい作業の上に成り立っている業界なのです。

もちろん、それに勝る達成感やお客様からの喜びの声があるからこそモチベーションを維持していけるのですが、新卒の方々や業界未経験の方々がただ単にそんな「華やかさ」、「クリエイティブさ」や「時代の最先端」といったイメージのみで足を踏み入れると大ヤケドを負ってしまいます（笑）。

というわけで、これから我々のような業界人と接するご機会がありましたら、是非お一言「お疲れさん」と労って下さい。その言葉で救われる人々がたくさんいるはずです（笑）。

「ホームページ」と「ウェブサイト」の違い

2008-01-15T01:03:00.000+09:00

私たちナチュラロジーは、インターネット上のメディア・ツールとして数々のウェブサイトを制作してきました。これらは日本で一般的に「ホームページ」と呼ばれているものですが、本来、「ホームページ」とはあくまでも「ホーム（最初）のページ」であって、例えばご自分のブラウザ（InternetExprorerやFireFoxなど）を起動した際に「Yahoo!Japan」をデフォルトで開くように設定していれば「Yahoo!Japan」がホームページであり、また、このnaturalogyのサイトで言えば、最初のページ、つまり"index.html"がホームページとなります。

よって、「ホームページを制作します」というのは「トップページのみを制作します」ということになってしまい、正しくは「ウェブサイト（または"ウェブページ"）を制作します」というべきなのです。

弊社は海外（英語圏）の案件も扱っているため、その辺の言い回しに充分の配慮をする必要があるので、弊サイト上にも「ホームページ」という単語が極端に少ないかと思います。言葉に対する「プライド」を取るか、ビッグ・キーワードでの「検索エンジン対策」を取るか、そこは常に課題としている点ではありますが…。

新年のご挨拶

2008-01-01T21:00:00.000+09:00

謹んで新春の寿ぎを申し上げます。本年も倍旧のお引き立ての程、どうぞ宜しくお願い申し上げます。

この2008年は私とナチュラロジーにとって、良い意味でいろんな動きが起こる年になりそうです。
これまでと変わらずWEBデザイン・制作や各種プロデュースなどクリエイティブな分野での業務はもちろんですが、今年はそれ以外の部門においても昨年以上に力を入れていきたいと考えています。

そこで今年の目標をいくつか立てているのですが、中でも「有能なスタッフ、同じヴィジョンを共有できる仲間を増やす」ということが今後の展開を考慮すると最重要であると思っています。
人員拡大、ひいてはもっと大きなオフィスへ早く移転したいです（笑）。

そしてもう一つ。個人的な目標をこんな所に書いて恐縮ですが、「良き夫、そして父親になる」というのも挙げています。
昨年の結婚に続き、今年春にはついに第一子が誕生します。それに伴い、とりあえず2週間程前にタバコを辞めてみました。意外にさらりと禁煙を続けているのですが、これから新年会など大きなハードルが押し寄せて来るので気が抜けません（笑）。

2008年は新春から早くも多忙なスタートを切りましたが、体調管理には気を付けつつ、後に「大躍進の年」と振り返ることができるほどアグレッシブな一年にすることを皆様にお約束いたします。

自らを振り返りつつ、今年も振り返ってみる

2007-12-30T02:10:00.000+09:00

ナチュラロジーの代表を務めさせて頂いております私には、いわゆる「器用貧乏」的な一面があり、このWEB業界に辿り着くまでに様々な業種・職種を経験して参りました。というよりは、今こうしてこの業界にいることの方が不思議に思えることがあるくらいですが。

以下、身の上話みたいになってしまいます（笑）。

もともと私は幼少の頃から音楽一色の人間で、歌にピアノにギターにドラムに…、とにかく文字通りの音楽三昧でした（今でもですが）。それが高じて、学生時代は声楽やジャズなどのメソッドを教える“おカタい”音楽講師をやりつつ、裏ではハードロック・バンドを組んで随分と「若気」に至っておりました。

一方で、語学マニアという一面も（これに関しては現在お金になってますが）。そもそも育った環境のおかげでスムーズに英語を身につけることができたというのが大きく作用しているのですが、何よりも日本語の奥深さに魅了されて、その「比較」から多言語を学んでいるような気がします。

で、そこでどのように現在につながるのかという点について。

音楽は広いカテゴリで見れば「アート」に分類されます。これは、技術力とクリエイティブさとセンスを結集したようなもので、デザインすることやイメージをモノにするという意味ではWEB制作に共通しています。
語学に関しては言わずもがな、WEBを構成しているスクリプトは全てが「言語」であり（HTMLなど）、WEB上の情報提供には、もちろん言葉を使うのです（コピーライティングなど）。

現在では、やっと「これは適職だな」などと自惚れることができるくらいになりましたが、ここへ辿り着くまでにIT関連会社や広告代理店で修行を積み、本当にたくさんの方々のご指導のおかげで「器用貧乏」を追い風に変えることができているんだと、改めて感謝をしております。今年は特に、そんな皆様の「支え」を感じた一年でした。

というわけで、少々早いですが。

今年一年の御礼と共に、来年の皆様の更なるご発展を願いつつ、本年の「技術日記」を締め括らせて頂きます。
2008年もどうぞナチュラロジーを宜しくお願い申し上げます。

OpenPNEによるSNSサイトの構築

2007-11-12T08:22:00.000+09:00

この度、オープンソースのOpenPNEを使用して、弊社の企業コンセプトでもある「自然」と「エコロジー」をテーマにしたSNSサイトを構築してみました。

naturalogySNS（ナチュラロジーSNS） | 自然を愛する、自然に生きる

現在は初期段階ということもあって、一時的にオープン登録制（招待状なしでも参加が可能）にて運営しています。
この機会に皆様も是非ご参加下さい。

メディアを企画する者の義務

2007-11-08T00:18:00.002+09:00

「続いてのニュースは～です」「そこで見たものとは！？」というナレーションとともにテレビ番組の「ここぞ」という場面で流されるCMについて、約86％の視聴者が「不愉快」と感じていることが、榊博文慶大教授らの調査で明らかになった。さらに、CM明けに放送される同じシーンの繰り返しについても「好感が持てない」「しつこい」と答えている人が多く、CMでビジネスをしているテレビ局側からすれば現状のCM放送の「問題」を突きつけられたことになる。

　→　ソース：J-CASTニュース

…今更ですか、といいたくなるような記事です。
こういった事実に第三者の統計でしか気付けないTV番組企画会社には、正直、同じ「メディア」という業界に身を置く者として少なからずの失望感を覚えます。ちょっと偉そうな言い方で恐縮ですが。

そもそも、「企画」というのはモノを創り上げる上での礎であり、そのクオリティを左右するものは「クリエイティブさ」以上に「リサーチ力」ではないかと考えています。
「今」を知ること、「先」を読むこと、そしてユーザーの動向と欲求を調査すること、それは「企画」を生業とする企業が怠ってはいけない作業なのです。
「前回これでうまく行ったんだから次もこれで」という、前進のない企画はただの怠慢であり、それでユーザーの心を掴もうとは無謀にも程があります。
第一、民放の番組には「スポンサー」というクライアントが付いており、その大切なクライアントのCMを疎かにしてしまうような行為はいかがなものでしょうか。

弊社もそんな「企画」を生業とする企業のひとつですが、今回の記事を反芻しつつ、今後も世間に耳を傾け続けられる会社でありたいと襷（たすき）を締め直す思いです。

“Safari for Windows”インストールのレポ

2007-11-02T02:25:00.000+09:00

ご存知の方々も多いかとは思いますが、“Safari for Windows”、つまりWindows版のSafariがパブリックベータ版でリリースされました。
このバージョンの正式名称は“Safari 3.0.2 for Windows beta”で、Mac OS X v10.3以降で標準ウェブブラウザとなっているSafariがベータ版ながらついにWindows環境にも侵出した形になります。

というわけで、早速使ってみました。
まず特筆すべきは何と言っても起動・ブラウジングの速さ。いろいろな研究結果を見ても、やはり「最速ブラウザ」というのは否定の余地がありません。
もうひとつ、色彩描写の正確さも圧巻です。これはさすがApple社としか言いようがありません。

ただ、この“Safari 3.0.2 for Windows beta”には重大な問題があります。
それは日本語入力に対応していないということ（正確には「英語以外の言語入力に未対応」らしい）。
実際にGoogleの検索フォームに「日本語」などと打ち込んでみようとしましたが、全くダメでした。

「せっかくSafariがWindowsでも使えると思ったのに('A`)」とフテ腐れながらADC（Apple Developer Connection）を見ていたら、ダウンロードのページに何と“Safari 3.0.4 for Windows”の文字が。

というわけで、早速使ってみました（その2）。
お見事、このバージョンでは日本語入力も問題なく、公表されていたバグも対処されていました。もちろん、その他の素晴らしい機能性はそのままです。

今回、私はADC会員ということで一足お先に使ってみましたが、ADC会員でないWindowsユーザー方々も、この“Safari 3.0.4 for Windows”（もしくは3.0.2の修正版）がリリースされたら是非お試しあれ。

オープンソースでのCMSやECサイトの構築

2007-10-25T14:38:00.000+09:00

弊社ではCMS（コンテンツ管理システム）やブログ、各種ポータルサイト、SNS（ソーシャルネットワーキングサービス）サイト、またショッピングカートを組み込んだハイスペックなECサイトなど、用途に応じた特別な機能を持つウェブサイトの構築を多数行っています。

これらは一般的に数十～数百万円という大台の案件なのですが、弊社ではオープンソースのシステムやソフトウェアを使用することで、低価格かつハイクオリティなサービスを実現しています。

特に弊社が力を注いでいるのは、「Joomla!」というCMS、ブログ的なWEB構築を実現する「WordPress」、そして「zen cart」というECサイト構築システムです。

「Joomla!」は「Movable Type」のようなブログ構築ソフトとしての機能と「XOOPS」のようなSNSの機能を兼ね揃えた、まさにハイスペックなCMS構築ソフトです。
弊社運営の「SnailWorx（スネイルワークス）」や「フクオカン！！」などはこの「Joomla!」を使用しています。

「WordPress」は単にブログ構築ソフトとしての枠を超えたPHPによるWEB構築プログラムです。
弊社運営の「MediaMall（メディアモール）」や「エコフィッシャーズ」などはこの「WordPress」を使用しています。

そして「zen cart」は、amazonなどのような大手ショッピングサイトにも劣らないスペックのECサイトを構築することが可能です。
弊社運営の「naturalogy shop」はこの「zen cart」を使用しています。

naturalogyがこういったオープンソースに精通している理由は「英語のまま情報を理解できる」ということであり、日本語化がなかなか進まずに日本での普及が遅れているものでもリアルタイムに技術介入できるからなのです。

国際化が進んでいるという現代でも平気で2～3年遅れの情報が入ってくる日本のIT業界では、弊社は少し有利な所にいるのかもしれません…。

英語ウェブサイトの制作におけるエンコードの選択

2007-10-17T23:53:00.001+09:00

現在、日本語でのweb制作にはShift_JISもしくはEUCが一般的な文字コードとして使用されています。
一方、英語でのweb制作の場合、iso-8859-1というエンコーディングが広く用いられています。

ただし、弊社が行っているような「日本語版」と「英語版」が同ドメイン上に共存するサイトを制作する際、それらの文字コードを使用してしまうと何かと不都合が生じます。

それは何故かと言えば、いずれもユニバーサルな規格のコードではないからです。

Shift_JISやEUCは日本語を表示するためのエンコード、そしてisoに関しても英語を表示するためのエンコードなのです。つまり、双方の互換性は決して高くはありません。

これを見直すことで近年一般化されつつある文字コードがUnicodeの一種であるUTF-8です。すでにブログや一部のCMSではデフォルト化されているものですが、これを使用すると日本語・英語共に文字化けすることなく表示することが可能になります。

「ユニバーサルなメディア」を実現するという意味でも、これからのWEB制作は英語版のみならず全ての言語においてUTF-8を使用することが標準化されると思われます。

ウェブサイト制作における「手抜き」

2007-10-15T14:59:00.000+09:00

もしかすると、これを書くと一部の同業者からバッシングを受けるかもしれませんが…。

ホームページ制作会社の求人を見ていると、「必要なスキル」項目に「Dreamweaver」などと記載している所がよくありますが、これには驚かされます。

DreamweaverというのはAdobeシステムズ（旧Macromedia社）のホームページ作成支援ソフトなのですが、これは同社のFireworksやIllustratorなどと組み合わせることによって、誰でも手軽にweb制作を行うことを可能にします。

しかし、web標準という考えやW3Cの提唱する「アクセシビリティに配慮した正しいhtml文法」を実現するには程遠く、例えば、全体のレイアウトをtableタグで行う（配置が簡単にできるのですが、あくまでも「表作成」のためのタグです）といったデフォルトの処理や、無駄なタグやスペーサーを多用するなど、「プロの仕事」では御法度なhtmlしか記述しません。

こういった「手抜き」によって作られたホームページは、アクセシビリティを実現できないだけではなく、seo対策という面でも非常に不利であることが実証されています。

web制作を生業としている以上、お客様へ提供するウェブサイトには120%のプライドとスキルを費やすべきだと弊社では考えています。

弊社のホームページに掲げるW3Cのバナー（厳正なhtml/cssのチェックをクリアしたサイトのみに配布）こそが、トップ・クオリティを実現するnaturalogyの信頼の証です。

サイト（ホームページ）内での「パンくずリスト」記述について

2007-10-13T00:36:00.000+09:00

弊社ナチュラロジーのウェブサイト内でも使用していますが、よくサイトの中で「HOME　>　カテゴリ　>　コンテンツ」といった感じでホームページ（トップページ）から現在のページまでの道筋を示すナビゲーションを見かけることがあると思います。これはグリム童話のエピソードにちなんで「パンくずリスト」と言います。英語では「topic path」とか、そのまんま「breadcrumbs（パンくず） list」などと呼びます。

このナビゲーションはユーザビリティという観点から重要な要素で、特に大規模なサイトや、ディレクトリなどの階層が多いサイトにおいて、見る側が「今どこにいるのか」を知るために大きな役割を果たすのです。

まぁ弊社のサイトに関しては、そんなに深い階層もなくシンプルなわけで、そこまで重要なのかは疑問ですがｗ

で、本題です。
今回はこの「パンくずリスト」に関して、「どのように記述するのがhtml的に適切なのでしょうか？」というご質問を頂いたので、ぜひお答えしたいと思います。

考えられる方法として、
　　1. ulをdisplay:inlineまたはfloatさせたリスト
　　2. 「順番」という観点からolリスト
　　3. 単にpタグで囲む
の3パターンがあります。これにはいろいろと議論があるのですが、個人的には「どれもあり」だと思ってます。

ただ、ulやolのリストでdisplay:inlineやfloatを使うと、どうしてもIEなどでの挙動が不安定になりがちで、無駄にcssで制御する必要が出てきたり、バグ回避のためにhtmlでのインデントをなくしたりする必要があったりして、「美しいソース」を目指すことが難しくなります。

というわけで、最近ではpタグを使用するのが一番スマートなのではないかと考えています。

WEB制作やデザインの作業環境について

2007-10-10T04:04:00.001+09:00

今回は弊社の制作環境についてネタばらし（？）します。

まずOSに関しては、Mac OSXとWindowsを使い分け、デザイン以外はほぼXPにて行っています（要は所有アプリケーションの問題なのですが…）。本当はWindows2000支持派で、ラップトップではいまだ健在です。軽くて動作が安定しているという点では捨てきれません。ちなみにVistaは今のところ必要ナシです。

次にWEB制作ですが、はっきり言って大したもの使ってません。ちゃんとしたソースやスクリプトを記述するには、やはり「手打ち」です。テキストエディタさえあれば充分なので、メモ帳とez-html、またCrescentEveを愛用しています。

余談ですが、せっかくインストールしているDreamWeaver8があるのですが、あまりにも使わないのでデスクトップのショートカットアイコンが「ディスククリーンアップ」で消されてしまいましたｗ

デザインその他に関しては、Illustrator10、CS2、Photoshop7.0、そしてStudio8を購入しているのでFireworks8とFlash8も使ってます。ただIllustratorに関しては入稿などの都合もあり、実際は8で充分だった気もします。

その他、ブラウザは動作確認のため、InternetExplorerの6と7、Firefox、Opera、そしてSafariを使用しています。Vista対策としてメイリオをデフォルトのフォントに指定しているブラウザもあります。

日進月歩なIT業界では環境整備に費用がかかりすぎるというのが密かな悩みです…。

このブログについて

2007-10-10T03:40:00.000+09:00

このサイトは、ナチュラロジーのスタッフが日々の業務で気付いたことや役立ちそうなことを皆様にシェアしていくという、なんとも軽いノリで、しかもちょっぴり天狗なブログです(*´艸｀)

ナチュラロジーの自社サイト内にある「スタッフ技術日記」にて公開しているコンテンツからの転載をメインに、超手抜きな感じ丸出しで公開していきます'`,、('∀`) '`,、

というわけで、弊社ホームページも是非ご覧下さいm(_ _)m