Cocoonフォーラム

サイト内検索
書き込みの前に以下の3点をご確認ください。
  1. 1つのトピックにつき1つの質問を書き込んでください
  2. 不具合・カスタマイズ対象ページのURLを提示高速化を無効にしてください
  3. 該当部分のキャプチャ・環境情報とともに書き込んでいただけると助かります

何を書き込んだら良いか分からない場合は、以下のテンプレートをコピペしてご利用ください。

不具合・カスタマイズ対象ページのURL:

相談内容:

不具合の発生手順:

解決のために試したこと:

※文字だけでは正しく伝わらない可能性があるため、スクショ画像の添付もお願いします。
※高速化設定をしている場合は無効にしてください。
環境情報:

※↑こちらに「Cocoon設定 → テーマ情報」にある「環境情報」を貼り付けてください。

環境情報の取得方法はこちら。
https://wp-cocoon.com/theme-report/
高速化設定を無効にするにはこちら。
https://wp-cocoon.com/theme-trouble/

フォーラム利用ガイドリンク

  1. フォーラムガイドライン
  2. よくある質問と答え(FAQ)
  3. サポート対象外のケース
  4. 原因不明の不具合用トラブルシューティング
  5. トピックにHTMLを貼り付ける方法(推奨ツール:notepad.pw
  6. 真っ白画面でのエラーメッセージの確認方法
  7. ブラウザ環境チェックツール
  8. Cocoonカスタマイズ依頼

フォーラム質問後、問題等が解決した場合は結果を書き込んでいただけると幸いです。同様の問題で調べている方には、結果が一番気になる部分となります。

マウスオーバー時の装飾の必要性について...
 
共有:
通知
すべてクリア

マウスオーバー時の装飾の必要性についてみなさんの意見をください

16 投稿
6 ユーザー
13 Reactions
4,747 表示
(@alejandro)
Eminent Member Registered
結合: 6年前
投稿: 27
Topic starter  

CSSカスタマイズに関して皆さんに投げかけたいことがあります。最初、雑談の返信で投げかけましたが、トピックを立てたほうが良いと思い再投稿します。わいひらさん、面倒なことしてごめんなさい。

では、本題。

 

マウスオーバー時の装飾って、必要最小限っていうか、もう不要になりつつあるんじゃないかと思うようになったのですが、みなさんはどう思いますか?

 

ウェブサイトの表示にオリジナリティを持たせるため、CSSをカスタマイズしてる方は多いと認識しています。ですが、AMPにおけるCSSのファイルサイズに制限あったり、そもそもモバイルからのアクセスが大多数になってる最近の状況を加味すると、マウスオーバー時の表示カスタマイズの必要性がすごく低くなっていると感じます。

マウスオーバー時の装飾が少数派になりつつある中、ウェブサイトのオリジナリティを出すための装飾の方法そのものが変わりつつあるのかなぁと感じているので、みなさんの意見を頂戴したくトピックとして投稿しました。


   
引用
みるみ
(@mirumi)
Reputable Member Registered
結合: 5年前
投稿: 292
 

僕はマウスオーバーのカスタマイズ、とても好きです。最も「動き」に近い挙動を手軽に実装できますし、transitionなどの抱負なプロパティは編集も楽しいです。

実際、自分のブログも多くの:hover要素を使っています。

それに加え、いくらモバイルのアクセスが多めとはいえCSSの追記量によるデメリットは僅かと考えます。

しかしampの利用が前提ならおっしゃる通りかもしれませんね。そもそもpcでのアクセスを想定されてないですし。


   
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 
投稿者:: @alejandro

そもそもモバイルからのアクセスが大多数になってる最近の状況を加味すると、マウスオーバー時の表示カスタマイズの必要性がすごく低くなっていると感じます。

たしかに^^

スマホで見てhoverしてもイマイチだ。って思ったことはあります。

 

いうのであれば、PCビューをメインに作られているテーマでもあるのかな。
PCビューで幅を狭くしていくと、マウスを上に置けば、タブレットびゅー・モバイルビューと

CSSがどんどん追加され、スマホでデザインが変わるPCファースト的なテーマでもあると思います。

 

 

モバイル端末から見て要らない。っちゃいらない時代が来てるかもしれないですね。
とは思った事はあります^^


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17179
 

訪問者が全部モバイル端末みたいな、完全なモバイルファーストサイトだと、必要ないっちゃ必要ないですよね。
hoverって結構余計なCSSサイズを持っていくんですよね。
不要になれば、作る方もかなり楽になるような気がします。

ただ僕の場合、パソコンで見たときにホバーエフェクトがないと、ちょっと寂しいと思ってしまうのも事実。


   
返信引用
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

エフェクトによると思います。

ホバーをしたら「テキストが出てくる」「画像が変わる」などは、モバイルでは有効ではありません。

けれど、ユーザーの操作を補助するエフェクトは、モバイルで非常に有効です。

マテリアルデザインでは、「ホバーした時・フォーカスした時・タップした時などにエフェクトがあると分かりやすいよね」と言っています。

https://material.io/design/interaction/states.html

This post was modified 5年前 3回 by Akira

   
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

たぶんですけど

タップしたときだけ出るデザインは、コンテンツを邪魔する位置になかったらいいかもですね?

 

常時表示される位置で表示されている要素なら
タップしたままの表示になるので、スマホ端末での閲覧では要らない・不要な気もします。個人的に

というのも、別の何もない場所をタップしないと、元に戻らない。というモバイルビューCSS特有なのがある気がするので。※伝わってるかなぁ?説明下手だぁ^^;


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17179
 

ホバーは、さておきモバイルで操作したときのエフェクトは分かりやすさや、操作の気持ちよさも含めて重要ですよね。
https://note.com/ioriiwaki/n/n986a5ff00733
機能追加が一段落したら、マテリアルデザインのスキンは作ろうとは思っているので、何かエフェクト参考になりそうなサイトがあれば、是非教え来たければ幸いです。
Google+あたりが残っていれば、参考にしようと思ってたんだけど…。


   
返信引用
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

Gmail や Google Map 、Youtube など Google のサービスは、全てマテリアルデザインが採用されています。参考にされるなら、Google のサービスがいいかもしれません。私が好きなのは、Google Arts & Culture 。

もしくは、CSS のみでマテリアルデザインを表現する Matter も参考になります。サンプル

以前とは異なり、改修された現在のマテリアルデザインは拡張性が高いです。なので、1 番いいのはガイドラインを全部読むことかも。

This post was modified 5年前 by Akira

   
わいひら reacted
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17179
 

ありがとうございます!
全部ブックマークしておきました。

1 番いいのはガイドラインを全部読むことかも。

まさにこれですよね^^;

ここら辺と、織り交ぜながら理解を深めたいと思います。

Material Components for the web のドキュメントの日本語訳を作ってみた - Qiita

 【翻訳してみた】マテリアルデザイン - モーションデザインを理解すること|Iori Iwaki|note
【翻訳】マテリアルデザイン - モーションデザイン|Iori Iwaki|note


   
返信引用
(@alejandro)
Eminent Member Registered
結合: 6年前
投稿: 27
Topic starter  

@akira

投稿者:: @yhira

ホバーは、さておきモバイルで操作したときのエフェクトは分かりやすさや、操作の気持ちよさも含めて重要ですよね。

投稿者:: @akira

以前とは異なり、改修された現在のマテリアルデザインは拡張性が高いです。

みなさんの仰るとおり、操作性まで考慮したわかりやすいデザインを実現するためのエフェクトとしてマウスエフェクトを採用するという観点は必要なのかもしれませんね。

拡張性、使い心地、見た目の分かりやすさなど、誰からも容認してもらえるデザインの必要性という考え方はとても勉強になります。


   
わいひら reacted
返信引用
(@akira)
Famed Member Registered
結合: 7年前
投稿: 1657
 

Qiita にリンクのある Material Components for the Web が最高に参考になりますね。


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17179
 

サンプルがめっちゃ参考になりますよね。
いずれにせよ、このトピックと書き込みがなかったら、見つけてなかったと思うので、良い機会になりました ? 
ありがとうございます。


   
返信引用
かうたっく
(@kautakku)
Famed Member Moderator
結合: 7年前
投稿: 4764
 

モバイルとPCのデバイス単位での動作が全く違うイメージしかないです。

モバイル実機でのhoverは、強引にhoverアクションをチェックする勢いがないとその動作をチェックできなし、普通に記事を見に来たユーザーさんは、興味ない人が圧倒的に多い気がします。

※ユーザーより、運営者本位な気がする。

 

PCビューも幅の狭いものは、有効なのでそのままCSSが適応されてても良いけどampを気にする人は邪魔。って思うカモですね^^

 

モバイルビューでクリックする前・したあとの動作は、やっぱ。
クリック後が適応されっぱなのが気になるかも。

誰にも伝わらないようなマニアックな面なのかも。って思った❦


   
返信引用
みょこ
(@ukigumo413)
Trusted Member Registered
結合: 6年前
投稿: 50
 

まさにコレ最近ずっと考えていたんですよね。

今カスタマイズさせてもらっているサイトの管理者さんが、○○テーマみたいなマウスオーバー効果がほしいと何度もおっしゃるので、だったらそちらのテーマを購入いただいて、そのテーマをカスタマイズされているデザイナーさんに独自カスタマイズのお仕事お願いしたらいいと思いますよって全部断っているんですけれど。

モバイルでも意味がある視覚効果なら私も調べて取り入れますが、閲覧者の9割ぐらいモバイルユーザーなのにPCでしか見ることができないホバーエフェクト付けても…

でこちらが本題というか。

自分のスキルが低くてまだ導入できていない視覚効果なのですが。

ページを読み込んだら、上からでも下からでも横からでもいいので、少しふわっとスライドインしてくるようなエフェクトをかけたいのですが、どこに設定したら一番記述が少なくて済むんでしょうかね…

というのはメニュー・通知・おすすめカードなど設定していくと、どのページにも表示される部分が増えて、モバイルで通知やおすすめカードなどのリンクをクリックしてページを移動した際に、ページが移動したかどうかわかりづらいんですよね。

なので、ページの読み込みがなされたときに動きを出したいんです。

モバイルユーザビリティとかのタイトルで、別トピックにしたほうがよろしいでしょうか?


   
返信引用
わいひら
(@yhira)
Illustrious Memberサイト Admin
結合: 7年前
投稿: 17179
 
投稿者:: @ukigumo413

モバイルユーザビリティとかのタイトルで、別トピックにしたほうがよろしいでしょうか?

よろしければ、お願いします。内容はコピペで良いので。
僕もモバイル最適化や、エフェクト関係は、今後もいろいろ研究したり、いろいろ学んでいきたい部分です。
専門のトピックがあるとありがたいです。


   
返信引用
みょこ
(@ukigumo413)
Trusted Member Registered
結合: 6年前
投稿: 50
 

モバイルユーザビリティ・モバイルファーストを考える

モバイル全般用に分けました。


   
わいひら reacted
返信引用
共有:

問題の解決に至った場合には、トピック冒頭の「解決済み」をクリックしていただけますと幸いです。

また、有用な回答があった場合は返信右下にある「いいね!」もご活用ください。回答者の励みになります。

「いいね!」機能はフォーラム登録者のみが利用できる機能です。

CC BY-ND 2.1)準じていれば(リンクを貼っていただければ)転載も自由です。カスタマイズ記事を書く際にコード等をコピペ利用していただいて構いません。

フォーラムの使い方がよくわからない場合は、テストトピックで自由にテストしていただいて構いません。

最近の書き込みはこちら。

詳細なカスタマイズ依頼をするならこちら。

タイトルとURLをコピーしました