「Coupe Baguette」のWebサイトができあがるまで

はじめに

明けましておめでとうございます。
新年第一弾のブログは前々から温めていたプライベートプロジェクトのご報告から始めたいと思います。

妻がパン屋を始めました

実は去年の年末から妻がCoupe Baguette(クープバゲット)という小さな手作りパン工房を開店しました。

まあ、平たくいうとパン屋さんです。
別にこれで大儲けしまくろうとか、そんな大きな野望はなくて、あくまで趣味の延長でやっているお店です。
まだ子どもも小さいし、家事と育児を兼業しながらやらなきゃいけないので、営業日も金曜日と土曜日だけです。

とはいえ、妻のパン作りに対する熱意と研究熱心さは僕も舌を巻くほどなので、パンの味は抜群にうまいと思います。
職人です。完全に独学だけど。

「国産小麦や天然酵母を使ってるけど、前面には押し出したくない。あくまで味で勝負したい。」

「どんなに体にいい食材を使っていても、おいしくなかったら意味がない。」

といった妻の発言に僕は彼女の職人気質を感じずにはいられません。

まだまだ開店したばかりで、知る人ぞ知る、というレベルにも達していませんが、来てくれたお客さんは結構リピーターさんになってくれているようです。
みなさんももし機会があればいらしてください。

・・・で終わっちゃうと、ただの宣伝になっちゃうので、技術的なお話も交えます。

店のWebサイトができあがるまで

店のWebサイトは僕が作りました。
ええ、一応技術者ですから。これぐらいは楽勝楽勝！・・・ではなくて、結構大変でした。
仕事柄、社内システムの開発が中心で、外向けのWebサイトってほとんど作ったことがないんですよね。
もちろん、HTMLやCSSの基本は理解していますが、そこまで凝ったデザインのWebシステムを作ってきたわけではありませんでした。

まず、デザインのセンスがない。
オシャレなWebサイト、ダサいWebサイトは感覚的に見てわかるけど、自分で作れと言われたら「ゴメンなさい」というレベル。

そして、仮にデザインが決まったとしても、それをHTMLやCSSで実装できる自信がない。
HTMLやCSSは当然使ったことがあるけど、それでもWeb屋さんではないのでそこまで高度な使い方をしてきたわけではない。

加えて、Webサイトをどうやってインターネット上に公開するのかよくわからない。
社内Webシステムを構築することはあっても、外向けに独自ドメインを取って公開するようなWebサイトを作ったことがない。

そんな僕がこれらの課題をどうやってクリアしたのかを記しておきます。

デザイン

まずデザインについて。
TwitterのTLを見てると、時々Webデザイン関連のリンクが流れてきたりするので、そのへんをちょくちょくチェックしていました。
その中で見つけた以下の2冊が良さそうだったので、購入して読みました。

ノンデザイナーズ・デザインブック [フルカラー新装増補版]

デザインのルール、レイアウトのセオリー。

どちらもWebに特化した本ではないです。
一冊目はタイポグラフィーっていうか、チラシのレイアウトやフォントの使い方が主に説明されています。
二冊目は雑誌のレイアウトに関するテクニックが中心です。

あれ？何かWebネタがほとんどないぞ？というのは買った後で気づいたんですが、それでも素人の僕は全然知らなかった「デザインパターン」がたくさん載っていたので非常に参考になりました。

HTMLとCSS

次にHTMLやCSSの使い方について。
こちらは以下の本で勉強しました。

実践 Web Standards Design ~Web標準の基本とCSSレイアウト&Tips~

tableタグなんかでレイアウトを組むのを良しとせず、あくまでHTMLはコンテンツをマークアップするためだけに使い、見た目は完全にCSSでコントロールするテクニックを紹介しています。
最初はHTMLだけで構築された素朴なWebページが徐々にCSSによって進化していく過程をサンプルコード付きで説明してくれるので、非常にわかりやすかったです。

Webサイトの公開

最後にWebサイトを公開する方法について。
まず、一応プログラマなので静的なHTMLだけじゃなくて、サーバーサイドでごにょごにょできるWebフレームワークを使いたいなと思いました。
会社ではASP.NETを使っていますが、あまりインターネット向けのWebサイトで使われている印象はありません。
PerlやPHPは結構メジャーですが、どちらもあまり好きな言語仕様じゃないし・・・。*1

となるとやっぱりRuby? そしてやっぱりRuby on Railsじゃない? ということで、Railsでサイトを作ろうと思いました。
Rails関連の情報を集めていく過程で、Herokuというサービスを使うと手軽にRailsアプリを公開できるということを知り、HerokuとRailsを使ってWebサイトを構築していきました。

そして完成

そしてあっちやこっちで色々壁にぶち当たりながら、何とか公開にたどり着いたのが以下のWebサイトです。

Coupé Baguette クープ バゲット

デザイン面ではまだまだ改善の余地があるとは思いますが、少なくとも「ホームページビルダーを使って作ってみました〜」的な素人臭さは払拭できているんじゃないかと思います。

WebサイトのソースコードはGitHubに上げています。
まあソースコードといっても、今のところほとんどロジックらしいロジックは書いてないんですけどね。

GitHub - JunichiIto/cb: for cb site.

おわりに

普段はプライベートであまりプログラミングをすることもないし、外向けのWebサイトを作ることもほとんどなかったので、今回は色々といい勉強ができたと思います。
WebデザインにしてもHTMLやCSSの使い方にしても、食わず嫌い的な苦手意識は無くすことができました。
とはいえ、まだまだ初級レベルであることは否めないので、妻のWebサイトをSandboxにしながら(?)スキルを向上させていけたらな〜と考えています。

余談

店の看板も自作しました。なぜかDIYスキルも少しアップしています。

あと、店の帳簿も僕が付けています。
簿記の資格も思いがけないところで役に立ちました。

あわせて読みたい

半年ぐらい前、店を建ててもらう建築屋さんを選んでいた頃のエピソードです。色々と紆余曲折はありましたが、結局「できる営業さん(社長さん)」の会社で建ててもらいました。

リフォーム会社に学ぶプロのお仕事 - give IT a try

外向けのWebサイトを作る時に学んだことをまとめたエントリです。

独自ドメインのWebサイトとメールアドレスをなるべくお安く作るためのメモ - give IT a try

デザイン関連の書籍はこのサイトを見て決めました。

2read.jp - このウェブサイトは販売用です！ - まとめ ランキング 読書 ログイン 書籍 著者 小説 マンガ リソースおよび情報

*1:少なくともPHPは使ったことがないのですが、よくdisられているのでちょっと心理的な抵抗が・・・。