CSSのスクロール駆動アニメーションを1回だけ実行し、終了フレームに留まらせる実装方法 -runOnce

2023/10/17 65 users スクロール アニメーション 上下 要素 CSS

スクロール駆動アニメーションは、ビジターがスクロールするとそれに連動して要素がアニメーションします。スクロールに連動するということは、上下に繰り返しスクロールするとアニメーションも繰り返し実行されてしまいます。 スクロール駆動アニメーションを1回だけ実行し、アニメーションの終了フレームに留まらせる... 続きを読む

これでもう、グラデーションにできてしまう濃淡の縞に困らない！バンディングをおさえるJavaScriptライブラリ | コリス

2019/09/17 61 users ハンティング コリス 濃淡 グラデーション モニター

制作時の最適なモニターや最適な照明環境で美しいグラデーションを作成しても、ビジターの環境ではバンディングと呼ばれる濃淡の縞ができてしまうかもしれません。 Webページの背景などに使用するグラデーションにできてしまうバンディングをおさえ、滑らかに表示するためのJavaScriptライブラリを紹介します。 js-noisy... 続きを読む

これを見逃したら絶対損！ノンデザイナーズ・デザインブック 20周年特別PDFは内容豪華で、応募者全員がもらえる | コリス

2018/05/07 541 users ノンデザイナーズ コリス 非売品 デザインブック 実施

まずは、ノンデザイナーズ・デザインブック 20周年、おめでとうございます！ 当ブログのビジターも多くの人が、お世話になっていると思います。 そんな20周年を記念して、日本人デザイナー陣が執筆した特別PDF「The Non-Designer's Design Book Missing Pages 2018（非売品）」のプレゼント企画が実施中です。 応募者全員がもらえる超太っ腹企画！ 続きを読む

ヤバイ便利すぎる！Googleが提供するすべてのアプリ・サービスを1クリックで利用できるChromeの機能拡張 | コリス

2017/06/02 690 users コリス YouTube アドセンス アナリティクス ヤバイ

先日、ビジターの方から教わったのですが、これがまた便利すぎるので紹介します。 Googleの検索をはじめ、トレンド、アナリティクス、アドセンス、ドライブ、カレンダー、YouTube、ニュース、Googleフォント、翻訳な ...記事の続きを読む 続きを読む

これからのWeb制作に役立つ、69個の有益で大切なポイントのまとめ -69 Website Design Tips | コリス

2015/08/26 139 users コリス ユーザエクスペリエンス 明度 Web制作 ターゲット

Web制作のデザイン、ユーザエクスペリエンス、コンテンツ、制作・開発、そしてこれから必要もの、避けておきたいものをまとめた「69 Website Design Tips」を紹介します。 ターゲットとなるビジターを調査するのが重要 カラーは2, 3色をベースに、多色が必要なら明度に変化をつける ロゴは、デザインされた高品質なものを使う コンテンツが魅力的でも読めないテキストでは意味が無い 要素が減っ... 続きを読む

ヒートマップテストで判明した19点の超重要データ | SEO Japan

2014/08/25 354 users SEO Japan 導線 データ アイトラッキング マウス

先日、アイトラッキングに関する記事を配信した所、予想以上の人気がありました。アイトラッキング以上に簡単に実施できるのが、マウスの導線を追うヒートマップテスト。様々なASPサービスも提供されており、低価格で導入できますよね。今回の記事では、数多くの公開事例や調査を通してヒートマップテストで会得した19のデータを紹介します。 — SEO Japan ヒートマップは、ビジターの行動を分析する上で大いに役... 続きを読む

プレゼンや企画書で使える！インフォグラフィック用のベクター素材を配布します（コリス限定） | コリス

2014/01/28 163 users コリス クリエイティブチーム プレゼン コリス限定 日頃

海外のクリエイティブチーム「freepik.com」とのコラボで、ビジターのみなさんに日頃の感謝を込めて、コリス限定の素材を配布します。 freepik.comは、海外のウェブ制作系ブログSmashing MagazineやSix RevisionsやWeb Designer Depotでもお馴染みで、そのブログだけのオリジナルの素材を配布するコラボをしています。日本ではコリスが初！今回はその第三... 続きを読む

[CSS]アイデアが面白い、ボタンに次々とメッセージを表示するスタイルシート -Story Button | コリス

2013/08/27 70 users コリス ボタンクリック CSS トリック a要素

ボタンをホバーすると、表示メッセージを次々に変更するスタイルシートのデモを紹介します。 Story Button こういうボーナス的なトリックって、面白いですよね。 気がついたビジターだけが楽しめたり、ボタンクリックへの背中を一押しするようなメッセージを入れるのもいいかもしれません。 実装は、簡単です。 HTML a要素で実装したボタンに、メッセージの数分のa要素を量産します。 デモでは、10のメ... 続きを読む

ウェブでも紙でも商用利用無料！コリス限定のホビー系アイコン素材150種類を配布します！ -Celebrations Icon Set | コリス

2013/07/31 284 users コリス クリエイティブチーム freepik コリス限定 日頃

海外のクリエイティブチーム「Freepik」とのコラボで、ビジターのみなさんに日頃の感謝を込めて、コリス限定のアイコン素材を配布します。 先日Twitter@colisscomでどんなアイコンが欲しいか希望を聞き、Freepikの中の人と相談し、アイコンを作成していただきました。 Freepik.comは、海外のウェブ制作系ブログSmashing MagazineやSix RevisionsやWe... 続きを読む

Photoshopで文字をよりシャープにクリアに見せるこつ -1px未満のこだわり | コリス

2013/07/29 411 users コリス Dribbble コツ Photoshop やり取り

dribbbleに投稿されたデザインで、コメントのやり取りがちょっと興味深いものなので紹介します。 簡単に意訳すると、 ビジター「デザインきれいだな、文字周りの処理に秘訣とかあるの？」 オーナー「文字をクリアにみせるために、Photoshopでこういう風にやってるよ。」 という感じです。 Site テクニックの紹介の前に、まずは文字周りを実寸大にしたものから。 Site -実寸大画像 カラーのコン... 続きを読む

パターンの背景をウェブデザインで効果的に使うための13のテクニック | コリス

2011/10/02 86 users パシ テクスチャ コリス 多用 ウェブデザイン

下記は各ポイントを意訳したものです。 はじめに ビジターを知る コンテンツは明確に コンテンツの強調に暗い背景を 限られたエリアのみにパターン パターンを全体に サイトのテーマに則したパターン シンプルなデザインには軽いパターンで パターンの多用に注意 パターンで視線を誘導する パターンをテクスチャと組み合わせる 異なるパターンを組み合わせる デザインにはフレッシュさを 洗練されたデザインに はじ... 続きを読む

ウェブデザインをワンランクアップさせるデザインテクニック『奥行き』の使い方 | コリス

2011/06/21 404 users コリス ウェブデザイン 奥行き インターフェイス おわり

あなたのウェブデザインをワンランクアップさせる『奥行き』を使いこなすための5つのデザインテクニックを紹介します。 下記は各ポイントを意訳したものです。 はじめに リアリスティックなインターフェイス ラッピングとリボン 遠近法 オーバーラッピング シャドウ おわりに はじめに デザインに『奥行き』を与えると、ウェブサイトをユニークにし、ビジターに忘れがたい印象を与えることができます。それが抽象的な方... 続きを読む

やはりTwitterとFacebookはRSSを殺しつつある（TechCrunchのビジターに関してはそう言える）

2011/01/04 204 users Twitter Facebook TechCrunch 動態

今朝（米国時間1/3）載せた”TechCrunch 2010 In Review“（2010年TechCrunch総まとめ（WordPress調べ））には、昨年の本誌のWeb上の動態を示す重要データがいくつかある。全体的におもしろいデータだが、しかし一部の人たちが気づいたように、昨年の本誌の最大のリファラーだったFacebookの名前がどこにもない。しかも、RSSリーダーのGoogle Reade... 続きを読む