昨今、多くのホームページでCSSやJavaScriptなどを使用したアニメーションが用いられています。アニメーションは、ユーザーの目を引きつけたり、ユーザーの操作感を満たす効果があります。特にマウスオーバーでデザインが変わるようなボタンは実装の手軽さから広く用いられるようになりました。 様々なアニメーションアイデアを紹介するライブラリサイトも増え、簡易的なアニメーションであればコピー&ペーストでCSSに貼り付けることで誰でも簡単に実装することができるようになっています。 今回のコラムでは、WEBデザインに取り入れられるアニメーションのアイデアサイトを5つ紹介していきます。 【目次】 1. WEBアニメーションを実装する上での注意点 a.ページの表示速度に悪影響を与える b.バグの原因になることがある c.SEOに悪影響を与える 2. おすすめのアニメーションアイデアサイト5選 a.動くWE

この記事では、ウェブサイトを訪れたひとが思わず押したくなるボタンデザインをまとめてご紹介します。 どのボタンも基本、HTMLとCSS（JSもすこし）で作成されているので、手軽にコピペで利用でき、カスタマイズも自由自在。 ボタンをデザインするときに気をつけたいポイントをチェックしておけば、より効果的なボタンの使い方ができますよ。有名サイトのボタンをコピペできるサービスもおすすめです。 HTML/CSSやJSのコードをリアルタイムで編集、確認できるので、今後のデザイン制作に活用してみてはいかがでしょう。 こんなことできるの?!最新HTMLテクニック・スニペット きらりと輝くコール・トゥ・アクションボタン すべてのモダンブラウザでサポートされるようになった@propertyを利用した新しいCSSの使い方エフェクト。細部まで洗練されあt、注目を集めるCTAボタン。 See the Pen Shin

OGP画像シミュレータとは？ FacebookのOGP画像は正方形で表示されたり横長で表示されたりするため、デザインがとても大変。 そんな時に便利なのがこのOGP画像シミュレータ。 デザインしたOGP画像をドラッグ&ドロップし、タイムライン上でどう見えるかシミュレートしてみましょう。 https://ogimage.tsmallfield.com/ 1200 x 630 px 以上推奨 https://developers.facebook.com/docs/opengraph/creating-object-types/#properties 最低でも 600 x 315 px、また大きければ大きいほど良いため 1200 x 630 px 以上の画像サイズが推奨されています。画像がクリッピングされるのを防ぐため、縦横比をなるべく1.91:1に近づけるようにしましょう。 （2014年01月

The HTML5 Creation EngineCreate beautiful digital content with the fastest, most flexible 2D WebGL renderer.

2024年のブラウザならCSSの:has()疑似クラスが使えます。この:has()疑似クラスは非常に強力なポテンシャルをもっています。というのも:has()疑似クラスを使えば、どんな関係のセレクターも指定可能になります。これを使えば多彩なセレクターが記述できるようになり、より表現力豊かなCSSを実現できます。この記事では:has()疑似クラスを使ったCSSの表現手法やテクニックを紹介します。 サンプルを別ウインドウで開く コードを確認する :has()疑似クラスの基本的な使い方 :has()疑似クラスの使い方について簡単に説明します。:has()疑似クラスは渡したセレクターを持つ親要素を選択します。たとえば、次のようなHTMLとCSSがあるとします。 <p class="text"> <strong>メロス</strong>は激怒した。必ず、かの邪智暴虐の王を除かなければならぬと決意した。

株式会社HAPPY ANALYTICSの小川卓（id:ryuka01）です。 Google Analytlcs 4 (以下、「GA4」）に関するセミナーや勉強会などを行っていると、様々な質問を受けます。今までに1,000件以上の質問に回答してきました。 その中で、よく聞かれる質問と回答をピックアップいたしましたので、紹介いたします。ぜひ目を通していただき、GA4を正しく理解出来ているか確認してみましょう。 Q：GA4ではユーザーをどのように特定していますか？ Q：GA4のレポートで「しきい値」が発生するとデータの精度が下がるらしいですが、どのような仕様なのでしょうか？ Q：GA4のレポートで「サンプリング」が発生するとデータの精度が下がるらしいですが、どのような仕様なのでしょうか？ Q：GA4とサーチコンソールを連携すると、どのキーワードでコンバージョンしたのかわかりますか？ Q：流入元ご

一見全く関係のないように見える一つ一つの記事や体験談が大元の怪異へ繋がるという構成が新鮮で読み進めていましたが、途中で「これフィクションとか言ってるけど本当は実話なのでは？」と疑心を持つようになってしまいました。 ここまでリアルに表現できる文章力と発想が素晴らしいです。

「ブログ部分だけをWordPressで実装したい・・・」 「お問い合わせフォームだけをWordPressで実装したい・・・」 っていう時の、WordPressを静的HTMLサイトに部分的に組み込む方法です。 WordPressを静的HTMLサイトに部分的に組み込む方法 WordPressを静的HTMLサイトに部分的に組み込む時の流れです。 WordPress一式用のフォルダを用意 index.htmlがトップページのファイルだとしたら、同じ階層にWordPressのファイル一式を格納するためのフォルダを用意してあげます。 この記事では例として、/wp/という名前で作ります。 ここにWordPressのファイルを一式ドカっといれて、インストールしてあげましょう。 そしていつもの手順どおりにWordPressをインストールしてあげます。 参考：WordPressのダウンロード先はこちら → ダ

/t5/adobe-xd%E3%83%95%E3%82%A9%E3%83%BC%E3%83%A9%E3%83%A0-discussions/xd%E3%81%AE%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E4%B8%80%E8%A6%A7%E3%81%AB%E3%82%A2%E3%82%AF%E3%83%86%E3%82%A3%E3%83%99%E3%83%BC%E3%83%88%E3%81%97%E3%81%9F%E3%83%95%E3%82%A9%E3%83%B3%E3%83%88%E3%81%8C%E8%A1%A8%E7%A4%BA%E3%81%95%E3%82%8C%E3%81%AA%E3%81%84/td-p/10551216 Aug 12, 2019 Aug 12, 2019

Tweet Pocket 日本デザインスクールでは年間1500名ほどの受講生を、未経験からWEBデザイナーに育ててきました。受講生を指導する中でよくあがってくるのが「参考がなかなか見つからない」というお悩み。 私も受講生にお伝えすべく、これまで100サイト近くの「参考になりそうなギャラリーサイト」を見てきました。 そこで今回は、これまで見てきたギャラリーサイトの中で、みなさんのデザイン制作のお役に立ちそうなサイトを全部で61個ご紹介していきます。 全てのサイトを

あと1か月もすれば帰省シーズンですね。遠方に実家がある人は交通機関の予約は済んでいますか？ 僕は東京から博多へ向かうのですが、飛行機の値段を見てみると高い高い（笑）やっぱり75日前に予約しておかないとダメですね。そんなこと言っても75日先の予定なんてわかんないし・・・。 そこで今回、僕は新幹線を利用することにしました。飛行機が往復6万円するところ、新幹線なら4万5千円で行けます。新幹線はピーク時でも200円しか値上げしないのです。200円なんて優しいもんですよね。 で、えきねっとで予約をしようと思ったのですが・・・これが非常にわかりにくい！ 僕のような田舎者や新幹線に初めて乗る人は、きっとわからないと思うので、えきねっとでの予約方法を解説致します。 長いですが、ところどころ注意点を書いています。 一旦最後までお読み頂き、注意点を全てクリアできそうだと判断できた場合のみ、えきねっとを利用する

アイコンやスライド作成など、デザイナーに限らずちょっとしたデザインをつくる機会はありませんか？　そんなとき、Figmaのプラグインを使うと、いつもより少し凝ったデザインを手軽につくることができます。 今回は、画像加工やあしらいをつくるときに便利なプラグインを8個紹介します。2024年6月時点で、すべて無料で使用できるので気軽に試してみてください。 Figmaのプラグインを使ったことがないという方は、以下の記事で使い方を紹介していますので参考ください。 『Figmaを使いこなせ! デザイナー必須のおすすめプラグイン15選』 1. Noise & Texture Noise & Texture | Figma 「Noise & Texture」は、ノイズやさまざまなテクスチャーを画像として作成できるプラグインです。 プラグイン実行後、設定パネル内の［Add to Canvas］をクリックすると

ナビゲーションのアイテムをホバーした時にマグネットのようにくっついてスライドさせるエフェクトをCSSで実装するテクニックを紹介します。 これまでは、JavaScriptがないと実装できないエフェクトでした。レスポンシブにも完全対応、アイテムが二段・三段と複数になっても、水平・垂直になってもエフェクトは追従します。 Anchor Magnet Slide Menu 実際の動作は、デモページでお楽しみください。 右上の矢印アイコンをクリックすると、アイテムの並びが垂直・水平になります。また、右下のアイコンをクリックすると、ダーク・ライトモードになります。 ※CSSのみで動作するのは、Chrome 125+です。それ以外のブラウザはポリフィルが使用されています。 See the Pen Anchor Magnet Slide Menu by coliss (@coliss) on CodePen

KFCのアプリが最近リニューアルされたんだけど、稀に見るやばい出来になってて笑える。 これまでのアプリは特段大きな不満もなく使えるものだったのに、何故かいきなりアプリが刷新された。 【新アプリの惨状】 ・これまでのアプリでは会員未登録でもマイルが貯まる仕様だったが、新アプリ移行後は会員登録しないとマイルが貯まらない仕様に。 で、会員未登録のままアプリをアップデートしたユーザーのマイルはすべて消滅。 ・アップデートで未登録会員のマイルが消滅する旨について碌な告知もなかった。 ・アプリに合わせて（？）リニューアルした公式サイトが内容すっからかんでやばい。 https://www.kfc.co.jp/ ・会員登録しようとすると入力画面の携帯電話番号と郵便番号を入力出来る桁数が足りず詰む。 ・ログインの為にワンタイムパスワードが必要だが、送られてくるSMSのパスワードが空欄で詰む。 ・そもそもたか

「美しい心で、輝く未来へ」芸術作品の制作を通じ、感情表現の仕方や、自分の心との向き合い方を学ぶことで、再犯防止と社会復帰促進に大きな成果をあげています。

今回は久しぶりにコンタクトフォーム7についてのお話です。 普通に「お問い合わせフォーム」として使う場合、あらかじめ用意した入力枠や選択肢で事足ります。 しかし、「応募フォーム」だったり「お見積りフォーム」だったり、フォームの用途は様々です。場合によっては、フォームページへ移動してくる前の「遷移元」のページに合わせて、テキストフィールドのデフォルトの入力内容やチェックボックスなどの選択肢を動的に設定したい事も多いものです。ページごとに１つずつフォームを作成していくなんてナンセンスです！ありえません。 という事で今回は、コンタクトフォーム7の「デフォルトの入力内容」や「メール送信先」、「ラジオボタンなどの選択肢」など、さまざまな内容を遷移元のページに合わせて動的に設定する方法です。 遷移元のページからフォームページに情報を渡す ベースとなる1つのフォームを使用して、選択肢やメールの送信先を動的

ちょっとした検索サイトっぽいものをつくることになりました。 やりたいことは以下のようなことです。 トップレベルカテゴリ：都道府県 サブカテゴリ：市区町村 （1）ホームでトップレベルのカテゴリ（都道府県）をドロップダウンリストで選ぶ （2）カテゴリアーカイブページに都道府県に属する記事の一覧を表示その上に 当該都道府県に属するサブカテゴリ（市区町村）で絞り込むドロップダウンリストを表示 （3）選んだ市区町村に属する記事の一覧を表示（市区町村ドロップダウンはそのまま上部に残す） ワードプレスの標準のカテゴリーウィジェットでも良かったのですが、全国の都道府県・市区町村が一気にドロップダウンになるとちょっと選びにくいので、２段階にする必要性から作成しました。 下記の記事のコードをベースにカスタマイズしています。 http://yahss.net/wordpress/349-narrows_by_c