webdesignとテクニックに関するttrttrのブックマーク (2)

  • ユーザーを惹きつけろ!魅力的なヒーローヘッダー作成の黄金ルール10個まとめ

    ユーザーがあなたのホームページにたどり着いたとき、ページを開くまでに少しだけ時間があり、あなたが何をしているのか伝え、もっとページを見てもらえるように工夫することができます。しかし多くのサイトでは、訪問ユーザーに好印象を持ってもらう機会を逃しています。 ヒーローヘッダーをどのように他の要素から目立たせるか、詳しく確認していきましょう。 ヒーローヘッダーに必要な要素とは? ヒーローヘッダーにデザイン要素を取り入れる方法はたくさんあり、新商品を紹介したり、ブランドが何をしているのかシンプルな文で説明する必要があります。多くのヒーローヘッダーに利用されている要素は以下のとおりです。 目を引く見出しタイトル、ヘッドライン Call-To-Action ボタン 印象的な背景イメージや動画 埋込み型の説明ビデオまたはアニメーション 特集コンテンツを紹介するカルーセル ブランディング要素 – ロゴやスロ

    ユーザーを惹きつけろ!魅力的なヒーローヘッダー作成の黄金ルール10個まとめ
  • コピペで実装できる、最新ウェブテクHTML/CSSコードスニペット40個まとめ

    ますます加速するウェブデザインの最先端を体感できる、最新 Web テクニックを実装した、HTML/CSSコードスニペットをまとめています。 デザインと同時にまとめてコードを確認できるので、コピペで手軽に試してみることも可能です。コード共有コミュニティーサイト CodePen で話題となっている作品を中心に、ウェブデザインにスパイスを加えてくれる、ユニークなエフェクトが揃っています。 詳細は以下から。 コピペで実装できる、最新ウェブテクHTML/CSSコードスニペットまとめ 右下に表示されている「Return」をクリックすると、エフェクトが再読み込みされます。また各ソースはHTMLCSS、JSタブをクリックすることで確認することができます。 Fullscreen Image Layer Views 並べられたキーワードにマウスを重ねると、フルスクリーン画面で写真が切り替わります。 See

    コピペで実装できる、最新ウェブテクHTML/CSSコードスニペット40個まとめ
  • 1