030 isaka — website 100選 — #30

isaka

印象点:

  • 高精度なアニメーション同期
    ヘッダースライダーの画像表示切り替え時間と、それに同期する縦書き文字アニメーションのタイミング設定が正確で、視覚的な心地よさにつながっている。
  • 洗練されたコントラスト設計
    新品の印刷紙のような純粋な白地と、写真の自然な白味(ライトグレー)との間に、絶妙で清潔感のあるコントラストが感じられる。
  • 厳格な機能色パターン
    工学的な文房具や製図用具を思わせる赤と青を機能色としてサイト全体で使用。写真内の色もこのパターンで統一されており、秩序感と洗練された印象がある。
  • シャープなモジュール表現
    細い罫線や、一周して再び現れるボーダーなどのホバーエフェクトにより、要素間のシャープな切り分け感と、構成のモジュール感が生まれている。

 

home に戻る

029 中華そば 七八 — website 100選 — #29

中華そば 七八

印象点:

  • 色使いとフォントの強い個性
    中華風の深みのある赤を基調とし、背景色とのバランスが良い。鱗付きで力強い墨文字が、サイト全体のトーンを決定づけている。
  • ターゲットを捉えたコンセプト表現
    「女性一人でも入れる日常的な空間」というコンセプトが、ヒーローイメージのモデルのジャージや表情から伝わる。構えさせない、親しみやすい空気感を演出している。
  • 洗練された中華風のあしらい
    ナビメニューや商品紹介に、雲の線画イラストなど、シンプルで洗練された中華風の装飾を使用。サイト全体に統一感のある雰囲気を加えている。
  • 先進的なアニメーションによる賑わい感
    背景クリップ、パス上文字、ティッカー、傾斜列アニメーションなど、同時代のトレンドを取り入れた動きのある表現が多い。これにより、サイトにフレッシュ感と賑わいを生み出している。
  • 遊び心のあるフッター演出
    フッターにマウスオーバーすると、カーソルが様々な写真に切り替わるギミックが面白い。ユーザーの体験に遊び心を加える工夫。

 

home に戻る

028 Phare — website 100選 — #28

Phare

印象点:

  • 革製品が際立つシンプルなヘッダー
    ヘッダーは革製品の色と素材感を活かした、すっきりとしたシンプルな背景。革素材を裁断して敷いたような、ディープカラーで仄かなグラデーションが施され、世界観を表現している。画面左下には、場面の切り替わりを演出するスクロールボタンがあり、統一感を生み出している。
  • 高品質を伝えるプロモーションムービー
    高品質な製品であることを感じさせるプロモーションムービーが配置されている。
  • 計算された写真の構図
    写真の縦横比率が絶妙。写真内の背景線を延長した箇所からほぼ直角に流れるように配置されており、綿密に計算されたような印象を与える。
  • こだわりを感じさせるカルーセル
    右側に立ち切りで配置されたカルーセルは、通常の中央配置を避け、あえてずらすことでこだわりや品の良さを感じさせる。また、それぞれのパネル写真が上下に揺らいで配置されており、コントロールされた中にも自然な存在感を演出している。
  • ブランドアイデンティティの統一感
    写真の一枚一枚など、隅々までブランドアイデンティティが統一して表現されている。フッターには大きな写真と連絡先が記載され、シンプルながらも必要な情報を明確に伝えている。

 

home に戻る

027 GREEN SPOON — website 100選 — #27

GREEN SPOON

印象点:

  • 野菜や果物のような色バリエーション
    野菜や果物のような、トーンの揃ったマルチカラーが使われている。これにより、サイト全体が程よくカラフルで親しみやすい印象を与えている。
  • 味のあるシンプルなイラスト
    鉛筆線の掠れが若干ある、シンプルで味のあるイラストが特徴。特にメガネをかけていない人物の目が皆同じで、なんとも言えない表情がユニークな雰囲気を生み出している。
  • 凝った複数ページ構成
    複数のページがあり、どのページも凝ったデザイン。特にPromiseページは、そのこだわりが強く感じられる。

 

home に戻る

026 DAIEI — website 100選 — #26

DAIEI

印象点:

  • 期待感を高めるシンプルなローディング
    中央の図形がランダムに回転するローディングアニメーション。左上のコピーと画面下部のロード状況のみが表示されるシンプルな構成が、コンテンツへの期待感を高めている。
  • ユニークなメニューの配置と動き
    画面の隅八方にメニューを配置し、スクロールに合わせて回転しながら色を変えることでアクセントにしている。コンテンツの邪魔にならず、面白いデザイン。
  • 鮮やかなテーマカラー
    ストロングブルーとイエローという鮮やかなテーマカラーが、サイトに生き生きとした印象を与えている。
  • 統一された写真表現
    金属パーツを程よい距離感からトリミングした写真を主に使用している。クローズアップの具合に統一感があり、洗練された雰囲気を醸し出している。
  • インタラクティブなスライダー
    マウスカーソルを近づけるとゆっくりと動き出すスライダー。ユーザーの操作に反応するインタラクションが、サイトへの興味を引く。

 

home に戻る

025 sinden — website 100選 — #25

sinden

印象点:

  • 素材と文字の圧倒的なインパクト
    素材や文字がともすれば異様と思えるほど大きく表示され、見る人に迫りくるような強いインパクトを与えている。
  • 技術力と未来感のある3Dアニメーション
    3Dアニメーションが多用されており、高い技術力と未来的な雰囲気を醸し出している。
  • 広い作品紹介エリア
    スライドのように、各作品の紹介エリアが広く確保されている。これにより、一つ一つの作品をじっくりと見せている。

 

home に戻る

024 Rinnai ILO– website 100選 — #24

Rinnai ILO

印象点:

  • 落ち着いた赤のアクセント
    落ち着いた赤色がアクセントとして使われており、その割合が少ないため、映えている。
  • ゆったりとした余白
    余白が広くとられていることで、上品かつ落ち着いた雰囲気を醸し出している。
  • マットなカラーリングと素材感
    マットな準ベースカラー(木や石の素材感)が、サイト全体に落ち着きと上質さをもたらしている。
  • 商品カラーバリエーションのユニークな見せ方
    商品カラーバリエーションを、スクロールすると画面が横に進むセクションで紹介。写真の明暗が差し込む光を表現しており、じっくりと商品のイメージを浮かべられるようになっている。

 

home に戻る

023 STUDIO BYCOLOR — website 100選 — #23

STUDIO BYCOLOR

印象点:

  • 制作物が際立つシンプルなグリッド
    制作物が引き立つよう、できる限りシンプルで淡々とグリッドに並べられている。
  • 文字を絞った表現
    文字はタイトルのみを英語で表示し、作品の説明は最初は表示されておらず、作品そのものにフォーカスされている。
  • ユーザーに選択を委ねるスタイル
    文字と背景色の5パターンから、閲覧者が自由に選べるようになっている。ユーザーに一定の選択を委ねるスタイルを表現している。

 

home に戻る

022 MULBERDEN — website 100選 — #22

MULBERDEN

印象点:

  • モノクロ基調のデザインと写真のカラー
    雲のライトグレーを中心としたモノクロがベースとなっており、写真のカラーが際立つデザイン。
  • カーソルと連動するインタラクション
    シンプルなアイコンでカーソルの位置を分かりやすく示し、ホバーで鳥が避けたり、雲が動いたりするなどのインタラクションで、操作に一体感を生み出している。
  • さりげない現在地表示
    To-Topボタンの周囲に、スクロール量に合わせて描かれる円のアニメーションがあり、ユーザーは現在地をさりげなく把握できる。
  • キャラクターに合ったSNSアニメーション
    SNSボタンにカーソルを合わせるとボタンが開き、キャラクターに合ったアニメーションが再生される。

 

home に戻る

021 Analogue Foundation — website 100選 — #21

Analogue Foundation

印象点:

  • フォントと色彩の統一感
    フォントはRomieを基調とし、部分的にNauticaを使用している。基本的にモノクロで、時折アーシーカラー、特に赤系のアクセントが入ることで、洗練された印象を与えている。
  • 緻密なホバーアニメーション
    PC表示時に、メニュー項目やボタンなど、様々な要素にホバーアニメーションが適用されており、ユーザーのインタラクションを促し、サイトに動きを加えている。
  • スライダーのインタラクション
    スライダーの写真にカーソルを合わせるとドラッグ可能なUIが表示され、一枚ごとの表示時間を知らせるローディングアニメーションが工夫されている。これにより、操作性と視覚的な楽しさを両立している。
  • さりげないパララックス効果
    スクロールすると、写真がボックス内でわずかに上下にアニメーションするさりげないパララックス効果により、コンテンツに奥行きを与えている。
  • ユニークなフッター構成
    フッターが、コンタクトフォームかと思わせるようなセクションとして現れ、その下に配置されているメニューを含むさらに大きなフッターがパララックスとして現れる二重構造がユニークな印象を与える。

 

home に戻る