WEBサイト100選

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

サイト一覧 | 白


11.color magic | ITOKIN MUSEE

color magic|ITOKIN MUSEE

サイトトップの横スクロールの動きに差があることで奥行きや広がりを感じます。また、ページの縦のスクロールとの対比によりバランスが取られています。BRNDS項目では、ページスクロールすることでモデルが動画のように動く作りになっていてとても面白いです。



33.あえの風

あえの風

シーン別に合わせた宿泊おすすめプランを記載することで、利用者の利便性を向上させています。また、料金がお得なプランなどはバナーで大きく表示しており、何を見せたいのかが分かりやすいサイトの作りになっています。



34.株式会社ビアス

株式会社ビアス

家族の日常や思い出の動画から、商品である家を連想させるサイトの作りになっています。購入後の生活や人生という大きな括りから、今後の暮らしを想像させることで、購買意欲に繋げるデザインはとても参考になります。



35.ADAM ET ROPE

adam et rope

シンプルなだけに文字の大きさ、色、バランスや配置が非常に重要になりますが、見やすく分かりやすいレイアウトになっています。文字と写真の配置やバランスも、シンプルなページを作る際の参考になりそうです。



37.ディアモール大阪

ディアモール大阪

ナビデーションにピクトグラムを利用されていて、一目で項目が分かるように設定さえているところが参考になります。また、日本語以外の言語のページも用意されており、レイアウトも日本語とは異なります。海外の利用者が必要としている情報は、日本の顧客と異なるためであり、その点を考慮されていることが素晴らしいです。



39.クロニクル、クロニクル

クロニクル、クロニクル

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



40.がんこクリニック

がんこクリニック

縦書きの文字やキャラクターロゴから、年配の方や子供が見ることを想定した作りと思われます。可愛らしいキャラクターロゴを利用することで、子供の病院に対する恐怖心を和らげようとしているように感じます。また、年配の方が見ても分かりやすいように縦のシンプルにスクロールで内容が分かるレイアウトになっています。



41.日産自動車

日産自動車

大手企業のため、膨大なコンテンツ量となりますが、見る人が必要としている情報を分かりやすい配置でレイアウトされている点が素晴らしいです。情報を分類し、カテゴリー毎に分ける技術、情報の表示順位など、とても勉強になります。



45.le Petit Pilosophe

le Petit Pilosophe

子供の目線の先から次の画像が流れてきます。キュービジュアルの写真に視線誘導が考慮されています。商品ページでは、文字サイズや文字の濃淡により見せたいものの優先順位を付けて作成されています。また、料金は強調させるために異なるフォントが使用されています。



48.plantica

plantica

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



49.UNITED ARROWS green label relaxing

UNITED ARROWS

オンラインショップや店舗への導線となるように、サイドにSNSへのリンクアイコンが固定されています。ターゲット層は20〜30代の若者であるため、その年齢層に広く利用されているコミュニケーションツールとのリンクを起用することにより、売上・集客の向上を図ることを目的とされていると思われます。目的によるサイトの作りの参考になるサイトです。



51.Culas+ 暮らすプラス

Culas+

タイトルが韻を踏んでいるためとても印象に残るサイトです。キュレーションサイトであるため、カテゴリー毎のリンクをコンテンツ内に分かりやすく設置されています。サイドバーに予約可能イベントや人気記事ランクインを用意するなど、サイト100選を作る際にもとても参考になります。



53.Nova SELECT

Nova SELECT

季節の贈り物の時期に合わせて、トップ画像をギフト商品の広告画像に変更し、サイト利用者の購買意欲を高めています。季節に合わせてキャンペーンや商品、宣伝の手法を変更するところがとても参考になります。



63.studio Spoon.

studio Spoon.

一見してカフェのサイトかと思いますが、違いますWeb制作の会社です。シンプルとはこのようなデザインなのだと感じさせてくれるサイトです。色んなものをそぎ落とし、かつ必要なものは十分に含め空間を巧みに使う、そのように感じることができる素晴らしいサイトです。とても参考になります。



84.匠龍木工社

匠龍木工社
匠龍木工社

「とりだせる、思い出収納」というライティングが印象的な、企業のコンセプトとなる物作りの誠実さが伝わるサイトです。住まいや家族を連想させる画像を利用されているところからも、「人を思いながら作る」というメッセージがより心に響くサイトに仕上がっています。



86.FUJI ROCK FESTIVAL

FUJI ROCK FESTIVAL

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



90.ARABAKI ROCK FEST

ARABAKI ROCK FEST

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


93.ブライダルハウスTUTU

ブライダルハウスTUTU

様々なウェディングドレスを用意されていて、まずは画像のみで確認し、画像をホバーすることでドレスの詳細(どのようなイメージ、コンセプトのドレスなのか等)が表示され、さらに「詳細を見る」ボタンを押すと詳細画面がモーダルし画像をズームすることができます。利用者の利便性を考慮した、細やかなデザインはとても参考になります。



94.dot by dot inc.

dot by dot inc.

何よりもまずインパクトが強いサイトです。サイトの作りからも個性が強く、エンターテイメントよりのイメージを連想させる企業です。新しいことへのチャレンジや発想を求める顧客に対し、強い訴求力があるように感じます。



96.ブレンドデザイン

ブレンドデザイン

個人事業でweb制作をされている方のサイトです。ワードプレスを利用されて作成されています。法人の制作会社のように派手な動き等はありませんが、特徴や料金プランを3項目に分けて説明されていて、伝えることへの丁寧さを感じるサイトです。