WEBサイト100選

勉強の一環として、デザインが参考になったサイトや気になったサイトをピックアップしています。何事もまずはその世界のことを知るところからスタートしなければ、と言う事で目指せ100選!!

サイト一覧 | 黒


26.Rock Werchter

Rock Werchter

一定のグリッドに沿ってカード型のコンテンツをを並べ、ウィンドウ幅が変更さるたびにコンテンツを再配置する作りの、可変グリッド・レイアウトのサイトです。(「タイルレイアウト」「カードレイアウト」とも呼ばれるようです。)コンテンツhover時に画像がほんの少し動きますが、大きな変化を加えないことで、ユーザーの意識が動きに逸れないように工夫されています。



52.玉造温泉 長楽園

玉造温泉 長楽園

全画面を利用した画像のスクロールで、露天風呂・料理・浴衣姿の人物と近隣のスポットを映し出すことで、ファーストビューで最大限に旅館の魅了を伝えることができています。また、伝えたいことの優先順位を考慮し、グローバルナビゲーションとローカルナビゲーションで項目の並びを変更しているところが参考になります。



57.高野山真言宗 総本山金剛峰寺

高野山真言宗 総本山金剛峰寺

ファーストビューで飛び込んでくる画像のインパクト、静謐さを彷彿させる蛍の光を表現した動き、和のテイストを強調した縦書き文字によりとても惹き込まれるサイトです。その作りから、日本人だけでなく外国の方が見ても日本の文化に触れることができるサイトのように感じます。素晴らしいサイトです。



69.music.casio.com

music.casio.com

商品紹介のサイトであるため、商品以外の情報がなくすっきりとして、利用者に分かりやすつくりになっています。また、電子ピアノのページでは、高級感を演出するため、黒と金の組み合わせで配色されています。キャッチコピーも詩的に構成されていて、楽器の購入を検討されている方を惹きつけるページになっています。



87.RISING SUN ROCK FESTIVAL

RISING SUN ROCK FESTIVAL

こちらのサイトは、初年度から拝見していますが、年に一度の開催であるため、年毎にサイトがリニューアルされています。そのため、常にトレンドを取り入れた作りのサイトに更新されています。また、メニューバーの項目がホバー時は縦にドロップダウンしますが、メニュー毎のページでは、子メニューが横並びになるなどの工夫がされています。



100.東京駅

東京駅

ナビゲーションもナビゲーション内の項目もアイコンで表示されており、画面を見て直感的に操作できるサイトというイメージがあります。また、ナビゲーション内のアイコンもカテゴリー別に分けらていてフィルタリングで選別されるようになっています。利用者の調べたいことを検索できるように検索メニューも設置されていて非常に使いやすいです。