ecoなWebサイト制作

ユーザビリティに配慮

Web制作における「eco」な考えをアピールしたい意向とおそらく閲覧者は制作実績に興味があるだろうことを考慮した設計にしています。
また制作実績を紹介する際、動きあるデザインを実現することで単調さからの脱却を狙っています。

アクセシビリティに配慮

あえてxhtmlファイルはテキストベースで記述しています（W3CのValidチェック箇所だけが画像）。これは、CSS・JavaScript、どちらか一方が有効でない場合、もしくはどちらも有効でない場合にも配慮した記述が可能だということを伝えたいためです。見た目の再現性には欠けますが、情報は正しく伝わるよう設計しています。

Web標準に準拠

フルCSS（レイアウトのためのtableタグは一切使わない）で実装。さらに、クリーンでシンプルなコーディングを心掛けています。

見た目の構成やデザイン画像はすべて、CSSとJavaScriptで制御しています。

エラスティックレイアウト

文字サイズの拡大・縮小に合わせて、レイアウトも拡大・縮小するよう設計しています。

補足事項

IE7で、拡大縮小表示した際、動作が一部不安定になります。エラスティックにご利用される場合は、FirefoxかOperaをご利用になることをお薦めします。

知りたい情報へ簡単移動

• メインコンテンツ部分を対象にしたキーワード検索ができます。
• 現在地を視覚でも判断できます。
• 関連する他エントリーを閲覧しやすいようナビゲーションは名前順に表示されるようにしています。
• RSS配信もしているので、最新の情報をサイトに訪問しなくても確認できます。

コメント機能搭載

コメント機能を使って、ページ内の修正や更新などの情報を掲載することで、ページの質を上げていきます。

すべてのページがランディング

すべてのページがランディングになることと1ページで簡潔されることが多いことへの配慮として、Webサイトの概略、運営者情報、商標等に関する表示などの基本事項をすべてのページのフッター部分に記載しています。

MovableTypeの連携

カテゴリーは「んでね」「想い」「詩」「恐縮です」の４つに大別。それぞれのカテゴリーごとにさらにカテゴリー分けしているが、構成タイプが3種類ある。その内、更新頻度が高いのは2カテゴリー。そこで、2つのMTを連携させ管理しています。

更新作業は容易に

管理画面にログインし、新規投稿画面にコンテンツを記述し、保存するだけで、トップページや検索結果ページ、各ページ内のナビゲーションなど各該当箇所が自動更新されるので、コンテンツ作成に集中できます。また、Web上で管理しているので、インターネットが利用できるところなら「どこでも・誰でも・簡単に」更新作業ができます。

カテゴリー「んでね」のサンプル画面

1. 関連ワードを設置することで、作品に関連する人物などの関連作品を検索できる。
2. Amazonアソシエイトセントラルサービスを利用することで、レビュー作品の詳細を見たり、購入することができる。
3. 作品の個人的感想を10ランクに区分けして星マークを設置。
4. コメント記入欄。クリックするとコメントを書いたり、見ることができる。また、コメントの数に応じてポストアイコンが変化するようにしている。
5. 閲覧したレビューはチェックマークが付くようにしている。また、お気に入り具合で文字サイズが変化するようにしている。

リキッドレイアウト

リキッドレイアウト（ウィンドウ幅に合わせてレイアウトが変化するレイアウト）で、Web標準に準拠し、構造が分かりやすいようテキストベースで制作しました。

お問い合わせフォームの配慮

お問い合わせフォームではphpを利用し、ssl対策は実施していないためセキュリティ面での注意事項を確認画面で注意書きを記載しています。

Googleサービスの利用

Google Adsenceサービスを理解するため、実際に導入。

音源を流しながらコンテンツを閲覧

コンテンツページは新規ウィンドウを立ち上げ、音源はトップページに配置することで、音源を流しながら各コンテンツページを見れるよう配慮しました。

UIを「スマート&シャープ」に

ナビゲーションパーツのUIをFlashならではの「動き」を「スマート&シャープ」に取り入れました。

トップ画像の表示領域

画面一杯にトップ画像が表示されるようにしました（画面サイズはSVGA（800×600px）からUXGA（1600×1200px）に対応）。

トップ画像のランダム表示

更新するたびにトップ画像がランダムに変わるようにしました。

音源パーツ

音源が聞けるようにしたが、ページ遷移しても音が途切れないよう音源パーツは新規ウィンドウが立ち上がるようにしました。

アナログ感を演出

音源パーツのインターフェースでは、説明書きがなくても直感的に曲を選択、試聴できるよう工夫しています。また、レコードノイズを音源に足すことで、アナログ感を感じられるよう演出しました。

動画配信

一部動画が見れるようにしています（QuickTime、Flash、FlashVideoの3パターンで実装）。

SEO対策

Yahoo!JAPANにおいて「自主制作」で検索すると8位、「自主制作映画」で検索すると7位、「自主制作 映画」で5位に表示されていました（2007年1月）。

ページ読み込み前ページ

アクセシビリティ・ユーザビリティに配慮し、ページ読み込み前と読み込み後のページを用意しています。

実験的な検索機能

かなり実験的に製作。JavaScriptだけで、検索機能「らしく」見せることは可能かを追求してみました。具体的には作品の名前順と評価順にそれぞれ検索できるシステムを構築しました（残念ながら容量の重さから実用性に欠ける）。

同ページ内で表示させる箇所をコントロール

Journalsページでは1ページ内にデータをすべて記述し、必要な部分を選択して画面に表示させることを可能にしました。