タグ

2020年6月20日のブックマーク (3件)

  • SANKOU! | Webデザインギャラリー・参考サイト集

    コーポレートサイト ブランドサイト・サービスサイト ECサイト・オンラインショップ キャンペーン・特設・プロモーションサイト ポータルサイト・メディア・情報サイト プラットフォーム・コミュニティサイト 採用サイト・採用ページ ポートフォリオサイト スタイリッシュ オーソドックス ユニーク 遊び心がある・作り込まれている イラストを使用 3D表現・3Dイラストを使用 シズル感・訴求力のある写真・動画使用 写真少なめ・写真以外のビジュアル表現 さりげない動き・動きなし やや動きあり ダイナミック・印象的・細やかな動き 日語メイン ノーコードツール「STUDIO」で制作 スマホ特化・モバイルファースト Web・ITAI・デジタル・テクノロジー・通信関連 サービス・アプリ・ツール 病院・クリニック・歯医者・医療・薬 学校・教育・幼稚園・保育園・スクール 金融・投資・保険・士業 カフェ・飲店・

    SANKOU! | Webデザインギャラリー・参考サイト集
  • パララックス効果が秀逸なWebサイト&作り方まとめ

    今更感がこの上ないですが「パララックス」をうまく取り入れたWebサイトをまとめて紹介します。パララックスは、5年くらい前からWebデザインのトレンドとしてなんだかんだで取り上げられ続けていますね。2017 Design Trendsでもピックアップされています。 この記事の後半では作り方も解説しています。参考にしてみてくださいませ。 1. パララックスとは? パララックス(parallax)は英語で「視差」という意味があります。ざっくりというと「部分ごとに動くスピードや、動く方向に差をつける」というイメージです。Webデザインでは、スクロール効果としてパララックスがよく取り入れられます。 緑の部分と、背後の黒の部分で動くスピードが違うことが分かるかと思います。このように差をつけることで、奥行き感を出したり、目を引くようなデザインにすることができる…というわけです。 パララックスの例 実際に

    パララックス効果が秀逸なWebサイト&作り方まとめ
    kiriya_hazime
    kiriya_hazime 2020/06/20
    “参考 CSSだけで動くパララックス by eyemovic”
  • ファーストビューの動きが面白いWebサイト20

    2019年1月13日 JavaScript, Webデザイン 近年デスクトップ版のWebサイトでは、様々な動きをつけたエフェクトをよく見かけます。以前このブログで背景に動画を使ったWebサイトの作り方を紹介しましたが、今回はWebGL、JavaScriptなどで作られたアニメーションをメインに利用しているWebサイトを中心に紹介します。 ↑私が10年以上利用している会計ソフト! JavaScriptライブラリー 実例紹介の前に、素敵アニメーションを利用するための便利なライブラリーをいくつか紹介します。 three.js ドキュメント|サンプル集 揺れ動く布や、画面いっぱいに浮かぶ球体など、様々な3D表現を可能にするJavaScriptライブラリー。ホームでは実際に利用しているWebサイトが数多く紹介されています。豊富なサンプル集も必見です。 GreenSock ドキュメント|サンプル集 ア

    ファーストビューの動きが面白いWebサイト20