北千住情報サイト　北千住・ねっと

2000年に立ち上げて以来、企画・運営・制作をすべてDEEP KICK.com が行っています。北千住エリアのポータルサイトを目指しています。

ここではDEEP KICK.com が制作・運営をしている北千住・ねっとのWeb制作上の技術的なことについて、簡単に解説します。まず北千住・ねっとのトップページですが、レイアウトは左ナビゲーション・中央コンテンツ・右ナビゲーションというように、縦に3つのパートに分かれている3カラムパターンを基本フォーマットとしてページ構成を設計しています。

全体のwidthは980px。これを左ナビゲーション220px、中央コンテンツ580px、右ナビゲーション180pxになるように3つのカラムをCSSでデザインしてます。このサイズにした理由は、このサイトにアクセスする環境の95%以上を満たす1024×768px以上の解像度を持つモニタに最適化したためです。モニタの解像度やOS、ブラウザのバージョン、Flash Playerの有無などのユーザー環境の統計は、日々アクセス解析した結果を見て判断しています。北千住・ねっとのHTMLソースを見ていただくとお分かりのとおり、Google Analyticsでアクセス状況を解析しています。

こちらは管理人であるハヤシカオルやスタッフが時折情報をアップする「北千住・Blog」です。こちらのページはMovableTypeで構築し、CMS（コンテンツ・マネージメント・システム）として使用することで、素早くHTMLページの作成ができるように工夫しています。MovableTypeをCMSに採用してサイトを構築することで、HTMLページの追加作業をかなりの部分において自動化することができ、頻繁な情報の追加を行うサイトに大変便利です。北千住・ねっとでは2004年からMovableTypeを導入し、現在までに数百にのぼる記事を管理しています。CMSはMovableType以外にもさまざまな製品が市場に出回っていますが、DEEP KICK.com ではMovableType バージョン2.xの時代より、長年にわたってMovableTypeを使ったサイト構築サービスを提供してきました。余談ですが、今ご覧いただいているこのページも、MovableTypeで記事を書いてアップしたものです。Web制作やHTMLに詳しい従業員やスタッフの確保が難しい中小企業や個人商店などのWebサイトにも、手軽に情報を追加していく機能を実現することができます。もしご自分のWebサイトの情報更新やページの追加・管理に苦労されているのであれば、MovableTypeと同様の機能を自前で構築するのは、非常に時間とコストがかかってしまうので、中小規模サイトのCMSのデファクトスタンダードといってよいMovableTypeでのサイト構築・リニューアルを検討してみてください。これまでハンドリングが悪くて情報更新が滞りがちだったWebサイトを、DEEP KICK.comがMovableTypeでリニューアルして蘇らせます。またご自身でスムーズにページの更新作業ができるようになったクライアントから、満足の声をいただいています。

こちらは、北千住駅周辺のグルメ情報をご紹介する地図コンテンツ「北千住グルメマップ」です。ホットペッパーAPI + ぐるなび API + Google Maps APIという複数のWebサービスを組み合わせて、PHP + JavaScriptでプログラミングしたWebアプリケーションです。Webアプリケーションという言葉には、さまざまな定義があてはまるかと思いますが、ここではユーザーのアクションに対して内容が変わらない静的なHTMLページに対して、内容が変化していくダイナミックな（動的な）機能をもつページのことをWebアプリケーションと呼ぶことにします。「北千住グルメマップ」は、ユーザーの操作に合わせて、動的に表示内容が変化します。

Google Maps上に飲食店情報をマーキングしているので、場所から探すこともできます。また飲食店のジャンル別・目的別に情報を絞り込んで表示することもできます。これらはホットペッパーやぐるなびのAPIが提供している機能から必要な情報を動的に取得し、ページ上に組み込むことで実現しています。このコンテンツに掲載されている飲食店情報は、クーポン情報と連動しているので、クーポンページをプリントアウトしてお店に持っていくことで、クーポンを利用することができます。これらの情報は、ユーザーがこのページにアクセスするたびに、ホットペッパーやぐるなびのサーバーから最新情報を取得して、それらを整形して表示するようにプログラミングしています。

この地図コンテンツは、なるべく画面の横幅いっぱいに広く地図を表示できるように、3カラムの基本フォーマットではなく、可変式のリキッドデザインを採用。ウィンドウサイズを変更すると、地図の表示エリアのサイズが変更されます。

北千住駅周辺のグルメ情報から居酒屋にジャンルを絞り込んで表示しています。

北千住駅周辺のグルメ情報からランチメニューのある飲食店を絞り込んで表示しています。他にも和食・ダイニングバーなど、さまざまなジャンルや目的ごとにグルメ情報を絞り込むことができます。

こちらは北千住駅周辺の宿泊施設情報を探すのに便利な「北千住宿泊マップ」です。こちらはじゃらんAPI + Google Maps APIを組み合わせたWebアプリケーションです。グルメマップと同様に、じゃらんのサーバーから取得した宿泊施設の最新情報を整形し、最適化してGoogle Mapsに表示しています。

こういったユーザーの要望に応じて表示内容を変えていくインタラクティブな機能をWebサイトに追加するには、通常のWebデザインの技術に加えて、さまざまな技術の連携が必要です。例えば、取得した情報はXMLなどの形式で受け取ることが多いので、PHPなどXMLを解析して必要な情報を取り出すことができるサーバーサイドプログラミング、それらのデータをブラウザ上に適切に表示して動きを与えるJavaScriptプログラミングなどの技術が必要になります。

簡単に北千住・ねっとの技術的な特長について述べました。MovableTypeやWeb API、PHP + JavaScriptなど、さまざまな技術や機能が複合的かつ有機的に組み合わされて、このサイトは構築されています。このような機能を持つ中小規模のサイト構築は、DEEP KICK.com がもっとも得意とする分野です。参考になりましたでしょうか？これらの機能は実際にサイトを制作し、運営していく中で、ノウハウを蓄積した結果、たどりついたものです。データの蓄積があれば、さまざまなWebアプリケーションを開発することも可能です。Webアプリケーションには大規模なシステムが必要なものもありますが、これらのノウハウを生かせば、非常に手軽に構築できるものもあるかもしれません。ここでご紹介した技術を応用したWebサイト構築についてご興味のある方は、お気軽にお問い合わせください。