WEBサイト100選

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

サイト一覧 | 緑


5.WABISUKE

WABISUKE

一目見てどのようなサイトか分かるようにトップ全面に画像を配置しています。また、商品である卵を基調に、サイト全体の配色がなされています。



6.ヨコハマハンドメイドマルシェ

ヨコハマハンドメイドマルシェ

サイトの目的(出店者に対する訴求)に合わせたナビゲーションが設定されてます。出店者に対する項目についてはアイコンや色等が他の項目と異なり、ボタンを押すことを促す設計がされているところが参考になります。



13.東京大学TLO

東京大学TLO

ナビゲーションボタンにcssスプライト、positionのfixedが利用されています。また、gifで動画の効果を与えており、サイトの作りがとても参考になります。



18.BUILT BY BUFFALO

BUILT BY BUFFALO

ボックスの色がダイアード(2色配色)です。色彩調和論の一つ、秩序の原理(一定の法則により規則的に選ばれた色は調和する)に当てはまり、とてもバランスが取れています。また、ウィンドウサイズにより、ボックスが六角形→四角形に変わるように作られていて面白いです。



19.Case 3D

Case 3D

三角形のオブジェクトをデザインエレメントとして取り入れたサイトです。画面をスクロールすることで、ウィンドウ下部より画像を覆うようにオブジェクトが流れてきます。



22.100本のスプーン

100本のスプーン

ブレイクポイントを1つ設定されているレスポンシブデザインのサイトです。ディスプレイが667px以下の場合に、メインコンテンツのサイズが切り替わります。また、JavaScriptで子供用と大人用のデザインに切り替わるスイッチが設定され、面白い作りになっています。



24.panic

panic

ダイアード配色であることからとてもインパクトがあります。また、斜めのレイアウトで作られており、各コンテンツに動きも付けらていて興味を惹かれるサイトです。



43.まめ知識

OUTDOORのまめ知識について取りまとめたサイトです。情報をカテゴリー毎に分けられていて、とても使い勝手が良いです。また、バックの絵もOUTDOOR好きの人が好みそうなテイストになっています。



44.農園 星ノ環

農園 星ノ環

農園のコンセプトについて、分かりやすい絵と動きを付けて見る人を惹きつける作りになっているところが素晴らしいです。また、自然や手作り感をイメージさせるため、クラフト紙に印刷したような質感でサイトが作成されています。



64.道の駅おおた

道の駅おおた

フッターからサイドを通ってトップに続く道の上と、そこを走る車が描かれているところに遊び心を感じます。また、自然の中をドライブすることを緑で表現されていてとても印象に残る作りになっています。



77.株式会社ユニメディア

株式会社ユニメディア

革新的な経営理念とそれをサイトで表現するデザイン手法がとても興味深いです。コンテンツが画面の四隅にあることもとてもインパクトがあり、すぐに忘れることはないサイトだと感じました。想いを形にすること、伝えることへの工夫が参考になります。



91.New Acoustic Camp

New Acoustic Camp

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



99.三井住友海上

保険という商品の特性上、利用者は未来などに不安を抱いている方となるため、安全・安心をイメージさせる「緑」をメインカラーとして利用されています。また、ナビゲーションは利用者別にページが遷移するよう考慮されています。「未来は希望と不安でできている」のライティングもとても印象に残ります。