事務所のサイトをリニューアルしました！
前回から一ヶ月ぐらい過ぎ、ようやく実家の設計事務所のサイトをリニューアルしました。
突如色をガラリと変えてくれとのことでこんな感じになりました。
去年の終わりに最初のバージョンを公開してそのまま放置でしたが、金型設計業も不況を受けてか、やれることをやろうとのことで始まりました。
リニューアル前のサイトは企業サイトとは呼べるものではありませんでしたが、今回は形になっていると思います。
その他利用したソフトや外部スクリプトなどを一通りまとめてみます。
サイトづくりに参考にしたサイト
コーポレートサイトをまとめてあるサイトを一通りチェック。特に参考にしたのが以下の2つ。
コーポレートサイト -- イケてるWebデザインリンク集｜デザイケ:Design Iketeru --
Technology | Business | CSS Mania
サイトの構造や動きをここで一通りチェックしています。結構影響をうけたサイトもあります。
工場検索No.1 | 挑戦する製造業のために／ＮＣネットワーク
製造業のビジネスマッチングサイトも見てます。というか登録もしました。
サイトはいくつかつくってみたことはありますが、コーポレートサイトを作ることは初めて。何が違うのかを一通り勉強しなおしました。
このようなサイトは見られる機会が少ないので、初対面の方の機会を大事に、見ていて安心してもらえることが重要であるとのこと。
先達が語る企業サイトの「おもてなし」精神-オンラインマガジン -ITmedia エグゼクティブ編集部-
ASCII.jp：新規開拓に効くB2Bサイトの作り方 ｜マンガ：Webディレクター 江口明日香が行く
そのことを踏まえて、このサイトには事務所で出来る事や知ってほしいことを出来る限り載せることに努めています。
事務所として何を作ってきたのか、どの仕事ができるのか、どの程度で出来るのか。事務所の実力を観てもらうことにしています。
仕事を頼むときに知りたい情報を確実に乗せておくことは、SEO側で見ても必要なことです。
まだまだ工夫の足らない部分（サイトの誘導や、連絡方法とか）もありますので、見直しつつ、修正と追加を繰り返す。ことも実践し続けていきます。
その他に参考になったサイト
使ったツールとか使ってみたTipsとか
サーバー環境
レンタルサーバーはさくらインターネットのさくらのレンタルサーバーを使いました。プランはライトプラン。値段も月125円とか安すぎます。
このプランではCMSのWPやMTは使えないとのことで、使うならひとつ上のスタンダートからになるそうです。
ただcgiとしてpython、Parl、Rubyが動くそうなので、pythonでテンプレートエンジンを動かしてみたりできるといいなーと考えています。
Zen-Codingすげーすげー
大まかな構造の入れ替えの為に久々にHTMLを書くので、憧れのZen-Codingも実践しました。慣れるととっても楽にかけます。
知らない人は損してる？コーディングが3倍速くなるZen-Codingを導入してみた - EC studio デザインブログ より
zen-coding - Project Hosting on Google Code
リストやテーブルなんかに助けられたり。画像ギャラリーのスクリプトの為に構造を書くときも、手打ちだと面倒この上ないものを、スパッとだしてくれる爽快さにはまってます。
今回はNotepad++のプラグインを使っています。対応するエディタを利用しているなら、いれておいて損はないと思います。
【コラム】攻略! ツール・ド・プログラミング (19) HTMLやCSSのコーディングを爆発的に効率化する「Zen-Coding」 | エンタープライズ | マイコミジャーナル
その他もろもろ
CSSは幾つか種類を作りました。
- サイト共通のデフォルト
- index.html用
- 他のページ用
- 各ページの要素に適応させる物（いくつかファイルを分ける）
共通のデフォルトや、各要素に対するCSSは分けておくとさがす手間もなく手直しがずいぶんと楽になります。
モックアップはこちらを利用。
Website wireframes: Mockingbird
登録は無料で、動作も軽快です。大まかなレイアウトの確認に使ってみました。
実際のデザイン、素材の作成には、InkscapeとGIMPを使っています。
アクセスログを見るためにGoogle Analyticsを利用していますが、有効活用の為に勉強中です。
自分たちのアクセスを除外することがまず第一歩ですね。事務所のネットの環境では、IPアドレスでの除外はできなそうなので、クッキーで除外しています。
Google Analyticsで正確な数字をとるための設定 | cloudrop
GoogleやYahoo!などの検索エンジンに登録する際に使うサイトマップの作成にはこちらを利用。
サイトマップラスドットコム
IE6からはまだまだ離れることが出来ず、XP利用者も多ければ以前としてシェアは硬いですし。
レイアウトの崩れがないかのチェックは必須なので、IETesterを使っています。
今回は言うほどバグに悩むことはありませんでした。次に書いてある透過PNGぐらいでしょうか。
スクリプトとか
利用した外部のスクリプトや素材の一覧はこちらより。
佐野設計事務所 : 自動車プレス金型の3D(三次元)設計 | Credit
jQuety Gallery Viewも変わらず利用。prettyphotoがお気に入りになりました。
今回のサイトにも、透過PNGファイルはたくさん使っているので、IE6対策をする必要がありました。
こちらを参考に、紹介されているスクリプトを使用。
ITキヲスク | IE6で透過pngを表示させるオススメscript、「DD_belatedPNG.js」
少々不具合がありますが、動きには問題ないと判断してそのままですが。
（jQuery Gallery Viewに使われているファイルに適応すると、スクリプトがうまく動かないことがある。などの影響があるので、別のスクリプトに関するファイルには使っていません）
次にしたいことは
サイトを一通り完成させたところで、しばらくはこのフォーマットで様子を見つつ、整理したり、コンテンツを追加したりしていきます。
次にやることと行ったらこんな感じかなと
独自ドメインを取る
なるべく早く。値段の関係で.jpとかは発注元（の親父）にスルーされるので、.comや.netあたりを検討。
さくらのレンタルサーバーなので、ドメインもそこから取ると年1800円ぐらいですか。月150円じゃペットボトルジュースぐらいですよね。
ドメイン名を何にするかがまだ決まっていないので、そのうちに相談。
お問い合わせフォームの作成
CGIが動くので、フォームからメール送信もできそうですし、Pythonでメールフォームの送信ぐらいかけたらと。
今のプランでも、メールフォームを配置することが出来るそうなので、それの使用も検討中。
サイト更新の簡略化、CMS導入など
サイトの新しいページを設置するたびにHTMLをいじるのは面倒です。
CMSの導入は、さくらインターネットのライトプランでは難しいとのことで、現状で楽にサイト更新ができる方法をさらに調査し続けます。
