福岡のホームページ制作[BULANCO(ブランコ)]のWeb制作のこぼれ話

Fireworld福岡（五大株式会社）様のWebサイトを公開しました。

薪ストーブを専門に販売、設置、施工をされている会社です。
うちのシンプルなページを気に入って下さり、お問い合わせを頂きました。

実際にオーナー様と、お会いすると、九産大デザイン科の先輩だったり、ベスパを所有されていたり、自転車好きだったりと、共通点が多く、好みも非常に近かったので一緒になって楽しく制作させて頂くことが出来ました。

全体に写真を生かした構成で、シンプルに、「薪ストーブ」というモノはもとより、「薪ストーブがある生活」をいうスタイルを、ユーザーが想像し導入して貰うことをメインに考えて構成、デザインさせていただきました。

また、今回CMSに「ちょうどいいCMS」と評判のBaserCMSを使わせて頂き、全ページ編集可能（基本的に写真と文章の差し替えがメイン）でブログ機能付きです。

それも、BaserCMSの開発者である、キャッチアップの江頭さんに導入をお願いすることができました。もともとBaserCMSに無かった機能（コメント機能など）も、私が無理を言って導入してもらいました。色々と尽力して頂きました。本当にありがとうございました。この場を借りて感謝させていただきます。

皆さんも、薪ストーブを検討のさいは、Fireworld福岡（五大株式会社）様をよろしくおねがいします!

忙しさにかまけて随分放置していた、BULANCOのサイトを、やっとの思いでリニューアルしました。3年ぶりです。

さらに前に増してシンプルに、無駄な物を無くした形に作りました。
今回は、お問い合わせフォームすら、作りませんでした。SSL通信をしない以上、古典的にmailtoで十分ではないかと思ってこのような形にしています。（そのうち作るかもしれませんが）

現状は、ベタでコーディングしていますが、このMovable Typeに乗っけても良いなっと思っています。やはり、sitemap.xmlやrssを自動生成させたり、pingをGoogleなどに飛ばせるのは、SEOの側面から考えて、かなり有意義だと思うので、また時間を見つけて手を入れたいと思っています。

本当に、ご無沙汰しています。結局3月は、年度末の忙しさにかまけて、ほとんど更新出来ませんでした。4月は更新します!っと宣言したいのですが、4月もなかなかの忙しさで、頻繁に更新は厳しそうです。っと長めの言い訳はこの辺にして、早速本題。

ここでは、技術系の話ばかりしているので、たまには、Webデザイナーらしいエントリーを。。。 最近制作したサイトの紹介です。

といっても、まだプレサイトなんですが、割とまとまった感じに出来たので紹介させて下さい。

神仏霊場会という、Webサイトです。神仏霊場会

神仏霊場会とは

神仏霊場 巡拝の道（しんぶつれいじょう じゅんぱいのみち）とは、伊勢神宮（特別参拝）、および近畿地方の150の社寺を巡る霊場である。

宗教学者の山折哲雄の提唱により、明治維新以前の神仏同座、神仏和合の精神の復活を目指し、近畿を中心とした125の社寺により、2008年3月2日に神仏霊場会（会長は東大寺長老の森本公誠）が設立[1]。その後、151の社寺に拡大した上で、2008年9月8日に伊勢神宮にて発足奉告式典が行われた[2]。

Wikipediaより引用です。更に詳しくはこちらから(神仏霊場 巡拝の道 - Wikipedia)

素晴らしい会の、Webを作らせて頂くことが出来て、本当に恵まれているな思っています。

本サイトは、6月末ぐらいにオープン予定です。
オープンの際はまた、ここで紹介させて頂きます!

最近、デザインフェーズにどっぷりな、やいぶです。皆さんこんにちは。そんな中便利な、PSDを発見したので、ご紹介。

デザインカンプを作る時って、リアリティーを出す為に、ボタンや、スクロールバー、インプットボックスなどのエレメントを、実際のブラウザ上から、スクリーンショットで撮って、配置していたのですが、毎回撮るのが面倒だからと思って、まとめて素材集として、作ろうかと思っていた時に、以下のページで、既にまとめてあるPSD集を発見しました。

teehan+lax » Blog Archive » Browser Form Elements PSD

ただ、IEの素材は、Vistaの7なので、それなりにいい感じのエレメントに成っています。

前の、エントリ(MacOSX版のPhotoshopでMSゴシックをアンチエイリアス無しで奇麗に見せる )でもさらっと書いたのですが、デザインカンプのパーツが、クライアントが見ているものをギャップがあると、最終的に「違うね」って言われる危険性があるので、出来るだけクライアントが使っているものを使いたいんですよね。

残念ながら、クライアントはまだまだXPでIE6を使っている可能性が高いです。
海外にはこのような傾向は無いらしいですが、日本は、なぜか古いバージョンを使う傾向があるみたいですね。日本人って保守的なんですかねぇ。

という訳で、IE6用は、誰か作ってくれそうもないので、今度、自分で今度作りたいと思います。

たまには、サト研の宣伝を。

CGFMの我流氏と、プロボの、nishiaki氏と、私で始めたことになっている(実際の呼びかけは我流氏です、SpecialTHX!!)、サト研ですが、去年の9月から始めて、もうVol.5になりましす。ほぼ毎月開催(12月のみ忘年会に)しています。この調子で今後も続けいければと思っています。

改めてサト研のご説明

サイト運営や管理まで含めたWeb制作してる人、企業のWebサイト担当者達と交流したり、運営方法やCMSなどの研究したりする集まりです。 サト研とはサイト運営管理研究会の呼称です。

サト研Vol.5の参加募集始まりました。 続きを読む

Q. 使っているサイト制作ソフトは何ですか？ A.Dw+CSSEdit+Transmitです。(前編)このエントリーの続きです。前のエントリーで、Dreamweaverを徹底的に持ち上げました。今回は、Dreamweaverでもある機能をあえて別ソフトでやっている理由でも。

CSSEditの素晴らしさ

軽快

もうお約束です。
Dreamweaverと別のソフトを比べるとき、Dwがいかに重いかという話から始めます。
といっても、個人的には起動時以外はそんなに重いと感じることは無いんですけどね。

とはいえ、Dwと比べると、CSSEditは軽いです。サクっと立ち上がります。

プレビューが優秀

DreamweaverもCS4になり、プレビューエンジンがWebKitに変更されて、かなり良くなったと言われています。実際軽くしか触っていないので、よく分からないのですが、ライブビューに関しての使い勝手は、CSSEditのほうが優れていると思います。

ブラウザで見ているそのままを見れるので、楽です。それにCSSSpriteでマウスオーバーの調整をする時など、Photoshopなどで上でずれの計算してなくても、CSSEdit上で、プレビューを見ながら、数字の調整出来ます。それも、マウススクロールで数字の調整出来るので、素早くBackgroundの調整が出来ます。

Q. 使っているサイト制作ソフトは何ですか？ A.Dw+CSSEdit+Transmitです。(後編) 続きを読む

サト研のオープンチャットで、CMSのことが話題になったので、私が知る限りのCMSをひたすら羅列してみます。特徴などは書かず、ただただ羅列します。基本的にサーバーインストール型のもののみです。

果たしてそんなリストに価値があるのか?っとも思いもしましたが、「こんなにCMSがあるのか!」っとびっくりしたいという主旨でやってみます。
順不同です、他意はありません。
使い勝手など、コメント頂けると、のちのちご紹介するかもしれませんので、是非とも!

色々なCMSを、ひたすら羅列してみる。 続きを読む

Twitterでこんなアンケートが行われていました。
乗り遅れてしまったので、ここで私の使っているWeb制作ソフトと、その理由を語りたいと思います。まずはDreamweaverから。

Ask Twitter: 使っているサイト制作ソフトは何ですか？ : could

Ask Twitter: 使っているサイト制作ソフトは何ですか？ 2 : could

このアンケートをみると、やはりDreamweaverとかCodaとかが目立っていますね。知らなかったのが、skEditというエディターです。

早速、skEditを気になって使ってみました。

skEditの素晴らしいところ

• とにかく軽快
  (さくさく動きます、起動も一瞬です)
• 補完がすばらしい
  (htmlとMTタグの補完をやってくれます)
• ローカルとリモートを簡単に同期してくれます。
• プレビューが好きなブラウザで出来ます。
  (内蔵のブラウザ(WebKit)も選べますし、Firefoxなど他のブラウザも自由に選べます)
• 安い!
  ($34.95 Codaは$99 Dwは¥49,875)

っと、素晴らしいとこを、色々と並べておきながら、やっぱりDwが良かったというお話です。

Q. 使っているサイト制作ソフトは何ですか？ A.Dw+CSSEdit+Transmitです。(前編) 続きを読む

何が凄いって、これって全てJavascriptで作っているんですよね。最近、Bookmarkletを研究してて、Hatenaの新しいBookmarklet(はてなブックマーク - セットアップ)も素晴らしかったのですが、Firebug Liteは驚きの機能です。

といっても、Firebug Liteは、Javascriptなので、ライトはライトです。気軽に使うためなので、本気使いたいときは、それぞれの、疑似FIrebugアプリを入れることをお進めします。

• IE用
  Download details: Internet Explorer Developer Toolbar

• Opera用
  Opera Dragonfly | Take a peek into the future
  (ドラゴンフライ。。。トンボですかw ゴキブリより随分カッコいいですね。 (2月3日追記:ごめんなさい、蛍でした(汗)  でもイラストはゴキブリにしか見えませんよね。。。))

• Safari用
  Safariは、デフォルトで付いています。
  [環境設定]>[詳細]>[メニューバーに"開発"メニューを表示]にチェック
  [開発]>[Webインスペクタを表示]で、使えます。Firebugぽくブラウザの下部で、使いたいなら、左下にある、マークをクリックすると、ブラウザのメインウィンドウの下に移動します。

以上、上手く活用してWeb開発を楽にしたいですね。

『Firebug Lite』って凄いですね。 続きを読む

ことの発端

Entourageを使ってた理由

Macのメーラー Entourageを使っていたのですが、ここのところ調子が悪く、一度受けたメールを何度も受けてしまったり、また単純に動作が重く(多重にメールを受けているから重くなっているのも原因かも)なってきたので、別のメールソフトに切り替えようと考えていました。

そこで候補に挙がったのは、ThunderbirdとMac純正のMail.appでした。 もともとMail.appを使っていたのですが、ある事情でEntourageに移ったという経緯があり、Thunderbirdという選択肢しか無いかなっと思っていました。

Mail.appがやっぱり良さげだけど...

ただ、そのある事情さえを解消してしまえば、Mail.appを使うのが、他のMacソフトとの親和性が非常に高く(iCalやアドレスブックとの連携などなど)一番便利だと思い、そのある事情を解消することにしました。

そのある事情とは「coreserverでMail.appを使うと、何故か長めのメールが送れないというエラーです」Entourageだと、なぜか送れるんです。

その他にも、これはMail.appが原因では無くcoreserverの問題なんですが、Gmailからのメール届かなかったりします。

そんなこんなで、coreserver+Mail.appって組み合わせはあまりよろしく無く、しかたなくEntourageを使っている感じでした。

メールサーバーをGoogle Appsに移してみました。 続きを読む

私が、Webサイトのデザインカンプを作る時に、まず始めにやることは、大きな配置を決めを行っています。電卓片手に、メインコンテンツの幅を決め、サイドバーの幅を決め、マージン(隙間)を割り出して行きます。これが面倒な作業で、なかなか折り合いが付かないことが多かったりします。

また、黄金比や白銀比(大和比)なんかを意識しだすと、もっと時間がかかってしまうことが多々あります。黄金比などは、定規を用意して(また今度このネタ書きます)それで合わせているので、最近割と楽になりましたが、大きな配置決めがなかなか上手くいきませんでした。

そこで、最近発見したこのサイトが非常に便利です。

GRIDMAKER

このサイトを使ってデザインカンプの配置の方法をご紹介したいと思います。

デザインカンプを作る時に便利なサイト『GRIDMAKER』 続きを読む

mixi OpenID とは

mixiユーザーのみなさんは世界中の10,000以上のOpenID対応サービスを、mixiのIDだけで利用できます。さらに、外部のブログや動画共有サイトなどでも、mixiと同じように「友人まで公開」といった公開範囲を設定できるようになります。

っと、便利そうな、mixi OpenIDをMovable Typeで、簡単に使えるようになる、プラグインを導入してみました。

mixiComment | Movable Type プラグインディレクトリ

手順

1. 上記配布ページからダウンロードします。
   ↓
2. そのままMTディレクトリにアップロード。
   ↓
3. 管理画面の[設定]>[登録/認証]のmixiをチェック。

完了です。

使われるかは謎ですが、これでmixi OpenIDを使ってコメント出来るようになります。

MovableTypeプラグイン『mixiComment』を入れてみた。 続きを読む

1月11日、AIP Cafeでサト研Vol.4(FWWサイト運営・管理研究会（仮))が、開催されました。かなり遅くなりましたが、レポをまとめておきたいと思います。

流れはここらへんを参照下さい(手抜きw)

• 【レポート】FWW_サイト運営・管理研究会(仮)Vol.4 | MutsuLog
• [レポ] vol.4 in AIPcafe 2009/1/11 - FWW_サイト運営・管理研究会（仮） | Google グループ

ムツキさんSpecial Thx!!

今回の構成は、前半で、話が出来る人はそれぞれライトニングトークをして、後半で持ち寄ったお題を元に、ディスカッションを行うという、前回から行っている2部構成でした。

FWW_サイト運営・管理研究会（仮)っと銘打っていますが、勉強会(研究会)では、割と何でもありの、雑食的なライトニングトークが多くなってきたと思います。

個人的にはそれで、良いのではないかと思っています。雑食的に色々発表することで、各種の知識が広く浅く身に付き、特に興味深いものは、ディスカッションで深めるという感じが、参加している皆さんの為にも良い感じになっていると思っています。

サト研Vol.4(FWW_サイト運営・管理研究会（仮）) 続きを読む

オープンソースCMSのMODxの日本語公式ページがオープンしています。

MODx 日本公式サイト｜トップページ

以前、とある案件で100ページほどのサイトをMODxで導入させていただきました。 その後に、Movable Type のオープンソースが発表され、Movable Typeを利用することが多くなり、MODxを導入する機会がありませんでした。

MODxは、良く出来たCMSだと思います。
カスタマイズの自由度が高く、テンプレートも割と作りやすく、記事の編集のしやすいです。

ただ、クライアントには一般に名が通っているMovable Typeの方が、プッシュしやすく、そちらを勧めることが多かったです。

MODx日本語サイトは、インストール方法や、テンプレートの作り方まで、詳しく掲載されているので、今後多く普及するかもしれません。おおいに期待です。

あの素晴らしいcssエディター『CSSEtid』を、開発したMacRabiitから、以前のエントリにも書いて期待していた、CSSEditの遺伝子を持つ、Webオーサリングソフト『Espresso』のパブリックベータが、とうとう発表されました。

11月の予定だったようですが、ブログ(MacRabbit Blog - Espresso is Vaporware No More)によると、12月30日にリリースされた様です。

HTML、XML、CSS、およびJavaScriptをサポート

CSSEditは、もちろんその名の通りCSSのみのサポートでした。 Espressoでは、デフォルトで、HTML、XML、JavaScript、CSSをサポートされています。 後述する、Sugar(機能拡張)を使用し他の言語(PHPなど)の拡張も出来るようで、ますます編集の幅が広がります。

Webオーサリングソフト『Espresso』のパブリックベータ 続きを読む

『あわせて読みたい』をサイドバーにいれてみました。

「あわせて読みたい」とは、あなたのブログ読者が「よく読んでいる」ブログを知ることができる無料サービスです。

これはユーザーサイドの利便性を上げるという側面です。
運営側の有利な点はこちら

「あわせて読みたい」をブログに貼り付けることで、あなたのブログ読者が「あわせて読んでいる」サイトを知ることができるのと同時に、他のサイトでもあなたのブログが「あわせて読まれる」ようになります。

まぁ、ぶっちゃけアクセスアップが狙いですね。

設置は、このページに、自分のブログURLを入れて、生成されたjavascriptコードをブログに貼付けるだけです。 設置は5分で出来ます。

数時間後から情報の更新がはじまり、約1～2日ほどで安定した集計値が出るそうなので、表示されるまでもうしばらく掛かりそうですが、個人的には、自分のサイトが、どのようなサイトとあわせて読みたいと評価されるかが楽しみです。

CSS Nite公式サイトで、東京、福岡、大阪の3都市にて『Adobe CS4 Web Premium セミナー "最高傑作へのショートカット"』が開催されるという告知を発見しました。

福岡は2月25日(水)13:00からのようです。

詳細は以下ページ Adobe CS4 Web Premium セミナー "最高傑作へのショートカット"

一部抜粋

2008年12月に発売開始された新製品 Adobe CS4 Web Premium はWeb制作者および、Web業界参入を検討しているデザイナー、デベロッパー、企業の皆様にとって作業効率・生産性向上を実感いただける機能が揃ってます。 当セミナーでは、その新機能をデモを交えて紹介いたします。 また、来場者には当セミナー講師が利用するデモ素材とAdobe CS4 Web Premium (体験版) も提供予定ですので 「見て・体感して・実践できる」充実したセミナー内容となっております。

今まさに購入を検討しているところなので、早速申し込んでおきました。
ただ、セミナーは2月下旬のなので、それまでに我慢出来ずに買ってしまう可能性もあるのですが、念の為申し込んでおきます。

しかし、会場がzepp福岡って。。。 一般にライブ会場としていつ変われる場所なんですが、なぜここをセレクトされたかは謎です 。

東京の会場も、SHIBUYA-AXというライブハウスっぽいので、もしかしたらそういう音響を使った何かがあるのかもしれません。

先日書いたDreamhostを借りてみました。

ただ、色々リサーチした結果、メインで使うのはどうかという判断で、現在このサイトを置いているcoreserverの期限も延期しました。

Dreamhostは色々と使った上で、問題無さそうなら移転もありと思っています。

Dreamhostの申し込みは、割と簡単で、10分もかからず完了しました。
ここら辺を参考にすると分かり易いかと思います。
Dreamhostの検証» ブログアーカイブ » Dreamhostの申込方法

500Gと思っていましたが、申し込み時にUnlimitedと書いてあったので、無制限に利用出来そうです。凄いっすね。

支払いは、以前使ったGoogleCheckoutを使用したので、あっさり終了しました。ただ、住所が日本語では通らなかったようで、英語で改めて入れ直しました。

申し込み終了後、早ければ5分で申し込み完了メールが来るそうなのですが、待てど暮らせどメールが来ない。おまけにコントロールパネルがいきなり404になってしましました。

ただ、ここら辺は、ある程度想定の範囲内。

結局、申し込み完了のメールが来たのは、翌日の朝頃でした。

手始めに、Subversionを使ってみましたが、それはまた別のエントリーで改めて書きます。

どうも、今更の様ですが最近、Dreamhostが気になっています。

500GBの容量と、月に5.95ドルという安さ。

更に今なら、新春(?)特価で、2年契約すると64.44ドル!?
激安です。

Get two years of hosting for 70% off!

Sign up now, choose "Host a Domain", and then the 2 year payment option, and use the code "229".

That's a $214.80 value for just $64.44.

マルチドメインOK・サブドメインOK、ドメインも1つ無料で付いてきます。
また、気に入らなかったら97日以内なら全額返金もされるようです。(ただドルでの支払いなので、円相場の関係で目減りする事はある様です)

アメリカのサーバーなのでそれなりに不利な点があるようです。
色々あると思うのですが、私が思う点は以下の通りです。

1. 単純に距離があるので、その点でのレスポンスの遅さ
2. 当たり前ですが、申し込み画面や管理画面が英語という言語の壁
3. 重い

1.は諦めるしかありません、2.はDreaamhostユーザーが多いので参照をすればあまり問題無さそうです。ただ、内容を読まずに、ニュアンスでOKする癖があるので、それはやめるように気をつけようと思います。3.は当たり外れがあるようですが、これもこちら側でどうしようもないので、使ってみて、駄目な場合は考えたいと思います。

ただ、本格的に運用するWebサイトには向いていない気がするので、基本的に、実験サーバー+subversion用+外部ストレージという位置づけで考えています。

問題なければ、当社のWebサイトぐらいは移転しても良いかなって考えています。

年末の案件で、某企業様の年賀状HTMLメールを作る機会があったので、注意点や作り方をまとめておきたいと思います。

HTMLメール自体、賛否両論(【結果発表】HTMLメールをどう思いますか？：ITpro・HTMLメールはやめよう：ITpro )だったりしますが、私個人的にはHTMLメールは、読み易いしありだと思います。セキュリティー的な事と良く言われていますが、こちら側の受け取り方でなんとでも成る気がします。(私は基本的にHTMLメールが来そうなメールはGmailで受け取っています)

制作及び、エントリーを書くに至って、以下の参考にさせていただきました。ありがとうございます。
HTMLメールの制作時に気をつけたい9つのポイント | コリス

HTML 4.01 Transitionalで書く

xhtmlではありません。昔ながらの感じです。

文字コードはiso-2022-jpで制作する

メールの文字コードはiso-2022-jpなのでこれに合わせます。

テーブルレイアウトで行う

色々調べたのですが、テーブルレイアウトで行うのが正解のようです。

800px以下

傾向を見ると700px以下である事が多いです。 これは、メーラーがサイドバーが広い場合が多いので、ビュー部分が狭いからだと思います。

cssはインラインで書く

外部指定はほぼ表示されません。 header内の指定では、メーラーによっては上手く表示されません。

センター寄せは、tableの入れ子で寄せる。

<table align="center">で寄せる。

イメージはすべて絶対アドレス(http://~)で指定する。

イメージファイルはまとめて公開サーバーに配置してうで、絶対アドレスで指定します。

<base>の指定を行う

<base href="http://www.bulanco.net/mail.html" target="_self">のようにベースURLを指定指定すると良い様です。 baseを指定すると、上記のイメージファイルは絶対アドレスをしていなくても、読みに行ってくれる様です。私は一応両方行うようにしました。

javascriptは使わない方向で

ブラウザベースのメーラーであれば(Gmail)は使えるかもしれません(試していません)が、一般のメーラーはjavascriptは使えないと思われます。そのため、マウスオーバーは諦めるのが一般的かも。

アニメーションgifは使いどこを考えれば良い感じ

Appleから届いた正月セールメールのアニメーションgifは良い感じでした。 ただ、あまり使いすぎるのは下品に成りがちなので、使い場所は考えた方がよいと思います。

送信はsafariから送信出来る。(Mac)

Macで作ったHTMLメールを送るには、safariからmail.appを使って送る事が出来ます。
作ったhtmlファイルを一旦サーバーに上げた後、safariで閲覧後、[ファイル]>[このページの内容をメールで送信]で送信することが出来る。
ただ、標準のメーラーをMail.app以外にしていると送れないので、標準のメーラーを一時的にMail.appを指定する。

Windowsでの送信方法は、こちらで。
HTMLメールの送信方法：その１ | コリス

BULANCOでは、HMTLメール制作も承っております。是非メールフォームから!