WEBサイト100選

中心の円の色で位置を示しています。項目をクリックすると回転しながら、画面下部に収納される動きのあるサイトになっています。見るだけでなく、触りたくなるページです。

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

とにかくインパクトがあります。縦長1ページのサイトですが、左右に同じものを繰り返していることで、サイトが大きく感じられ、新聞記事のようにも見えます。また、縦書きを利用されており、その部分は他より際立ち、目がいくように工夫されています。

大小問わず、とにかく横や縦の動きが多いサイトであるため、平面と言うより立体的に感じます。また、現実とは異なるweのb世界ですが、立体的な動きが加わることにより、その世界に触れている感触も強くなるため、体験として記憶に残るサイトのように感じました。サイトの読み込みの際も、ロードの終わりが分かるような動きがあり、読み込み時間が長くなることによるサイトからの離脱を防ぐ効果もあるように感じました。

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

アーティストのサイトであるため、口コミやタイムリーな情報の共有で知名度やイメージアップを行う必要があり、その最たるツールとしてのSNSへのリンクがトップに設置されています。活動状況が一番重要な情報となるため、トップにはnewsコンテンツが設置されています。

フルードイメージとブレイクポイントでカラム落ちするようにコーディングされています。ポップな色合いがエンターテイメント色を強めています。

自然あふれる環境での音楽フェスであるため、その点がファーストビューで十分に伝わるような画像が次々にフェードしていきます。また、メニュー項目毎に色分けされています。色で共通項を作ることで、文字だけでは直ぐに判別し難い部分を伝わりやすいデザインに変える工夫がされています。

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

他の音楽フェスは会場全体の雰囲気を伝える画像をトップに利用されていましたが、こちらのサイトは出演アーティストの画像をトップに利用されています。他のフェスが自然の中で開催されることがアピールポイントでしたが、本音楽フェスは都市型であるため、会場を取り巻く環境よりも出演アーティストに重きを置いていると思われます。

他の音楽フェスサイトとは異なり、トップページの情報は少なめですが、バナーが多く利用されており、関連リンクは全てバナーにすることで、サイトのスペースをコンパクトにまとめているように感じます。また、トップには動画や開催日までのカウントダウン項目が設置されており、閲覧者が参加したくなるような作りになっています。

トップページに関連企業のバナーがずらりと並んでいることから、スポンサーで成り立っているフェスであることが窺い知れるサイトです。サイト自体に動きも少なく、利用者にイベント情報を発信することに特化したサイトのように感じます。

山と音楽とキャンプが同居するアウトドアイベントのサイトです。キャンプやワークショップ、自然や音楽が好きな方をターゲット層にしているため、手書き風のデザインや柔らかい色使いのサイトになっています。画面右下にチケット購入のボタンが設置されており、利用者に分かりやすい作りになっています。サイトの作りもさることながら、出演アーティストのラインナップやアウトドアが魅力的で参加したくなります。

自然の中で音楽と共に大人も子供も一緒になって遊ぶ、ことをコンセプトにしたイベントのページです。クラフトや手作り、物作りや音楽を好きな人をターゲットにしたサイトのため、手書き風のデザイン、紙を模した背景のテクスチャーなどがデザインとして取り入れられています。こちらのサイトも見ているとイベントに参加したくなります。