e-Method ウェブクリエイター科課題作品集 お問い合わせ イーメディカ

MasaCreates

サイト制作にあたり心がけた事
1. 情報の整理  2. ユーザビリティ  3. アーティストイメージ

トップ

トップ

このページのみ背景を黒にしてデザイン性を重視。 メニューバーはロールオーバーで動きを持たせてあります。 アーティストのイメージに合うようにボタンの質感とタイトルロゴにはこだわりました。 左上にある白い四角は最新の情報へのリンクになっています。

インフォメーション

インフォメーション

新着情報を記載していくページで、各詳細情報へのリンクになっています。 元のオフィシャルサイトにはなかったのですが必要だと思ったので設置しました。

ステージ

ステージ

舞台、ライブ、トークショーの情報を掲載するページです。 点在していた情報を整理し1ページにまとめました。

シングル

シングル

サイト内で通信販売を行っているため必要ないのですが、実験的に各ショッピングサイトへのリンクも設置してみました。

アルバム

アルバム

シングルページと同じレイアウトです。CDのページにはナビボタンの下部に音楽配信関係のバナーとQRコードを設置しました。

グッズ

グッズ

CDやDVDのページにもありますが、全ての商品に購入ページへのリンクがあります。

DVD1DVD2DVD3DVD4

DVD

このページは4パターン作成しそれぞれの使用感を比較してみました。

左上はCDページと同じレイアウトでひたすら羅列。37枚と枚数が多いので下に長くなってしまう。

右上が当初考えていたレイアウト。javascriptを使い下のサムネイル画像をクリックすることでその内容が上に表示されます。DVDの内容によってサムネイルが動いてしまうので使いづらかった。

左下はサムネイルを上に配置して右上のパターンの使いづらさを解消。

右下は左下のバリエーション。表示数を増やすために画像のみに。マウスを置くとタイトルが表示されます。

ファンクラブ

ファンクラブ

元のサイトの内容をばらしてからまとめ直しました。

ファンクラブの入会申し込み用紙

ファンクラブの入会申し込み用紙

FAX送信用の印刷ページ。別タブで開きます。

特定商取引に関する法律に基づく表示と個人情報保護ポリシー

特定商取引に関する法律に基づく表示

個人情報保護ポリシー

サイト内、各ページのフッターからリンクされています。 2つの内容を1ページに記載しアンカータグでリンクさせました。

通信販売購入方法

通信販売購入方法

元のサイトの内容をばらしてからまとめ直しました。

通信販売FAX用紙

通信販売FAX用紙

FAX送信用の印刷ページ。別タブで開きます。

サイトマップ

サイトマップ

サイトマップに関してはまだまだ勉強が足りない・・・

・技術評価項目
・講師からの推薦文