Webデザイン Archive

先日書いた「CODA」や「Transmit」を開発しているPanic.Incって、オレゴン州ポートランドの会社なんですね。

４年程前、オレゴン州ポートランドに留学していたので、親近感が湧きました。

無料体験期間がもう少し残っているので、購入前に不便な点はないかと粗探しを頑張ってます。

今のところ粗探しどころか、便利＆計量さに驚いてばかりです。

http://www.panic.com/jp/

今日Mac OSX用のWeb構築ソフト「CODA」の体験版をインストールして使ってみました。

このソフトはただのコーディングツールだと思っていたのですが、かなり使える便利で強力なソフトでした。

まず、インターフェイスが良いです。
直感的にサイトを開くことが出来ます。

プレビューの機能はついていないと勝手に思っていたのですが、作業と同時に確認出来るプレビュー機能が備わっており、FirefoxやSafariなどの外部のブラウザでも簡単に確認することが出来ます。

そして何より便利だと思ったのはTransmitとの連携。
Transmitの設定を読み込んで、サイドバーから直接FTPサーバにアップロードが可能です。

また、Dreamweaverなどのソフトだと、Dreamweaverから画像ファイルをダブルクリックすると、別の画像編集ソフトが立ち上がりますが、CODAではテキストファイル同様CODA内で開いて確認することが出来ます。

CSSの編集画面もかなりよく出来ていて、CSSを書けない人でも直感的に編集出来るインターフェイスになってます。もちろん直接ガリガリ書くことも可。

他にも便利な機能が沢山。

それでいて動作もかなり軽快で、G4でもサクサク動いてくれました。

15日間のトライアルが公式サイトからダウンロード出来るので、Dreamweaverは高すぎるという方は是非試してみて下さい。

とりあえず、僕はトライアル期間が修了したら購入してみます。Transmitとセットで。

パニック・ジャパン – Coda – Mac OS X 用 シングルウインドウ Web 構築環境

Web Designing (ウェブデザイニング) 2007年 04月号 に掲載されていたAjaxライブラリをリストアップしてみました。

• Dojo
• LinkIndicator.js
• LinkThumbnail
• Xillinus
• Yahoo! UI Library
• Adobe Spry
• script.aculo.us
• jQuery
• bytefx
• Highslide JS
• http://orangoo.com/labs/Main/
• LightBox
• SmoothGallery

iPhoneの発表を見て、これからのWebデザインが向かう方向について考えてみました。

iPhoneにはWidgetの機能が搭載されているとのことですが、これはつまりJavaScriptが携帯でも動くってことですよね。今発売されている携帯の多くにはフルブラウザが搭載されているのですが、やっぱりJavaScriptが動く端末ってのは少ないと思います。ってかあるんでしょうか？

JavaScriptが動くというのは、Webデザインにかなり幅が広がると思います。
今までは作る側が携帯用、PC用とわけてサイトを作ったり、フルブラウザ搭載のモバイル端末でも「お使いのブラウザはサポートされていません」なんて表示を出さざるを得なかったり、携帯でWebを閲覧するユーザーが増えてきているにも関わらず、技術が追っ付いていないという印象を受けていましたが、その辺りの問題も解決して行きそうな気がします。

日本でのiPhoneの発売は来年以降とのことですが、それまでにPCと変わらない機能を持った携帯端末も発売されていきそう。もちろん画面の大きさ等には限界があると思うので、工夫は必要になってくると思いますが。

僕が考える今最強のホームページというのがブログです。
いままでのホームページというと、ホームページ作成ソフトを使って、地道に更新していくという形だったと思います。GoLiveやDreamweaver、ホームページビルダーを使えば、特にHTMLなどの知識が無くてもホームページを作成することが出来るわけですが、DTP感覚で作られたサイトというのは、やはりソースが複雑になってしまったり、ホームページを更新すること自体が面倒だったりします。

ところがブログであれば、HTMLなどの知識が無くても更新が容易に行える上に、ソースがシンプルで検索エンジンにもヒットしやすい。さらにこれから普及していくであろうRSSにも勝手に対応してくれます。

しかし、だからといってホームページ作成の敷居が低くなったのかといえばそうとも言えない気がします。自分のオリジナルのサイトを作るのであれば、自分好みにカスタマイズしたいと思うのが普通だと思います。その点において、個人のホームページを自由に作るというのは難しくなっていると思うのです。

CSS Nite in Osakaに参加してきました。

このセミナーは以前から気になっていたのですが、東京で行われていたので、参加出来ずにいたセミナーです。
８月にAdobe主催のFlashのセミナーに行った際に「CSS Nite大阪上陸」というフライヤーを貰い、mixiで正式に発表されてすぐに参加表明。会場のキャパは100名程度だったのですが、50名を超えるキャンセル待ちの方がいたそうです。

今回プレゼンをされたのは、サイバーガーデンの益子貴寛さん、スイッチの鷹野雅弘さん、そしてCouldの長谷川恭久さん。

まず益子さんは「ルールズ・オブ・スタイルシート」ということで、いかにしてわかりやすいコードを書くかということをルール化したものをプレゼンテーション。僕自身独学でCSSを学んで、いくつかのサイトをコーディングしていくうちに、自然といくつかのルールが出来ていたのですが、益子さんの言うルールと合致するものがあったり、「なるほど」と思うようなルールがあったり、非常に参考になりました。

次に長谷川さん。長谷川さんのプレゼンの内容は、技術的なものではなく、「エコなWebデザイナーになろう」というタイトルで、ソースコードをシンプルに、またリサイクル可能なコードはリサイクルして使うTipsを紹介。他にもWebをツールとして使うことによって、コミュニティを作り、そのコミュニティでみんなで賢くなろうという考え方、そしてそれを実現するためにインプット・アウトプットを行うことが重要であるということなどを紹介。インプットすることは雑誌や、それこそWebで情報収集すれば簡単に行えるけど、何かに関してブログでアウトプットしようと思っても、「自分より詳しい人は沢山いるし、自分の意見は間違っているかもしれない」と躊躇してしまい、アウトプットは難しいと考えていた僕にとって、このプレゼンテーションは、モチベーションをあげてくれるものでした。

３人目の鷹野さんは「Dreamweaverの作業効率を高める小技30発」。これは即活用出来る小技達でした。Dreamweaverはいつも使っているのですが、ほとんど「コーディングツール」としてしか使っていなかったので、今回の小技達を活用すれば、「CMSでサイトを構築するようにサイトを構築できる」と目からウロコでした。それと同時に、今までかなり効率の悪いコーディングをしていたということにショックを受けました。

その他にもスポンサーであるシックスアパートの新サービス「Vox」の紹介があったり、SEOのスペシャリスト住太陽さんのプレゼンがあったり、かなり参考になる情報を得ることが出来ました。

セミナー終了後に行われた懇親会には参加表明していたものの、結局参加出来ず。。。

次回はもっと大きな会場で３月に行われるとのことなので、是非参加したいと思います。

自宅のMacも会社のMacもホームページにGoogleパーソナライズドホームを設定しているのですが、今日起きてMacを起ちあげてみたら、タブの機能が追加されていて、表示が全て英語になっていました。これは不便だと設定画面から日本語表示に変更してみたり試行錯誤を繰り返してみたのですが、結局直らないので諦めて放置していました。

で、ちょっと出掛けて家に帰ってきてまたMacを起ちあげたら、表示は日本語に戻っていたのですが、タブの機能が無くなっていて、色分けされていた各コンテンツの色が全て緑色に。。。

色分けされていたのが見やすくて便利だったのに、全て緑では不便なので、また色々と試行錯誤を繰り返している間になんとか元の色分けされていた状態に戻ったのですが、結局何故全てのコンテンツが緑色になっていたのかは分からずじまい。

タブの機能はいずれ日本語の環境でも使えるようになるとは思うのですが、緑色に変わっていた理由がわからないので、ちょっと気持ち悪い。

ブログ検索で色々調べてみたのですが、英語表記になってしまって困っている人は沢山いたのですが、コンテンツが緑に統一されていて困っているという人は発見出来ませんでした。

同じ症状で困った方や、原因をご存知の方がいらっしゃいましたら教えて頂けると有難いです。

ちなみにSafariでの文字化け問題は未だに解決されていないようです。

なんだか最近ちょっと不安定なGoogle。早く安定したサービスを提供してもらえるように期待してます。

今日、右側にメニュー、左側にメインというシンプルなサイトのコーディングをしました。
全体の幅は800pxの左寄せ。
HTMLの書き方としては、やっぱり見出しがあって、その直下にメニューというのが好ましいと判断したので、まず見出し（h1）を書いて、その直下に右に来るメニューを書き、そのメニューの幅を200pxに指定して右側にフロート。そしてメインをdivでくるんで600pxに指定。

MacのIE、Opera、Firefox、NetScape、Safariでは問題なくレイアウトされました。
ところが問題はシェアNo.1のWin IE。。。

なぜかメニューの左側に回り込むはずのメインコンテンツがメニューの左下に。。。

「も〜！！なんでやねん！！」

メインコンテンツの中の幅600pxの画像を595pxにしたら左側に回り込む。この5pxは一体何者？？
もちろんimgにはborder:noneとしているので、ボーダーのせいではなさそうだし、特にmarginもpaddingも指定していない。

あれこれ考えているうちに、自然とWin IEのバグと回避方法を検索していました。
結局解決方法は見付からず、メインコンテンツを先に書いて、その下にメニュー。そしてメインコンテンツを左にfloat。
これでとりあえずは全てのブラウザで綺麗にレイアウトされたのですが、なんとも気持ちの悪いもので。。。ユーザーに優しくないし。。。

っちゅうか、このバグを回避する為のハックがあったとしても、それを憶える必要はあるのだろうか・・・？
素直にHTMLとCSSを書いているのだから素直に表示されて欲しいものです。
ハックを憶えたってブラウザがWeb標準に準拠したものにアップデートして、それが主流になれば一生懸命憶えたハックなんて水の泡。しかもIE7はいつになったら正式にリリースされるのかもわからないし、リリースされてもそれが一気に普及するとは考えにくい。

う〜む。。。バグが多いくせにシェアNo.1のWin IE、しっかりしてくれよ！！タチが悪すぎる！！
そしてバグの少ないFirefox！高性能なんだからもっと頑張ってくれよ！

僕はMacユーザーなのでよく知りませんが、どのメーカーのPC買っても標準でついてくるのはWin IEなんですよね？
PCメーカーの皆さん、コーダー泣かせのIEなんかじゃなくてFirefoxを標準搭載して下さい。

同じ悩みを抱えていらっしゃる方、回避方法をご存知の方がいらっしゃいましたらコメントお待ちしております。

Firefoxの拡張機能に、Web Developerというのがあります。

この拡張機能、とても便利で重宝しているのですが、最もよく使う機能は「CSSの編集」です。

サイドバーに現在開いているページのCSSが表示され、リアルタイムで編集出来ます。CSSを手打ちで入力しなければいけないので、「CSSが全く解らない！」という方には不向きかもしれません。

僕の「CSSの編集」の主な使い方は二つ。

まず一つ目は自分のサイトを開いて、CSSを手打ちで編集していき、レイアウトが出来たらそのコードをそのままコピー。そしてDreamweaverなどのソフトを開き、コピーしたCSSをそのままペーストしてサーバにアップロードします。本来Dreamweaverで直接編集すればいいのですが、プレビュー画面があまり当てにならないということと、実際のブラウザで確認する作業も含めて作業出来るので非常に効率よく作業出来ます。またFirefoxはWeb標準に準拠したブラウザでもありますので、確実です。

もう一つは、人が作ったサイトのCSSを参考にする際に使っています。
巧みなCSSテクニックを使ったサイトを参考にする際、「ここをこうすればどうなるの？」という疑問が生じます。そんな時にWeb Developerの「CSSの編集」を使います。¥r¥nリアルタイムでレイアウトが変わっていくので、勝手にCSSを編集してテクニックを盗むことが可能です。¥r¥n¥r¥nまた、このWeb Developerという拡張機能には、ブロック要素を枠で囲んで表示する機能や、ボックスのサイズを表示する機能もついていますので、サイトの構造を知るのにとても便利です。

以前友人に頼まれて三輪そうめんの藤商事さんのホームページのHTMLコーディングをやりました。

検索エンジンでヒットするようにしてほしいとのことだったので、テーブルレイアウトで複雑になったソースをCSS（スタイルシート）を使ってレイアウトしました。元々のデザインがあったので、それを崩さないために完全にはCSSレイアウトにせずにハイブリッドでレイアウトしました。

それにしても最近大分暖かくなってきましたね。そうめんの季節到来です。